Flash

Počítačové animace technologií Flash
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
Počítačové animace technologií Flash
3. REKLAMNÍ BANNER
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
Počítačové animace technologií Flash
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
Počítačové animace technologií Flash
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
3.3. OVLÁDÁNÍ POHYBU
Rychlost 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
Počítačové animace technologií Flash
Ú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
Počítačové animace technologií Flash
3.5. VNOŘENÉ ANIMACE
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.
4.1. HIERARCHIE OBRAZOVEK
Filosofie tvorby Flash prezentací je následující:
•
•
•
•
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
Počítačové animace technologií Flash
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
Počítačové animace technologií Flash
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.
5.
6.
7.
Tlačítka „kupredu“ i „zpet“ vložíme z knihovny na vhodné místo do hlavní obrazovky.
K tlačítku „kupredu“ na hlavní obrazovce přidáme chování: Behaviors/ screen/ Go To Next Slide
K tlačítku „zpet“ na hlavní obrazovce přidáme chování: Behaviors/ screen/ Go To Previous Slide
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
Počítačové animace technologií Flash
5.1. TLAČÍTKA NA SPOUŠTĚNÍ ANIMACE
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
Počítačové animace technologií Flash
5.2. TLAČÍTKA NA SPOUŠTĚNÍ ZVUKU
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