Anglická verze
logolink

< Zpt na seznam lekc

Zklady animace

FlashObsah lekce:

  • Knihovna a symboly
  • Monosti importu
  • asov osa
  • Akce a ActionScript
  • MotionTween animace
  • ShapeTween animace
  • Tlatko
  • Pokroil pklad s tlatkem
  • Export scny

Knihovna a symboly

V minul lekci jsme se nauili vytvet objekty pmo na pltn, ovem v ppad, e budeme potebovat vytvoit napklad adu strom a pot se rozhodneme je vechny upravit, museli bychom prochzet jeden objekt po druhm a upravovat je zvl᚝.

Adobe Flash Professional CS5 nm tohle zjednoduuje dky vyuvn knihovny. Knihovna m svj panel, kter je v reimu Animator umstn vpravo dole, jinak jej lze zobrazit z poloky menu Window. Knihovnu si meme pedstavit jako zsobrnu jakchkoli objekt, kter meme do scny pidvat, kolikrt potebujeme. Pokud je v knihovn zmnme, zmn se automaticky i vechny pidan instance.

Objekty v knihovn se nazvaj Symboly. Symbol lze vytvoit z libovolnho potu objekt na pltn, sta je jen vechny oznait, kliknout na n pravm tlatkem myi a zvolit volbu Convert to Symbol.

Pevod na symbol

Oteve se nm jednoduch dialogov okno, ve kterm meme zadat nzev vytvenho symbolu a pot zvolit typ.

  • Graphic tento typ je nejjednodu a ten tak budeme pouvat. Jedn se o statick symbol, kter nem dn dal funkce.
  • Button symbol bude peveden na tlatko, kter lze pot pomoc programovn zalenit do animace.
  • Movie Clip obdoba typu Graphic, ale m navc svou vlastn asovou osu (vysvtleno pozdji), kter je nezvisl na hlavn asov ose.

Po odkliknut uvidme v panelu knihovny novou poloku, kterou lze pethnout na pltno. Vidme tak, e se nm tvary pemnily na symbol, kter nelze pmo editovat. Pro jeho optovnou editaci sta na nj dvakrt poklikat. Pro pechod zpt na hlavn scnu sta kliknout na tlatko Scene 1 v horn sti panelu s pltnem.

Symboly v knihovn lze samozejm duplikovat, editovat nebo pejmenovvat, poppad smazat klvesou Delete. Dle je mono symboly roztdit do sloek, poppad vytvoit nov symboly pmo uvnit knihovny.

Celou knihovnu lze exportovat a pozdji pout v rmci jinho projektu nslednm importem (z menu polokou File>Import>Open External Library).

Nsledujc video ilustruje prci se symboly.

Get the Flash Player to see this player.
(velikost videa: 6,11 MB)

Monosti importu

Kreslc nstroje sice umouj vytvet sloit objekty, ale vtinou si s nimi nevystame pln. Adobe Flash Professional CS5 umouje samozejm importovat extern objekty na pltno, a to nejen z program od firmy Adobe, ale tak z cel ady jinch.

Pro import sta zvolit z menu volbu File>Import a zvolit, jestli chceme importovat objekt pmo na pltno, nebo do knihovny. Obecn plat, e pokud si nejsme stoprocentn jist, e budeme pouvat objekt jen jednou a e s nm nebudeme provdt animaci, zvolme import do knihovny.

Importovat lze veker soubory z jinch Adobe aplikac (ai, psd, ), obrzky (jpg, gif, png, bmp, ), video soubory (mov, mp4, flv, avi, ), exportovan scny (swf), 3D objekty (dxf) a zvuk (mp3, wav).

Pokud oteveme podporovan typ souboru (obrzek, video, zvuk), vpravo nahoe v panelu Properties meme kliknout na tlatko Edit, kter nm umouje editovat tento soubor v extern aplikaci od firmy Adobe.

asov osa

V horn sti okna se nachz panel s nzvem asov osa, kter je klem k samotn animaci. Ji dve jsme si ukzali prci s vrstvami, ovem kad vrstva m v prav sti adu obdlnk. Tyto obdlnky pedstavuj jednotliv snmky animace (pokud tedy nastavme FPS na hodnotu 12, bude kadch 12 snmk pedstavovat 1 vteinu).

