Bakalářská práce - INFO.LU2.NAME

Bakalářská práce

Teze bakalářské práce

Prezentace bakalářské práce

Úkolem je vytvořit jednoduchou animaci, na které je možné demonstrovat postup tvorby v různých programech a jejich animačních prostředích. Jelikož se jedná o animaci pro internetové stránky bude se jednat o animovaný GIF. Cílem je také zjistit jaký stupeň komprese použité programové prostředky používají a jak jsou jejich algoritmy odlišné, také zjistíme velikosti zdrojových (nativních) souborů.

Scénář:

Banner (ikona) o rozměrech: šířka 88x31px, 72pixelů/palec

1. černý text iNFO (font Arial Black, 20px, slabě vyhlazený) se prolne z růžového pozadí a na chvíli zůstane stát,
2. poté se nad nedokončené písmeno i snese tečka, obraz zůstane stát, pak skok na první snímek animace. Animace se opakuje do nekonečna.

Obrázek 1: Závěrečný snímek animace.

Adobe Fireworks CS3

Vytvoříme nový dokument s danými rozměry a určíme pozadí Canvas color - Custom na růžovou #FF6699 (vybereme ze Swatches). Dále si nakreslíme objekty potřebné k animaci. Napíšeme text, použijeme vyhlazení Crisp Anti-Alias, poté převedeme na křivky (Convert to Paths), z tohoto vektorového objektu odstraníme tečku nad písmenem i, tak že 2x poklepeme na písmeno i s bílou šipkou (Subselection tool), pak označíme 4 body, které nám tečku tvoří a zmáčkneme Delete pro odstranění. Z tohoto objektu vytvoříme Symbol - Graphic (Convert to Symbol), který pojmenujeme INFO. Dále vytvoříme kolečko nástrojem Elipsa (Vector – Elipse tool).

Můžeme přistoupit k vlastnímu animování. Na prvním snímku (Frame) si necháme symbol INFO a aplikujeme na něj filtr Color Fill a barvu nastavíme na #FF6699 (stejná jako pozadí), objekt zduplikujeme a Filtr změníme na barvu #000000 (černá). Toto je nutné pro použití funkce Tween. Označíme oba objekty a Tween aplikujeme (Tween Instances), zde máme na výběr počet kroků přechodové animace (Steps), nastavíme na 5 a zaškrtneme Distribute to Frames (rozložení na snímky). Funkce se spustí a vytvoří posloupnost obrázku na 7 snímků od růžového nápisu až po černý. U prvního snímku nastavíme délku trvání (Frame Delay) na 50, u dalších pěti snímků na 10 a u posledního snímku, který má chvíli stát nastavíme hodnotu 100 tzn. 1 sekunda.

Pro animaci tečky opět můžeme použít Tween. Kolečko si umístíme nad nedokončené i a zduplikujeme, duplikát přesuneme na ploše nahoru mimo viditelnou plochu a pak přesuneme o vrstvu níž než objekt z něhož byl duplikován (aby při použití funkce Tween byl na prvním místě). Opět označíme obě kolečka a aplikujeme (Tween Instances) se stejnou volbou jako předtím 5 kroků a zaškrtneme Distribute to Frames. Dále opět změníme délku trvání snímků u pěti mezilehlých na 5 a u posledního na 100. GIF animation looping musíme nastavit na Forever, aby se animace opakovala do nekonečna.

Obrázek 2: Okno Frames s údaji o délce snímku.

Nyní již stačí animaci vyexportovat. V okně Optimize zvolíme Animated GIF, Web Adaptive, 128 barev. Poté zvolíme File – Export a soubor vyexportujeme. Zdrojový PNG soubor uložíme.

Adobe Photoshop CS3

