Introducere in Adobe Flash

Întroducere în Adobe Flash.
Cuprins
I. Adobe Flash
II. Desen
III. Animaţie
IV. ActionScript 3.0
I. Adobe Flash
Adobe Flash este o aplicaţie foarte complexă, o platformă multimedia care combină
posibilitatea desenului vectorial cu animaţii şi cu linii de cod pentru interacţiunea cu
entităţi terţe utili!ator, server, sistem de operare".
Sunt suportate streaming-uri audio/video iar interacţiunea cu utili!atorul se poate "ace #i
prin micro"on/$ebcam pe l%ng& mouse/tastatur&.
Flash 'la(er-ul necesar pentru a rula aplicaţiile Flash este disponibil pentru mai multe sisteme
de operare )indo$s *+000 sau mai nou, -inu. Solaris /ac 0S 1 /aemo 0S+002 Android
#i multe altele.
De#i cel mai des 3nt%lnite utili!&ri sunt pentru mar4eting #i diverse "orme de reclam&
posibilit&ţile practice sunt nelimitate.
'entru o abordare practic& deschide 3n Adobe Flash un "i#ier nou *Create New > ActionScript
3.0 sau File > New > ActionScript 3.0,.
Workspace-ul este inter"aţa Flash-ului cu utili!atorul selecţia #i aran5amentul de butoane #i
meniuri pe care acesta le are la dispo!iţie. 6oate opţiunile aplicaţiei sunt selectabile acces%nd
meniurile dar cele din $or4space sunt accesibile direct. 6oate e.emplele cu imagini din acest
tutorial sunt "&cute cu $or4space-ul 7Designer7. 'entru a modi"ica $or4space-ul e.istent clic4
pe butonul de $or4space a"lat 3n bara de sus a aplicaţiei8
#i selectea!& un $or4space sau salvea!&-l pe cel actual dac& l-ai modi"icat *panourile cu butoane
se modi"ic& cu drag9drop iar butoanele se adaug& select%ndu-le din meniul )indo$,.
'ropriet&ţile obiectelor selectate pot "i vi!uali!ate #i editate 3n panoul Properties. :%nd nu este
selectat nici un obiect din Stage *partea vi!ual& din "lash de obicei alb& pe bac4ground gri
central& unde vor "i amplasate obiectele, sunt a"i#ate propriet&ţile documentului Flash deschis8
Aici pot "i modi"icate set&rile Stage-ului cum ar "i dimensiunea acestuia culoarea de
bac4ground #i altele.
6imeline-ul este esenţial lucrului pe la(er-e #i anim&rii. Fiecare cadru numerotat repre!int& o
stare a Stage-ului 3n momentul respectiv. ;um&rul de cadre pe secund& *"ps, poate "i modi"icat
3n "uncţie de necesit&ţi momentan este o valoare bun& +<.0 "ps *de"ault,.
:adrele-cheie *Keyframe, sunt repre!entate cu un cerc 3n partea in"erioar& #i se pot insera cu F=
dup& selectarea cadrului dorit celelalte cadre "iind normale *Frame, prelu%nd in"ormaţia de la
ultimul cadru-cheie 3n ordine cronologic& inser%ndu-se cu F>. Acestea vor "olosi 3n mod special
la animaţii.
II. #esen
Desenul 3n Flash se "ace e.clusiv vectorial. Imaginile raster pot "i importate posibilit&ţile de
modi"icare ale acestora "iind reduse.
'entru a desena avem la dispo!iţie o gam& de unelte "iecare cu set&rile sale8
ţin%nd mouse-ul deasupra unei unelte *?overing, este a"i#at un tooltip cu descrierea uneltei #i
shortcut-ul de pe tastatur&.
Pencil Tool pur #i simplu desenea!& o linie pe unde se mi#c& mouse-ul c%nd :lic4 St%nga
este ap&sat.
'ropriet&ţile precum culoarea grosimea *Stroke, rotun5irea *Smooting, capetele *Cap, #i altele
sunt accesibile 3n panoul de propriet&ţi. Alte set&ri alte uneltei sunt vi!ibile in panoul 6ools
*Smoot Straigt, atunci c%nd unealta este selectat&.
Pen Tool este o unealt& care plasea!& puncte de control modi"ic%nd vectorul dintre puncte
"olosind c!r"e #$%ier prin tehnica Drag *ţin%nd ap&sat :lic4 St%nga 3n timpul amplas&rii unui
punct de control,.
6ehnica aceasta este similar& 'en 6ool-ului din Adobe Fire$or4s Adobe 'hotoshop Adobe
Illustrator. 'ermite acurateţe sporit& 3n de"inirea curbelor vectorilor.
S!"selection Tool selectea!& un obiect #i 3i arat& vectorii componenţi permiţ%nd modi"ic&ri
asupra capetelor acestora "olosind c!r"e #$%ier.
0dat& selectat obiectul trebuie selectat punctul de leg&tur& al vectorilor asupra c&rora se vor
aduce modi"ic&ri. :apetele curbelor @A!ier pot "i trase *Drag, p%n& la obţinerea re!ultatului dorit.
Selection Tool selectea!& componentele obiectelor printr-un singur clic4 #i 3ntregul obiect
prin dublu clic4. :%nd un obiect este selectat 3n panoul Properties sunt a"i#ate propriet&ţile
obiectului respectiv. 'ot "i aduse modi"ic&ri ulterioare momentului desen&rii.
:%nd un obiect nu este selectat unealta 3i aduce modi"ic&ri curbei sau po!iţiei cap&tului de
vector dup& ca!. :%nd cursorul este deasupra unei curbe sau unui cap&t de vector l%ng& cursor
este a"i#at elementul ce urmea!& a "i modi"icat.

6ehnica este &rag an' &rop iar modi"ic&rile sunt mai u#or de adus dar acurateţea redus& "aţ&
de tehnica anterioar& cu Subselection 6ool. Bin%nd ap&sat pe tasta Ctrl 3n timp ce cursorul se a"l&
deasupra unei curbe se crea!& un nou cap&t de vector *a treia imagine,.
Paint #!cket Tool umple spaţiile 3nchise de vectori. Acţionarea uneltei 3ntr-un spaţiu deschis
nu are nici un e"ect.
'artea umplut& de unealt& este un Sape individual poate "i selectat #i modi"icat "&r& intervenţie
asupra vectorilor care l-au delimitat. /odi"icarea vectorilor ce 3ncon5oar& un shape duce la
modi"icarea shape-ului.
#r!s Tool este asem&n&tor lui 'encil 6ool dar crea!& shapes 3n locul vectorilor *ace#tia
"iind opţional marginile shape-ului,.
(ectangle Tool crea!& "orme primitive. Bin%nd ap&sat pe buton apar mai multe opţiuni
selectabile. Fiecare "orm& are con"iguraţia sa *num&r de colţuri unghiuri etc,. Cnealta crea!& ori
vector ori shape ori amandou& simultan.
Free Transform Tool aduce modi"ic&ri obiectelor selectate. 'e l%ng& redimensionare 3n
"uncţie de locaţia cursorului mai sunt disponibile #i (otate *l%ng& colţuri, #i Skew *3ntre colţuri #i
centre,. /odi"ic&rile de rotaţie sunt relative centrului prestabilit vi!ibil printr-un cerc alb care
poate "i mutat oriunde pe Stage chiar #i 3n a"ara obiectului.

III. Animaţie
'entru a anima un obiect acesta trebuie s& "ie pre!ent de regul& 3n )i"rary . Shape-urile #i
vectorii apar 3n librar( dup& ce sunt convertiţi *cu F2, 3n obiecte de
tip *o+ieClip #!ttonsau ,rapic. Dn cadrul tutorialului "olosim obiecte de tip /ovie :lip.
Animaţiile 3n Flash sunt de trei tipuri8 Classic Tween *otion Tween #i ActionScript.
Classic Tween este tipul de animaţie cadru-cu-cadru 3n care utili!atorul setea!& st&rile iniţiale #i
"inale ale obiectului iar aplicaţia aplic& trans"orm&ri 3n cadrele dintre cele dou& st&ri.

Selectea!& un cadru mai 3ndep&rtat *cadrul +< este la o secund& de 3nceput, apas& F> pentru a
insera Frames. :lic4-dreapta pe unul din noile cadre inserate clic4 pe Create Classic Tween.
Selectea!& ultimul cadru #i apas& F= pentru a insera un cadru-cheie necesar de"inirii ultimei
po!iţii a obiectului. Acum modi"ic& starea obiectului 3ntr-unul din cadrele cheie *po!iţia
culoarea dimensiunea etc, #i rulea!& *compilea!&, aplicaţia cu Ctrl-.nter. -a ActionScript
vom a"la cum oprim animaţia din a se derula "&r& s"%r#it.
*otion Tween este un tip de animaţie nou disponibil de la versiunile :S< 3n sus. Dac& la :lassic
6$een setam st&rile iniţiale #i "inale ale obiectelor la /otion 6$een se pune "oarte mult accent
pe intermediar.

Selectea!& un cadru mai 3ndep&rtat *cadrul +< este la o secund& de 3nceput, apas& F> pentru a
insera Frames. :lic4-dreapta pe unul din noile cadre inserate clic4 pe Create *otion Tween.
Selectea!& ultimul cadru #i apas& F= pentru a insera un cadru-cheie necesar de"inirii ultimei
po!iţii a obiectului. Acum modi"ic& starea obiectului 3ntr-unul din cadrele cheie *po!iţia
culoarea dimensiunea etc,. A ap&rut 3n plus un vector care arat& traiectoria obiectului. Folosind
tehnica drag9drop de la Desen modi"ic& traiectoria *adaug&-i o curb& sau un cap&t de vector,.
Select%nd vectorul-traiectorie 3n panoul 'roperties apar propriet&ţile /otion 6$een-ului.
Acestea *rotation ease, pot "i modi"icate dup& situaţie. Eulea!& *compilea!&, aplicaţia
cuCtrl-.nter. 'artea de /otion 6$een este "oarte comple.& urm&re#te tutorialul despre /otion
6$een. -a ActionScript vom a"la cum oprim animaţia din a se derula "&r& s"%r#it.
Animarea obiectelor prin ActionScript se "ace modi"ic%nd parametrii acestora prin "uncţie de
timp prin interacţiunea cu utili!atorul sau prin alte metode algoritmice *e.emplu8 la "iecare
cadru mut& obiectul la dreapta cu > pi.eli,.
I$. Action%cript &.'
-imba5ul "olosit de Adobe 3n Flash este ActionScript. Varianta 3.0 este un limba5 orientat pe
obiecte cu sinta.& #i semantic& asem&n&toare FavaScript. 6asta FG deschide "ereastra de cod. Dn
orice cadru-cheie "&r& nici un obiect selectat se poate introduce codul.
?ello )orldH
:od8

var h$86e.tField I ne$ 6e.tFieldJ // crea!& un obiect de tip 6e.t Field numit h$
h$.te.t I K?ello )orldHKJ // iniţiali!ea!& proprietatea Kte.tK a obiectului Kh$K
this.add:hild*h$,J // adaug& obiectul Kh$K pe scen&
:omen!ile introduse direct pe scen& cum este e.emplul de mai devreme sunt rulate pe scen&
deci orice "uncţie direct& o a"ectea!& pe aceasta de e.emplu stop"( care opre#te derularea
animaţiei sau pla)"( care o porne#te.
0biectele de pe scen& sunt accesibile prin numele acestora din 'roperties la /nstance Name.
:od8

