Knihovna a symboly
V minul� lekci jsme se nau�ili vytv��et objekty p��mo na
pl�tn�, ov�em v p��pad�, �e budeme pot�ebovat vytvo�it nap��klad �adu
strom� a pot� se rozhodneme je v�echny upravit, museli bychom proch�zet
jeden objekt po druh�m a upravovat je zvl.
Adobe Flash Professional CS5 n�m tohle zjednodu�uje d�ky
vyu��v�n� knihovny. Knihovna m� sv�j panel, kter� je v re�imu
Animator
um�st�n vpravo dole, jinak jej lze zobrazit z polo�ky menu Window.
Knihovnu si m��eme p�edstavit jako z�sob�rnu jak�chkoli objekt�, kter�
m��eme do sc�ny p�id�vat, kolikr�t pot�ebujeme. Pokud je v knihovn�
zm�n�me, zm�n� se automaticky i v�echny p�idan� instance.
Objekty v knihovn� se naz�vaj� Symboly. Symbol lze vytvo�it
z libovoln�ho po�tu objekt� na pl�tn�, sta�� je jen v�echny ozna�it,
kliknout na n� prav�m tla��tkem my�i a zvolit volbu Convert to Symbol.
Otev�e se n�m jednoduch� dialogov� okno, ve kter�m m��eme
zadat n�zev vytv��en�ho symbolu a pot� zvolit typ.
- Graphic � tento typ je nejjednodu��� a ten tak� budeme pou��vat. Jedn� se o statick� symbol, kter� nem� ��dn� dal�� funkce.
- Button � symbol bude p�eveden na tla��tko, kter� lze pot� pomoc� programov�n� za�lenit do animace.
- Movie Clip � obdoba typu Graphic, ale m� nav�c svou vlastn� �asovou osu (vysv�tleno pozd�ji), kter� je nez�visl� na hlavn� �asov� ose.
Po odkliknut� uvid�me v panelu knihovny novou polo�ku, kterou
lze p�et�hnout na pl�tno. Vid�me tak�, �e se n�m tvary p�em�nily na
symbol, kter� nelze p��mo editovat. Pro jeho op�tovnou editaci sta�� na
n�j dvakr�t poklikat. Pro p�echod zp�t na hlavn� sc�nu sta�� kliknout na
tla��tko Scene 1 v horn� ��sti panelu s pl�tnem.
Symboly v knihovn� lze samoz�ejm� duplikovat, editovat nebo
p�ejmenov�vat, pop��pad� smazat kl�vesou Delete. D�le je mo�no
symboly rozt��dit do slo�ek, pop��pad� vytvo�it nov� symboly p��mo
uvnit� knihovny.
Celou knihovnu lze exportovat a pozd�ji pou��t v r�mci
jin�ho projektu n�sledn�m importem (z menu polo�kou File>Import>Open
External Library).
N�sleduj�c� video ilustruje pr�ci se symboly.
(velikost videa: 6,11 MB)
Mo�nosti importu
Kresl�c� n�stroje sice umo��uj� vytv��et slo�it� objekty, ale
v�t�inou si s nimi nevysta��me �pln�. Adobe Flash Professional CS5
umo��uje samoz�ejm� importovat extern� objekty na pl�tno, a to nejen
z program� od firmy Adobe, ale tak� z cel� �ady jin�ch.
Pro import sta�� zvolit z menu volbu File>Import a zvolit,
jestli chceme importovat objekt p��mo na pl�tno, nebo do knihovny.
Obecn� plat�, �e pokud si nejsme stoprocentn� jist�, �e budeme pou��vat
objekt jen jednou a �e s n�m nebudeme prov�d�t animaci, zvol�me import
do knihovny.
Importovat lze ve�ker� soubory z jin�ch Adobe aplikac� (ai,
psd, �), obr�zky (jpg, gif, png, bmp, �), video soubory (mov, mp4,
flv, avi, �), exportovan� sc�ny (swf), 3D objekty (dxf) a zvuk (mp3,
wav).
Pokud otev�eme podporovan� typ souboru (obr�zek, video,
zvuk), vpravo naho�e v panelu Properties m��eme kliknout na tla��tko
Edit, kter� n�m umo��uje editovat tento soubor v extern� aplikaci od
firmy Adobe.
�asov� osa
V horn� ��sti okna se nach�z� panel s n�zvem �asov� osa, kter� je kl��em k samotn� animaci. Ji� d��ve jsme si uk�zali pr�ci s vrstvami, ov�em ka�d� vrstva m� v prav� ��sti �adu obd�ln��k�. Tyto obd�ln��ky p�edstavuj� jednotliv� sn�mky animace (pokud tedy nastav�me FPS na hodnotu 12, bude ka�d�ch 12 sn�mk� p�edstavovat 1 vte�inu).
Pro lep�� orientaci je ka�d� 5. sn�mek barevn� odli�en, ale sn�mky, kter� nejsou ohrani�eny, jako je ten prvn�, nebyly zat�m vytvo�eny (m��eme si tato m�sta p�edstavit tak, �e v nich dan� vrstva nebude v�bec vykreslena).
- Kl��ov� sn�mky � v t�chto sn�mc�ch jsou znovu ulo�eny vlastnosti (pozice, tvar, transformace, �) v�ech objekt� v dan� vrstv�.
- B�n� sn�mky � tyto sn�mky pouze kop�ruj� vlastnosti objekt� z p�edchoz�ho sn�mku.
Pr�ce se sn�mky je jednoduch�, pomoc� kl�vesy F5 p�id�v�me b�n� sn�mky, pomoc� kl�vesy F6 p�id�v�me
kl��ov� sn�mky. Po kliknut� prav�m tla��tkem my�i na �asovou osu vid�me stejn� p��kazy. Samoz�ejm� nemus�me sn�mky vkl�dat po �ad�, pokud vlo��me nov� sn�mek o v�ce pol� vpravo, budou mezisn�mky dopln�ny automaticky. Sn�mky, kter� neobsahuj� ��dn� objekt, ale byly vytvo�eny, jsou zna�eny b�le s r�me�kem.
Pokud budeme cht�t v animaci ud�lat jakoukoli zm�nu, vytvo��me na
takov�m m�st� nov� kl��ov� sn�mek (F6). V p��pad�,
�e nechceme nic m�nit, ale jen prot�hnout �as, po kter� bude objekt
ve sc�n�, vytvo��me b�n� sn�mek (F5).
Pr�ci se sn�mky zn�zor�uje n�sleduj�c�
video.
(velikost videa: 12,7 MB)
- Na za��tku m�me pr�zdn� kl��ov� sn�mek. Kl��ov� sn�mek pozn�me podle kole�ka ve spodn� ��sti obd�ln�ku se sn�mkem. Obd�ln�k je vybarven b�le, proto�e ve sn�mku nejsou um�st�ny ��dn� objekty.
- V moment�, kdy do sn�mku p�id�me objekt, vybarv� se tento �ed� a signalizuje, �e u� nen� pr�zdn�.
- Kl��ov� sn�mky p�id�v�me stisknut�m kl�vesy F6. M��eme p�id�vat kl��ov� sn�mky jak na pr�zdn� pole, tak na pole, kde je�t� kl��ov� sn�mek nen� (je zde pouze b�n� sn�mek). Po stisknut� kl�vesy F6 program ulo�� vlastnosti objektu jak v prvn�m, tak v p�t�m sn�mku a pokud zm�n�me jeden z nich, druh� z�stane nezm�n�n. Sn�mky mezi nimi jsou ozna�eny jako b�n� sn�mky a budou m�t stejn� obsah jako sn�mek prvn�.
Tento proces je ve videu v�cekr�t opakov�n a je nav��en po�et �tverc� v ka�d�m nov�m kl��ov�m sn�mku.
Na konci vid�me, �e nov� nakreslen� �tverce nejsou v p�edchoz�ch sn�mc�ch.
- Onion Skin je velmi zda�il� funkce, kter� m��e pomoci p�i n�ro�n�j��ch animac�ch. Po stisku tla��tka Onion Skin na ovl�dac�m panelu �asov� osy se aktivuje vykreslov�n� okraj� objekt� ze sousedn�ch sn�mk� (pokud se jejich pozice nebo tvar li��). To znamen�, �e ve sn�mku aktu�ln�m vid�me i okraje objekt� ze sn�mk� vedlej��ch, co� se d� vyu��t k tvorb� plynulej�� a p�esn�j�� animace.
Rozsah lze samoz�ejm� nastavit t�hnut�m za zatmaven� r�me�ek v ��seln� ��sti, funkce se vyp�n� stejn�m tla��tkem, jako se zap�nala.
- Animaci lze jednodu�e p�ehr�t pomoc� ovl�dac�ch tla��tek, lze tak� zapnout opakov�n� pomoc� tla��tka
Loop. P�ehr�v�n� lze spustit i kl�vesou Enter (na konci se automaticky zastav�).
- Sn�mky lze p�etahovat, i kdy� tohle nedoporu�uji, proto�e zvl�t� kl��ov� sn�mky se n�kdy po p�et�hnut� chovaj� jinak, ne� bychom p�edpokl�dali. Nicm�n� je vid�t, �e program si automaticky dopln� sn�mky, pokud konec pot�hneme d�le. Nikdy se nestane, �e by byla v r�mci �asov� osy jedn� vrstvy mezera bez sn�mk�.
Pokud pot�ebujeme sn�mek odstranit, zvol�me danou volbu z kontextov�ho menu. Stisknut�m kl�vesy
Delete se toti� odstran� pouze obsah sn�mku.
- Nen� probl�m kdekoli vlo�it pr�zdn� kl��ov� sn�mek.
- Pomoc� kl��ov�ch sn�mk� lze tedy vytvo�it jednoduchou animaci t�m, �e objekt v ka�d�m nov�m kl��ov�m sn�mku p�esuneme o kousek d�le. Pokud bychom nepou�ili kl��ov� sn�mky, ale norm�ln� sn�mky, posunem objektu by se tento posunul ve v�ech b�n�ch sn�mc�ch v �ad� nar�z.
Tento zp�sob animace je ov�em zdlouhav� a v�sledky nejsou p��li� hezk�, proto se pou��vaj� jin� metody (MotionTween a ShapeTween), kter� jsou vysv�tleny d�le v lekci.
- S �asovou osou p��mo souvis� hodnota FPS, pokud ji tedy zm�n�me a nech�me animaci p�ehr�t, zm�n� se i rychlost pohybu � ve videu je porovn�na rychlost p�i hodnot�ch 5 a 30. Z�rove� si m��eme v�imnout, �e program dopo��t� dobu animace a vyp�e ji vedle tla��tek na �asov� ose (po zad�n� �asu sko�� ukazatel pozice na �asov� ose na tento sn�mek).
Akce a ActionScript
Posledn� v�c�, kter� pat�� k �asov� ose, jsou p��kazy jazyka ActionScript. Pro ka�d� kl��ov� sn�mek lze otev��t panel akc� a do n�j p�idat pot�ebn� programovac� k�d. N�m budou sta�it z�kladn� p��kazy, jako je p��kaz
Stop, kter� dok�e v libovoln�m m�st� cel� p�ehr�v�n� �asov� osy zastavit. Jeho pou�it� je uk�z�no v n�sleduj�c�m videu (standardn� se pou��v� na zastaven� animace na jej�m konci, v opa�n�m p��pad� by se prov�d�la st�le dokola).
(velikost videa: 2,79 MB)
Z�lo�ka s akcemi je ve stejn�m panelu jako �asov� osa, nebo ji lze vyvolat kl�vesou
F9. Krom� akce Stop zde lze naj�t mnoho dal��ch naprogramovan�ch akc� jako GoToAndStop, kter� p�esko�� na dan� sn�mek a zastav�, nebo podobn� GoToAndPlay, kter� p�esko�� na dan� sn�mek a pokra�uje.
S akcemi se je�t� setk�me v p��pad� tla��tka, ov�em pomoc� jazyku ActionScript lze napsat velmi slo�it� algoritmy, kter� mohou ��dit na�i prezentaci, nebo program.
MotionTween animace (dopln�n� pohybu)
V jednom z p�edchoz�ch vide� byla uk�z�na z�kladn� animace, kterou jsme tvo�ili metodou sn�mek po sn�mku. Je jasn�, �e vytvo�it t�mto zp�sobem del�� nebo slo�it�j�� animace nep�ipad� v �vahu, nehled� na to, �e by se n�m nepoda�ilo je vytvo�it plynul�.
Pro pohyb ve sc�n� slou�� funkce MotionTween, kterou si m��eme p�edstavit tak, �e zad�me po��te�n� a koncov� bod objektu a program
automaticky dopo��t� zadan� po�et sn�mk� v rozmez�. Vznikne tak jednak plynul� animace, ale hlavn� je mo�no s dr�hou pohybu pracovat jako s k�ivkou a libovoln� ji m�nit. Stejn� tak lze p�idat nap��klad zrychlen�/zpomalen� a dal��.
Pozor ale na jednu v�c, pro pou�it� MotionTween animace je nutno m�t
objekty p�evedeny na symbol, v opa�n�m p��pad� nebude mo�no ji vytvo�it. Pokud zapomeneme objekt na symbol p�ev�st, program n�s upozorn� p�i stisku volby Create Motion Tween.
(velikost videa: 7,13 MB)
- P�iprav�me si kl��ov� sn�mek s objektem �tverce. Ov���me si, �e m�me nastaveno FPS na hodnotu 12.
- P�ejdeme ke sn�mku 24 a stiskneme F5 pro vytvo�en� �ady b�n�ch sn�mk� a� po sn�mek 24.
- Ozna��me v�echny sn�mky (bu� pomoc� kl�vesy Shift, nebo kliknut�m a ta�en�m my��) a z kontextov�ho menu (prav� tla��tko) zvol�me mo�nost
Create Motion Tween. Program se zept�, zda chceme p�ev�st objekt na symbol, volbu potvrd�me.
- Posledn� v�c�, kter� chyb�, je vytvo�en� kl��ov�ho sn�mku bu� na pozici 24, nebo hned vedle na pozici 25.
- Nyn� m�me vytvo�enu animaci, tak�e m��eme objektem pot�hnout a vid�me, �e se vykresluje dr�ha, kterou bude tento objekt sledovat. M��eme animaci p�ehr�t a zjist�me, �e je p�kn� plynul� a zabrala n�m jen p�r vte�in.
- Samoz�ejm� nen� probl�m pomoc� n�stroje Selection z dr�hy vytvo�it k�ivku a libovoln� ji upravit. Pomoc� n�stroje SubSelection m��eme nav�c vyu��t t�hel u konc� k�ivky a zm�nit jej� pr�b�h. Objekt bude st�le sledovat dr�hu, kterou k�ivka ur�uje.
- Dal�� v�c�, kterou lze nechat automaticky dopo��tat, jsou rotace a transformace. Je jen nutno si d�t pozor, abychom m�nili parametry u objektu ve sn�mku, kde animace za��n� nebo kon��, jinak m��e doj�t k naru�en� animace, pop��pad� jej�mu zru�en�.
Motion Tween n�m sice nab�z� nov� mo�nosti, ale t�m to je�t� nekon��. Pr�b�h animace lze kontrolovat pomoc� panelu Motion Editor, ve kter�m lze jednak upravovat hodnoty sou�adnic, �hl� oto�en� a transformac�, ale tak� lze nap��klad nastavit
zrychlen�/zpomalen� � pr�v� tomuto se v�nuje n�sleduj�c� video.
(velikost videa: 5,22 MB)
ShapeTween animace (dopln�n� tvaru)
ShapeTween animace funguje podobn� jako MotionTween animace, ov�em, jak n�zev napov�d�, pou��v� se k animov�n�
zm�n tvaru. Vytvo�en� je stejn� jako u MotionTween animace, sta�� vytvo�it objekt, zde objekt nen� p�ev�d�n na symbol, p�idat pr�zdn� sn�mky, ty ozna�it a aplikovat na n� ShapeTween animaci. Na jej�m konci pot� vytvo��me kl��ov� sn�mek a v n�m zm�n�me tvar objektu.
Program dopo��t� mezisn�mky tak, aby byla zm�na tvaru plynul�. Pou�it� ShapeTween animace je ilustrov�no v n�sleduj�c�m videu.
(velikost videa: 4,19 MB)
Tla��tko
Tla��tko je jeden ze t�� typ� symbol�, kter� m� sv� speci�ln� funkce. Tla��tko si m��eme p�edstavit jako klasick� tla��tko v prohl�e�i, nebo v programu a jako takov� klasick� tla��tko se tak� chov�. Jist� n�s napadne, �e tla��tko nevypad� st�le stejn�, �e m� jeden vzhled pro norm�ln� stav, jin� pro moment, kdy na n�j najedeme my�� a je�t� jin�, pokud jej stiskneme. Stejn� tak mus�me pro tla��tko ve Flashi vytvo�it jednotliv� jeho stavy, a to s pomoc� kl��ov�ch sn�mk�.
Tla��tko pot� lze programov�n�m p�ipojit k nejr�zn�j��m akc�m od potvrzov�n� dialog� p�es p�esm�rov�n� na str�nky, �azen� list� a dal��.
N�sleduj�c� video ukazuje vytvo�en� tla��tka a definov�n� jeho jednotliv�ch vzhled�, druh� video ukazuje pokro�ilej�� techniku, jak tla��tku p�i�adit akci (ud�lost) a pou��t jej k ovl�d�n� pr�b�hu animace.
(velikost videa: 5,56 MB)
- V knihovn� klikneme prav�m tla��tkem a nech�me vytvo�it nov� symbol typu Button, n�zev zvol�me libovoln�.
- Otev�e se n�m pracovn� plocha pro tla��tko, m�sto �asov� osy vid�me 4 jednotliv� stavy, kter� funguj� stejn� jako sn�mky.
- Za�neme stavem Up, kter� je povinn�. Takto bude tla��tko vypadat, pokud bude jen um�st�no v dokumentu. Centrum pracovn� plochy je ozna�eno k��kem, nakreslit tla��tko m��eme naprosto libovoln�. Vytvo��me tedy tvar tla��tka.
- Klikneme na druh� sn�mek Over a stiskneme F6. ��dn� ze stav� Over, Down ani Hit nen� povinn�. Ve stavu Over se bude tla��tko nach�zet, pokud na n�j najede u�ivatel kurzorem my�i. Zm�n�me barvu, aby byl vid�t rozd�l.
- Obdobn� pokra�ujeme se stavem Down, takto bude tla��tko vypadat p�i stisknut� my�i (p�i jeho zm��knut�). Op�t zm�n�me barvu, aby byl vid�t rozd�l.
- Stav Hit se n�kdy v�bec nepou��v�, zde v�bec nejde o barvu, ale pouze o tvar a rozlohu objektu, proto�e tato oblast tla��tko vymezuje � tzn., �e v t�to oblasti bude moci u�ivatel na tla��tko klikat (hlavn� vyu�it� m��e b�t, pokud je tla��tko rozdrobeno na mno�stv� mal�ch objekt� � pot� by bylo obt�n� se trefit, proto bude jako tla��tko br�na cel� plocha ze stavu Hit).
- Editaci tla��tka ukon��me a vr�t�me se do sc�ny, kde tla��tko vlo��me.
- Pomoc� Ctrl+Enter vytvo��me n�hled exportu a vyzkou��me najet na tla��tko my�� a tak� jej stisknout. Pokud je v�e v po��dku, bude se jeho vzhled m�nit.
Pokro�il� p��klad s Tla��tkem
Tento p��klad nen� povinn�, zdrojov� k�d pou�it� ve videu je uveden pod videem.
- Pou�ijeme vytvo�en� tla��tko z p�edchoz� uk�zky. P�id�me do nov� vrstvy libovolnou animaci dlouhou nap��klad 60 sn�mk� a prodlou��me tak� trv�n� tla��tka. Ve videu je p�id�n �tvere�ek, kter� oblet� tla��tko po k�ivce.
- Nyn� p�id�me novou vrstvu, do kter� um�st�me k�d pro akci tla��tka. Je pot�eba tla��tko pojmenovat, co� provedeme v panelu
Properties v horn� prav� ��sti monitoru. Jako n�zev zvol�me
myButton.
- Nyn� si klikneme do prvn�ho sn�mku nov� vrstvy a stiskneme F9, co� n�s p�epne do panelu akc�. P�i�ad�me tla��tku novou ud�lost pomoc� funkce
addEventListener, jej�m� prvn�m parametrem je akce u�ivatele, kter� ud�lost spust� a druh�m parametrem je funkce, kter� se pot� provede.
Nen� n�hodou, �e se tla��tko jmenuje stejn� jako prvn� slovo v k�du, pr�v� proto jsme jej pojmenovali, abychom mu mohli ud�lost p�i�adit pomoc� ActionScriptu.
Nen� t�eba k�d pochopit, pokud m�me v�e spr�vn� nastaveno a op�eme jej, uvid�me v�sledek (k�d je k dispozici pod t�mto popisem, sta�� jej zkop�rovat).
Do funkce zad�me k�d, kter� se provede, v tomto p��pad� nech�me zastavit celou animaci po stisku tla��tka funkc� Stop.
- Nezb�v� ne� vyzkou�et, zda v�e funguje. Stiskneme Ctrl+Enter a zkus�me v pr�b�hu animace stisknout tla��tko. V ide�ln�m p��pad� by se m�la animace zastavit, pokud se tak nestane, neprovedli jsme n�kter� z krok� spr�vn�.
- Hotov� projekt je ke sta�en� zde.
K�d pro tla��tko
myButton.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {
stop();
}
Export sc�ny
Nyn� kdy� m�me hotovou animaci, m��eme sc�nu exportovat tak, aby si ji mohl p�ehr�t i n�kdo, kdo nem� Adobe Flash Professional nainstalovan�.
Nab�dka File>Export nab�z� t�i z�kladn� mo�nosti, z toho n�s budou zaj�mat hlavn� tyto dv�:
- Export Image
Export jednoho sn�mku do form�tu obr�zku (jpg, gif, bmp, png, �), nebo do form�tu swf, exportov�n bude pr�v� zvolen� sn�mek.
- Export Movie
Export cel� sc�ny do form�tu videa (avi, mov), zvuku (wav), sekvence obr�zk� (jpg, gif, png), nebo do form�tu swf. Pro p�ehr�t� posledn�ho zm�n�n�ho form�tu (swf) bude pot�eba Adobe Player, form�t lze bez probl�mu p�ehr�t i v r�mci webov� str�nky.
Adobe Flash Professional umo��uje v pr�b�hu tvorby animace tak�
n�hled exportu pomoc� kombinace kl�ves Ctrl+Enter. V menu Control lze animaci ovl�dat (Stop/Play, Rewind pro p�eto�en� na za��tek, nebo proch�zet po jednotliv�ch sn�mc�ch), z menu View lze zvolit polo�ku Simulate Download a nastavit rychlost p�ipojen� � program se pokus� nasimulovat dobu stahov�n� takov� animace do prohl�e�e.
Posledn� volba v menu View je Show Redraw Regions. Tato volba zobraz� obrysy objekt� v jednotliv�ch sn�mc�ch a nech� je vykreslen� v cel�m pr�b�hu animace.
Dal�� �ten�
Odkazy
Ot�zky a �koly
- Vytvo�te animaci na zp�sobu ve�ern��ku, kter� bude vhodn� k prezentov�n� a bude m�t minim�ln� 15 vte�in (p�i 12 FPS). M��ete importovat extern� soubory a pou��vat animace MotionTween a ShapeTween.
- Bonus: vytvo�te animaci, kde bude krom� popisovan�ho tla��tka
je�t� druh� pro op�tovn� spu�t�n� animace (pouva�ujte nad p��padem
pouh�ho rozjet� animace z m�sta zastaven� a nad p��padem op�tovn�ho
spu�t�n� animace ze sn�mku 1).