Tipy a triky pro animace ve Flash 5 - Grafika.cz - vše o počítačové grafice

Macromedia Flash tutoriál žlutý yellow

Macromedia Flash tutoriál žlutý yellow

7. září 2001, 00.00 | Toto pokračování seriálu "Skriptování pro středně pokročilé" vzniklo na vaše přání a je určeno i pro mírně pokročilé a začátečníky. Najdete zde základní přehled animací, řízených pomocí Action Scriptu a spousty různých drobných "fint", díky kterým můžou vaše animace vypadat nápaditě a profesionálně.

Ze všeho nejdřív si popišme základní fakta: Flash umí principiálně dva typy animací: ty, které jsou vytvářeny pomocí grafického rozhraní (tween, shape a frame-by-frame) a ty, které jsou řízeny pomocí skriptů.

Nedá se jednoznačně říct, že jeden z těchto typů je lepší. Jsou v mnoha věcech odlišné. Dá se však jednoznačně říct, v čem jsou animace, řízené pomocí skriptů, lepší:

1. prakticky vůbec nezvětšují velikost výsledného .swf souboru
2. většinou jsou rychlejší
3. umožňují mít lepší přehled nad projektem, který pak může mít místo sáhodlouhých timelin doslova a do písmene několik jednoduchých snímků
4. možnosti pro vytváření pohybu jsou mnohem širší
5. ... a když proniknete do tajemství animačních skriptů, je vytváření animací jednodušší a zabere mnohem méně času

Když to posoudím ze své praxe, mohu říct, že téměř všechny animace vytvářím pomocí skriptů a podívám-li se na okolní svět, zjišťuji, že je na tom podobně. Prostě a krátce řečeno, při troše praxe vypadají skriptové animace lépe a navíc ušetříte spoustu času, který byste strávili nad postrkováním objektů snímek po snímku. Samozřejmě ne všechny animace se však dají vyrobit pomocí skriptů...

Tak, a honem rychle od teorie k praxi. Připravil jsem pro vás soubor, který obsahuje několik příkladů skriptových animací. Můžete si jej stáhnout zde. Otevřete si soubor, spusťte si jej a podívejte se na ukázku na první stránce.

1. Jednoduchý pohyb po přímce
Po stisknutí tlačítka "start" se modrý čtverec vydá na cestu a ve chvíli, kdy dorazí na koncový bod u okraje obrazovky, se zastaví. To je v podstatě nejjednodušší příklad pohybu, řízeného pomocí skriptu. A na něm by si i zcela čerství fleší zelenáči měli procvičit zásady jednoduchého řídícího skriptu. A i ti pokročilejší zde mohou najít některé nové podněty.

Otevřete si dvojklikem klip "ctverec". Podívejte se, jak je postaven. Ve spodní vrstvě je umístěná kresba čtverce, o tu se zajímat nebudeme. Horní vrstva je pro nás mnohem zajímavější: najdete zde čtyři snímky s řídícími skripty. Vrhněme se nejdřív na ten první:

startX = 20
startY = 200

endX = 780
endY = 300

koef = 100

speedX = (endX - startX)/koef
speedY = (endY - startY)/koef

this._x = startX
this._y = startY

stop()

Jde o takzvanou inicializaci neboli nastavení startovních hodnot. Proměnné "startX" a "startY" udávají souřadnice, ze kterých klip startuje svůj pohyb, obdobně "endX" a "endY" udávají souřadnice, do kterých klip na konci svého pohybu dorazí.

Další proměnná "koef" reguluje rychlost pohybu. Zkusmo změňte její hodnotu od 1 do 100 a otestujte, jak se mění pohyb klipu. Můžete si také zaexperimentovat se souřadnicemi startu a konce pohybu.

Jakým způsobem vstupuje proměnná "koef" (nechtělo si mi psát celé slovo "koeficient" :o)) do hry? Řádky, které definují "speedX" a "speedY", jsou vlastně skripty, které doslovně definují, jakou rychlostí vzhledem k osám X a Y se bude klip pohybovat. A tato rychlost je spočítána zcela jednoduše: vezměte celou dráhu, kterou má klip urazit a rozdělte je na jednotlivé dílky. Tyto dílky představují dráhu, o kterou se klip bude každý snímek pohybovat. Čím více dílků bude, tím budou dílky kratší a tím bude pohyb logicky pomalejší.

