Lekce ANI01

---

Cíl lekce

• Pochopit princip animovaných souborů;
• Aplikovat prakticky na nejjednodušším animovaném GIFu ze 2 obrázků;
• Používat vektorový grafický editor pro přípravu podkladů;
• Pracovat správně s pixely již v přípravné fázi;
• Exportovat z vektorového editoru do rastru
• Umět využít Irfan View pro kontrolu podkladů k animaci a
• získání informací o animaci;
• Seznámit se s programem Microsoft GIF Animátor.

Úkoly a cvičení

Vyrobit animovaný GIF ze dvou obrázků - zobající kuře.
Další úkoly k procvičení viz odstavec Úkoly.

Klíčová slova, pojmy

animovaný GIF, snímek, počet opakování, časová prodleva, časování, Microsoft GIF Animátor

Software

Volně šiřitelný (viz EULA) program Microsoft GIF Animátor,
download ze serveru SLUNEČNICE.cz GIFAnimator.exe, cca 0.5 MB

Cvičné a ukázkové soubory

Pub-out na Síti!

Na školní síti ve složkách ...\Pub-Out\Grafika; ...\Pub-Out\Obrazky
a nebo zde je více souborů...

nahoru

Trocha teorie na úvod

---

Co je vlastně animovaný GIF?

Jak to, že na plátně v kině vidím pohyblivé obrázky? Princip je stejný jak ve filmu, tak v animovaných GIFech. Před očima se mi promítá sled obrázků, na každém je malá změna. Nedokonalostí lidského oka se to jeví jako plynulý pohyb. Blíže o  animaci  na Wikipedii.

Časování

Počet obrázků (snímků) za určitý čas nebo časová prodleva než přijde další obrázek je rozhodující pro plynulost pohybu. V programech pro tvorbu animovaných GIFů se používá čas, jak dlouho má být obrázek vidět. Pojem počet obrázků (snímků) za sekundu nebo správněji frames per second (FPS) se používá v digitálním videu.

Velké změny mezi obrázky se jeví trhaně, velké časové prodlevy v případě pohybu vypadají taky rušivě. Na druhou stranu rychlá změna mi neumožní přečíst případný text nebo prohlédnout logo. Záleží na tom zda-li tvořím plynulý pohyb nebo banner s logem a textem.

nahoru 

Příprava podkladů – obrázků

---

  →→→  

• Připravím si dva obrázky. Je to málo, ale napoprvé to stačí. Použiji vektorový editor. Například Open Source Inkscape a OpenOffice.org Draw nebo placený Corel Draw.
• Jistě zvládne každý několik koleček, trojúhelník zařadit za hlavu, zelený čtverec a tlustší zelenou čáru od ruky, která zajistí dojem pozadí a naznačí místo, kam dát ptačí zob.
• Dejte si pozor ať nemlatí pozadí do kuřete, ale naopak!
• Další problém může nastat při sklonění kuřete, aby nevystrčilo zadek ven ze čtverce. Nastavte si jinam střed otáčení! Nohy teď nedělejte, příště.
• Exportuj do rastrového PNG nebo GIFu, já jsem se snažil o rozměry 125 x 125 pixelů.
• Nebo levý ALT + Print Screen, vložit do Irfanu, použít přesné souřadnice oříznutí, nastavit velikost 125x125 pixelů a uložit jako GIF (viz lekce IRFAN 1 a 2)

nahoru 

Jdeme animovat aneb "Jak na to?"

---

Statické snímky GIF Animátoru zde ...

TIP: stáhni si!

• Stáhněte si ze Slunečnice MS GIF Animátor GIFAnimator.exe, cca 0.5 MB.
• Nemusí se instalovat. Rovnou spusťte MS GIF Animátor.
• Otevřete jeden z připravených souborů a hned uložte jako něco jiného. Fakt to udělejte, zachováte si původní první soubor nedotčen. Věřte mi, už jsem si jich přemáznul dost!
• Další vložte třeba pomocí CTRL + I
• TIP: V případě většího množství vkládej obrázky od posledního k prvnímu. Opačně než je sled animace. Jen se neboj!
• Nastavte nekonečný počet opakovaní:
  záložka ANIMATION → zaškrtnout Looping a Repeat Forever
• Číselný údaj není v milisekundách, ale v setinách. Na záložce Image v poli Duration nastavte, nejlépe všem najednou, stejnou časovou prodlevu 100 setin sekundy. Potom některým třeba změňte čas.
• Experimentujte s jinými časy, pro každý jiný apod.
• Druhé tlačítko zprava je přehrávač. Umí také krokovat, moc užitečné.
• POZOR, máte uloženo jako jiný soubor? Nepřepište si jeden (první) z vložených obrázků.
• Tyto jednoduché animace v Irfan View většinou nezlobí, ale přesto ...

Vyzkoušejte dílo v Irfan View

---

• Hotové zobající kuře otevřete v Irfan View.
• Povšimněte si dole ve stavovém řádku informací:
• Vlevo rozměry v pixelech, hloubka barev a vpravo na konci jest napsáno 2, tj. 2 obrázky.
• Samozřejmě také velikost souboru / prostor paměti uvedená v kilobajtech [kB].
• Najděte v menu Volby»Zastavit animaci (G).
• Rozběhnout znova nejde. Nevadí, zavřu a otevřu.
• Vyzkoušejte Volby»Extrahovat všechny snímky ....
• Ve vámi zvoleném adresáři najdete soubory s obrázky, ze kterých by mohla vzniknout tato animace.

Vyzkoušejte dílo v HTML souboru

---

Irfan chybuje při pokusech s animacemi. Hlavně co se týče průhlednosti. Nejlépe uděláte, pokud si svoji práci zobrazíte ve webovém prohlížeči. Zde máte nejjednodušší formu webové stránky určenou na pokusy, není však vhodná pro realné použití na Síti.
POZN. (2011): Navíc je ve staré syntaxi HTML a bez stylů CSS.
Zkuste vlastnost bgcolor (background color, barva pozadí) změnit například na red, blue, silver, yellow, pink...

Na Vaše pokusy si stáhněte zde připravený HTML soubor gif_pokusy.html (download pravým tlačítkem myši)

Upravte na 5. řádku svoje jméno GIF souboru a zkopírujte oba soubory do téže složky. Dvojklik na HTML souboru. A je to!

nahoru 

Úkoly a cvičení

---

Cílem je vytvořit první nejjednodušší animaci ze dvou snímků podle zadání. Dodržením zadání odpadnou různé problémy a budete i lépe hodnoceni.

TIP:

TIP * vyzkoušejte si

• Otevřete si hotové animované GIFy a prozkoumejte, jak jsou dělány.
• Rozbalte (extrahujte) do nové prázdné složky pomocí Irfanu nějaký složitější GIF.

Náměty a témata na další úkoly

Po splnění povinného GIFu ze dvou obrázků můžete vytvořit něco navíc.

• Kuře se zavrtí a uteče...
• Přileze červ, kuře koukne vpravo, vlevo, nahoru a sezobne ho.
• Vedle kuřete spadne zrnko, drobek chleba a kuře jej sezobne.
• Další nápady se jistě již řinou sami.
• Inspirujte se v sekci PRÁCE STUDENTŮ , co už máme hotovo.