Macromedia FLASH 5 - základy animace V poslední době se v redakci Interval.cz množí dotazy na základní postupy při animaci ve FLASH. Dnešní díl proto budu věnovat těmto základním otázkám a problémům, na které většina začátečníků naráží. Zároveň bych tento článek doporučil i těm, kteří ve FLASH nějaký čas pracují, ale stále si nejsou jistí, zda postupují při animacích správně a efektivně.
Předem tohoto článku bych rád vás upozornil na velmi dobře zpracované lekce, které jsou přímo obsaženy v programu Macromedia FLASH 5 (Help / Lessons) a které vřele každému doporučuji k bližšímu prozkoumání. Tyto lekce jsou velmi interaktivní a během nich se naučíte ve FLASH kreslit, animovat, vkládat akce a velmi vám pomohou v další práci s tímto programem. Posun a rotace objektu
Vytvořte si novou scénu (CTRL+N) o velikosti 300 x 150 px (CTRL+M) a nastavte počet snímků za vteřinu (Frame Rate) na 18. Zvolte nástroj obdélník a nakreslete do levé části scény čtverec (držte SHIFT). Šipkou označte tento čtverec, uložte tento objekt jako symbol (F8 Movie Clip) a pojmenujte jej "ctverec". Uložení objektu jako symbol je nutné v případě ,pokud tento objekt chceme dále animovat, v případě, pokud bychom chtěli měnit jen tvar (viz dále), objekt na symbol převádět nesmíme. Do snímku číslo 50 vložte klíčový snímek (F6) - označte šipkou snímek 50 na časové ose a stiskněte klávesu F6. Animace vždy probíhá mezi dvěma klíčovými snímky, abychom nemuseli každý snímek animace znovu kreslit, je třeba mezi tyto dva klíčové snímky vložit Tweening - obsah snímků se automaticky dokreslí. Klepněte na časové ose někde mezi snímky 1 a 50 a v paletce Frame nastavte Tweening: Motion (pro symboly), Easing (zpomalení/zrychlení):100, Rotate: CW jedenkrát - rotace kolem vlastní osy jednou ve směru hodinových rafiček. Nyní by již animace měla probíhat mezi snímkem 1 a 50. Nyní ještě podobnou animaci zopakujeme a vrátíme symbol na původní pozici. Do snímku 100 vložte klíčový snímek (F6), pak šipkou označte objekt na tomto snímku a tlačítkem DELETE jej pak smažte. Přepněte se na snímek 1 a objekt nacházející se v tomto snímku zkopírujte CTRL+C. Přepněte se zpět na snímek 100 a vložte objekt ze schránky na stejnou pozici CTRL+SHIFT+V. Mezi snímky 50 a 100 vložte Motion Tweenig stejně jako mezi snímky 1 a 50, jen s tím rozdílem, že rotaci nastavíte proti směru hodinových rafiček CCW. Otestovat animaci můžete stisknout stiskem kláves CTRL+ENTER a máte možnost také stáhnout si zdrojový FLA soubor. Deformace objektu v jiný
Vytvořte scénu stejnou jako v předchozím příkladu a nakreslete do středu čtverec. Do snímku 50 vložte klíčový snímek a smažte zde čtverec a místo něj nakreslete kolečko. Klepněte na časové ose někde mezi snímky 1 a 50 a v paletce Frame nastavte Tweening: Shape (Tvar), Easing (zpomalení/zrychlení):100.
Stejně jako v předchozím příkladu vrátíme objektu původní tvar. Do snímku 100 vložte klíčový snímek a do něj zkopírujte objekt, který se nachází ve snímku 1. Mezi snímky 50 a 100 nyní vložte Shape Tweening, který je stejný jako je mezi snímky 1 a 50. Otestovat animaci můžete stisknout stiskem kláves CTRL+ENTER a máte možnost také stáhnout si zdrojový FLA soubor. Zmizení a objevení objektu
Opět si vytvořte stejnou scénu jako v předchozích příkladech a nakreslete uprostřed této scény obdélník o libovolné barvě. Uložte tento obdélník jako symbol a pojmenujte jej "obdelnik". Do snímku 25 a 50 vložte klíčové snímky klávesou F6. Označte šipkou obdélník na snímku 1 a v paletce Effect nastavte průhlednost (Alpha) na 0%. Stejný postup proveďte také na snímku 50. Nyní jen vložte mezi snímky 1, 25 a 50 Motion Tweening a animace je hotová. Otestovat animaci můžete stisknout stiskem kláves CTRL+ENTER a máte možnost také stáhnout si zdrojový FLA soubor. Vlastní barvy v paletce Do paletky barev máte možnost vložit jak samostatnou barvu, tak lineární nebo radiální gradient (barevný přechod). V paletce Fill vyberte, jaký typ barvy chcete přidat - Solid (barva), Linear Gradient (lineární přechod) nebo Radial Gradient (kruhový přechod). Vybereme z roletky Solid, v paletce Mixer si namícháme jakoukoli barvu. Tuto barvu můžeme přímo namíchat pomocí RGB (HSB, hexadecimálních) hodnot a lze této barvě také nastavit průhlednost.
Jakmile máme barvu namíchanou, klepněte na malou černou šipku v pravé horní části paletky Mixer a zvolte "Add Swatch". Tím se tato barva přidá to palety barev, kterou lze také nalézt v paletce Swatches. Je třeba však upozornit na to, že tato barva bude v této paletce pouze u toho dokumentu, ve kterém jste tuto barvu vytvořili, v ostatních dokumentech se bude zobrazovat standardní paleta barev. Pokud chcete novou barvu uložit do defaultní barevné palety, je třeba se přepnout do paletky Swatches. V této paletce klepněte na malou černou šipku v pravé horní části paletky a zvolte z nabídky "Save as Default", popřípadě si zde můžete vytvořit celou vlastní paletu základních barev.
Macromedia FLASH 5 - základní akce 1. Tento díl je opět věnován začátečníkům a měl by být prvním ze dvou dílů, ve kterých bych chtěl převážně začátečníkům osvětlit používání některých základních akcí. Dnes si tedy vysvětlíme použití akcí "goto", "getURL" a "ifFrameLoaded".
goto Tato akce je opravdu naprosto základní funkcí. Jak už název napovídá - goto (jdi na...). Jedná se o akci, která přenese běh animace na určitý snímek nebo label. Tuto akci lze vložit jak na tlačítko, tak přímo do klíčového snímku v časové ose. Po vykonání této akce může animace běžet dál (gotoAndPlay) nebo se na cílovém snímku zastaví (gotoAndStop).
Na malém příkladu si ukážeme použití této akce. Animace se zastaví na prvním snímku a po stisknutí tlačítka se přenese na snímek 50 a po opětném stisku tlačítka zpět na snímek 1.
Vytvořte si tedy novou scénu (CTRL+N) o velikosti 300x150 px (CTRL+M). Podle obrázku si zde vytvořte vrstvy, do nichž budeme umisťovat jednotlivé objekty a akce. Do vrstvy "content" napište do prvního snímku nápis "snímek 1", pak do snímku 50 vložte klíčový snímek (F6) a do něj vložte nápis "snímek 50". Nyní je třeba vytvořit si tlačítko, kterým se bude animace ovládat. Nakreslete si tedy do vrstvy "button" kolečko, to šipkou označte a uložte jako symbol (F8 - Button). Klepněte nyní na tento objekt pravým tlačítkem a zvolte "Actions". V levé části okna "Actions" klepněte na nápis "Go To", do políčka Frame vložte číslo 50 a odškrtněte volbu Go To and Play, která slouží k tomu, aby animace po přesun na cílový snímek dále pokračovala.on (release) { gotoAndStop (50); }
Nyní vložte ve vrstvě "Button" do snímku 50 klíčový snímek a v akci, která se již nachází v tomto tlačítko, změňte číslo cílového snímku:on (release) { gotoAndStop (1); }
Do prvního snímku vrstvy "Actions" je nyní ještě třeba vložit akci: "Stop", aby se animace po stažení automaticky nerozběhla, ale zůstala stát na prvním snímku. getURL Akce getURL pracuje na podobném principu jako výše popsaná akce "goto". Tato akce, narozdíl od té předchozí, nepřejde na daný cílový snímek, ale na předem dané URL. Akce
"getURL" se typicky používá například, pokud máme na WWW prezentaci flashové intro a po jeho skončení chceme přejít do HTML stránek.
Akci getURL lze přiřadit několik parametrů. Prvním z nich je "Window" (okno), kde lze podobně jako v HTML nadefinovat jak se má daný odkaz otevřít. Volby jsou následující: _self - URL se otevře ve stejném okně jako je odkaz (defaultní hodnota) _blank - URL se otevře v novém okně _parent - URL s otevře v nadřazeném Framesetu _top - URL se otevře v nejvyšším nadřazeném Framesetu
Parametr variables lze využít v případě, pokud použijeme tuto akci k odeslání dat z formuláře umístěného ve Flash. Obvykle se zde pak musíme odkazovat pomocí funkcí GET nebo POST na předem vytvořený CGI skript, který data formuláře zpracuje. Pokud však akci využijeme jen k přechodu na danou stránku, pak volíme položku "Don't send" (neposílat).
Opět si na použití funkce GetURL vytvoříme malý příklad. Do scény o stejných parametrech jako v minulém příkladu vložte tlačítko, k němuž přiřadíte akci: on (release) { getURL ("http://interval.cz/", "_blank"); }
Tato akce otevře po stisknutí tlačítka adresu www.interval.cz v novém okně. Pro vkládání adresy platí stejná pravidla jako u HTML, lze tedy vkládat odkaz jak v absolutní, tak relativní. Do scény vložte ještě jedno tlačítko, pomocí kterého otevřeme poštovního klienta a vytvoříme nový e-mail. Tomuto tlačítku přiřaďte následující akci: on (release) { getURL ("mailto:
[email protected]"); }
K adrese lze samozřejmě ještě vložit další parametry (BC, CC, Subject, Body), které se vkládají za adresu a oddělují se znakem "?". ifFrameLoaded Tato funkce slouží ke zjištění, který snímek animace je již stažen. Funkci ifFrameLoaded využijete zejména tehdy, pokud tvoříte preloader. Preloader je soubor akcí, které se nacházejí na začátku takové animace, která je natolik velká, že by se nestihla zároveň přehrávat a stahovat. Pomocí preloderu se start animace, v závislosti na rychlosti stahování, pozdrží a ve chvíli, kdy je staženo dostatečné množství dat, animace se spustí.
Preloaderů je možno najít na Internetu velké množství, od těch nejzákladnějších, které neposkytují žádné informace o tom, jak stahování probíhá, až po ty velmi vyspělé, které nejen, že zobrazují procentuelně průběh stahování a množství stahovaných dat, ale dokonce umí zobrazit i aktuální rychlost stahování. Na malém příkladu si takový jednoduchý preloader vyrobíme a budeme si tak demonstrovat použití funkce "ifFrameLoaded".
Preloader potřebuje ke své správné funkci dva snímky. V prvním snímku se musí nacházet následující akce: ifFrameLoaded (50) { gotoAndPlay (3); }
Tato akce znamená, že pokud je stažen snímek 50, může animace přejít a pokračovat na snímku 3, kde již začíná samotná animace. V opačném případě přejde na snímek dvě, kde je nadefinována tato akce: gotoAndPlay (1);
Tím se nám vytvoří na prvních dvou snímcích smyčka, která se bude opakovat do té doby, než bude snímek 50 stažen. Základních akcí, které lze v programu Macromedia FLASH 5 využívat je samozřejmě mnohem víc. Příště se budeme věnovat funkcím: loadMovie, loadVariables, setPropert a startDrag. Pokud by jste měli zájem přečíst si i o použití dalších funkcí, napište mi a já je do některých z příštích článku zahrnu. Všechny tři zdrojové soubory k dnešnímu článku si jako vždy můžete stáhnout jako ZIP soubor.
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
, 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 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 . 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 , 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 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 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 a nastavíme název "KULICKA" a behavior "Graphic". Z tohoto grafického symbolu stejným postupem 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 .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 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) Press - kliknutí na Button Release - uvolnění tlačítka myši po předchozím kliknutí na Button Release Outside - jako Release, ovšem k uvolnění došlo mimo Button Roll Over - kurzor najel na Button Roll Out - kurzor opustil Button Drag Over - tlačítko myši bylo stisknuto nad Buttonem, poté kurzor opustil tlačítko a ve chvíli, kdy se se stále stisknutým tlačítkem kurzor vrátí nad Button je vyvolána událost Drag Over Drag Out - uživatel stlačí tlačitko myši nad Buttonem a ve chvíli, kdy při stále stisknutém tlačítku myši kurzor opustí prostor Buttonu, je vyvolána tato událost Key Press - stlačení klávesy Zvolíme "Roll Over" a pokračujeme příkazem TELL TARGET. Jako parametr vybereme název instance, kterou chceme ovládat - FLASH. Nyní definujeme příkazy, které TELL TARGET pošle zvolené instanci. Blok je ukončen výrazem "End Tell Target". Pro naši potřebu postačí jediný příkaz: "Go to and play (2)". Tento příkaz zajistí,že ve chvíli, kdy uživatel najede kurzorem nad tlačitko, animace nápisu FLASH se posune z frame 1, kde je zastavena, na frame 2 a začne se přehrávat. Blok OnMouseEvent je ukončen syntaxí "End On". Za tento skript přidáme ještě jednou podobný, pouze jako událost myši zvolíme "Roll Out" a v bloku TELL TARGET použijeme příkaz "Go to and stop(1)". Tento skript zajistí,že pokud uživatel pohne myší mimo tlačítko, animace v instanci FLASH se znovu zastaví na prázdném prvním políčku (zmizí). Analogicky vytvoříme druhé tlačítko s animací "RULEZ". Stejně jako při prvním postupu je nutné celé Flash movie vyexportovat, během authoringu TELL TARGET nefunguje.
