ntroducere n Adobe Flash.

Cuprins
I. Adobe Flash
II. Desen
III. Animaie
IV. ActionScript 3.0
I. Adobe Flash
Adobe Flash este o aplicaie foarte complex, o platform multimedia care combin
posibilitatea desenului vectorial cu animaii i cu linii de cod pentru interaciunea cu
entiti tere (utilizator, server, sistem de operare).
Sunt suportate streaming-uri audio/video, iar interaciunea cu utilizatorul se poate face i
prin microfon/webcam, pe lng mouse/tastatur.
Flash Player-ul, necesar pentru a rula aplicaiile Flash, este disponibil pentru mai multe sisteme
de operare, Windows (2000 sau mai nou), Linux, Solaris, Mac OS X, Maemo OS2008, Android
i multe altele.
Dei cel mai des ntlnite utilizri sunt pentru marketing i diverse forme de reclam,
posibilitile practice sunt nelimitate.
Pentru o abordare practic, deschide n Adobe Flash un fiier nou (Create New > ActionScript
3.0, sau File > New > ActionScript 3.0).
Workspace-ul este interfaa Flash-ului cu utilizatorul, selecia i aranjamentul de butoane i
meniuri pe care acesta le are la dispoziie. Toate opiunile aplicaiei sunt selectabile accesnd
meniurile, dar cele din workspace sunt accesibile direct. Toate exemplele cu imagini din acest
tutorial sunt fcute cu workspace-ul Designer. Pentru a modifica workspace-ul existent, click
pe butonul de workspace aflat n bara de sus a aplicaiei:

i selecteaz un workspace, sau salveaz-l pe cel actual dac l-ai modificat (panourile cu butoane
se modific cu drag&drop, iar butoanele se adaug selectndu-le din meniul Window).

Proprietile obiectelor selectate pot fi vizualizate i editate n panoul Properties. Cnd nu este
selectat nici un obiect din Stage (partea vizual din flash, de obicei alb pe background gri,
central, unde vor fi amplasate obiectele), sunt afiate proprietile documentului Flash deschis:

Aici pot fi modificate setrile Stage-ului, cum ar fi dimensiunea acestuia, culoarea de

background i altele.
Timeline-ul este esenial lucrului pe layer-e i animrii. Fiecare cadru numerotat reprezint o
stare a Stage-ului n momentul respectiv. Numrul de cadre pe secund (fps) poate fi modificat n
funcie de necesiti, momentan este o valoare bun 24.0 fps (default).

Cadrele-cheie (Keyframe) sunt reprezentate cu un cerc n partea inferioar, i se pot insera cu F6

dup selectarea cadrului dorit, celelalte cadre fiind normale (Frame), prelund informaia de la
ultimul cadru-cheie n ordine cronologic, inserndu-se cu F5. Acestea vor folosi n mod special
la animaii.
II. Desen

Desenul n Flash se face exclusiv vectorial. Imaginile raster pot fi importate, posibilitile de
modificare ale acestora fiind reduse.
Pentru a desena, avem la dispoziie o gam de unelte, fiecare cu setrile sale:

innd mouse-ul deasupra unei unelte (Hovering), este afiat un tooltip cu descrierea uneltei i
shortcut-ul de pe tastatur.
Pencil Tool
pur i simplu deseneaz o linie pe unde se mic mouse-ul cnd Click Stnga
este apsat.

Proprietile precum culoarea, grosimea (Stroke), rotunjirea (Smoothing), capetele (Cap) i altele
sunt accesibile n panoul de proprieti. Alte setri alte uneltei sunt vizibile in panoul Tools
(Smooth, Straight) atunci cnd unealta este selectat.
Pen Tool
este o unealt care plaseaz puncte de control, modificnd vectorul dintre puncte
folosind curbe Bzier prin tehnica Drag (innd apsat Click Stnga n timpul amplasrii unui
punct de control).

Tehnica aceasta este similar Pen Tool-ului din Adobe Fireworks, Adobe Photoshop, Adobe
Illustrator. Permite acuratee sporit n definirea curbelor vectorilor.
Subselection Tool
selecteaz un obiect i i arat vectorii componeni, permind modificri
asupra capetelor acestora folosind curbe Bzier.

