Rozhýbejte své vektory v Adobe Illustratoru - Grafika.cz - vše o počítačové grafice

1. listopadu 2010, 09.00 | Program Adobe Illustrator je primárně určen k vytváření vektorových ilustrací, ale skrývá se v něm i mnoho dalších zajímavých funkcí pro různá řešení. V dnešním tutoriálu nahlédneme do nitra tohoto vektorového profesionála a ukážeme si, jak vytvořit Flash animaci přímo v prostředí programu. Na jednoduchých ukázkách nastíníme jednotlivé postupy a možnosti exportu do finální animace.

Nejprve si založíme nový dokument, určený pro web s libovolnou velikostí. Doporučuji také otevřít paletku s vrstvami. Ta nám v podstatě nahrazuje časovou osu, která ukazuje v jednotlivých vrstvách snímky, jak půjdou za sebou.

K vytvoření animace můžeme dojít dvěma způsoby. První varianta je taková, že každý snímek (objekt či kresbu) při kreslení rovnou umisťujeme do samostatné vrstvy (všimněte si barevného označení jednotlivých vrstev) a vyexportujeme (na export se podíváme za chvíli).

Druhý způsob spočívá v tom, že vytvoříme celkovou kresbu a poté v paletě Vrstvy kresbu rozdělíme do vrstev. Při rozdělování máme dvě možnosti:

Rozdělit do vrstev (samostatně) – jednotlivé položky budou rozděleny v samostatných vrstvách.

Rozdělit do vrstev (přidávat) – jednotlivé položky se budou postupně přidávat, takže objekt, který je zcela dole, se objeví ve všech vrstvách, a objekt zcela nahoře bude pouze v horní vrstvě.

Nyní se dostáváme k exportu, tedy jak z Illustratoru „dostat“ SWF soubor. Opět máme dvě možnosti. Tou první je přímý export (Soubor/Export… a v nabídce Uložit typ jako vyberme Flash (*.SWF)), následně máme k dispozici Volby SWF. Na první záložce je důležité nastavit u volby Exportovat jako: Vrstvy AI do snímků SWF. Poté můžete nastavit verzi Flash playeru, možnost oříznutí na kreslící plátno, komprimace, export textů jako křivky, kvalitu křivek, barvu pozadí a další užitečná nastavení.

Vpravo po kliknutí na Další volby přejdeme k podrobnějšímu nastavení, jak se má animace chovat. Zde je důležité nastavit kmitočet snímků (určuje rychlost, s jakou se bude animace přehrávat - tedy čím nižší číslo, tím bude animace pomalejší), možnost opakování animace, prolínání a pořadí vrstev (odspodu nahoru či odshora dolů) aj. V praxi je nejlepší si podrobně a v klidu projít veškeré volby a vyzkoušet si je.

Druhá možnost, jak animaci uložit, vede přes hlavní nabídku Soubor/Uložit pro web a zařízení… (Alt+Shift+Ctrl+S), kde nastavíme jako výstupní soubor flash s příponou SWF. Dále musíme nastavit Vrstvy na snímky SWF a poté si můžeme pohrát s kvalitou křivek, kmitočtem snímků, opakováním atd. Opět doporučuji projít všechny možnosti a jednotlivá nastavení si vyzkoušet.

Jistě jste si všimli, že nabídka přes příkaz Export nabízí mnohem více kontroly nad flash animací než druhá možnost.

Nyní si prakticky vyzkoušíme a ukážeme jednoduché animace. První ukázka je zaměřena na zobrazování pouze jednotlivých objektů či kreseb za sebou. Založíme nový dokument (Ctrl+N) určený pro web. Velikost zvolíme dle vlastní potřeby, kterou před exportem můžeme poupravit nástrojem Kreslící plátno (Shift+O). Textovým nástrojem (T) napíšeme číslo „3“. Objekt 3x zduplikujeme a postupně Textovým nástrojem přepíšeme tak, aby nám výsledek dával 3-2-1-START (viz obrázek níže).

