Jak docílit plynulé animace ve formátu Flash - Grafika.cz - vše o počítačové grafice

Navigace:  » Úvodní stránka  » Rubriky  » Webdesign  

30. srpna 2001, 00.00 | Dnešní pokračování seriálu „Skriptování pro středně pokročilé“ je určeno i pro mírně pokročilé a začátečníky. Je zaměřeno na některé důležité zásady, při jejichž dodržení dosáhnete skutečně krásně plynulých a hladce běžících animací.

Dnešní pokračování seriálu „Skriptování pro středně pokročilé“ je určeno i pro mírně pokročilé a začátečníky. Je zaměřeno na některé důležité zásady, při jejichž dodržení dosáhnete skutečně krásně plynulých a hladce běžících animací.

Předem je nutné objasnit si jednu základní věc. Flash nevytváří animace spojitě, ale pracuje s jednotlivými snímky.

Je to podobné jako u animovaného filmu: Flash animace je složená z jednotlivých políček, které obsahují jednotlivé fáze pohybu. A to i v případě, že pracujete s tween animací nebo je pohyb řízen pomocí Action Scriptu. Flash prostě rozpočítá každý pohyb na odpovídající počet políček a ty potom promítne na obrazovku.

A zde je jeden z důležitých momentů, který ovlivňuje kvalitu Flash animace a její plynulost: čím více políček za vteřinu nadefinujete, tím plynulejší a hladší pohyb uvidíte.

Jenomže, jak správně předpokládáte :o)), všechno má svá „ale“. Čím větší počet políček za vteřinu musí Flash přepočítat, tím větší jsou nároky na výpočetní výkon počítače. A pokud Flash nestihne propočítávat požadovaný počet políček, AUTOMATICKY sníží rychlost animace a ta sebou začne cukat. Narozdíl od animačních programů nebo programů pro digitální stříhání videa Flash nemůže předem vyrenderovat obsah obrazovky a uživateli následně spustit hotový soubor, Flash jako spustitelný soubor musí renderovat v reálném čase.

Nejprve pro ty, kteří s Flashem začínají, připomeňme, jakým způsobem lze nastavit počet políček, která Flash bude za 1 vteřinu přehrávat (a dopočítávat). Tento parametr se nazývá „Frame Rate“ a je udáván v jednotkách „fps“ (frames per second, tedy „počet snímků za jednu vteřinu“). Nastavíte jej v menu Modify:Movie:MovieProperties.

Flash má implicitně při instalaci nastaveno 12 fps. To je samozřejmě velmi málo. Ideální hodnota se pohybuje okolo 20 – 25 fps, ale jsou nadšenci, kteří vytvářejí fantasticky rychlé a plynulé animace s použitím 60 fps.

Avšak jak jsem psal, pokud Flash nestihne dopočítávat jednotlivé snímky, automaticky sníží Frame Rate klidně třeba na 6 fps a pak je animace neshlédnutelná a už se ani nepodobá animaci.

A rychlost, s kterou Flash propočítává jednotlivé snímky, je velmi závislá na výkonu procesoru uživatele.

Aby běhala animace plynule i na střední třídě PC, musíte dodržet několik důležitých zásad. Podívejme se na ně.

I pro tento tutorial jsem pro vás připravil ukázkový soubor, který si můžete stáhnout zde. Tentokrát nás ani nebudou zajímat použité skripty (které jsou ostatně velmi jednoduché), nejsou pro řešení našeho problému důležité, protože popsané zásady platí i pro tween animace a jiné typy skriptových animací.

„Uživatelské rozhraní“ ukázkového souboru je velmi jednoduché, ve spodní části najdete navigační lištu, pomocí které listujete jednotlivými stránkami, v horní části najdete textové okno, ve kterém se průběžně objevují hodnoty Frame Rate. Snížený Frame Rate = samozřejmě horší kvalita animace.

Připraveni? Máte stažený ukázkový soubor? Tak jej spusťte pomocí CTRL + Enter. Soubor má nastavený Frame Rate na 25 fps. To je hodnota, při které se dá vytvořit pěkný plynulý pohyb i na středně výkonných PC.

Tak, a můžeme přejít k první a nejdůležitější zásadě (která je problémem většiny začínajících a mírně pokročilých flešařů):

1) Čím větší je plocha, kterou animujete, tím méně je plynulá animace.

Podívejte se na příklad na straně 1 ukázkového souboru. Modrý objekt se plynule otáčí a zároveň zvětšuje nebo zmenšuje. Při relativně malé ploše objektu je animace plynulá a pole v horní části obrazovky by mělo ukazovat hodnoty okolo 25 fps.

Ale OOUHAAA! Jakmile animovaná plocha překročí určitou mez, animace začne výrazně drhnout a Frame Rate se výrazně zmenší, i na mém poměrně výkonném stroji na cca 8 fps. A při této hodnotě už nelze hovořit o animaci, ale spíše o přehrávání statických obrázků.