Pro lep orientaci je kad 5. snmek barevn odlien, ale snmky, kter nejsou ohranieny, jako je ten prvn, nebyly zatm vytvoeny (meme si tato msta pedstavit tak, e v nich dan vrstva nebude vbec vykreslena).

  • Klov snmky v tchto snmcch jsou znovu uloeny vlastnosti (pozice, tvar, transformace, ) vech objekt v dan vrstv.
  • Bn snmky tyto snmky pouze kopruj vlastnosti objekt z pedchozho snmku.

Prce se snmky je jednoduch, pomoc klvesy F5 pidvme bn snmky, pomoc klvesy F6 pidvme klov snmky. Po kliknut pravm tlatkem myi na asovou osu vidme stejn pkazy. Samozejm nemusme snmky vkldat po ad, pokud vlome nov snmek o vce pol vpravo, budou mezisnmky doplnny automaticky. Snmky, kter neobsahuj dn objekt, ale byly vytvoeny, jsou znaeny ble s rmekem.

Pokud budeme chtt v animaci udlat jakoukoli zmnu, vytvome na takovm mst nov klov snmek (F6). V ppad, e nechceme nic mnit, ale jen prothnout as, po kter bude objekt ve scn, vytvome bn snmek (F5).

Prci se snmky znzoruje nsledujc video.

Get the Flash Player to see this player.
(velikost videa: 12,7 MB)
  1. Na zatku mme przdn klov snmek. Klov snmek poznme podle koleka ve spodn sti obdlnku se snmkem. Obdlnk je vybarven ble, protoe ve snmku nejsou umstny dn objekty.
  2. V moment, kdy do snmku pidme objekt, vybarv se tento ed a signalizuje, e u nen przdn.
  3. Klov snmky pidvme stisknutm klvesy F6. Meme pidvat klov snmky jak na przdn pole, tak na pole, kde jet klov snmek nen (je zde pouze bn snmek). Po stisknut klvesy F6 program ulo vlastnosti objektu jak v prvnm, tak v ptm snmku a pokud zmnme jeden z nich, druh zstane nezmnn. Snmky mezi nimi jsou oznaeny jako bn snmky a budou mt stejn obsah jako snmek prvn.
    Tento proces je ve videu vcekrt opakovn a je naven poet tverc v kadm novm klovm snmku.
    Na konci vidme, e nov nakreslen tverce nejsou v pedchozch snmcch.
  4. Onion Skin je velmi zdail funkce, kter me pomoci pi nronjch animacch. Po stisku tlatka Onion Skin na ovldacm panelu asov osy se aktivuje vykreslovn okraj objekt ze sousednch snmk (pokud se jejich pozice nebo tvar li). To znamen, e ve snmku aktulnm vidme i okraje objekt ze snmk vedlejch, co se d vyut k tvorb plynulej a pesnj animace.
    Rozsah lze samozejm nastavit thnutm za zatmaven rmeek v seln sti, funkce se vypn stejnm tlatkem, jako se zapnala.
  5. Animaci lze jednodue pehrt pomoc ovldacch tlatek, lze tak zapnout opakovn pomoc tlatka Loop. Pehrvn lze spustit i klvesou Enter (na konci se automaticky zastav).
  6. Snmky lze petahovat, i kdy tohle nedoporuuji, protoe zvlt klov snmky se nkdy po pethnut chovaj jinak, ne bychom pedpokldali. Nicmn je vidt, e program si automaticky dopln snmky, pokud konec pothneme dle. Nikdy se nestane, e by byla v rmci asov osy jedn vrstvy mezera bez snmk.
    Pokud potebujeme snmek odstranit, zvolme danou volbu z kontextovho menu. Stisknutm klvesy Delete se toti odstran pouze obsah snmku.
  7. Nen problm kdekoli vloit przdn klov snmek.
  8. Pomoc klovch snmk lze tedy vytvoit jednoduchou animaci tm, e objekt v kadm novm klovm snmku pesuneme o kousek dle. Pokud bychom nepouili klov snmky, ale normln snmky, posunem objektu by se tento posunul ve vech bnch snmcch v ad narz.
    Tento zpsob animace je ovem zdlouhav a vsledky nejsou pli hezk, proto se pouvaj jin metody (MotionTween a ShapeTween), kter jsou vysvtleny dle v lekci.
  9. S asovou osou pmo souvis hodnota FPS, pokud ji tedy zmnme a nechme animaci pehrt, zmn se i rychlost pohybu ve videu je porovnna rychlost pi hodnotch 5 a 30. Zrove si meme vimnout, e program dopot dobu animace a vype ji vedle tlatek na asov ose (po zadn asu sko ukazatel pozice na asov ose na tento snmek).

