Jak na hezká animovaná tlačítka ve FLASHi?

Poté, co většina začátečníků ve Flashi pochopí princip tvorby tlačítek, tedy, že první tři políčka odpovídají třem stavům, ve kterých se může tlačítko nacházet – Up, Over, Down – a čtvrté definuje tvar samotného tlačítka, začnou se většinou radostně domnívat, že k vytvoření animovaného tlačitka postačí navěsit na některý z těchto framů odskok na pátý frame a na něm začít zamýšlenou animaci. A následuje zklamání, neboť tento postup bohužel použít nelze. Cílem tohoto článku je popsat jediné dva postupy, kterými lze animované tlačítko vytvořit.

Vnořený Movie Clip
První postup spočívá ve vytvoření samostatného Movie Clipu, který obsahuje celou animaci, a jeho následné umístění do objektu Button na příslušný frame. Tedy například má-li tlačítko po stisknutí měnit barvu, vytvoříme Movie Clip s animací změny barvy, nastavíme se na frame „Down“ a umístíme Movie Clip do scény. Ne/výhodou tohoto postupu je,že taková animace zmizí okamžitě ve chvíli, kdy tlačítko opustí stav, na který máme animaci navěšenu, tedy např. pokud přemístíme kurzor mimo tlačítko. Výsledek může vypadat například takto:

Jak tedy na to? Vytvoříme nový Flash movie <CTRL-N>, importujeme obrázek míčku (CTRL-R) a umístíme jej do spodní části scény ve stejné vzdálenosti od levého a pravého okraje. Obrázek existuje pro Flash zatím pouze jako bitmapa a je třeba udělat z něj symbol. Klikneme tedy na kuličku a zvolíme funkci Insert/Convert to symbol <F8> a nastavíme název „TLACITKO“ a behavior (typ) „Button“.

Po nakliknutí pravým tlačítkem zvolíme Edit in place a dostaneme se do editačního modu tlačítka. Označíme druhý, třetí a čtvrtý frame (Over,Down a Hit) a zvolíme Insert/Keyframe <F6>. Tím vytvoříme klíčové snímky pro tyto framy, protože ty nám umožní vytvořit pro každý stav tlačítka jinou animaci.

Nastavíme se na frame Over a označíme kuličku – tato kulička již není tlačítko (jsme přece "uvnitř" tlačítka), ale opět pouze bitmapa, definující vzhled tlačítka. Vytvoříme z ní opět symbol <F8>, tentokrát ovšem Movie Clip s názvem třeba "HOP". Tento Movie Clip bude obsahovat animaci, která se přehraje, pokud umístíme kurzor nad tlačítko.

Zvolíme opět Edit in place a dostaneme se do editačního modu Movie Clipu "HOP". Nyní vytvoříme jednoduchou animaci, kde na framy 10 a 19 umístíme keyframe, ve frame 10 potom posuneme kuličku (opět pouze bitmapa) do horní části scény a použijeme pro framy 1 až 9 Modify/Frame <CTRL-F> a nastavíme tweening:motion a easing:100, pro framy 10 – 19 to samé pouze easing bude mít hodnotu 0. Výsledkem by měla být skákající kulička. Animaci můžete vyzkoušet stlačením <ENTER>

Kliknutím na nápis TLACITKO v liště nad panelem s layery ukončíme ediaci klipu HOP a přesuneme o úroveň výše – zpět do editace tlačítka. Nastavíme se na první frame (Up) a vytvoříme z kuličky nový Movie Clip <F8> Přes pravé tlačítko myši přejdeme do editačního modu a vytvoříme podobnou animaci jako v předchozím odstavci, pouze ve frame 10 kuličku jenom na místě mírně zvětšíme.