Odat selectat obiectul, trebuie selectat punctul de legtur al vectorilor asupra crora se vor
aduce modificri. Capetele curbelor Bzier pot fi trase (Drag) pn la obinerea rezultatului dorit.
Selection Tool
selecteaz componentele obiectelor printr-un singur click, i ntregul obiect
prin dublu click. Cnd un obiect este selectat, n panoul Properties sunt afiate proprietile
obiectului respectiv. Pot fi aduse modificri ulterioare momentului desenrii.

Cnd un obiect nu este selectat, unealta i aduce modificri curbei sau poziiei captului de
vector, dup caz. Cnd cursorul este deasupra unei curbe sau unui capt de vector, lng cursor
este afiat elementul ce urmeaz a fi modificat.

Tehnica este Drag and Drop, iar modificrile sunt mai uor de adus, dar acurateea redus fa de
tehnica anterioar cu Subselection Tool. innd apsat pe tasta Ctrl n timp ce cursorul se afl
deasupra unei curbe, se creaz un nou capt de vector (a treia imagine).
Paint Bucket Tool
umple spaiile nchise de vectori. Acionarea uneltei ntr-un spaiu deschis
nu are nici un efect.

Partea umplut de unealt este un Shape individual, poate fi selectat i modificat fr intervenie
asupra vectorilor care l-au delimitat. Modificarea vectorilor ce nconjoar un shape duce la
modificarea shape-ului.
Brush Tool
este asemntor lui Pencil Tool, dar creaz shapes, n locul vectorilor (acetia
fiind, opional, marginile shape-ului).
Rectangle Tool
creaz forme primitive. innd apsat pe buton, apar mai multe opiuni
selectabile. Fiecare form are configuraia sa (numr de coluri, unghiuri, etc). Unealta creaz ori
vector, ori shape, ori amandou simultan.

Free Transform Tool

aduce modificri obiectelor selectate. Pe lng redimensionare, n
funcie de locaia cursorului, mai sunt disponibile i Rotate (lng coluri) i Skew (ntre coluri i
centre). Modificrile de rotaie sunt relative centrului prestabilit, vizibil printr-un cerc alb, care
poate fi mutat oriunde pe Stage, chiar i n afara obiectului.

III. Animaie
Pentru a anima un obiect, acesta trebuie s fie prezent, de regul, n Library
. Shape-urile i
vectorii apar n library dup ce sunt convertii (cu F8) n obiecte de
tip MovieClip, Buttonsau Graphic. n cadrul tutorialului folosim obiecte de tip Movie Clip.
Animaiile n Flash sunt de trei tipuri: Classic Tween, Motion Tween i ActionScript.
Classic Tween este tipul de animaie cadru-cu-cadru, n care utilizatorul seteaz strile iniiale i
finale ale obiectului, iar aplicaia aplic transformri n cadrele dintre cele dou stri.

Selecteaz un cadru mai ndeprtat (cadrul 24 este la o secund de nceput), apas F5 pentru a
insera Frames. Click-dreapta pe unul din noile cadre inserate, click pe Create Classic Tween.
Selecteaz ultimul cadru i apas F6 pentru a insera un cadru-cheie, necesar definirii ultimei
poziii a obiectului. Acum modific starea obiectului ntr-unul din cadrele cheie (poziia,
culoarea, dimensiunea, etc) i ruleaz (compileaz) aplicaia cu Ctrl+Enter. La ActionScript vom
afla cum oprim animaia din a se derula fr sfrit.
Motion Tween este un tip de animaie nou, disponibil de la versiunile CS4 n sus. Dac la Classic
Tween setam strile iniiale i finale ale obiectelor, la Motion Tween se pune foarte mult accent
pe intermediar.

