Témeř bez úprav převzato z www.jenseneboj.com (c) 2011
Cíl lekce
Pochopit metody překreslení – přechody snímků v animacích GIF.
Využívat průhlednost (transparentnost).
Aplikovat přechody mezi snímky v programu Microsoft GIF Animátor.
Využít Irfan View pro práci s animovanými soubory a k získání informací o animaci.
Úkoly a cvičení
Vytvořit pokročilý animovaný soubor například pro „Den otevřených dveří“ nebo na téma Veselé Velikonoce, Vánoce, osobní PF, firemní reklamní banner a podobně. Další pokyny k úkolům a cvičení viz odstavec Úkoly.
O trochu níže si zkopírujte oba GIF soubory s tématem „Den otevřených dveří“. Dále ve školní síti ve složkách …\Pub-Out\Grafika, …\Pub-Out\Obrazky a nebo zde naleznete další cvičné a ukázkové soubory. nahoru
Dva cvičné animované soubory
První soubor – vrány
Před lety na bývalé škole jsem vytvořil animovaný obrázek ke dni otevřených dveří. Pojďme s ním experimentovat a doplnit jej. Otevřte jej v programu Microsoft GIF Animator nebo Zoner GIF Animátor.
Druhý soubor – doplněný texty
Doplněná pozvánka na „Den otevřených dveří“
Prostudujte si na snímcích nastavení metody překresleni a postupné zobrazování snímků, překreslování textů a přilétajících havránků.
Jak na to
Přechody mezi snímky
Undefined (nedefinováno) Prohlížeč nedělá nic s pozadím před zobrazením dalšího obrázku. EN: Directs the browser to do nothing to the background before displaying the next image.
Leave (ponechat) Ponechá předchozí obrázek … EN: Directs the browser to leave the previous graphic image as the next is drawn. This choice can create a shadowing effect.
Restore Background (obnovit pozadí) Obnoví pozadí, překreslí původní pozadí … Directs the browser to redraw the original background as the current image is drawn.
Restore Previous (obnovit předchozí) Obnoví (překreslí) předchozí obrázek … EN: Directs the browser to redraw the previous image as the current image is drawn.
Úkol
No a teď směle do díla. Cílem je animace na Den otevřených dveří. Udělejte mi radost, několik nejhezčích, nejnápaditější prací nabídnu ke zveřejnění na školním webu (po odstranění textů příjmení jméno atd.). Předpokládám a jsem si vědom, že to je práce na více hodin než jsou 2 hodiny ve škole. Pracovité vycením a na líné se vycením. 😉
Pokud chcete výborné hodnocení, splňte beze zbytku zadání.
Čas odevzdání měřím v Pub-in, ale ve Vaší složce musí být všechno.
Jako obvykle bez krve, násilí a zbytečné erotiky. Že by zase nudná školní veřejně publikovatelná práce?
Napřed si prostudujte a prakticky prozkoumejte hotové soubory z této stránky, jak jsou dělány, jaké metody překreslování (Undraw Method) jsou použity u vran a textů. Povšimněte si také polohy obrázků s vránami zadávané do polí Left a Top
Vemte z našeho webu, vyfoťte, naskenujte fotografii naší školy. Cení se vlastní foto! Záleží na stanoveném času, Vaší ochotě a snaze.
Pokud nepoužijete vlastní foto, uložte si do souboru URL adresu, odkud je použitá fotka.
Na přípravu textů použijte jakýkoliv software. Na efekty a úpravy (vlastní výběr, oříznutí, velikost v pixelech, uložit jako s průhledností) použijte například Irfan View.
Připravte pro naši školu animovaný GIF soubor na nové termíny. Pokud ještě nejsou na školním webu známy, tak si je stanovte cvičně sami.
Dílčí kroky ukládejte taky. Třeba je číslujte nebo písmenkujte.
Napište hodně malým, ale čitelným písmem svoje příjmení, jméno, třídu, skupinu a datum tvorby. Pokud možno vpravo dole tak, aby nerušilo celkový dojem.Identifikace být MUSÍ!
Mí studenti použijte přihlašovací jméno (LOGIN), podtržítko, název lekce (číslo cvičení – lekce).
LOGIN_ANI02.gif pro výsledek
LOGIN_ANI02a.gif, LOGIN_ANI02b.gif, atd. dílčí soubory – exporty z vektorů (PNG konvertovat na GIF) s texty, vránami apod.
LOGIN_ANI02a.svg, LOGIN_ANI02b.svg, atd. nebo xcf, psd, ai pro pracovní soubory s dílčími kresbami, texty apod.
LOGIN_ANI02.html soubor s webovou stránkou pro zobrazení v prohlížeči.
Studenti vytvoří na svém disku složku disk:\grafika\ANI02 a sem uloží všechny soubory.
Pouze jeden jediný soubor – animovaný výsledek do Pub-in: ...\Pub-in\VašeTřída\LOGIN_ANI02.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 125×125 pixelů a uložit jako GIF (viz lekce IRFAN 1 a 2)
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.
Pokud chcete výborné hodnocení, splňte beze zbytku zadání.
Čas odevzdání měřím v Moodle nebo Pub-in podle pokynů učitele, ale ve Vaší složce musí být všechno.
Vytvořte ze dvou obrázků animovaný GIF o velikosti 125 × 125 pixelů.
Námětem je pták nebo hmyzák. Různá jiná milá zvířátka jsou též vítána.
Jako obvykle bez krve, násilí a zbytečné erotiky. Zkrátka nudná školní veřejně publikovatelná práce.
Prosím, vytvořte si vlastního ptáka! Výše zobrazená kuřata používejte jen pro prvotní pokusy.
Mí studenti použijte přihlašovací jméno (LOGIN), podtržítko, název lekce (číslo cvičení – lekce).
Je to celkem 5 souborů!
LOGIN_ANI01.gif pro výsledek
LOGIN_ANI01a.gif, LOGIN_ANI01b.gif dílčí soubory – exporty z vektorů (PNG konvertovat na GIF)
LOGIN_ANI01.svg nebo odg, cdr nebo ai pro vektorový soubor podle upřesňujících pokynů.
LOGIN_ANI01.html soubor s webovou stránkou pro zobrazení v prohlížeči.
Studenti vytvoří na svém disku složku disk:\grafika\ANI01 a sem uloží všechny soubory
Pouze jeden jediný soubor – animovaný výsledek do Pub-in: ...\Pub-in\VašeTřída\LOGIN_ANI01.gif