Ondřej Brichta 29.3.2005
Po úspěšném rozpohybování objektu v minulém díle, bude dnešní animace pohybu po nakreslené křivce hračkou. Ke konci kapitoly si vyzkoušíme jak plynule zrychlovat a zpomalovat pohybující se objekt, nebo automaticky objektem během pohybu otáčet.
V minulém úvodním díle jsme si ukázali nejjednodušší postup při animaci. Pracovali jsme s některými pojmy a nástroji, kde mezi nejdůležitější části pracovního prostředí patří časová osa, tvořící základ všech našich animací. Časová osa obsahuje jednotlivé framy, políčka která se po sobě přehrávají s určitou frekvencí. Frekvenci, neboli počet políček za jednu sekundu, lze měnit v panelu „Properties“.
Panel, umístěný většinou ve spodní části pracovní plochy, vždy zobrazuje nastavení parametrů aktuálně vybraného objektu. Výběr objektu provádíme pomocí nástroje „Selection Tool“ . Pokud máme vybrán Movie Clip (MC), můžeme jej pojmenovat (Instance Name), měnit barvu (Color:), průhlednost, jas a nebo tlačítkem „Swap..“ nahradit jiným MC z knihovny objektů dokumentu.
Pokud chceme změnit parametry celé animace, klikneme myší mimo aktivní plochu, na panelu „Properties“ lze nastavit základní parametry, mezi které patří rozměry pozadí animace, barva pozadí, nastavení exportu a i rychlost přehrávání. U rychlosti je defaultně nastaveno 12 snímků za sekundu. Lidské oko hůře rozeznává změny rychlejší než 1/10 sekundy, proto je frekvence 12 snímků za sekundu dostačující a nemusí se měnit.
Panel Properties
Ale zpět k časové ose. V minulém díle jsme se seznámili s pojmem klíčového snímku. Chceme-li do určitého snímku kreslit, nebo vkládat MC, musíme z něj vytvořit klíčový snímek. Se snímky na časové ose se dá různými způsoby manipulovat. Pokud klikneme pravým tlačítkem myši na snímek časové osy, zobrazí se možnosti, jak snímky měnit (obr. 2). Lze je odstraňovat, vkládat, vytvářet nebo mazat klíčové snímky, případně obracet pořadí klíčových snímků.
Obr. 2
Dnes si ukážeme jak pohybovat objektem po křivce. Nejdříve budeme potřebovat objekt, který budeme animovat. Vybral jsem brouka, kterého si můžete stáhnout zde. Je to hezčí než kreslit čtverce.
Jak budeme postupovat? Otevřeme si nový dokument a z horního menu zvolíme „Insert - New Symbol“. Objeví se okno (obr. 3) , ve kterém označíme, že se bude jednat o Movie Clip, pojmenujeme jej například „beruska“ a potvrdíme OK. Nyní jsme vytvořili MC s názvem „beruska“ a můžeme v něm kreslit. Všimneme si že v horní části je opět časová osa. Je to jedna z vlastností MC. Každý má svojí vlastní osu na které může probíhat další animace. Do vytvořeného MC lze vkládat další MC, kde každý má opět vlastní časovou osu a tak dále.
Obr. 3
Nyní vložíme obrázek brouka. V horním menu zvolíme „File - Import - Import to Stage...“ a vložíme wmf soubor s obrázkem berušky (obr. 4) . Vzhledem k tomu, že wmf je vektorový formát, je beruška složená z několika objektů, které reprezentují jednotlivé části tělíčka. Tímto způsobem lze do Flashe importovat většinu obrazových souborů. Avšak v zájmu zachování malé velikosti výsledného souboru a snazší editace doporučuji upřednostňovat import vektorových formátů obrázků.
Obr. 4
V MC „beruska“ máme už obrázek, takže se můžeme vrátit na hlavní scénu kliknutím v horní části nad časovou osou na nápis „Scene1“. Ale kde je MC „beruska“ ? MC „beruska“ se objevuje zatím jen v knihovně symbolů dokumentu, není vložen na hlavní scéně. Zobrazíme proto knihovnu objektů, v horním menu zvolíme: „Window - Library“. V knihovně se objevují všechny MC,tlačítka, grafické symboly, obrázky, zvuky a videa dokumentu.
Z knihovny přetáhneme myší MC „beruska“ na hlavní scénu. Na časové ose jsme takto vytvořili první klíčový snímek. Protože budeme chtít brouka rozhýbat, musíme vytvořit druhý klíčový snímek.
Dejme tomu, že pohyb bude trvat 2 sekundy, takže při rychlosti 12 snímků za sekundu bude mít druhý klíčový snímek číslo 24. Klikneme pravým tlačítkem myši na snímek 24 časové osy a zvolíme „Insert Keyframe“. Následně pravým tlačítkem myši zobrazíme menu na prvním klíčovém snímku a vybereme „Create Motion Tween“ (chceme animovat pohyb). Přesuneme se na 24. snímek a pomocí nástroje „Selection tool“ posuneme brouka ve snímku 24 na jiné místo plochy. Klávesou „Enter“ můžeme zkontrolovat, že se již brouk pohybuje.
Ale my chceme, aby se brouk pohyboval po jiné dráze, ne pořád rovně. Tlačítkem „Insert Layer“ (obr. 5) , umístěným v levém dolním rohu okna s časovou osou vytvoříme další vrstvu.
Obr. 5
Obecně platí, že objekty umístěné ve vyšších vrstvách překrývají objekty ve vrstvách nižších. Z nástrojů „Tools“ zvolíme „Pencil Tool“ (obr. 6).
Obr. 6
Pod nástroji najdeme část „Options“. V tomto poli lze nastavovat vlastnosti právě vybraného nástroje. My si vybereme mód „Smooth“, budeme kreslit vyhlazenou křivku. Pokud máme nástroj nastaven, nakreslíme libovolnou křivku, třeba vlnku (obr. 7).
Obr. 7
Dále pravým tlačítkem klikneme na „Layer 2“ a zvolíme „Guide“. Určili jsme tak, že křivka v této vrstvě bude sloužit jako cesta objektu ve vrstvě pod ní (obr. 8).
Obr. 8
Musíme ale ještě přetáhnou spodní vrstvu přímo pod vodící vrstvu „Layer 2“. Provedeme to tak, že podržením levého tlačítka myši na názvu „Layer 1“ pomalu přetáhneme vrstvu směrem pod nápis „Guide ...“ horní vrstvy. Uvolníme myš a mělo by se objevit následující uspořádání vrstev:
Obr. 9
Nyní vybereme první snímek spodní vrstvy a na panelu „Properties“ zaškrtneme ve spodní části „Orient to Path“ (objekt se při pohybu natáčí ve smyslu zakřivení křivky) a „Snap“ (přichycení objektu ke křivce). Stejně označíme i vlastnosti na snímku 24.
Pomocí klávesy „Enter“ otestujeme výsledek. Vidíme jak se beruška pohybuje podle křivky a natáčí se ve směru zakřivení.
Vrátíme-li se k panelu „Properties“ u prvního políčka, lze pomocí parametru „Ease“ nastavit rychlost rozjezdu pohybujícího se objektu. Hodnota 100 určuje, že objekt postupně zpomaluje a při hodnotě -100 objekt postupně zrychluje.
Na panelu vlastností je možné nastavit i případnou rotaci objektu. Parametr „Rotate“ určuje zda se objekt nebude otáčet vůbec (None), otáčet automaticky (Auto), ve smyslu otáčení hodinových ručiček (CW) a proti smyslu otáčení (CCW). Vedlejší políčko určuje, kolikrát se za celý pohyb objekt otočí.
V tomto díle je to vše, příště využijeme znalosti základních animačních postupů, přidáme pár jednoduchých příkazů v Action Scriptu a vytvoříme si jednoduché menu pro web.
Ke stažení: zdrojový soubor ukázky.
