Întroducere în Adobe Flash.

Cuprins

I. Adobe FlashII. DesenIII. AnimaţieIV. 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 (utilizator, server, sistem de operare).

Sunt suportate streaming-uri audio/video, iar interacţiunea cu utilizatorul se poate face şi prin microfon/webcam, pe lângă mouse/tastatură.Flash Player-ul, necesar pentru a rula aplicaţiile 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.Deşi cel mai des întâlnite utilizări sunt pentru marketing şi diverse forme de reclamă, posibilităţile practice sunt nelimitate.Pentru o abordare practică, deschide în Adobe Flash un fişier nou (Create New > ActionScript 3.0, sau File > New > ActionScript 3.0).Workspace-ul este interfaţa Flash-ului cu utilizatorul, selecţia şi aranjamentul de butoane şi meniuri pe care acesta le are la dispoziţie. Toate opţiunile aplicaţiei sunt selectabile accesând meniurile, dar cele din workspace sunt accesibile direct. Toate exemplele cu imagini din acest tutorial sunt făcute cu workspace-ul ”Designer”. Pentru a modifica workspace-ul existent, click pe butonul de workspace aflat în bara de sus a aplicaţiei:

ş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ă selectându-le din meniul Window).

Proprietăţile obiectelor selectate pot fi vizualizate şi editate în panoul Properties. Când 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 afişate proprietăţile documentului Flash deschis:

Aici pot fi modificate setările Stage-ului, cum ar fi dimensiunea acestuia, culoarea de background şi altele.Timeline-ul este esenţial lucrului pe layer-e şi animării. Fiecare cadru numerotat reprezintă o stare a Stage-ului în momentul respectiv. Numărul de cadre pe secundă (fps) poate fi modificat în funcţie de necesităţi, 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), preluând informaţia de la ultimul cadru-cheie în ordine cronologică, inserându-se cu F5. Acestea vor folosi în mod special la animaţii.

II. Desen

Desenul în Flash se face exclusiv vectorial. Imaginile raster pot fi importate, posibilităţile de modificare ale acestora fiind reduse.Pentru a desena, avem la dispoziţie o gamă de unelte, fiecare cu setările sale:

ţinând mouse-ul deasupra unei unelte (Hovering), este afişat un tooltip cu descrierea uneltei şi shortcut-ul de pe tastatură.

Pencil Tool   pur şi simplu desenează o linie pe unde se mişcă mouse-ul când Click Stânga este apăsat.

Proprietăţile precum culoarea, grosimea (Stroke), rotunjirea (Smoothing), capetele (Cap) şi altele sunt accesibile în panoul de proprietăţi. Alte setări alte uneltei sunt vizibile in panoul Tools (Smooth, Straight) atunci când unealta este selectată.

Pen Tool   este o unealtă care plasează puncte de control, modificând vectorul dintre puncte folosind curbe Bézier prin tehnica Drag (ţinând apăsat Click Stânga în timpul amplasării unui punct de control).

Tehnica aceasta este similară Pen Tool-ului din Adobe Fireworks, Adobe Photoshop, Adobe Illustrator. Permite acurateţe sporită în definirea curbelor vectorilor.

Subselection Tool   selectează un obiect şi îi arată vectorii componenţi, permiţând modificări asupra capetelor acestora folosind curbe Bézier.

Odată selectat obiectul, trebuie selectat punctul de legătură al vectorilor asupra cărora se vor aduce modificări. Capetele curbelor Bézier pot fi trase (Drag) până la obţinerea rezultatului dorit.

Selection Tool   selectează componentele obiectelor printr-un singur click, şi întregul obiect prin dublu click. Când un obiect este selectat, în panoul Properties sunt afişate proprietăţile obiectului respectiv. Pot fi aduse modificări ulterioare momentului desenării.

Când un obiect nu este selectat, unealta îi aduce modificări curbei sau poziţiei capătului de vector, după caz. Când cursorul este deasupra unei curbe sau unui capăt de vector, lângă cursor este afişat elementul ce urmează a fi modificat.

   

Tehnica este Drag and Drop, iar modificările sunt mai uşor de adus, dar acurateţea redusă faţă de tehnica anterioară cu Subselection Tool. Ţinând apăsat pe tasta Ctrl în timp ce cursorul se află deasupra unei curbe, se crează un nou capăt de vector (a treia imagine).

