Flash tiptrik – animovaný preloader
24.9.2007· Autor: Ondřej Brichta·
Počet komentářů: 7
Ukazatel(preloader) stavu načtení animací nebo prezentací patří do každé online aplikace. Dnes si představíme jednu z jeho variant, kdy vytvoříme animaci postupného zvyšování hladiny vody v nádobě.
Animovaný preloader
Preloader je součást veškerých flashových prezentací (dokonce by měl být i v offline verzích), ale ne vždy se spokojíme s prostým zobrazením postupně se zvětšujícího obdélníku, který zobrazuje stav načtení. Vylepšením preloaderu pak může být zobrazení postupného zvyšování hladiny v nádobě.
Tvorba preloaderu
Nejprve si připravíme animaci zvlněné hladiny, kterou umístíme o samostatného MovieClipu
a použijeme například ShapeTween animaci:
která simuluje pohyb vodní hladiny
Dalším krokem bude příprava MovieClipu,
ve kterém se bude postupně „naplňovat" nádoba tekutinou. Toto naplňování vytvoříme jako jednoduchou MotionTween animaci, ve kterém se MovieClip s animací vodní hladiny postupně posunuje vzhůru. Abychom měli usnadněné ovládání připravené MotionTween animace, bude délka celého posuvu 100 snímků (podle procenta načtení celé animace budeme přesouvat MovieClip na jednotlivé snímky.
Protože chceme, aby byla vidět jenom část „napouštění" tekutiny, musíme vrstvu s MotionTween animací umístit pod masku. Nakonec připravíme další vrstvu, do které umístíme poloprůhlednou grafiku samotné nádoby:
Nesmíme zapomenout vložit do prvního snímku tohoto MovieClipu příkaz stop(); kterým zastavíme MotionTween animaci pod maskou na první pozici a připravíme jí tak pro vládání ActionScriptem.
Posledním krokem je vložení celého MovieClipu s animovaným posuvem hladiny do prvního hlavní časové osy. V prvním snímku opět vložíme příkaz stop(), abychom vyčkali načtení celého SWF souboru a na vložený MovieClip s animací připojíme jednoduchý skript:
onClipEvent (enterFrame) {
procenta = Math.ceil(100*(_root.getBytesLoaded()/_root.getBytesTotal()));
this.gotoAndStop(procenta);
if (_root.getBytesLoaded() == _root.getBytesTotal()) {
_root.gotoAndStop(2);
}
}
Tento skript v EnterFrame události sleduje pomocí metody _root.getBytesLoaded(vrací počet načtených dat souboru) a metody _root.getBytesTotal(vrací celkovou velikost SWF souboru) celkový stav načtení v procentech. Tuto hodnotu díky metodě Math.ceil zaokrouhlíme na celé číslo směrem nahoru, takže budeme dostávat hodnoty 1,2,3 ...98,99,100, které tak představují celkový stav načtení SWF souboru.
Zdei si vzpomeneme na délku MotionTween animace, která byla na 100 snímcích, kde jsme si řekli, že je uvedená délka vhodná pro ovládání pomocí ActionScriptu. Můžeme se totiž přímo pomocí metody gotoAndStop() přesunout na snímek, jehož číslo je shodné s hodnotou načtených procent, nemusíme proto provádět další převody.
Samotný skript pak musí obsahovat kontrolu a porovnání hodnoty načtených dat s celkovou velikostí SWF souboru, abychom mohli při kompletním načtení přesunout animaci na hlavní časové ose na snímek číslo 2.
Zdrojové soubory jsou k dispozici zde: pre.zip
Ondřej Brichta Vývojář multimediálních aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server
Web:
http://www.obria.cz
|
Motto: <°))))><
Seriál:
Tipy a triky
Tipy a triky je seriál zaměřený na zajímavá řešení a vylepšení flashových aplikací