1. ÚVOD SW pro tvorbu Flash animací Macromedia Flash (dále jen MF) přehrávání Flash animací: v prostředí web prohlížečů pomocí pluginu - Flash Player pomocí Flash Playeru od fy Macromedia (dnes již Adobe) Nejobvyklejší využití Flash animací je: reklamní bannery (www.idnes.cz) Flash prezentace - jako úvod k webové stránce (www.blanka.com), nebo reklamní spoty interaktivní animace výukové () hry (http://fantasticcontraption.com/) video (www.youtube.com) 2. KRESLENÍ Kreslení v MF je podobné jako ve FW s drobnými rozdíly: Bitmapa se pouze importuje, nedá se nakreslit ani štětcem ani tužkou U všech kreslicích nástrojů se dá zapnout nebo vypnout Object Drawing: se zapnutým Object Drawing kreslíme tak, jak jsme zvyklí s vypnutým Object Drawingse objekty rozpadají na části (obrys x výplň, překrývající se plochy a čáry) Guma se dá použít i na vektorové objekty Kyblíčkem se dá vyplnit ohraničená plocha (nakreslená s vypnutým Object Drawing) Změna barvy obrysu Ink Bottle Tool Výběrový nástroj (šipečka) slouží (po kliknutí LT) k vybírání a posunu objektů, ale také k tvarování (tažení LT za obrys objektu) Úkol: namalujte sluníčko podle vzoru. jedno oko a pusinku namalujte samostatně do vrstev (bude se nám to hodit). Rozměry scény: 300 x 200 px, barva pozadí: 0099CC 1
3. REKLAMNÍ BANNER Počítačové animace technologií Flash Reklamní banner je krátká animace malých rozměrů, která je součástí webových stránek a běží pořád dokola. Např: www.idnes.cz. 3.1. ČASOVÁ OSA Animace jsou rychle se střídající statické snímky za sebou (stejné jako klasický film). Princip Flash animací: Tvůrce nakreslí dva klíčové snímky, mezi nimiž je na časové ose odstup. Počítač mezi nimi dopočítá a vykreslí zbývající (neklíčové) snímky. přidávání klíčového snímku: F6 přidávání neklíčového snímku : F5 3.2. SHAPE TWEEN, MOTION TWEEN Slovo TWEEN je zkratka z in between a znamená mezi dvěma. Pomocí tohoto tlačítka v Properties snímku nastavujeme způsob animace mezi dvěma klíčovými snímky: motion tween animace pohybová shape tween animace tvarová, barevná a změna průhlednosti (objekt na scéně mění tvar, barvu, objevuje se, mizí... ) Pro oba typy animací platí přísné pravidlo: Každý objekt, který se na scéně animuje musí mít svoji vlastní vrstvu!!! Shape Tween animace: Vyzkoušejte si na scéně animovat zklamání: rozbor animace: objekty, které jsou během celé animace neměnné hlava, oči, obočí... 1. samostatná vrstva objekt, který mění tvar ústa 2. samostatná vrstva celá animace potrvá 25 snímků z toho ústa mění tvar 10 snímků 2
postup: 1. Nový dokument Flash: 200 x 200 px 2. Na scéně 2 vrstvy: nehybné a ústa 3. Do vrstvy Nehybné, do prvního snímku nakreslíme hlavu, očí, obočí... pomocí F5 přidáme snímky až do konce animace, tedy do 25. snímku na časové ose. 4. Do vrstvy ústa do prvního snímku (ten je automaticky klíčový) nakreslíme ústa mírný úsměv, pomocí F5 přidáme snímky až do 10. Do 10. snímku vložíme pomocí F6 klíčový snímek. V 10. snímku vytvarujeme ústa do podkovy = zklamání 5. V prvním snímku musíme nastavit Tween shape 6. Jestli jsme postupovali dobře, snímky 1 až 10 ve vrstvě ústa získají zelené pozadí a mezi klíčovými snímky se objeví šipka. 7. Kontrola pomocí tažení přehrávací hlavy můžeme animaci sledovat. Celá animace se spouští Ctrl + Enter. 8. V obou vrstvách doplníme pomocí F5 snímky až do konce trvání animace, tedy do 25. snímku. 9. Pomocí Ctrl+S nebo Save as uložíme pod názvem Zklamani.fla 10. Pomocí Ctrl+Enter exportujeme do formátu swf. Náhled na časovou osu, vrstvy a scénu Motion Tween Na rozdíl od animace typu Shape Tween, může pracovat animace Motion Tween s objekty, které byly převedeny na symboly v knihovně. Převod objektu na symbol v knihovně: označím celý objekt, pak F8 Vyzkoušejte si na scéně animovat jedoucí automobil. rozbor animace: neměnné objekty v animaci pozadí, 1. samostatná vrstva pohyblivé objekty autíčko 2. samostatná vrstva celá animace trvá 30 snímků z toho 15 snímků trvá pohyb autíčka Postup: 1. Nový dokument Flash: 800 x 200 px 2. Založíme na scéně 2 vrstvy: Pozadí a auto. 3. Do vrstvy pozadí nakreslíme tužkou tloušťky 30, stroke style nepravidelně tečkovaný, silnici. Pomocí F5 přidáme 30 snímků. 4. ve vrstvě auto nakreslíme autíčko. Pomocí F8 ho převedeme na symbol v knihovně. 3
5. Na scéně v prvním snímku posuneme autíčko za levý okraj scény. pomocí F5 přidáme 15 snímků, 15. snímek bude klíčový (F6). V 15. snímku posuneme autíčko za pravý okraj scény. 6. Pomocí F5 doplníme snímky až do 30. 7. V prvním snímku nastavíme Tween Motion. 8. Pomocí přehrávací hlavy nebo Ctrl+Enter kontrolujeme animaci. 9. Pokud jsme postupovali správně, všechny snímky mezi klíčovými se podbarví modře a spojí je nepřerušovaná šipka. 10. Soubor uložíme pod názvem Automobil.fla 11. Pomocí Ctrl+Enter exportujeme do swf. Náhled na časovou osu, vrstvy a scénu Rychlost pohybu 3.3. OVLÁDÁNÍ POHYBU K ovládání rychlosti v průběhu Motion Tween animace slouží funkce Ease: Přístup k funkci: klik LT na jeden ze snímků motion Tween animace/ panel Properities/ Ease: záporné hodnoty znamenají zrychlení pohybu kladné hodnoty znamenají zpomalení pohybu tlačítkem Edit můžeme průběh rychlosti zcela měnit: Například pád objektu (postupné zrychlování), odraz od země (postupné zpomalování) a opětovný pád (postupné zrychlování) znázorňuje křivka na obrázku. Křivku tvarujeme myší. Dialogové okno k Editaci zrychlení 4
Úkol: Do animace jedoucího autíčka přidejte zpomalení nebo zrychlení. Trajektorie pohybu Vyzkoušejte si animaci letícího motýlka po křivce (může se i vzdalovat:)). Postup: 1. Pojmenujte vrstvu Motylek. Z internetu zkopírujte na scénu obrázek motýlka. 2. pomocí F8 ho převeďte na Symbol v knihovně. 3. přidejte novou vrstvu Motion Guide, do ní štětečkem nakreslete trajektorii letu motýlka a pomocí F5 přidejte asi 50 snímků, zamkněte ji. 4. Ve vrstvě Motylek uchopte myší motýlka za středové kolečko a nasaďte ho přesně na začátek křivky. 5. Pomocí F5 přidejte 50 snímků. 6. Do 50. snímku vložte pomocí F6 klíčový snímek a v něm přesuňte motýlka myší za středové kolečko přesně na konec křivky. 7. V koncovém klíčovém snímku můžete motýlka zmenšit. V prvním snímku samozřejmě nastavíme Motion Tween. 8. Přidejte novou vrstvu (dospod) pojmenujte ji pozadí a zkopírujte do ní obrázek lesa či louky z internetu. 9. Animaci uložte pod názvem Motylek_Guide.fla, vyzkoušejte a exportujte pomocí Ctrl+Enter. Rotace Má-li objekt na scéně pouze rotovat, máme možnosti: využijeme nástroje Free transform tool a ručně v koncovém klíčovém snímku otočíme objektem o méně než 180. Chceme-li otáčet objektem o větší úhel, nastavíme v prvním klíčovém snímku v Properities: Rotate CW nebo CCW (po, nebo proti směru hodinových ručiček) a times (počet celých otoček). využijeme timeline efektů: PT na objekt/ Timeline Effects/ Transform-Transition/ Transform... (tento způsob doporučuji používat jen jako vnořenou animaci symbolu v knihovně.) 3.4. ANIMACE SE ZMĚNOU BARVY A PRŮHLEDNOSTI Animace se změnou barvy a průhlednosti jsou snadné animace typu Shape Tween: 1. Nakreslíme objekt do prvního klíčového snímku. 2. V koncového klíčovém snímku změníme pomocí Paint Bucket Tool (kyblíčku) jeho barvu nebo průhlednost (průhlednost se nastavuje při označeném objektu v panelu Color Mixer). 3. V prvním klíčovém snímku zadáme typ animace Shape Tween. 5
3.5. VNOŘENÉ ANIMACE Počítačové animace technologií Flash Vnořené animace používáme v případě, kdy na scéně probíhá současně několik animací jednoho objektu. Například: kolo se posunuje po scéně (motion tween animace na scéně) a během pohybu se točí (vnořená motion tween animace kola - symbolu v knihovně) motýl letí (motion tween animace na scéně s pomocí guide line) a zároveň mává křídly (vnořená Motion Tween animace motýla symbolu v knihovně)! Vnořené animace objektu se dají použít jen tehdy, byl-li objekt vytvořen coby symbol v knihovně, nebo byl pomocí F8 na symbol v knihovně převeden! Mluvíme pak o animovaném symbolu. Vyzkoušejte si animaci valícího se kola po scéně. rozbor: na scéně bude kolo (jedna vrstva) případně pozadí (druhá vrstva) kolo se na scéně posunuje (motion Tween animace), může být i po křivce kolo se zároveň i otáčí vnořená animace (musí být symbolem v knihovně) vnořená animace je rotace na jednom místě Postup: 1. Na scéně přejmenujte vrstvu Layer 1 na kolo. Nakreslete kolo a pomocí F8 ho převeďte na symbol v knihovně. 2. Rozklikněte symbol kola (v knihovně). Symbol kola má svoji vlastní časovou osu, na které naanimujete rotaci: do 10 snímku vložíte pomocí F6 klíčový snímek, v prvním snímku nastavte Motion Tween a Rotate CW, 1 times (rotace po směru ručiček 1 otočka) 3. Na scéně, v prvním klíčovém snímku posuňte kolo vně levého okraje scény. 4. Do 30. snímku vložíte pomocí F6 klíčový snímek a v něm kolo posunete vně pravého okraje scény, mírně níž (kutálí se z kopce). 5. V prvním klíčovém snímku nastavte Motion Tween. 6. Chcete-li, můžete do nové vrstvy na scéně vložit i obrázek jako pozadí, kolo se může pohybovat i po křivce. 7. Animaci uložte pod názvem Kolo.fla, exportujte pomocí Ctrl+Enter do formátu swf. 4. FLASH PREZENTACE Obdobně jako v Power Pointu nebo v Impressu lze vytvořit snímkovou prezentaci i technologií Flash: Flash prezentace můžeme použít na internet Flash prezentace mohou mít libovolné rozměry Ve Flash prezentacích máme mnohem větší možnosti animací s tím ovšem souvisí větší obtížnost jejich vytváření Pozor na terminologii: V Pover Pointu i Impressu se používá označení "snímek". Ve Flash terminologii však snímek znamená jeden element na časové ose. Z tohoto důvodu Flash místo termínu "snímek" používá termín "obrazovka" (screen). Dá se tedy říci, že Flash prezentace je tvořena posloupností obrazovek. Filosofie tvorby Flash prezentací je následující: 4.1. HIERARCHIE OBRAZOVEK V úvodu vytvoříme hlavní obrazovku, která je nadřazená všem ostatním, její obsah se zobrazí ve všech dalších, podřazených obrazovkách. Tento princip lze použít i na nižších úrovních. Lze podle smyslu obrazovek vytvářet obrazovky nadřazené několika ostatním, jejichž obsah je pro všechny společný. V rámci každé obrazovky používáme vrstvy tak jak jste zvyklí. V rámci každé obrazovky lze vytvářet animace tak jak je umíte :) 6
Vyzkoušejte si vytvořit prezentaci podobnou úvodní prezentaci z kap. 4 elektronické učebnice. 1. Připravte si fotografie, které použijete pro prezentaci. Ze Samba serveru/vyuka zkopírujte vhodné fotografie do své složky. Pomocí programu Picasa je exportujte s rozměry 320 px. 2. Založte nový dokument - Flash prezentaci: New/ Flash Slide Presentation o rozměrech obrazovek 600x400 px. 3. Hlavní obrazovka má název "presentation", první jí podřazená obrazovka se zatím jmenuje Slide1. Přejmenujte ji na "uvodni". 4. Vraťte se zpět k hlavní obrazovce a vytvořte její grafickou podobu. Hlavní obrazovka je svým vzhledem určující pro celou prezentaci. Nachystané fotografie, zmenšené na 320 px importujte do knihovny Flash (nejsnáze přetažením myší z Průzkumníka rovnou do knihovny). 5. Obrazovka "uvodni" obsahuje tři vrstvy: vrstvu pro animaci textu (Motion Tween). vrstvu z obrázkem vrstvu s action scriptem Vytvořte všechny tři vrstvy, pojmenujte je podle obrázku a vytvořte animaci textu. 6. Ve vrstvě "script" bude ve 20 snímku příkaz, který zamezí neustálému opakování animace běžícího textu: Do 20. snímku vložte klíčový snímek. Pomocí F9 se dostanete do editoru programovacího jazyku Action Script. Zapište (přesně): stop(); Pomocí F9 opět zavřete editor Action Scriptu 7. Přidejte další obrazovku prezentace a podle vzoru upravte její grafickou podobu. 8. Přidejte a upravte příslušný počet dalších obrazovek. (Pro vytvoření podřazené obrazovky použijte PT na snímku/ Insert Nasted screen.) 9. Prezentaci uložte pod názvem Vysocina.fla, exportujte pomocí Ctrl+Enter. Tip pro přizpůsobování rozměrů obrázků: Po přetažení obrázku z knihovny do obrazovky je vhodné nastavit jeho rozměry v Properities. Doporučuji všem obrázkům zadat výšku 200 px. 4.2. PŘECHODY MEZI OBRAZOVKAMI Pro nastavování přechodů mezi obrazovkami si zobrazíme okno Behaviors (chování): Window/ Behaviors. Stejný přechod pro všechny podřízené obrazovky: U hlavní obrazovky nastavíme chování: Behaviors/ +/ Screen/ Transition/, vybereme přechod a upřesníme jeho vlastnosti (doba trvání, zrychlení (Easing Regular in), zpomalení (Easing Regular out)). Poté klikneme na rozbalovací menu u události reveal a nastavíme revealchild odkrýt u všech podřízených obrazovek). 7
Přechod pro jednu obrazovku: Behaviors/ +/ Screen/ Transition/, vybereme přechod a upřesníme jeho vlastnosti (doba trvání, zrychlení (Easing Regular in), zpomalení (Easing Regular out)). 4.3. TLAČÍTKA Tlačítka jsou interaktivní objekty, které umožňují provádění různých akcí. Tlačítko má svůj vzhled, který může být závislý na událostech (je/ není nad ním myš, poklikání myší...) K tlačítkům se vážou akce, které se po aktivační události provedou (Např. přechod na další (předchozí) obrazovku, spuštění animace, spuštění přehrávání videa, zvuku, otevření odkazu na webovou stránku...) Tlačítko musí být symbolem v knihovně. Tlačítka pro navigaci mezi obrazovkami prezentace (vyzkoušejte si na prezentaci Vysocina.fla): 1. V knihovně vytvoříme nový symbol typu tlačítko Button. Nazveme ho kupredu 2. Nakreslíme ho (v našem případě trojúhelník s výplní, který směřuje vpravo). 3. V knihovně symbol tlačítka zduplikujeme (PT/ Duplicate), přejmenujeme na zpet, rozklikneme a zrcadlově převrátíme (Modify/ Transform/ Flip Horizontal) 4. Tlačítka kupredu i zpet vložíme z knihovny na vhodné místo do hlavní obrazovky. 5. K tlačítku kupredu na hlavní obrazovce přidáme chování: Behaviors/ screen/ Go To Next Slide 6. K tlačítku zpet na hlavní obrazovce přidáme chování: Behaviors/ screen/ Go To Previous Slide 7. Uložíme a exportujeme do swf. 5. INTERAKTIVNÍ ANIMACE Interaktivní animace je taková animace, která reaguje na podněty uživatele. Uživatel provede událost (event), animace zareaguje akcí (action). Tuto interakci zprostředkovávají tlačítka. příklady událostí: stisknutí tlačítka myši, puštění tlačítka myši, tažení myší, stisknutí klávesy, myš nad tlačítkem... příklady akcí: zobrazení skrytého textu, spuštění animace, videa, zvuku, přechod na další (předchozí) snímek prezentace, 8
5.1. TLAČÍTKA NA SPOUŠTĚNÍ ANIMACE Počítačové animace technologií Flash Dokončete animaci tlacitka.fla tak, aby se animace točící vrtule spustila na různé události. Doplňte chování pěti tlačítek podle vzoru: V knihovně máte nachystané symboly 5 - ti tlačítek a animovaný symbol vrtule. (Všimněte si, že v prvním klíčovém snímku animovaného symbolu vrtule je přidán Action Script Stop();, to proto, aby animace stála a spustila se teprve po nějaké události). Postup: 1. Otevřete animaci tlacitka.fla 2. Přesuňte na scénu do vrstvy vrtule animovaný symbol vrtule. 3. Klikněte na scéně na instanci animovaného symbolu vrtule a pojmenujte ji anim_vrtule (je dobrým zvykem, aby animované symboly na scéně (instance) měly jména, ta se pak použijí v Action Scriptech) 4. Vytvořte novou vrstvu tlacitka, přesuňte do ní všechna tlačítka z knihovny (pomocí Modify/ Align je zarovnejte a rovnoměrně rozmístěte). 5. K jednotlivým tlačítkům přidáme chování, tedy naprogramujeme, k jaké události se má vázat jaká akce: označíme první tlačítko na scéně a Behaviors/ +/ Movieclip/ Go to and Play on frame or label / vybereme animaci s názvem anim_vrtule (no, jinou ani nemáme) 6. Stejně tak i pro ostatní tlačítka. 7. Neupřesníme-li dodatečně chování tlačítek, všechna se chovají stejně: spustí animaci vrtule na uvolnění stisknutého tlačítka myši (on release). 8. Odlišíme události, které spouští animaci vrtule u jednotlivých tlačítek: V okně Behaviors v rolovací nabídce Event (událost) postupně vybíráme On Press, On Roll Out, On roll Over a k tlačítku ve tvaru písmene a vybereme On Key Press. 9. Animaci uložíme a exportujeme do swf. Tip: Editor Macromedia Flash poskytuje mnoho animovaných tlačítek, která lze snadno importovat do knihovny: Window/ Comon Libraries/ Butons, vybereme tlačítko a myší ho přetáhneme do knihovny. Poté naprogramujeme chování. 9
5.2. TLAČÍTKA NA SPOUŠTĚNÍ ZVUKU Počítačové animace technologií Flash 1. Do knihovny importujeme zvuk: File/ Import/ Import to Library... vybereme nějaký zvuk z disku (mp3 nebo wav) 2. Do knihovny importujeme tlačítko pro přehrávání zvuku (Window/ Comon Libraries/ Buttons / třeba Playback flat flat blue play). Samozřejmě tlačítko můžeme i sami nakreslit. 3. Tlačítko přesuneme na scénu, rozklikneme (nezalekneme se množství nachystaných animací), přidáme vrstvu zvuk, na časové ose do snímku Down vložíme pomocí F6 klíčový snímek. 4. Do klíčového snímku přetáhneme z knihovny zvuk, který chceme přehrát. 5. Animaci uložíme, exportujeme do swf. 5.3. SLEPÉ MAPY Slepé mapy mapy nazývám výukové animace podobné zeměpisným slepým mapám. Jsou to obrázky, ke kterým je skrytý popis. Ten se objevuje pod ukazatelem myši. Při tvorbě slepých map využijeme tlačítka a jejich časovou osu, která má jen 4 snímky: Up - snímek, který je vidět normálně Over - snímek, který se zobrazí při přejetí myši nad tlačítkem Down - snímek, který se zobrazí po kliknutí na tlačítko Hit - tento snímek není nikdy viditelný - určuje oblast, která má být citlivá na kliknutí (nemusí se shodovat s předchozími objekty) Slepá mapa je tedy poseta neviditelnými tlačítky (nakreslenými ve snímku Hit), u nichž se při přejetí myší zobrazí snímek Over. Dokončete animaci slovicka.fla, ve které je nakreslené pozadí. Vy vytvoříte 4 tlačítka tak, aby se překlad z angličtiny objevil při přejetí myší nad příslušným slovíčkem. Postup: 1. Otevřete animaci slovicka.fla 2. V knihovně vytvořte nový symbol typu Button s názvem tlac1. 3. Symbol tlačítka rozklikněte a do snímku Hit vložte pomocí F6 klíčový snímek. Do něho nakreslete štětečkem tečku přesně na středovém křížku. Tento snímek tlačítka udává citlivou oblast pro myš, na scéně nebude vidět. Později tuto oblast upřesníme v závislosti na podkladu scény. 4. Přetáhněte tlačítko na scénu přesně na slovo Behaviors. Zde ho rozklikněte, a ve snímku Hit štětečkem dokreslete citlivou oblast tak, aby překrývala celé slovo Behaviors s mírnou rezervou. 5. Do snímku Over vložte pomocí F6 klíčový snímek. Do něho vepište text, který se má zobrazit při přejíždění myší nad citlivou oblastí. Tedy slovo Chování. Text umístěte přesně tam, kde se má na scéně objevovat. 6. Podobně dokončete i zbývající 3 tlačítka. 7. Animaci uložte a exportujte do swf. 10