Animace založené na čase (Time based animation)

V tomto příspěvku se budu
věnovat flashové animaci založené na čase. Proč? Nu, často je potřeba zajistit,
aby naše animace byla přesně načasovaná, aby její konec nastal přesně
v dobu kdy má. Často potřebujeme synchronizovat animace s dalšími
prvky, třebas videem . Dokážete si představit, že by animace vteřinové ručičky
trvala 70 vteřin a né 60? Byla by to jistě krásná představa, kdyby minuta
trvala 70 vteřin. Nicméně má jen 60. Jak zajistit, aby ručička v animaci
oběhla ciferník přesně za 60 vteřin? Někdo to řeší pomocí nastavení fps, ale to
není příliš schůdná cesta, představíme-li si, že nastavenou vyšší hodnotu fps
animace málokdy dosáhne. Někdy prostě zobrazení jednoho snímku trvá déle než
1/fps vteřiny. Komplikací muže být „pomalý“ počítač, náročná grafická operace
atd. atd. Zkuste si někdy ve flashi vložit několik poloprůhledných objektů přes
sebe a různě je animovat. Zjistíte, že pokud si nastavíte třebas hodnotu 100
fps, tak animace „trvající“ 100 framů nebude trvat přesně 1 vteřinu. Flash je
nástroj založený na tvorbě animace po snímcích tzv. „frame based animation“.
Naštěstí pomocí ActionScriptu lze tuto skutečnost změnit a animovat
v závislosti na čase. Pojďme se podívat jak?

V našem příkladu vytvoříme
pomyslnou vteřinovou ručičku, která oběhne ciferník hodinek za jednu minutu.
Docílíme toho tak ,že budeme v každém framu kontrolovat čas, který uběhl
od začátku animace a výpočtem zjistíme , kde se má právě naše ručička nacházet
a tam ji také zobrazíme. Výhodou je, že ručička skutečně oběhne ciferník za 1
minutu. Na druhou stranu každá sranda něco stojí a každá mince má i rub.
V našem případě to je fakt, že na „pomalém“ počítači se naše ručička
nemusí zobrazit na každé poloze ciferníku. Prostě pokud zobrazení některého
snímku bude trvat déle, tak v následujícím snímku se čas dožene tím, že se
ručička posune dále. Teoreticky na „rychlém“ počítači naše ručička bude tikat
každou vteřinu, ale na „pomalém“ se muže zobrazit jen v polohách např.
1/4, 1/2 , 3/4, 1 .

image001Napřed si připravíme ciferník.
Můžete si nakreslit jaký chcete nebo můžete vložit obrázek hodinek. Vložíme jej
do vrstvy, kterou pojmenujeme ciferník. Dále si vytvoříme novou vrstvu do které
za malou chvilku vložíme ručičku a pojmenujeme ji ručička. Vše by mělo vypadat
přibližně ,jako na obrázku výše.

image002Nyní si vytvořte nový movieclip a
pojmenujte ho ručička. Uvnitř tohoto klipu nakreslete čáru, která bude
představovat naši ručičku. Její spodní konec umístěte do středu movieclipu, tak
jak je znázorněno na obrázku výše.

image003Nyní vložte do vrstvy pojmenované
ručička náš movieclip ručička, tak aby spodní okraj ručičky zasahoval do středu
ciferníku (viz. obrázek). Označte instanci klipu ručička a přejděte do okna
ActionScriptu klávesou F9.

image004

Zde vložte skript, který je
uveden na obrázku. Tento skript nám rotuje s movieclipem ručička, přičemž
každou vteřinu pootočí ručičkou o 6 stupňů. Hodnota 1000 je ve výpočtu jen
proto, že funkce getTimer vrací hodnotu v milisekundách, tak musíme tuto
hodnotu upravit na sekundy. No a časový interval je dán rozdílem času před a po
zobrazení dvou po sobě jdoucích snímků.

Tolik ActionScriptu. Nyní si
můžete naši animaci vyzkoušet. Zkuste nejdříve hodnotu frame rate nastavit na 1
fps a spustit animaci. Poté vyzkoušejte animaci s nastavenou hodnotou
frame rate např. 60 fps. V obou případech naše animace bude trvat minutu,
jen plynulost pohybu bude rozdílná.