Příklad: ve směru osy X má klip urazit vzdálenost od bodu 50 do bodu 120. Tedy 70 bodů. Proměnnou "koef" nastavím na hodnotu 10. Znamená to, že rychlost klipu ve směru osy X bude 70/10 neboli 7 bodů za jeden snímek.

Výhodou tohoto principu počítání rychlosti je to, že klip má automaticky sladěné rychlosti v obou osách a jeho pohyb je skutečně pohybem po ideální přímce.

Poslední dva řádky skriptu nastaví pozici klipu na startovní bod a pohyb může začít. Závěrečné stop() nám zajistí, že klip počká na stisknutí startovního tlačítka. Podívejme se na druhý frame co se stane poté:

if (this._x < endX) {
this._x += speedX
this._y += speedY
play()
} else {
gotoAndPlay(4)
}

Toto je skript, který pohybuje klipem. Celý je postaven jako smyčka, řízená podmínkou. Pokud je podmínka splněná, skript posune objekt a pokračuje dál, pokud ne, skript je ukončen.

V našem případě první část skriptu říká: "pokud klip ve směru osy X ještě nedorazil do koncového bodu, posuň jeho souřadnice o hodnotu rychlosti". Druhá část říká "pokud nebyla splněna předchozí podmínka (tedy již klip dorazil do koncového bodu), běž na poslední frame (kde je ukončení skriptu)."

Třetí frame je prakticky stejný jako druhý, jediný rozdíl je v tom, že zatímco druhý frame pomocí play() odešle skript na třetí frame, tak třetí frame posílá skript pomocí gotoAndPlay(2) na frame druhý (tedy vše se pohybuje ve smyčce).

Poslední čtvrtý frame obsahuje to, čemu říkám "aretace":

this._x = endX
this._y = endY
stop()

V našem případě není nutná. Skript zde totiž ukončí celý pohyb tím, že načte koncové hodnoty, které jsme pro pozici klipu nadefinovali, a "natvrdo" klip umístí na tyto souřadnice. Zde to není důležité, ale u pohybů, které používají měnící se rychlost, to důležité může být, a to proto, abychom měli jistotu, že klip dorazí přesně do koncového bodu, ne kousek před nebo za koncový bod.

Tak, jak vidíte, tak tento jednoduchý příklad pohybu ani moc nebolel a stejně jednoduché to bude i u dalších příkladů.

2. Řízení polohy klipu pomocí "přepínače"
Ti zkušenější z vás se jistě setkali s tzv. "handlerovými" skripty. O co jde?

Základní typ skriptu je přiřazen k určitému snímku. A do tohoto snímku se také píše. Existuje však ještě další možnost: přiřadit skript objektu. Pokud ale skript vlastně "volně leží" na objektu a není definován žádnými snímky, jak má vlastně poznat kdy se má spustit, jak dlouho má běžet a kdy se zastavit?

K tomu slouží tzv. handlery neboli, jak říkám já, "přepínače". Handler čeká na splnění určité podmínky a ve chvíli, kdy je splněná, spustí skript, který za handlerem následuje.

Základními typy handlerů jsou tyto:

onClipEvent (load) {
//provede skript ve chvíli, kdy se klip načte
}

onClipEvent (enterFrame) {
//provede skript každý snímek běhu klipu
}

onClipEvent (mouseMove) {
//provede skript ve chvíli, kdy uživatel pohne myší
}

onClipEvent (mouseDown) {
//provede skript ve chvíli, kdy je stisknuto levé tlačítko myši
//obdobně funguje pro mouseUp
}

onClipEvent (keyDown) {
//provede skript ve chvíli, kdy je stisknutá libovolná klávesa
//obdobně funguje pro keyUp
}

Jak již bylo naznačeno, tento typ skriptu se nezapisuje do snímku (frame), ale píše se přímo na objekt. Podívejme se na ukázku na straně 2 ukázkového souboru.

Klikněte si na modrý čtverec. V okně akce se vám objeví následující skripty:

onClipEvent (load) {
startX = 200
startY = 200
endX = 500
endY = 300
krokX = 20
krokY = 10
this._x = startX
this._y = startY
}

onClipEvent (enterFrame) {
if (this.nastartuj) {
this.nastartuj = false
this._x = startX
this._y = startY
}
this._x < endX ? this._x += krokX : this._x = endX
this._y < endY ? this._y += krokY : this._y = endY
}

