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.