Selecteaz un cadru mai ndeprtat (cadrul 24 este la o secund de nceput), apas F5 pentru a
insera Frames. Click-dreapta pe unul din noile cadre inserate, click pe Create Motion Tween.
Selecteaz ultimul cadru i apas F6 pentru a insera un cadru-cheie, necesar definirii ultimei
poziii a obiectului. Acum modific starea obiectului ntr-unul din cadrele cheie (poziia,
culoarea, dimensiunea, etc). A aprut n plus un vector care arat traiectoria obiectului. Folosind
tehnica drag&drop de la Desen, modific traiectoria (adaug-i o curb sau un capt de vector).
Selectnd vectorul-traiectorie, n panoul Properties apar proprietile Motion Tween-ului.
Acestea (rotation, ease) pot fi modificate dup situaie. Ruleaz (compileaz) aplicaia
cuCtrl+Enter. Partea de Motion Tween este foarte complex, urmrete tutorialul despre Motion
Tween. La ActionScript vom afla cum oprim animaia din a se derula fr sfrit.
Animarea obiectelor prin ActionScript se face modificnd parametrii acestora prin funcie de
timp, prin interaciunea cu utilizatorul sau prin alte metode algoritmice (exemplu: la fiecare
cadru, mut obiectul la dreapta cu 5 pixeli).
IV. ActionScript 3.0
Limbajul folosit de Adobe n Flash este ActionScript. Varianta 3.0 este un limbaj orientat pe
obiecte, cu sintax i semantic asemntoare JavaScript. Tasta F9 deschide fereastra de cod. n
orice cadru-cheie, fr nici un obiect selectat, se poate introduce codul.
Hello World!
Cod:
var hw:TextField = new TextField; // creaz un obiect de tip Text Field, numit hw
hw.text = "Hello World!"; // iniializeaz proprietatea "text" a obiectului "hw"
this.addChild(hw); // adaug obiectul "hw" pe scen
Comenzile introduse direct pe scen, cum este exemplul de mai devreme, sunt rulate pe scen,
deci orice funcie direct o afecteaz pe aceasta, de exemplu stop(); care oprete derularea
animaiei, sau play(); care o pornete.
Obiectele de pe scen sunt accesibile prin numele acestora din Properties, la Instance Name.

Cod:
oval.x = 5; // seteaz poziia obiectului "oval" la 5 pixeli de marginea din dreapta
oval.y+=10; // incrementeaz valoarea "y" a obiectului "oval" cu 10 pixeli
Limbajul suport event-uri, n urma crora s acioneze prin funcia predefinit (event de mouse,
event de ncrcare fiier, event de eroare, definit de utilizator, etc).
Cod:
stop();
play_button.addEventListener(MouseEvent.CLICK, doPlay);
function doPlay(e:Event):void {
play();
}
Tot ceea ce se petrece pe Stage poate fi transbordat n ActionScript, dimensiunea fiierului fiind
semnificativ redus la 5-15% din valoarea iniial.

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 bara de
meniuri...

...care, cu mici exceptii, prezinta aceleasi meniuri ca orice aplicatiie. De exemplu File cu new, open, save, print. Aici
apar elemente noi cum ar fi "Import/Export", "Publish" 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, alocativa cateva zeci de minute si experimentati cu meniul, multe dintre ele sunt destul de clare prin insasi numele lor. In
partea din stanga a ecranului se poate observa "Tools" - bara cu unelte de lucru .