První část skriptu, uvozená přepínačem onClipEvent(load) se provede při načtení klipu, tedy při startu animace. Je prakticky stejná jako startovní frame u ukázky číslo 1.

Druhá část je velice podobná snímkům 2 a 3 v ukázce číslo 1. Jsou zde však použité dvě drobné "vychytávky", které umožňují efektivnější řízení skriptu.

První z nich je použití logické (booleanské) proměnné "nastartuj". K čemu je dobrá? Přepínač onClipEvent(enterFrame) má jednu nevýhodu: běží pořád dokola a tvoří vlastně nekonečnou smyčku. Abychom mohli ovládat čas startu klipu, použijeme proměnnou "nastartuj" takto: pokud je tato proměnná "true", tedy "pravda", přesuň klip na startovní pozici (a pak už se bude klip pohybovat dál pomocí dalšího skriptu). Hodnotu "true" nastavuje oranžové tlačítko "start". Aby se klip neustále ve smyčce nevracel na startovní pozici, musíme ihned jako první krok nastavit proměnnou "nastartovat" na "false" a tím zakázat provádění přesunu klipu na startovní pozici.

Druhá vychytávka je použití tzv. conditionalu. Podívejte se na tento řádek:

this._x < endX ? this._x += krokX : this._x = endX

Conditional vlastně nahrazuje podmínku "if". V syntaxi nejdříve následuje podmínka (je X souřadnice tohoto klipu menší, než endX?), za otazníkem následují dvě varianty pro výběr, oddělené dvojtečkou. Pokud je podmínka splněná, provede se skript před dvojtečkou, pokud není splněná, provede se příkaz za dvojtečkou. V našem případě se tedy buď klip posune o hodnotu krokX, nebo zůstane stát na koncovém bodě endX.

Totéž se dá popsat pomocí "if" takto:

if (this._x < endX) {
this._x += krokX
} else {
this._x = endX
}

Conditional nejen ušetří vaše prstíky od psaní delšího skriptu, ale údajně je o dost rychlejší než skripty, stavěné pomocí "if". Jeho nevýhodou je fakt, že za otazníkem mohou stát pouze dvě akce, takže v případě, kdy potřebujeme více akcí za podmínkou, nelze conditional použít.

Jak jste jistě zjistili, pohyb klipu v této ukázce neprobíhá po přímce, ale po lomené čáře. Je to tím, že narozdíl od první ukázky, ve které klip dosáhne koncového bodu X za stejný čas, jako bodu Y, v ukázce 2 klip dosáhne souřadnice Y dříve a poté probíhá už jen pohyb po souřadnici X. Toho lze samozřejmě v mnoha případech naprosto cíleně využít.

Porovnáte-li si ukázky číslo 1 a 2, zjistíte, že hlavní rozdíl mezi nimi je v umístění ovládacího skriptu. Zatímco v první ukázce jsou skripty uloženy na jednotlivých snímcích, ve druhé ukázce jsou skripty napsány přímo na objekty pomocí "handleru", neboli přepínače.

Nabízí se otázka která z metod je lepší. Odpověď (jako vždy :o)) není jednoduchá. Použití handleru onClipEvent(enterFrame) má své kouzlo v tom, že celý skript je na jednom místě, v jednom okénku. Tudíž máte lepší přehled. Na druhou stranu má tento skript tu nevýhodu, že jej nelze zastavit a i když objekt stojí, skript neustále běží a počítá (a tím ukusuje z výpočetního výkonu procesoru). A že tento typ skriptu dokáže citelně přibrzdit vaší animaci se můžete přesvědčit na ukázce v mém předchozím tutorialu, který najdete zde.

3. Kombinace pohybu se změnou velikosti
K jednoduchému lineárnímu pohybu můžeme velice jednoduše přidat další animační prvek: změnu velikosti.

Podívejte se na příklad na straně 3 ukázkového souboru. Pohyb je stejný jako u ukázky číslo 1, jediné, co se změnilo, je průběžná změna velikosti objektu.

Porovnáme-li skripty z ukázek 1 a 3, přibylo nám jen pár jednoduchých řádků. Na prvním snímku jsou to tyto skripty:

startXScale = 5
startYScale = 5

endXScale = 100
endYScale = 100