Akce a ActionScript

Posledn vc, kter pat k asov ose, jsou pkazy jazyka ActionScript. Pro kad klov snmek lze otevt panel akc a do nj pidat potebn programovac kd. Nm budou stait zkladn pkazy, jako je pkaz Stop, kter doke v libovolnm mst cel pehrvn asov osy zastavit. Jeho pouit je ukzno v nsledujcm videu (standardn se pouv na zastaven animace na jejm konci, v opanm ppad by se provdla stle dokola).

Get the Flash Player to see this player.
(velikost videa: 2,79 MB)

Zloka s akcemi je ve stejnm panelu jako asov osa, nebo ji lze vyvolat klvesou F9. Krom akce Stop zde lze najt mnoho dalch naprogramovanch akc jako GoToAndStop, kter pesko na dan snmek a zastav, nebo podobn GoToAndPlay, kter pesko na dan snmek a pokrauje.

S akcemi se jet setkme v ppad tlatka, ovem pomoc jazyku ActionScript lze napsat velmi sloit algoritmy, kter mohou dit nai prezentaci, nebo program.

MotionTween animace (doplnn pohybu)

V jednom z pedchozch vide byla ukzna zkladn animace, kterou jsme tvoili metodou snmek po snmku. Je jasn, e vytvoit tmto zpsobem del nebo sloitj animace nepipad v vahu, nehled na to, e by se nm nepodailo je vytvoit plynul.

Pro pohyb ve scn slou funkce MotionTween, kterou si meme pedstavit tak, e zadme poten a koncov bod objektu a program automaticky dopot zadan poet snmk v rozmez. Vznikne tak jednak plynul animace, ale hlavn je mono s drhou pohybu pracovat jako s kivkou a libovoln ji mnit. Stejn tak lze pidat napklad zrychlen/zpomalen a dal.

Pozor ale na jednu vc, pro pouit MotionTween animace je nutno mt objekty pevedeny na symbol, v opanm ppad nebude mono ji vytvoit. Pokud zapomeneme objekt na symbol pevst, program ns upozorn pi stisku volby Create Motion Tween.

Get the Flash Player to see this player.
(velikost videa: 7,13 MB)
  1. Pipravme si klov snmek s objektem tverce. Ovme si, e mme nastaveno FPS na hodnotu 12.
  2. Pejdeme ke snmku 24 a stiskneme F5 pro vytvoen ady bnch snmk a po snmek 24.
  3. Ozname vechny snmky (bu pomoc klvesy Shift, nebo kliknutm a taenm my) a z kontextovho menu (prav tlatko) zvolme monost Create Motion Tween. Program se zept, zda chceme pevst objekt na symbol, volbu potvrdme.
  4. Posledn vc, kter chyb, je vytvoen klovho snmku bu na pozici 24, nebo hned vedle na pozici 25.
  5. Nyn mme vytvoenu animaci, take meme objektem pothnout a vidme, e se vykresluje drha, kterou bude tento objekt sledovat. Meme animaci pehrt a zjistme, e je pkn plynul a zabrala nm jen pr vtein.
  6. Samozejm nen problm pomoc nstroje Selection z drhy vytvoit kivku a libovoln ji upravit. Pomoc nstroje SubSelection meme navc vyut thel u konc kivky a zmnit jej prbh. Objekt bude stle sledovat drhu, kterou kivka uruje.
  7. Dal vc, kterou lze nechat automaticky dopotat, jsou rotace a transformace. Je jen nutno si dt pozor, abychom mnili parametry u objektu ve snmku, kde animace zan nebo kon, jinak me dojt k naruen animace, poppad jejmu zruen.

