Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
-
14. listopadu 2024

Software
Rozhýbejte své vektory v Adobe Illustratoru
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.
Tématické zařazení:
-
14. května 2014
Jak vkládat snímky do galerií a soutěží? Stručný obrazový průvodce
-
23. dubna 2014
Konica Minolta přenesla výhody velkých zařízení do kompaktních modelů
-
12. června 2012
-
9. dubna 2014
-
5. ledna 2017
-
6. září 2004
OKI snižuje ceny barevných laserových tiskáren C3100 a C5200n
-
13. května 2004
-
19. ledna 2004
QuarkXPress Passport 6: předvedení nové verze na konferenci Apple Forum 27.1.2004
-
6. února 2001
-
30. listopadu 2014
Nový fotoaparát α7 II: první plnoformát s pětiosou optickou stabilizací obrazu na světě
-
14. října 2024
-
9. ledna 2025
Bubnový scanner na 4000dpi optické rozlišení + PC + software
-
9. ledna 2025
Profesionální scaner Scanner Heidelberg TOPAZ I. optické rozlišení bez interpolace 3800DPI
-
17. ledna 2025
-
21. ledna 2025