Xscale = (endXScale - startXScale)/koef
Yscale = (endYScale - startYScale)/koef

this._xscale = startXScale
this._yscale = startYScale

Jde o zcela totožné operace, které jsme prováděli s X a Y souřadnicemi objektu. Pouze je tentokrát provádíme nikoliv s vlastností souřadnice (_x, _y), ale s vlastností "velikosti" (_xscale, _yscale).

Zkrátka tentýž princip, kterým jsme posouvali objekt v ukázce 1, jsme použili pro zvětšování objektu.

Stejně tak je tomu u dalších snímků. K řádkům, které zvětšují souřadnice objektu (a tím jej posunují), byly přidány řádky, které objekt průběžně zvětšují.

4. A ještě přidáme rotaci!
Pokud jste zvládli ukázky číslo 1 a 3, potřebujete k ukázce číslo 4 jen jediný krátký komentář: přidali jsme rotaci objektu. Rotace objektu je řízená pomocí vlastnosti "_rotation". Jinak zůstává princip skriptu stále stejný.

K této ukázce bych však rád doplnil ještě jeden důležitý postřeh: čím více druhů pohybů zkombinujete, tím vypadá výsledek lépe. Ale není to jenom proto, že pohyb vypadá "umělečtěji".

Porovnejte si ukázky 1, 3 a 4. Prohlédněte si je v rychlém sledu za sebou. Na ukázce 1 se objekt překresluje opticky tak nějak neplynule a trochu to "cuká". Na ukázce č. 3 je pohyb "hladší", na ukázce 4 je pohyb vizuálně "nejplynulejší". Čím to je?

Flash animuje snímek po snímku. Když objekt skočí mezi dvěma snímky o sedm bodů, je to prostě skok o sedm bodů, ne plynulý pohyb. Kombinací více pohybů se tento nedostatek vizuálně eliminuje, protože oko nevnímá skokový pohyb hran objektu tak intenzivně.

5. Pohyb ve smyčce s dalším drobným vylepšením
Abyste to neměli zas tak jednoduché :o)) a jenom jednoduše nepřidávali jen další vlastnosti objektu do už hotového skriptu, trochu si situaci zkomplikujeme: pokusíme se napsat co nejefektivnější skript pro pohyb ve smyčce (tedy "tam a zpět a celé znovu").

Nejprve si spusťte ukázku č. 5. Jak vidíte, skript jsme obohatili o průhlednost, která se mění lineárně s pohybem. Průhlednost je ovládána pomocí vlastnosti _alpha a pro její ovládání platí zcela stejná pravidla jako pro pohyb a rotaci v ukázkách 1 a 3. Přesto zde však musím uvést jedno specifikum pro vlastnost _alpha: WARNING! Flash občas neumí počítat do pěti!

Ano, je to skutečně tak. Vyzkoušejte si následující skript:

onClipEvent (load) {
this._alpha = 15
this._alpha += 12
trace (this._alpha)
}

Tedy klipu je přiřazena průhlednost 15% a k ní je přičteno dalších 12%. Každý by očekával, že výsledek bude 27%. Ale ne, Flash spočítá, že aktuální _alpha pro klip je 26.5625!

Na tuto chybu je třeba pamatovat a ve skriptech s ní počítat. I v naší ukázce bude ošetřena.

A zpátky ke skriptům. Podívejte se na první snímek klipu. Najdete zde staré známé skripty z ukázek 1 a 3, rozšířené o skript pro zvětšování vlastnosti _alpha. Ale přibyl tam také jeden důležitý řádek:

tam = 1

Tato jednoduchá proměnná nám bude řídit směr pohybu klipu. A to jednoduše tím, že bude nabývat hodnot "1" pro pohyb jedním směrem a "-1" směrem opačným.

Přejděme na druhý snímek:

if (this._x > endX || this._x < startX) {
gotoAndPlay(4)
} else {
this._x += tam*speedX
this._y += tam*speedY
this._xscale += tam*Xscale
this._yscale += tam*Yscale
this._rotation += tam*krokRotace
this._alpha += tam*speedAlpha
play()
}

První řádek s "if" podmínkou detekuje, zdali se X souřadnice objektu drží mezi hranicemi, definovanými počátečním a koncovým bodem pohybu. Pokud se objekt pohybuje mezi krajními body startX a endX, všechny vlastnosti (pohyb, velikost, rotace a průhlednost) se lineárně zvětšují.