Vrátíme se do editace tlačítka a nastavíme se na frame Down. Pro vytvoření animace změny barvy je nutné vytvořit z kuličky grafický symbol, protože pro samotnou bitmapu nelze tento efekt použít. Klikneme na kuličku a zvolíme Insert/Convert to symbol <F8> a nastavíme název "KULICKA" a behavior "Graphic". Z tohoto grafického symbolu stejným postupem <F8> vytvoříme symbol "Movie Clip". Přejdeme do editace tohoto clipu a vytvoříme stejnou animaci jako v předchozích případech, pouze v klíčovém snímku frame 10 použijeme na "KULICKU" Modify/Instance – záložka Color Effect a zvolíme Special a tyto hodnoty:

Naposledy se vrátíme do editace tlačítka a večtvrtém framu (HIT) kuličku smažeme a na její místo nakreslíme kruh interním flashovským nástrojem Oval <O>.To proto,že obrázek kuličky ječtverec, a tlačítko by se aktivovalo i když by kurzor byl ještě mimo kuličku.

Nyní tedy máme ve všech třech stavech tlačítka umístěn animovaný Movie Clip a tlačítko je v podstatě hotové. Můžete jej vyzkoušet stiskem <CTRL+ENTER>

Upozornění: vnořené Movie Clipy se během authoringu nezobrazují! Při testování s Control/Enable buttons nic neuvidíte. Jediná možnost je movie vyexportovat.

Pokud jste postup pochopili, neměl by být pro vás problém přidat do tlačítka animaci stínu. Případné nejasnosti snad vysvětlí zdrojový soubor.

Použití příkazu TELL TARGET

Ukázku naleznete zde

Příkaz TELL TARGET umožňuje ovládat jiný Movie Clip pomocí standardních actions. Animované tlačítko tedy vytvoříme tak, že animaci umístíme do samostatného Movie Clipu přímo ve scéně a objektu tlačítka vytvoříme skript, který bude prostřednictvím příkazu TELL TARGET animaci spouštět. Postup je jednoduchý. Nejprve je nutno ovládaný clip pojmenovat jako instanci. Důvodem je to, že jeden Movie Clip se může vyskytovat ve scéně i několikrát najednou a je tedy nutno jednoznačně určit, o který "výskyt" se přesně jedná, který z nich chceme vlastně ovládat. Pro pojmenování klikneme pravým tlačítkem myši na clip umístěný ve scéně a zvolíme položku Properties… Zde zadáme jméno instance do okénka Instance Name v záložce Definition. (Ukázka obsahuje 2 Movie Clipy, pojmenované jako instance FLASH a RULEZ)

Dále je třeba nepatrně upravit samotnou animaci. Klikneme na Movie Clip pravým tlačítkem a zvolíme Edit in place. Nyní je třeba celou animaci začínající pravděpodobně na frame 1 posunout o jeden frame na frame 2, tak aby frame 1 zůstal prázdný. Protože Movie Clip umístěný ve scéně má tendenci se začít okamžitě přehrávat ve chvíli, kdy se objeví, je nutné na frame 1 navěsit action Stop a zastavit ho na prázdném snímku. Pokud chcete, aby animace tlačítka jednou proběhla a zastavila se na posledním frame, je nutno navěsit akci Stop i na poslední frame. Jinak se animace začne přehrávat znovu od začátku a zastaví se na prázdném frame. Pokud chcete, aby animace probíhala neustále dokola, zacyklete ji použitím akce "Go to and play (2)" na posledním frame animace – tento postup byl použit pro nápis "RULEZ" v ukázce pod nadpisem.

Nyní vytvoříme na scéně tlačítko, na které chceme navěsit animaci, klikneme na něj pravým tlačítkem a zvolíme menu Properties a záložku Actions. Zde zadáme skript, který bude spouštět animaci.

Nejprve použijeme příkaz OnMouseEvent, který umožní navěsit zbytek skriptu na určitý stav tlačítka. K dispozici máme tyto události: (pro tlačítko budu užívat výraz Button, aby se nepletlo s tlačítkem myši)