Tento program neslouží pouze pro vytváření grafických objektů pro web, ale také pro profesionální DTP použití v režimu CMYK, proto je zřejmé, že není stvořen vyloženě pro animaci a to je na něm také poznat. Dříve pro tyto speciální funkce sloužil podprogram Adobe Image Ready (až do verze CS2), ale v nejnovější verzi programu je již okno Animation přímo ve Photoshopu. Toto okno má podobnou funkci jako Frames u Adobe Fireworks. Z mého hlediska je nepochopitelné, proč jsou vlastnosti objektů závislé na vlastnostech objektů na prvním snímku a také proč objekty nemohu mazat na jednotlivých snímcích tak, aby se nesmazaly na všech ostatních, to zvětšuje výsledný zdrojový soubor.

Obrázek 3: Okno Animation.

Nejprve nastavíme barvu pozadí na růžovou #FF6699, poté vytvoříme nový dokument 88x31px, 72px/inches, obsah pozadí (Background Contents) nastavíme na barva pozadí (Background Color), barevný mód RGB. Vytvoříme text iNFO a ten můžeme buď převést na křivky nebo zrastrovat, provedeme druhou možnost, protože vektorový obsah ve Photoshopu je poměrně „chlupatý“. Umažeme tečku nad i pomocí výběru nad ním a stiskem Delete. Kuličku vytvoříme pomocí Elipse Tool. Musíme mít na paměti, že tento objekt musí být i na prvním snímku. Připravíme si 3 klíčové snímky. Na prvním posuneme kuličku nahoru mimo viditelnou plochu, na vrstvu iNFO aplikujeme Efekt – překrytí barvou (Color Overlay), barva #FF6699, neprůsvitnost (Opacity) 100%. Tento snímek zduplikujeme a u efektu změníme neprůsvitnost na 0%. Snímek zduplikujeme a kuličku posuneme nad i. Pro provedení tweeningu označíme první a druhý snímek a vybereme Tween animation frames (Frames to Add 5, vše necháme zaškrtlé), stejně provedeme mezi druhým a třetím snímkem (nyní již sedmým a osmým). Nakonec nastavíme délku trvání snímků, ve Photoshopu v sekundách tzn. první snímek 0,5s, první mezisnímky 0,1s, sedmý snímek 1s, druhé mezisnímky 0,05s a poslední snímek 1s.

Export animace provedeme pomocí uložit pro web, nastavení GIF, Adaptive, 128 barev. Uložíme zdrojový PSD soubor.

Gimp 2.2

Vytvoříme nový dokument, na vrstvu pozadí jsem použil nástroj Výplň s růžovou barvou. Toto pozadí duplikujeme, bude to růžový snímek, do nějž se další vrstva prolne. Vytvoříme text iNFO, čárku nad i umažeme tak že provedeme výběr nad ním a použijeme nástroj Guma, je zajímavé, že i po této operaci lze text editovat.

Provedeme Tween pomocí Skript-fu – Animátory – Smísit (Mezilehlá políčka 5, odznačíme Smyčka), vytvoří se nám nový dokument. Do nové vrstvy si nakreslíme kolečko jako kruhový výběr, následně vyplnit pomocí nástroje Výplň, obsah vrstvy si zkopírujeme do schránky. Horní vrstvu si šestkrát zduplikujeme, pak na tyto vrstvy postupně kuličku umisťujeme abychom docílili pádu shora dolů, pro tuto fázi bohužel žádný tween není, jelikož vrstvy jsou sloučené.

Přejmenujeme všechny vrstvy a přidáme hodnotu snímku v milisekundách. Takže hodnota 1000 odpovídá 1s. Poté provedeme operaci Filtry – Animace – Optimalizovat (pro GIF), opět se nám otevře nový dokument, tento dokument obsahuje pouze změny snímků oproti předchozím snímkům.

Poté animaci exportujeme Soubor – Uložit jako – Obrázek GIF, objeví se okno Exportovat soubor, zaškrtneme Zapsat jako animaci. Poté soubor uložíme také jako XCF.

Obrázek 4: Změna vrstev po provedení optimalizace.