Sageata neagra - cursor - realizeaza selectia obiectelor. Aceasta selectie nu este aditiva. Aditiva este combinata cu
tasta Shift. Sageata neagra este mana dreapta a Flashului 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 obiectele selectate.
Transformare - cele 2 unelte de transformare sunt sageata neagra pe contur pentru dimensionarea obiectelor
selectate si gradientul, pentru editarea gradientelor de culori. Doar 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 butoane. Primul buton este bagheta, cu care puteti selecta o portiune intreaga care
are aceeasi culoare - fara a mai fi nevoi sa o incercuiti cu lasoul. A doua bagheta face acelasi lucru - cu exceptia ca
alegem noi calitatea selectiei. Al treilea buton ajuta la selectarea in puncte.
Penita - unealta ce traseaza linii curbe pe o anumita tangenta - linia desenata poate fii lucrata vectorial. Acest buton
prezinta submeniuri ale penitei.
T - Unealta pentru introdus text. Setarile pentru text se pot face din panoul de proprietati ce apare odata selectata
aceasta unealta.
Linia - Unealta ce traseaza linii intre 2 puncte, folosindu-se procedeul de drag and drop.
Patratul cu submeniurile cerc si poligon sunt unelte ce se pot desena primitive - ovale, dreptunghiuri, iar pentru a
face patrat sau cerc se tine apasata tasta Shift. In 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 libere.
Pensula - Ajuta la trasrea unor suprafete de diferite forme si grosimi setabile.
Calimara - ajuta la colorarea contururilor
Galeata - ajuta la colorarea suprafetelor
Pipeta - retine nuanta de culoare pe care se face click
Guma - Unealta pentru sters. Se pot seta grosimea si forma gumei, cat si ce anume sa stearga - contur, suprafete
etc
Mana - Unealta pentru miscat scena fara a mai folosi bara de scroll.
Lupa - unealta pentru marit micsrorat scena (%)
Colors Creion - seteaza culoarea pentru linii/contururi
Color Calimara - seteaza culoarea pentru suprafete
Magnet - Ajuta la autopozitionarea cursorului pe anumite elemente ale paginii. Exemplu. Daca avem 2 puncte pe
pagina si vrem sa tragem o linie intre cele 2 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 curbe, frante

Toate uneltele explicate mai sus pot fi accesate dand click 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.
De exemplu, indiferent ce unealta avem selectata, daca apasam tasta Space, pointerul se va face
manuta si vom putea trage de scena cu mouseul, iar cand vom elibera tasta space mouseul se transorma
in unealta care era selectata.

Pentru a accesa mai usor anumite butoane sau elemente de meniu ale flash-ului bifati din Windows Toolbars toate optiunile de acolo. De asemenea meniul Tools din Windows trebuie sa fie bifat. Din Meniul
Windows aveti acces la toate subsectiunile de elemente ce permit realizarea setarilor sau modificarilor
pentru diferitele obiecte din scena. Dintre cele esentiale sunt si Layer, Align, Color, Info, Transform.
Avantajul acestor casete este acela ca pot fi grupate si afisate doar la nevoie prin click 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 trebui deschise pentru a avea acces rapid la ele.
Urmatoarea sectiune a flash-ului o reprezinta bara de timp "Timeline"

In acest loc sunt asezate layerele unul peste altul, fiecare avand un nume distinct care poate fi schimbat.
Fiecare layer este format din frame-uri care sunt reprezentate printr-un dreptunghi. Dupa cum se vede si
in figura de deasupra, in layerul doi primul frame are o bulina neagra. Aceasta bulina neagra apare pe
fiecare frame in care se afla cel putin un obiect. Dupa cum se vede frameul 1 din layerul 1 este gol,
deoarece in acest frame nu este desenat/scris nimic. Pozitia layerelor poate fi schimbata 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 bifat
lacatul - blocheaza accesul la layerul respectiv
patratul - arata doar conturul obiectelor din layer

Toate layerele din "Timeline" formeaza o scena care are anumite propietati setabile.
Un panou de control importand care nu trebuie sa stea inchis este cel de proprietati pe care il afisati tot
din Windows - Properties. Pentru a seta dimensiunea ascenei, culoarea fundalul ei, viteza de rulare a
frame-urilor (frame-uri/secunda) dati click in scena si folositi panoul de proprietati.
Continutul panoului de proprietati se schimba in functie de obiectul pe care dati click, diferente notabile
inregistrandu-se la trecerea de la un simbol la un text, de exemplu.
Un alt panou important, amintit si mai sus un pic este libraria de obiecte - Library. Aici vor fi prezente, de
preferat organizate pe foldere, toate simbolurile din animatie, fonturile folosite, imaginile importate,
sunetele etc.
Atunci 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 librarie si pentru a denumi layerele corespunzator. O organizare
buna 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. Numele scurte, dar clare vor ajuta intotdeauna si vor creste
viteza de lucru. Evitati pe cat posibil numele date de program pentru diferitele elemente din flash pentru a
nu avea in librarie o succesiune de simboluri notate de la Symbol1 pana la Symbol 100, iar cand vreti sa
modificati ceva sa o luati pe ghicite.