Animace:

Vrstvy

Otevřete si nový dokument a založte novou vrstvu. Dvouklikem na název "Layer 2" si můžete vrstvu libovolně přejmenovat. Názvy zadávejte pokud možno smysluplné, abyste se ve vrstvách vyznali. Pokud třeba budete mít ve vrstvě nakreslený domek, není od věci pojmenovat vrstvu "domek".

Nyní do obou vrstev nakreslete po jednom kruhu (mezi jednotlivými vrstvami se přesouváte kliknutím na jejich název - vybraná vrstva je potom ta tmavá). Zkuste si teď zase přesunout kruhy přes sebe a zpět (jako v minulé kapitole Co je to Flash) a vidíte, že se nic nestalo.

Kruhy se vektorově neodečetly, protože každý kruh je v jiné vrstvě, v jiné úrovni. Vrstvy můžete také přetahovat (kliknutím na název vrstvy a táhnutím buď nahoru nebo dolů) a měnit tak jejich pořadí a tím i jejich prioritu. Pokud máte dvě vrstvy, objekt ve vrstvě s vyšší priritou (tedy ta, která je výše), bude překrývat objekt ve vrstvě s nižší prioritou.

Jestliže bude ve spodní vrstvě velký obdélník a v horní vrstvě text, bude text překrývat obdélník. Obdélník tedy bude plnit funkci pozadí stránky. Kdyby se vrstvy přehodily, obdélník by překryl celý text a ten by tak nešel vidět vůbec.

Tohoto se dá dobře využívat. Například pokud budete vytvářet nějaké pozadí, pravděpodobně bude v nejspodnější vrstvě, aby ho každý objekt překrýval. Pokud ale chcete, aby byl objekt viděn za každé situace, logicky jej umístíte do nejvyšší vrstvy.

Nastavení vrstev

Teď se podíváme na nastavení vrstev.

Vpravo od názvu vrstvy máte tři malé ikonky - oko, zámek a čtverec. Pokud kliknete na oko, zneviditelníte tím všechny vrstvy (můžete však také zneviditelnit pouze jednu vrstvu kliknutím na tečku vedle názvu vrstvy), zámek zamkne všechny vrstvy, takže objekty v ní budou vidět, ale nemůžete s nimi hýbat ani je nějak jinak měnit. Velmi užitečné v případě, že víte, že už s vrstvou nebudete nic dělat a přesto ji stále chcete vidět. Poslední ikona pouze označuje barvu vrstvy.

Pokud budete chtít vrstvu (i se všemi objekty, které se v ní nachází) smazat, slouží k tomu ikonka popelnice, napravo od nové vrstvy.

Všechny tyto nastavení pochopitelně platí pouze ve zdrojovém souboru, ve vygenerovaném swf budou vidět všechny vrstvy.

Časová osa

Je na čase se seznámit se s nejsilnější zbraní Flashe - s animací. Vytvořte si opět nový dokument a nakreslete do scény nějaký objekt. Je úplně jedno, co to bude. Klidně obyčejný kruh. Nyní se nahoře podívejte na časovou osu (timeline), což je takový hlavní pilíř animací. Všimněte si, že každá vrstva má svou vlastní časovou osu, která je nezávislá na časových osách ostatních vrstev. To znamená, že když provedete změnu časové osy v jedné vrstvě, druhá vrstva zůstane nezměněna.

Každá časová osa je vyplněna malými obdélníky. Jeden obdélník se rovná jednomu snímku. Pokud máte Frame Rate například 12, odpovídá 12 obdélníků jedné vteřině.

První snímek obsahuje malý černý puntík, který označuje, že v daném snímku se v dané vrstvě vyskytuje nějaký objekt. Když objekt vymažete a vrstvu necháte prázdnou, puntík zmizí a zůstane tam pouze jakási kružnice.

Vaše první animace

Pokud na scéně nemáte nakreslený nějaký objekt, učiňte tak.

Vyberte první snímek a klikněte pravým tlačítkem myši. Zobrazí se nabídka a hned první položka je Create motion tween. Klikněte na ni a tím jste určili, že v této vrstvě budete provádět animace. Vyberte dvacátý čtvrtý snímek, opět klikněte pravým tlačítkem a vyberte položku Insert Keyframe (nebo jednodušeji klikněte na 24. snímek a stiskněte klávesu F6). Časová osa vrstvy se zabarví do fialova a objeví se zde šipka.

Vyberte čtyřiadvacátý snímek a normálně táhnutím myši přesuňte nakreslený objekt na druhou stranu scény. Tím je vaše první animace hotová. Teď už si ji jenom prohlédněte stisknutím kláves CRTL+ENTER, čímž vygenerujte *.swf soubor. Váš objekt se bude pohybovat z jedné strany na druhou.

Animace se neustále opakuje, abyste ji zastavili, musíte již spolupracovat s ActionScriptem. Na to přijde řeč později.