oval.. I >J // setea!& po!iţia obiectului KovalK la > pi.eli de marginea din dreapta
oval.(LIM0J // incrementea!& valoarea K(K a obiectului KovalK cu M0 pi.eli
-imba5ul suport& event-uri 3n urma c&rora s& acţione!e prin "uncţia prede"init& *event de mouse
event de 3nc&rcare "i#ier event de eroare de"init de utili!ator etc,.
:od8

stop*,J
pla(Nbutton.addOvent-istener*/ouseOvent.:-I:P do'la(,J
"unction do'la(*e8Ovent,8void Q
pla(*,J
R
6ot ceea ce se petrece pe Stage poate "i transbordat 3n ActionScript dimensiunea "i#ierului "iind
semni"icativ redus& la >-M>S din valoarea iniţial&.
Terminologie
Obiect - orice element grafic ce este desenat sau scris in pagina (forme geometrice, linii, suprafete, texte,
litere, poze).
Layer - fiecare dintre straturile unei animatii - cele care suprapuse unul peste altul alcatuiesc toata scena.
Scena - fiecare pagina a unui film in care se intampla animatiile, alcatuita din 1 sau mai multe layere.
Frame, KeyFrame - fiecare cadru al unui layer. O succesiune de frame-uri rulate consecutiv alcatuiesc o
animatie.
Primul lucru pe care-l vedem cand deschidem flash-ul este, ca la majoritatea aplicatiilor ara de
meniuri...
...care, cu mici exceptii, prezinta aceleasi meniuri ca orice aplicatiie. !e exemplu "ile cu ne#, open, save, print. $ici
apar elemente noi cum ar fi %&mport'(xport%, %Pulish% etc - rolul acestora urmand sa fie explicat la momentul potrivit.
Pentru a va familiariza cu elementele noi pe care le introduce flash-ul in meniu, comparativ cu alte programe, alocati-
va cateva zeci de minute si experimentati cu meniul, multe dintre ele sunt destul de clare prin insasi numele lor. &n
partea din stanga a ecranului se poate oserva %)ools% - ara cu unelte de lucru .
Sageata neagra - cursor - realizeaza selectia oiectelor. $ceasta selectie nu este aditiva. $ditiva este cominata cu
tasta *hift. *ageata neagra este mana dreapta a "lashului cu care se pot face majoritatea actiunilor de la pozitionare
si redimensionare, pana la selectare si manipulare.
Sageata alba - este folosita pentru a lucra vectorial cu oiectele selectate.
Transformare - cele + unelte de transformare sunt sageata neagra pe contur pentru dimensionarea oiectelor
selectate si gradientul, pentru editarea gradientelor de culori. !oar lucrand cu ele veti vedea exact ce pot face.
Lasoul - este folosit pentru a selecta cu ajutorul mouse-ului o portiune de forma neregulata. Odata selectat lasoul in
meniul tools, mai jos, apar trei utoane. Primul uton este agheta, cu care puteti selecta o portiune intreaga care
are aceeasi culoare - fara a mai fi nevoi sa o incercuiti cu lasoul. $ doua agheta face acelasi lucru - cu exceptia ca
alegem noi calitatea selectiei. $l treilea uton ajuta la selectarea in puncte.
Penita - unealta ce traseaza linii cure pe o anumita tangenta - linia desenata poate fii lucrata vectorial. $cest uton
prezinta sumeniuri ale penitei.
T - ,nealta pentru introdus text. *etarile pentru text se pot face din panoul de proprietati ce apare odata selectata
aceasta unealta.
Linia - ,nealta ce traseaza linii intre + puncte, folosindu-se procedeul de drag and drop.
Patratul cu sumeniurile cerc si poligon sunt unelte ce se pot desena primitive - ovale, dreptunghiuri, iar pentru a
face patrat sau cerc se tine apasata tasta *hift. &n acelasi panou de proprietati apar setarile specifice fiecarei unelte
de unde se pot seta numar de laturi, unghi colturi etc.
Creion - unealta pentru a trasa linii liere.
Pensula - $juta la trasrea unor suprafete de diferite forme si grosimi setaile.
Calimara - ajuta la colorarea contururilor
Galeata - ajuta la colorarea suprafetelor
Pipeta - retine nuanta de culoare pe care se face clic-
Guma - ,nealta pentru sters. *e pot seta grosimea si forma gumei, cat si ce anume sa stearga - contur, suprafete
etc
Mana - ,nealta pentru miscat scena fara a mai folosi ara de scroll.
Lupa - unealta pentru marit micsrorat scena (.)
Colors Creion - seteaza culoarea pentru linii'contururi
Color Calimara - seteaza culoarea pentru suprafete
Magnet - $juta la autopozitionarea cursorului pe anumite elemente ale paginii. (xemplu. !aca avem + puncte pe
pagina si vrem sa tragem o linie intre cele + si e selectat magnetul - incepem trasarea liniei de la primul punct si cand
suntem aproape de al doilea mouse-ul se lipeste de el fara a mai fi nevoiti noi sa-l pozitionam.
Linia curba - rotunjeste liniile frante
Linia franta - face liniile cure, frante
)oate uneltele explicate mai sus pot fi accesate dand clic- pe ele, din meniul de sus sau prin taste.
Pentru a afla ce tasta este asociata fiecarei unelte pozitionati mouseul cateva secunde pe ea si langa
numele uneltei o sa apara litera pentru scurtatura.
!e exemplu, indiferent ce unealta avem selectata, daca apasam tasta *pace, pointerul se va face
manuta si vom putea trage de scena cu mouseul, iar cand vom eliera tasta space mouseul se transorma
in unealta care era selectata.
Pentru a accesa mai usor anumite utoane sau elemente de meniu ale flash-ului ifati din /indo#s -
)oolars toate optiunile de acolo. !e asemenea meniul )ools din /indo#s treuie sa fie ifat. !in 0eniul
/indo#s aveti acces la toate susectiunile de elemente ce permit realizarea setarilor sau modificarilor
pentru diferitele oiecte din scena. !intre cele esentiale sunt si 1ayer, $lign, 2olor, &nfo, )ransform.
$vantajul acestor casete este acela ca pot fi grupate si afisate doar la nevoie prin clic- de mouse sau prin
apasarea tastelor de accesare rapida. Pe masura ce veti avansa in lucrul cu flash-ul tot mai multe astfel
de ferestre vor treui deschise pentru a avea acces rapid la ele.
,rmatoarea sectiune a flash-ului o reprezinta ara de timp %)imeline%
&n acest loc sunt asezate layerele unul peste altul, fiecare avand un nume distinct care poate fi schimat.
"iecare layer este format din frame-uri care sunt reprezentate printr-un dreptunghi. !upa cum se vede si
in figura de deasupra, in layerul doi primul frame are o ulina neagra. $ceasta ulina neagra apare pe
fiecare frame in care se afla cel putin un oiect. !upa cum se vede frameul 1 din layerul 1 este gol,
deoarece in acest frame nu este desenat'scris nimic. Pozitia layerelor poate fi schimata prin tragere cu
mouse-ul, la fel si cea a frameurilor
Butoanele din Timeline
adauga un layer nou
adauga un layer ghidat
adauga un folder in care pot fi grupate layerele
cosul de gunoi - sterge layerul selectat
ochiul - ascunde layerul in dreptul caruia este ifat
lacatul - locheaza accesul la layerul respectiv
patratul - arata doar conturul oiectelor din layer
)oate layerele din %)imeline% formeaza o scena care are anumite propietati setaile.
,n panou de control importand care nu treuie sa stea inchis este cel de proprietati pe care il afisati tot
din /indo#s - Properties. Pentru a seta dimensiunea ascenei, culoarea fundalul ei, viteza de rulare a
frame-urilor (frame-uri'secunda) dati clic- in scena si folositi panoul de proprietati.
2ontinutul panoului de proprietati se schima in functie de oiectul pe care dati clic-, diferente notaile
inregistrandu-se la trecerea de la un simol la un text, de exemplu.
,n alt panou important, amintit si mai sus un pic este liraria de oiecte - 1irary. $ici vor fi prezente, de
preferat organizate pe foldere, toate simolurile din animatie, fonturile folosite, imaginile importate,
sunetele etc.
$tunci cand incepeti o noua animatie flash este important sa stiti ce veti face si de ce elemente aveti
nevoie pentru a va crea folderele din lirarie si pentru a denumi layerele corespunzator. O organizare
una de la inceput va va ajuta atunci cand animatiile facute devin complexe sau atunci cand veti realiza
modificari dupa mult timp de la terminarea lor. 3umele scurte, dar clare vor ajuta intotdeauna si vor creste
viteza de lucru. (vitati pe cat posiil numele date de program pentru diferitele elemente din flash pentru a
nu avea in lirarie o succesiune de simoluri notate de la *ymol1 pana la *ymol 144, iar cand vreti sa
modificati ceva sa o luati pe ghicite.