Paint Bucket Tool   umple spaţiile închise de vectori. Acţionarea uneltei într-un spaţiu deschis nu are nici un efect.

Partea umplută de unealtă este un Shape individual, poate fi selectat şi modificat fără intervenţie asupra vectorilor care l-au delimitat. Modificarea vectorilor ce înconjoară un shape duce la modificarea shape-ului.

Brush Tool   este asemănător lui Pencil Tool, dar crează shapes, în locul vectorilor (aceştia fiind, opţional, marginile shape-ului).

Rectangle Tool   crează forme primitive. Ţinând apăsat pe buton, apar mai multe opţiuni selectabile. Fiecare formă are configuraţia sa (număr de colţuri, unghiuri, etc). Unealta crează ori vector, ori shape, ori amandouă simultan.

Free Transform Tool   aduce modificări obiectelor selectate. Pe lângă redimensionare, în funcţie de locaţia cursorului, mai sunt disponibile şi Rotate (lângă colţuri) şi Skew (între colţuri şi centre). Modificările de rotaţie sunt relative centrului prestabilit, vizibil printr-un cerc alb, care poate fi mutat oriunde pe Stage, chiar şi în afara obiectului.

 

III. Animaţie

Pentru a anima un obiect, acesta trebuie să fie prezent, de regulă, în Library  . Shape-urile şi vectorii apar în library după ce sunt convertiţi (cu F8) în obiecte de tip MovieClip, Buttonsau Graphic. În cadrul tutorialului folosim obiecte de tip Movie Clip.Animaţiile în Flash sunt de trei tipuri: Classic Tween, Motion Tween şi ActionScript.Classic Tween este tipul de animaţie cadru-cu-cadru, în care utilizatorul setează stările iniţiale şi finale ale obiectului, iar aplicaţia aplică transformări în cadrele dintre cele două stări.

 

Selectează un cadru mai îndepărtat (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 poziţii a obiectului. Acum modifică starea obiectului într-unul din cadrele cheie (poziţia, culoarea, dimensiunea, etc) şi rulează (compilează) aplicaţia cu Ctrl+Enter. La ActionScript vom afla cum oprim animaţia din a se derula fără sfârşit.Motion Tween este un tip de animaţie nou, disponibil de la versiunile CS4 în sus. Dacă la Classic Tween setam stările iniţiale şi finale ale obiectelor, la Motion Tween se pune foarte mult accent pe intermediar.

 

Selectează un cadru mai îndepărtat (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 poziţii a obiectului. Acum modifică starea obiectului într-unul din cadrele cheie (poziţia, culoarea, dimensiunea, etc). A apărut în plus un vector care arată traiectoria obiectului. Folosind tehnica drag&drop de la Desen, modifică traiectoria (adaugă-i o curbă sau un capăt de vector). Selectând vectorul-traiectorie, în panoul Properties apar proprietăţile Motion Tween-ului. Acestea (rotation, ease) pot fi modificate după situaţie. Rulează (compilează) aplicaţia cuCtrl+Enter. Partea de Motion Tween este foarte complexă, urmăreşte tutorialul despre Motion Tween. La ActionScript vom afla cum oprim animaţia din a se derula fără sfârşit.Animarea obiectelor prin ActionScript se face modificând parametrii acestora prin funcţie de timp, prin interacţiunea 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ă asemănătoare JavaScript. Tasta F9 deschide fereastra de cod. În orice cadru-cheie, fără 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!"; // iniţializează 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 funcţie directă o afectează pe aceasta, de exemplu stop(); care opreşte derularea animaţiei, sau play(); care o porneşte.Obiectele de pe scenă sunt accesibile prin numele acestora din Properties, la Instance Name.

 Cod:  oval.x = 5; // setează poziţia 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 cărora să acţioneze prin funcţia predefinită (event de mouse, event de încărcare fişier, 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 fişierului fiind semnificativ redusă la 5-15% 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  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, alocati-va 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 contururilorGaleata - ajuta la colorarea suprafetelorPipeta - retine nuanta de culoare pe care se face clickGuma - Unealta pentru sters. Se pot seta grosimea si forma gumei, cat si ce anume sa stearga - contur, suprafete etcMana - Unealta pentru miscat scena fara a mai folosi bara de scroll. Lupa - unealta pentru marit micsrorat scena (%)Colors Creion - seteaza culoarea pentru linii/contururiColor Calimara -  seteaza culoarea pentru suprafeteMagnet - 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 franteLinia 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.