V²uka Flash (5.)

Animace

V dneÜnφ Φßsti serißlu si ukß₧eme dalÜφ typ animace (Shape Tweeing) a ukß₧eme si, co je to animace masek.


Tweening Shapes

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∞.

Animace obrysu

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∞.

Animace obrysu

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.

Animace obrysu

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∞.

Animace obrysu
Klikn∞te pro zv∞tÜenφ

Cel² pr∙b∞h animace by m∞l vypadat nßsledovn∞ (pro ukßzku jsem ponechal pouze obrysy).

Animace obrysu

Cel² p°φklad si m∙₧ete stßhnout zde.


Shape hints - pomocnΘ body

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.

Shape Hint

Toto koleΦko p°esu≥te do levΘho dolnφho rohu pφsmene H (body se automaticky p°ichycujφ k roh∙m).

Shape Hint

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φ".


Maska (animace masek)

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).

Maska

Do tΘto novΘ vrstvy nakreslete pomocφ nßstroje Oval Tool (O) kruh. Barva kruhu nehraje roli.

Animace obrysu
Klikn∞te pro zv∞tÜenφ

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∞.

Animace obrysu
Klikn∞te pro zv∞tÜenφ

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.


Shrnutφ

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.

Petr Rympler