ANI01: * základy animovaných GIFů

Cíl lekce:
- Pochopit princip animovaných souborů a aplikovat prakticky na nejjedušším animovaném GIFu,
- umět využít Irfan View pro kontrolu podkladů k animaci a získání informací o animaci
- seznámit s freeware programem Microsoft GIF Animátor.
Úkoly a cvičení:
Vyrobit animovaný GIF ze dvou obrázků - zobající kuře. Použít obrázky z webu
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 (pravým tlačítkem myši) gifsetup.exe, 436 kB
Cvičné a ukázkové soubory:
Ve školní síti ve složkách ...\Pub-Out\Grafika; ...\Pub-Out\Obrazky a nebo
zde jest více souborů ...

Trocha teorie na úvod

nahoru Co je vlastně animovaný GIF? Jak to, že na plátně v kině vidím pohyblivé obrázky? Princip je stejný. 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. Časování - počet obrázků v časovém úseku nebo časová prodleva mezi nimi je rozhodujícím kvalitativním faktorem. Velké změny mezi obrázky se jeví trhaně, velké časové prodlevy vypadají taky rušivě. Rychlá změna mi neumožní přečíst případný text. Zkrátka přiměřeně, přiměřeně.

Příprava podkladů - obrázků

nahoru

Připravím si dva obrázky. Je to málo, ale napoprvé to stačí. Použiji vektorový editor.
V Corelu nebo OO.org 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.
Problém může nastat při sklonění kuřete, aby nevystrčilo zadek ven ze čtverce. Nastavte si střed otáčení! Nohy teď nedělejte, příště.
Exportuj do GIFu, já jsem se snažil o rozměry 125 x 125 pixelů / 72 DPI / 16 barev.
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)

Jdeme animovat aneb "Jak na to?"

nahoru

gra_msgifanim01.gif, 26 kB práce s MS GIF Animátorem

Statické obrázky GIF Animátoru zde ...

Stáhněte a nainstalujte si MS GIF Animátor gifsetup.exe, 436 kB (download pravým tlačítkem myši)
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: 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
Na záložce Image v poli Duration nastavte, nejlépe všem najednou, stejnou časovou prodlevu 100 ms. Potom některým třeba změňte čas. Číselný údaj je v milisekundách, zkuste si to změřit.
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é animce 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 obrázky. To jsou nejdůležitější informace, kromě velikosti souboru v [B].
Najděte v menu Nastavení Zastavit animaci (G), rozběhnout znova nejde. Nevadí, zavřu a otevřu. Hlavně si vyzkoušejte Rozbalit všechny snímky .... Ve vámi zvoleném adresáři najdete soubory s obrázky, ze kterých by mohla vzniknout tato animace.
Zatím vynechávám pojem optimalizace a problémy s průhledností.

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.
Jedinou "komplikací" je zelené pozadí prohlížeče, které je připraveno pro vyzkoušení průhlednosti bílé barvy. I laik jistě zvládne 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 stáhni si 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! (Anebo nee?)
Zkuste si někdy příště "zprůhlednit" třeba oko kuřete.

Úkoly a cvičení

nahoru

Názvy souborů?
Jako obyčejně. Vaše přihlašovací jméno (LOGIN), podtržítko, název lekce (číslo cvičení), rozlišení pořadí více souborů a, b, c ...
LOGIN_ANI01.gif nebo LOGIN_ANI01b.gif, LOGIN_ANI01c.gif, ...
Kolik?
souborů kolik chcete, přesněji: aspoň jeden!
Kam s tím?
Mí studenti s přesným názvem do pupínu (...\Pub-in\VašeTřída) přes SEPTIM uploadem nebo postaru ve škole
No a vítaní návštěvníci pošlete mi svoje díla emailem (viz pata titulní strany). Děkuji.

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

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

TIP * vyzkoušejte si:
- Otevřete si hotové animované GIFy a prozkoumejte, jak jsou dělány.
- Rozbalte do nové prázdné složky pomocí Irfanu nějaký složitější GIF.