Motion Tween nm sice nabz nov monosti, ale tm to jet nekon. Prbh animace lze kontrolovat pomoc panelu Motion Editor, ve kterm lze jednak upravovat hodnoty souadnic, hl otoen a transformac, ale tak lze napklad nastavit zrychlen/zpomalen prv tomuto se vnuje nsledujc video.

Get the Flash Player to see this player.
(velikost videa: 5,22 MB)

ShapeTween animace (doplnn tvaru)

ShapeTween animace funguje podobn jako MotionTween animace, ovem, jak nzev napovd, pouv se k animovn zmn tvaru. Vytvoen je stejn jako u MotionTween animace, sta vytvoit objekt, zde objekt nen pevdn na symbol, pidat przdn snmky, ty oznait a aplikovat na n ShapeTween animaci. Na jejm konci pot vytvome klov snmek a v nm zmnme tvar objektu.

Program dopot mezisnmky tak, aby byla zmna tvaru plynul. Pouit ShapeTween animace je ilustrovno v nsledujcm videu.

Get the Flash Player to see this player.
(velikost videa: 4,19 MB)

Tlatko

Tlatko je jeden ze t typ symbol, kter m sv speciln funkce. Tlatko si meme pedstavit jako klasick tlatko v prohlei, nebo v programu a jako takov klasick tlatko se tak chov. Jist ns napadne, e tlatko nevypad stle stejn, e m jeden vzhled pro normln stav, jin pro moment, kdy na nj najedeme my a jet jin, pokud jej stiskneme. Stejn tak musme pro tlatko ve Flashi vytvoit jednotliv jeho stavy, a to s pomoc klovch snmk.

Tlatko pot lze programovnm pipojit k nejrznjm akcm od potvrzovn dialog pes pesmrovn na strnky, azen list a dal.

Nsledujc video ukazuje vytvoen tlatka a definovn jeho jednotlivch vzhled, druh video ukazuje pokroilej techniku, jak tlatku piadit akci (udlost) a pout jej k ovldn prbhu animace.

Get the Flash Player to see this player.
(velikost videa: 5,56 MB)
  1. V knihovn klikneme pravm tlatkem a nechme vytvoit nov symbol typu Button, nzev zvolme libovoln.
  2. Oteve se nm pracovn plocha pro tlatko, msto asov osy vidme 4 jednotliv stavy, kter funguj stejn jako snmky.
  3. Zaneme stavem Up, kter je povinn. Takto bude tlatko vypadat, pokud bude jen umstno v dokumentu. Centrum pracovn plochy je oznaeno kkem, nakreslit tlatko meme naprosto libovoln. Vytvome tedy tvar tlatka.
  4. Klikneme na druh snmek Over a stiskneme F6. dn ze stav Over, Down ani Hit nen povinn. Ve stavu Over se bude tlatko nachzet, pokud na nj najede uivatel kurzorem myi. Zmnme barvu, aby byl vidt rozdl.
  5. Obdobn pokraujeme se stavem Down, takto bude tlatko vypadat pi stisknut myi (pi jeho zmknut). Opt zmnme barvu, aby byl vidt rozdl.
  6. Stav Hit se nkdy vbec nepouv, zde vbec nejde o barvu, ale pouze o tvar a rozlohu objektu, protoe tato oblast tlatko vymezuje tzn., e v tto oblasti bude moci uivatel na tlatko klikat (hlavn vyuit me bt, pokud je tlatko rozdrobeno na mnostv malch objekt pot by bylo obtn se trefit, proto bude jako tlatko brna cel plocha ze stavu Hit).
  7. Editaci tlatka ukonme a vrtme se do scny, kde tlatko vlome.
  8. Pomoc Ctrl+Enter vytvome nhled exportu a vyzkoume najet na tlatko my a tak jej stisknout. Pokud je ve v podku, bude se jeho vzhled mnit.