Pokud se vám animace nelíbí, klidně se vraťte do pracovního prostředí (okno s animací se zavírá tím menším křížkem vpravo nahoře) a animaci upravte. Objekt však můžete měnit pouze v místech, kde je klíčový snímek, není možné změnit průběh animace mezi dvěma keyframy, ledaže byste přidali další. Klikněte třeba na desátý snímek a opět přidejte keyframe. Nyní můžete v tomto čase upravovat objekt jak je libo. Potom by animace mohla vypadat takto. Stejně tak ale můžete přidat keyframe někde daleko za poslední keyframe a "prodoužit" tak stávající animaci.

Panel Properties

Objekt na klíčových snímcích můžete takřka jakkoliv měnit. V levém dolním rohu máte panel Properties, na kterém můžete měnit šířku (W:) a výšku (H:). Pochopitelně musíte mít vybraný objekt, který chcete měnit.

Můžete zde také zadat přesné souřadnice objektu. Pokud zadáte x:0 a y:0, bude objekt umístěn v levém horním rohu. Ale pokud zadáte y:100, objekt se nepochopitelně posune o sto bodů dolů. Což je taková drobná změna oproti každému normálnímu grafu, kde y-ová osa je nahoře kladná a dole záporná. Zkuste na to nezapomínat nebo budete pořád nadávat jako já. Nebo si pokaždé uvědomte, že y-ová souřadnice je vzdálenost objektu od horního okraje scény.

Pokud byste chtěli mít objekt zarovnaný na středu, zobrazte si panel Windows → align. Pozor na to, že musíte mít vybraný objekt, který chcete zarovnávat a také musíte mít zapnutou funkci To stage, abyste zarovnávali ke scéně, jinak byste zarovnávali dva objekty vůči sobě (což se samozřejmě také hodí, když chcete mít třeba nějaké odkazy přesně pod sebou).

Průhlednost a další vychytávky

Dále zde najdete položku Color, ve které můžete s objektem dělat hotové divy.

První položka Brightness je jas objektu. Pokud nastavíte na 100%, bude mít objekt maximální jas, pokud -100%, jas bude minimální.

Dále je zde možnost Tint, což je plynulá změna barva. Pokud máte objekt na prvním snímku červený, nastavte Tint na 24.snímku třeba na žlutou a pusťte si animaci. Červená barva se plynule změní ve žlutou.

Další je Alpha, tzv. průhlednost. Pokud nastavíte 0%, bude objekt zcela průhledný, takže vlastně nepůjde vidět vůbec (pokud máte bílé pozadí, tak se vám budou zdát položky "Brightness" a "Alpha" stejné. Změňte pozadí a uvidíte rozdíl). 100% průhlednost je normální stav, objekt je prostě neprůhledný. S průhledností se dají dělat pěkné efekty, ale bohužel Alpha strašlivě zpomaluje počítač - procesor to už nestíhá počítat. Proto využívejte průhlednost s rozumem.

Klasický příklad na Alhpa je tlačítko reagující na přejetí kurzoru myši. Jednodušší příklad může vypadat i takto. Prostě nakreslete dva čtverce v jedné vrstvě, které ovšem neanimujte a položte přes ně v nové vrstvě obdélník (měl by mít jinou barvu než čtverce), který klasicky pomocí Create motion tween zanimujte. Na prvnímu snímku nastavte Alpha 100%, zatímco na posledním 0%. To je všechno.

Rotace a zkosení

Polohu objektu můžete měnit jednak jejich souřadnicemi, ale také například jejich rotací. Pokud chcete objekt otočit, jděte do Windows → transform a zde můžete objektům nastavit přesnou rotaci či zkosení. Jestli byste radši zadávali rotaci či zkosení ručně, klikněte na objekt a použijte Modify → transform → rotate and skew.

Můžete tak vytvořit jednoduchou animaci otáčejícího se čtverce. Vytvořte klasickou animaci a na posledním snímku nastavte rotaci tak 87 stupňů. Proč ne 90 stupňů? Protože každá animace, když dorazí na poslední snímek, přeskočí zpět na první. Jenže na prvním snímku má čtverec rotaci 0 stupňů, což se ale rovná rotaci 90 stupňů (je to čtverec), tudíž by čtverec měl na dvou snímcích (první a poslední) stejnou rotaci a vypadalo by to špatně, jelikož čtverec by se vždy na chvíli zastavil.

Více vrstev

Jak jsem již říkal, jednotlivé vrstvy mají svou vlastní časovou osu, tudíž jsou na sebe nezávislé. Vytvořte si druhou vrstvu, něco zde nakreslete a zanimujte. Uvidíte, že oba objekty se pohybují nezávisle na sobě.

Pokud chcete, aby se například objekt ve druhé vrstvě objevil až po chvíli, prostě táhnutím přesuňte klíčový snímek z prvního snímku na jiný. Pokud chcete, aby nějaký objekt byl ve scéně, ale nehýbal se, nevkládejte "Create motion tween", ale pouze někam vložte nový snímek. Vrstva pak bude celá šedá.

Dávejte si pozor na to, abyste měli v každé vrstvě pouze jeden objekt. Program Flash neumožňuje zvlášť animovat dva objekty v jedné vrstvě. Bude oba objekty vnímat jako jeden.
další téma - Maska

hlavní stránka # o tento web se stará Lukáš Havrlant # lukas.havrlant@gmail.com