Co to znamená pro vás v praxi? VŽDY se snažte animovat co nejmenší část obrazovky, rozdělte animaci do více fází, které budou na sebe navazovat. A to platí nejen pro případ, kdy se animuje jeden velký objekt, ale i tehdy, když pokryjete obrazovku větším počtem malých pohybujících se objektů.

Příklad: budete chtít vytvořit animaci padajících jablek a člověka, který je sbírá a jí. Pokud necháte zároveň padat jablka a současně s tím je bude postava sbírat a jíst, animace bude drhnout. Problém vyřešíte tím, že necháte spadnout jablko, zastavíte animaci pádu jablka, necháte postavu jablko sebrat a sníst a teprve POTÉ spustíte další padající jablko).

2) Čím více jsou animované objekty od sebe vzdálené, tím větší jsou nároky na výpočetní výkon

Je kupodivu, že tato zásada není příliš známá a s jejím porušením se setkávám i na jinak profesionálně postavených stránkách a animacích.

Podívejme se, jak problém vypadá. Na stránce 2 najdete čtyři rotující objekty, umístěné blízko sebe. Hodnota fps by se měla pohybovat okolo 25.

Tak, a teď si přejděte na stranu 3. Zde jsou TYTÉŽ objekty vykonávající TENTÝŽ pohyb, objekty jsou pouze přesunuté do rohů: a hodnota fps rapidně poklesla (na mém počítači z 25 na cca 11).

Jak vidíte, není důležitá jen plocha, která je animována, ale také prázdný prostor, který je ohraničen animovanými předměty. Je to sice absurdní, ale je to tak.

Nyní se podívejte na stranu 4. Zde najdete všechny čtyři objekty rozmístěné v jedné vodorovné linii. Animace je podstatně plynulejší, na silnějších strojích ukazuje plných 25 fps. Stejného výsledku dosáhnete i při umístění do svislého pruhu. Důležitá je plocha, ohraničená objekty.

Takže v praxi: stavte plochy souběžných animací ve vodorovných nebo svislých pásech tak, aby byl daný pás co nejužší.

3) Není důležitá jen plocha, kterou animujete, ale také její obsah.

To je další taková finta, kterou stále ještě leckdo nezná. Většina středně i mírně pokročilých flešařů ví, že čím větší plocha, tím více animace drhne.

Ale ne každý si všimnul toho, že čím složitější objekt musí Flash animovat, tím je proces výpočetně náročnější.

Podívejte se na rozdíl mezi stranami 4 a 5 v ukázkovém souboru. Animované plochy jsou zcela stejné, rozdíl je v tom, že na straně 5 jsou animované objekty složitější.

Já jsem ve své ukázce přidal vektorové body tím, že jsem několikrát (dostkrát :o)) nakopíroval do objektu text. Flash je nucen přepočítávat mnohem větší množství vektorů a musí poměrně dramaticky snížit hodnotu fps.

Z toho plyne pro vaši praxi: snažte se animovat co nejjednodušší tvary, pokud to bude možné, vyhýbejte se animacím textů, které Flash interpretuje jako vektorové objekty s množstvím uzlů.

Konec konců, animovaný text téměř nikdy nedopadne moc dobře, pokud nepoužijete některé „finty“, jako například „nelineární pohyb“ (viz můj předchozí tutorial zde) nebo jiný princip, který odstraní nepřirozeně vyhlížející překreslování textových objektů.

Podívejte se na stranu 6. Na alespoň průměrných PC musí animace běžet na plných 25 fps, ale pohybující se text stejně působí dojmem, jako by cukal.

4) Skutečným vrahem výpočetního výkonu jsou efekty průsvitnosti.

Efekty, využívající alfa kanál (tedy průhlednost), jsou opravdu působivé.

Ovšem ve chvíli, kdy Flash musí přepočítávat interakce objektů s průhledností, je zle. Podívejte se na stránku 7. Animace zde neběží nijak extra plynule (na mém stroji kolísá mezi 23 a 25 fps), ale je to snesitelné....

... a teď se podívejte na stranu 8. Můžete říct jéééé a fůůůůj najednou. Ano, stejná scéna, s použitými průhlednostmi má větší optickou hloubku... ale rychlost animace klesla téměř na polovinu.

V tomto případě je výpočetní výkon „vysosán“ dvojnásobně: jsou zde použity dva objekty, které mají modifikovaný alfa kanál, přičemž modrý obdélník překrývá rotující objekt.

Pro praxi tedy pamatovat: pokud budete objekt animovat, snažte se mít jej bez efektu průhlednosti. Pokud už je nezbytně nutné, aby měl objekt průhlednost, snažte se, aby se nepohyboval přes další útvar s průhledností. A snažte se nikdy nepřekrývat pohybující se objekt jiným průhledným.

5) Bitmapy do Flashe nepatří, a když už, tak opatrně

Největší předností Flashe je to, že jde o vektorově orientovaný program. Nekazte si tuto výhodu.

Připomeňme si v kostce, jakou výhodu nám vektorová orientace Flashe přináší. Každý objekt je popsán jako křivka, určená vektorem. Každý vektor má jen dva údaje: velikost a směr. Jde tedy jen o DVĚ hodnoty.