Pokroil pklad s Tlatkem

Tento pklad nen povinn, zdrojov kd pouit ve videu je uveden pod videem.

Get the Flash Player to see this player.
(velikost videa: 7,0 MB)
  1. Pouijeme vytvoen tlatko z pedchoz ukzky. Pidme do nov vrstvy libovolnou animaci dlouhou napklad 60 snmk a prodloume tak trvn tlatka. Ve videu je pidn tvereek, kter oblet tlatko po kivce.
  2. Nyn pidme novou vrstvu, do kter umstme kd pro akci tlatka. Je poteba tlatko pojmenovat, co provedeme v panelu Properties v horn prav sti monitoru. Jako nzev zvolme myButton.
  3. Nyn si klikneme do prvnho snmku nov vrstvy a stiskneme F9, co ns pepne do panelu akc. Piadme tlatku novou udlost pomoc funkce addEventListener, jejm prvnm parametrem je akce uivatele, kter udlost spust a druhm parametrem je funkce, kter se pot provede.
    4. Nen nhodou, e se tlatko jmenuje stejn jako prvn slovo v kdu, prv proto jsme jej pojmenovali, abychom mu mohli udlost piadit pomoc ActionScriptu.
    Nen teba kd pochopit, pokud mme ve sprvn nastaveno a opeme jej, uvidme vsledek (kd je k dispozici pod tmto popisem, sta jej zkoprovat).
    Do funkce zadme kd, kter se provede, v tomto ppad nechme zastavit celou animaci po stisku tlatka funkc Stop.
  4. Nezbv ne vyzkouet, zda ve funguje. Stiskneme Ctrl+Enter a zkusme v prbhu animace stisknout tlatko. V idelnm ppad by se mla animace zastavit, pokud se tak nestane, neprovedli jsme nkter z krok sprvn.
  5. Hotov projekt je ke staen zde.
Kd pro tlatko
myButton.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {
    stop();
}

Export scny

Nyn kdy mme hotovou animaci, meme scnu exportovat tak, aby si ji mohl pehrt i nkdo, kdo nem Adobe Flash Professional nainstalovan.

Nabdka File>Export nabz ti zkladn monosti, z toho ns budou zajmat hlavn tyto dv:

  • Export Image
    Export jednoho snmku do formtu obrzku (jpg, gif, bmp, png, ), nebo do formtu swf, exportovn bude prv zvolen snmek.
  • Export Movie
    Export cel scny do formtu videa (avi, mov), zvuku (wav), sekvence obrzk (jpg, gif, png), nebo do formtu swf. Pro pehrt poslednho zmnnho formtu (swf) bude poteba Adobe Player, formt lze bez problmu pehrt i v rmci webov strnky.

Adobe Flash Professional umouje v prbhu tvorby animace tak nhled exportu pomoc kombinace klves Ctrl+Enter. V menu Control lze animaci ovldat (Stop/Play, Rewind pro petoen na zatek, nebo prochzet po jednotlivch snmcch), z menu View lze zvolit poloku Simulate Download a nastavit rychlost pipojen program se pokus nasimulovat dobu stahovn takov animace do prohlee.

Posledn volba v menu View je Show Redraw Regions. Tato volba zobraz obrysy objekt v jednotlivch snmcch a nech je vykreslen v celm prbhu animace.

Show Redraw Regions

Dal ten

Odkazy

Otzky a koly

  1. Vytvote animaci na zpsobu veernku, kter bude vhodn k prezentovn a bude mt minimln 15 vtein (pi 12 FPS). Mete importovat extern soubory a pouvat animace MotionTween a ShapeTween.
  2. Bonus: vytvote animaci, kde bude krom popisovanho tlatka jet druh pro optovn sputn animace (pouvaujte nad ppadem pouhho rozjet animace z msta zastaven a nad ppadem optovnho sputn animace ze snmku 1).
webdesign, xhtml, css, php - Mgr. Michal Mikláš