V dalším kroku označíme všechny objekty, zarovnáme na střed vodorovně i svisle a příkazem Rozdělit do vrstev (samostatně) provedeme rozdělení na jednotlivé vrstvy.

Máme-li vše připravené, vyexportujeme naši jednoduchou flash animaci. Zvolíme Soubor/Export…, jako výstupní formát samozřejmě *.SWF, a provedeme jednotlivá nastavení pro export. Celé nastavení vidíte na následujících obrázcích. Na příkladu jsme záměrně zvolili nízký kmitočet snímků, aby „odpočítávání“ nebylo příliš rychlé.

A výsledek vidíme zde.

Druhý příklad zobrazuje postupné přidávání objektů. Vytvoříme nový dokument (Ctrl+N), nástrojem Text (T) napíšeme slovo „www.grafika.cz“ a obarvíme dle libosti. V paletě Vrstvy vytvoříme další vrstvu a opět nástrojem Text (T) vepíšeme slova „grafika“, „pre-press“ a „polygrafie“, ale každé samostatně, nesmí být v jednom textovém poli.

Nyní se pustíme do rozdělování vrstev v paletě. Rozdělíme Vrstvu 2, samozřejmě budeme tentokrát „přidávat“, viz obrázek.

Dále Nástrojem pro výběr (V) označíme nápis „www.grafika.cz“, převedeme na křivky (Ctrl+Shift+O), rozdělíme skupinu (Ctrl+Shift+G) a ve vrstvách rozdělíme – Rozdělit do vrstev (přidávat).

Vše můžeme vyexportovat. Na následujících dvou obrázcích je vidět nastavení exportu. Zde jsme zvolili kmitočet 3.

Výsledek jednoduché flash animace je zobrazen níže.

V třetí a poslední ukázce budeme využívat především Nástroj prolnutí (W). Ten nám umožní plynulé prolínání jednotlivých objektů a simulaci pohybu. V novém dokumentu si vytvoříme dva objekty, např. čtverec (M) a kolečko (L).

Nástrojem prolnutí (W) vytvoříme daný efekt. Následně zvolíme v hlavní nabídce Objekt/Prolnutí/Volby prolnutí… a navolíme Určené kroky na 20, Orientaci zarovnáme podle cesty.

Opět se vrátíme do hlavní nabídky Objekt/Prolnutí/Volby prolnutí…/Rozdělit. Tento příkaz nám rozdělí určené kroky, které jsme zadávali v předchozí nabídce. Nyní můžeme přistoupit k rozdělení do samostatných vrstev přes příkaz Rozdělit do vrstev (samostatně).

Výslednou animaci vyexportujeme přes známý příkaz Soubor/Export… Nastavení je vidět na následujícím zobrazení.

Animaci můžete vidět níže.

Na následující ukázce je použitý stejný postup, ale s textem.

V této ukázce jsme využili a rozhýbali vektorovou hrací kostku, kterou jsme nakreslili v minulém tutoriálu. Opět je použit Nástroj prolnutí (W).

Na závěr pár obecných tipů, které mohou přijít vhod:

• snažte se používat symboly, zmenšíte tím výslednou velikost souboru (při výsledném exportu bude každý symbol definován pouze jednou)
• efekty aplikujte spíše na symbol v panelu Symboly, než na symbol v kresbě, opět snížíte velikost výsledné animace
• mřížkové objekty a přechody s více než osmi zarážkami se při exportu narastrují jako bitmapy
• export do formátu SWF podporuje pouze zaoblená zakončení a spoje
• text si ve výsledné animaci nemusí zachovat všechny svoje vlastnosti, při exportu jej proto převádějte na obrysy

Závěrem bych rád upozornil na to, že probrané cvičení ukázalo jen jednu z možností práce s vektory v Adobe Illustratoru. Samozřejmě že se tento program nemůže srovnávat s Flashem Professional co se animací týče, ale pevně věřím, že i tak byl tento tutoriál pro Vás přínosným v oblasti tvorby vektorové grafiky.