Pokud objekt "vyjede" z definovaných mezí, skript skočí na poslední čtvrtý frame, kde se pohyb otočí. Jak je to provedeno?

tam = -tam
this._x += tam*speedX
this._y += tam*speedY
this._xscale += tam*Xscale
this._yscale += tam*Yscale
this._rotation += tam*krokRotace

tam == 1 ? this._alpha = startAlpha : this._alpha = endAlpha

gotoAndPlay(2)

Nejdříve ze všeho se obrátí směr pohybu tím, že se invertuje hodnota proměnné "tam". Poté se provede první krok pohybu opačným směrem. Kdybychom tento první krok opačným směrem neprovedli, klip by skočil na druhý snímek, ale X souřadnice klipu by stále ještě byla mimo hranice a skript by skočil na čtvrtý snímek.... a tak by se to celé zacyklilo v nekonečné smyčce, aniž by se klip někam pohnul.

Předposlední řádek skriptu přenastavuje Flashem špatně vypočtenou hodnotu _alpha. Opět je zde použit zkrácený zápis pomocí conditionalu.

6. Není rotace jako rotace!
Poslední dnešní ukázka je věnována obzvláště začínajícím flashařům. Pro ně je občas záhadou proč se objekt otáčí tak divně, ne kolem osy tak, jak potřebují, nebo naopak se jim nedaří vytvořit objekt rotující pomocí skriptu jinak, než že se otáčí okolo středu.

Problém však není ve skriptu. Problém v tzv. registračním bodu klipu. Spusťte soubor a porovnejte si rotující klipy v ukázce 6.

Mezi klipy opravdu není žádný rozdíl ve skriptu. Když si však na klipy kliknete, zjistíte, že se vám ukáže takový malý křížek. V případě levého klipu je umístěn uprostřed objektu, v případě pravého zcela mimo objekt.

Tento křížek je tzv. registrační bod a všechny skripty považují tento bod za fyzický střed klipu.

Změnit tento registrační bod je velmi jednoduché: dvojklikem otevřete klip. Registračním bodem hýbat nemůžete, ale můžete pohybovat objekty uvnitř klipu. A tím se vlastně změní poloha registračního bodu vůči objektu.

Pohrajte si s pozicí modrého čtverečku uvnitř klipu a podívejte se, jaký vliv na rotaci objektu to má.

A ještě jeden tip: pokud chcete zarovnat objekt uvnitř klipu na jeho střed, otevřete si paletku Align, klikněte na tlačítko To Stage v pravé části paletky a vše se vám bude zarovnávat vzhledem k registračnímu bodu klipu.

7. ....co vás čeká příště
Pro ty z vás, kteří bez problémů zvládli dnešní tutorial, je připravené pokračování, ve kterém probereme další varianty skriptových animaci. Jako předzvěst toho, co vás příště čeká za krásy :o), jsem vám v ukázkovém souboru nechal na stranách 7 a 8 takové malé příklady toho, co se dá velmi jednoduše pomocí skriptů zvládnout. Takže tyto dva příklady plus kupa dalších vás čekají s podrobnými komentáři v mém příštím tutorialu.

Shrnutí a závěr a definitivní slovo na konec:
Pokud jste skuteční začátečníci, raději si všechny skripty projděte důkladně s tutorialem a pak se pokuste zpaměti napsat podobný skript. Pravděpodobně se vám to napoprvé nepovede, ale nevzdávejte to, speciálně ve Flashi platí, že vlastními chybami se člověk naučí nejvíc. Takže každý skript dotáhněte až do konce.

Ve chvíli, kdy zvládnete jednoduché lineární pohyby, můžete začít experimentovat s nelineárními pohyby, které jsem popsal zde v jednom ze svých předchozích tutorialů.

A nebojte se používat pro animace skripty. Flash je ve své podstatě velmi jednoduchý prográmek, ani Action Script není obtížný jazyk a kdo zná Flash a neumí skriptovat, využívá jen velmi malou část jeho schopností.

Takže pro dnešek se loučím, všem, kterým skončily prázdniny nebo dovolená, přeju brzké a bezbolestné procitnutí do reality (mno, mě dovolená teprve čeká) a za týden nashle u pokračování tohoto tutoru!