V dnešní části seriálu si ukážeme další typ animace (Shape Tweeing) a ukážeme si, co je to animace masek.
Animace tvaru - jedná se o techniku změny tvaru obrysů. Pomocí této techniky můžeme dosáhnout změny (přeměny) tvaru jednoho objektu (například textu) do tvaru jiného. Vše si ukážeme na příkladě, kdy změníme slovo CHIP na slovo KLIP.
Vytvořte si nový dokument (CTRL+N). Doprostřed klipu vložte pomocí nástroje Text Tool (T) (velikost a barvu nechám na vašem uvážení) slovo CHIP. Vše by mělo vypadat následovně.
Nyní na tento text (objekt) klikněte pravým tlačítkem myši a zvolte volbu Break Apart (CTRL + B) - tato volba je důležitá, protože musíme text jako takový převést na křivky. Následně se přesuňte do patnáctého snímku hlavní časové osy a stiskněte klávesu F6. V tomto okamžiku upravíme poslední snímek tak, že vybereme nástroj Text Tool a upravíme standartním postupem první písmeno C za písmeno K a písmeno H za písmeno L. Vše by mělo vypadat následovně.
Nyní vyberte všechny objekty (písmena) v prvním snímku časové osy a opět zvolte klávesovou zkratku CTRL + B. Tuto akci aplikujte i v posledním snímku časové osy. Vše by mělo vypadat jako na obrázku.
Animaci dokončíme vybráním všech snímků hlavní vrstvy (jedno kliknutí na název vrstvy) a v panelu Properties vybráním položky Tween na Shape. Volba Ease v panelu Properties určuje rychlost rozjezdu animace. Volba Blend má dvě možnosti:
Vše by mělo vypadat následovně.
Celý průběh animace by měl vypadat následovně (pro ukázku jsem ponechal pouze obrysy).
Celý příklad si můžete stáhnout zde.
Při vytváření animace typu Shape nám mohou vzniknout problémy, když se některá část objektu mění nekorektním způsobem (například přeměna písmen není výrazná - plynulá). V tomto případě můžeme použít tzv. Shape hints (pomocné body), které nám umožňují koordinovat tvar animace v prvním a v posledním snímku. Vše si pro vysvětlení ukážeme na příkladě. Pro tuto ukázku použijeme již vytvořenou animaci z předešlého příkladu. Již v této animaci si můžete všimnout nedokonalé transformace (levý dolní roh) písmene H na písmeno L. Na začátku a konci této transformace zůstávají rohy na stejném místě, avšak Flash tuto skutečnost v průběhu animace nedodrží.
Přesuňte se na první snímek časové osy (hlavní vrstvy) a zvolte Modify -> Shape -> Add Shape Hint (CTRL+SHIFT+H). Uprostřed objektu (textu) by se mělo zobrazit malé červené kolečko s písmenem a.
Toto kolečko přesuňte do levého dolního rohu písmene H (body se automaticky přichycují k rohům).
Toto samé proveďte i s písmenem L v posledním snímku časové osy. Bod by měl automaticky změnit svou barvu na zelenou a bod v prvním snímku na žlutou.
Pomocných bodů můžeme samozřejmě vložit více. Pokud již máte vloženo více pomocných bodů, můžete si scénu zpřehlednit pomocí volby View -> Show Shape Hints (CTRL+ALT+H), která body "zneviditelní".
Pomocí masky můžeme dosáhnout mnoha efektů, které využívají schopnosti průhlednosti ostatních vrstev. Vše si ukážeme v praxi. Následující příklad bude využívat masky, která bude připomínat pohybující se kolo.
Otevřete si nový dokument (CTRL+N) a zvolte File -> Import.... Zobrazí se dialogové okno, pomocí kterého vyberte nějaký obrázek. Pro tuto ukázku jsem zvolil obrázek auta, který naleznete zde. Po potvrzení dialogového okna by se měl obrázek zobrazit na první (hlavní) vrstvě. Nyní vložte druhou vrstvu, ve které bude vložena maska (tato vrstva musí být umístěna nad vrstvou s obrázkem).
Do této nové vrstvy nakreslete pomocí nástroje Oval Tool (O) kruh. Barva kruhu nehraje roli.
Nyní vyberte patnáctý snímek časové osy vrstvy s obrázkem a stiskněte klávesu F6. Následně se přepněte do vrstvy s maskou a opět v patnáctém snímku stikněte klávesu F6. Tento snímek (patnáctý snímek vrstvy s maskou) posuňte doprava (uvedeme tak pomocí animace kruh do pohybu). Nyní vyberte všechny snímky vrstvy s kruhem (budoucí maskou) v panele Properties zvolte Tween -> Shape. Vše by mělo vypadat následovně.
K dokončení nám zbývá jenom kliknout na vrstvu s maskou pravým tlačítkem myši a zvolit Mask. Vrstva s obrázkem se automaticky posune doprava a bude typem Masked. Celý příklad si můžete stáhnout zde.
Pod vrstvu s maskou můžeme vložit více než jednu vrstvu, můžeme tak vytvořit komplexní klipy.
V dnešním díle jsme si ukázali, co je to Shape Tweening a způsob manipulace s transformací pomocí tzv. Shape Hints. Ukázali jsme si také, co je to maska a na příkladech jste si mohli vyzkoušet animaci masky.
Pro tento díl to bude vše. V příštím díle začneme rozsáhlý celek - ActionScript.