Oproti tomu bitmapa je složená z jednotlivých bodů (pixelů) a každý pixel má svojí barevnou hodnotu.

Když uvedu hodně zjednodušený příklad, představte se čtverec o velikosti 200 x 200 pixelů. Ve vektorovém popisu bude definován 16 hodnotami. Jako bitmapa bude mít 40 000 pixelů (a stejně tolik hodnot). Další kouzlo je v tom, že zvětšíme-li čtverec na 400 x 400 pixelů, bude ve vektorovém formátu stále popsán je 16 hodnotami, ale jako bitmapa naroste na čtyřnásobek.

Flash bohužel v praxi používá kombinaci obou metod, a to i v případě, že používáte čistě vektorové objekty. Velmi zjednodušeně řečeno: vezme vektorové objekty a z nich vyrenderuje odpovídající bitmapy.

Protože však nemusí renderovat z velkého množství údajů, obsaženého v bitmapě, a je schopen použít jako vstupní data jednoduchý vektorový popis, je jasné, že animace vektorů bude jednoznačně méně náročná na výpočetní výkon a tedy výrazně plynulejší.

Jasně, můžete říct. Ale je tu zase ještě jedno drobné „ale“. POZOR! Flash zpomaluje i v případě, že je bitmapa použitá jako statický podklad, tedy bez animace!.

Podívejte se na stránku 9 v ukázkovém souboru. Pakliže byla animace na straně 8 nechutně líná, co asi říct na stranu 9? A přitom jediný rozdíl je v tom, že na straně 9 je použitá v podkladu bitmapa.

V praxi tedy pamatovat: vyhýbejte se bitmapám. Nejen že zvyšují objem výsledného .swf souboru, ale celkově brzdí animaci a nedovolují Flashi využít výhod vektorové orientace. Pokud už bitmapy používáte, snažte se je neanimovat a umisťujte je mimo prostor, ve kterém se odehrávají animace jiných objektů.

6) Každý běžící Action Script brzdí animace

Musím poznamenat, že i toto je často opomíjená a méně známá zásada.

Nebudeme si nic nalhávat, Action Script ANI TROCHU nepatří k nejrychlejším programovacím jazykům. Malá databáze, napsaná v AS, se chová na trojkovém pentiu jako by běžela na 486/SX. Myslím, že zde mají vývojáři Flash ještě hodně co dohánět.

Z toho plyne ovšem jednoduchý závěr: Flash musí rozdělit svoje síly do dvou směrů: jednak počítat skripty, jednak přepočítávat snímek po snímku animace. Obojí najednou zvládá jen těžko.

Abych vás zase trochu uklidnil: skripty, které se používají pro animování objektů, z velké většiny počítač nijak nezatíží. Naopak, většina skriptových animací je rychlejší, než tween animace. Do problémů se dostanete jen v případě, že na pozadí animace probíhají nějaké složitější funkce nebo výpočty.

Ovšem často se objevuje jeden typ problému. Jsou to onClipEvent(enterFrame) handlery.

Příklad:

       onClipEvent (enterFrame) {
                if (this._x < 500) {
                this._x += 10
                }
        }

sice opravdu dopraví objekt pouze do bodu 500, takže animace se ukončí, ale POZOR!, skript běží stále dál a pořád dokolečka, jen vyhodnotí logickou podmínku a neprovede posun objektu.

To ovšem v praxi znamená, že tento (sice nepohybující se) objekt neustále ukusuje z výpočetního výkonu procesoru. Při pár takových objektech dokáže ujíst už natolik dost, že animace začne škubat.

Podívejte se na takový případ na stranách 11 a 12. Na stránce 11 ukázkového souboru horní dva objekty neosahují žádný skript. Animace jakž takž jede. Na straně 12 horní dva objekty obsahují krátké skripty (pro demostraci jsem přidal operace s textovými proměnnými). Po chvíli se sice animace objektů zastaví, ale stále pokračující skripty poměrně výrazně brzdí animaci zbývajících tří objektů.

Tedy praktický poznatek: snažte se, aby souběžně s animací běželo co nejméně skriptů, šetřete výpočetní výkon procesoru na samotné animace. onClipEvent handlery používejte jen tam, kde po ukončení pohybu objekt zcela zmizí.

No, a podle toho, že se v ukázkovém souboru už nedá kliknout na tlačítko „následující“ jistě správně usuzujete, že to je dnes vše :o))

Shrnutí:
Bojujte o každou píď plochy, kterou nemusíte animovat.
Animujte jednoduché objekty.
A vždy si uvědomujte, že výše uvedené zásady je potřeba dodržet NAJEDNOU. Většina nehezky škubajících se animací je totiž výsledkem ne jedné velké chyby, ale spousty malých chybiček. Já jsem ve svých příkladech vždycky použil jeden typ „drhnutí“, ale „běžná neplynulá animace“ :o)) je důsledkem mnoha malých zádrhelů.