Corina Hloiu, Adina Stnculescu

Flash CS3 i ActionScript 3.0 pe nelesul tuturor

Autori: Corina Hloiu, Adina Stnculescu Referent: prof. univ. dr. Dan Dumitrescu, Universitatea Babe-Bolyai, Facultatea de Matematic i Informatic, Cluj-Napoca

Copyright 2008 Editura Prisma. Toate drepturile rezervate. Design coperta: Editura Prisma Tipar: Tipografia Prisma
Pentru detalii legate de tipar, contactai tipografia la adresa contact@tipografiaprisma.ro

Descrierea CIP a Bibliotecii Naionale a Romniei

Nici o parte din aceast lucrare nu poate fi reprodus, total sau parial sub nici o form: electronic, prin fotocopiere, nregistrare, scanare etc. fr aprobarea scris a editurii, conform Legii nr. 8/1996 privind dreptul de autor i drepturile conexe.

Informaii i comenzi la adresa: corinahaloiu@yahoo.com ISBN: 978-973-87981-6-8

Prefa
Cartea analizat reprezint un remarcabil eveniment editorial. Este o carte inteligent i agreabil scris -un adevrat exerciiu de seducie intelectual. Cititorul este cucerit nc de la primele pagini, iar stilul viu i alert face ca interesul s se menin pn la sfritul lecturii, cartea reprezentnd nu doar o excelent introducere n Flash CS3 i Actionscript 3.0, dar i un adevrat manifest al domeniului. Pasiunea autoarelor pentru acest domeniu -evident n fiecare seciune- se transmite i cititorului. Spre deosebire de lucrri similare, cartea reprezint cu adevrat un excelent instrument de lucru. Ea este selfconsistent i dup lectura ei cititorul poate s-i dezvolte propriile aplicaii. Autoarele propun un traseu atractiv, un adevrat joc intelectual, care face ca lectura s nainteze fr efort. Cartea are toate caracteristicile unui bestseller i sunt convins c publicul int va confirma acest statut. Autoarele sunt absolvente ale Facultii de Matematic i Informatic din Universitatea Babe-Bolyai, Cluj-Napoca. Ele au experien bogat n Programare Web i Actionscript, iar cartea prezentat este rodul acestei experiene.

prof. univ. dr. Dan Dumitrescu

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

CUPRINS
Capitolul 1.
1.1 1.2 1.3 1.4 1.5 1.6 1.7

INTRODUCERE
La nceput a fostMacromedia Cui se adreseaz cartea de fa Cum este structurat lucrarea Ce trebuie s tii pentru a putea parcurge aceast lucrare Extensii: fla, swf, exe Softul necesar Notaii i convenii

11
12 12 13 13 14 14 15

Capitolul 2.
2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8

INTERFAA APLICAIEI ADOBE FLASH CS3

Interfaa Flash CS3 Timeline i frame rate. Proprietile unui film flash Layers Panoul Tools Ferestre de tip panel Fereastra Properties Publish. Crearea fiierelor swf, html, exe Flash Help

17
18 19 19 21 21 22 23 24

Capitolul 3.
3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8

ELEMENTE DE BAZ N FLASH CS3

Bitmap. Inserarea de imagini Simboluri Flash. Importana lor Texte Simboluri grafice Movieclip Butoane Punct de inserie Filtre

25
26 27 29 29 30 30 32 33

8
Capitolul 4.
4.1 4.2 4.3 4.4 4.5 4.6

Cuprins

ANIMAII FLASH
Animaii de tip Motion Tween Animaii de tip Shape Mask layer Guide layer Copierea unei animaii Sunete

35
36 39 40 42 45 46

Capitolul 5.
5.1 5.2 5.3 5.4 5.5 5.6

N SFRIT ACTIONSCRIPT 3.0

Primele rnduri de cod Variabile Tipuri de date Comentarii Operatori Instruciuni
5.6.1 5.6.2 5.6.3 5.6.4 5.6.5 Instruciunea if Instruciunea switch Instruciunea for Obiecte i instruciunea for..in Instruciunile while i do while

49
50 52 53 55 55 57
57 58 59 61 62

Capitolul 6.
6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9 6.10

PROGRAMAREA N ACTIONSCRIPT 3.0

Funcii predefinite Funcii utilizator. Transmiterea parametrilor Variabile locale i variabile globale Funcii recursive Lucrul cu date calendaristice Movieclip. Proprieti i metode. Imbricare. Execuia unui script la un anumit interval de timp Execuia unui script la apsarea unui buton sau movieclip Direcionarea spre o pagin web Citirea datelor din fiiere xml

63
64 65 68 69 70 71 74 76 80 81

Flash CS3 i Actionscript 3.0 pe nelesul tuturor 6.11 6.12 6.13 6.14 6.15 Crearea de butoane animate Controlul sunetelor prin actionscript Preloader Programare orientat pe obiecte Crearea i folosirea propriilor clase

9
84 87 93 97 98

Capitolul 7.
7.1 7.2 7.3 7.4 7.5 7.6 7.7 7.8 7.9 7.10 7.11 7.12

MINIPROIECTE
Desenare frunze Fulgi de zpad Cuburi buclucae Ceas analogic Ordoneaz numerele Constelaii Galerie foto Galerie foto cu imagini thumbnails Sound player Folosirea pachetelor n proiectarea claselor Problema damelor Echilibreaz balana

101
102 107 111 118 123 131 139 144 153 160 164 172

Index

183

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

11

Capitolul 1.

INTRODUCERE
n acest capitol
cui se adreseaz cartea structura crii ce trebuie s tii pentru a porni la drum softul necesar notaii i convenii

12
1.1 La nceput a fostMacromedia

Introducere

nceputurile a ceea ce numim astzi Flash se situeaz n anul 1996. Creat de firma Macromedia, Flash a devenit n foarte scurt timp modalitatea cea mai folosit de a aduga animaie i interactivitate n paginile web. Versiunea de Flash la care ne referim este dezvoltat de Adobe Systems, lansat n 2007 i cunoscut sub numele de Adobe Flash CS3. Flash utilizeaz ca limbaj de programare pentru a controla entitile cu care lucreaz ceea ce cunoatem sub numele de Actionscript iar versiunea la care facem referire este Actionscript 3.0 dezvoltat de Adobe i total diferit de anterioara 2.0 dezvoltat de Macromedia.

1.2

Cui se adreseaz cartea de fa

Exist n literatura de specialitate o multitudine de lucrri ce trateaz aspecte legate de Adobe Flash CS3 i Actionscript 3.0. Astfel c se nate fireasca ntrebare: pentru ce o lucrare n plus? Rspunsul este simplu: pentru c avem convingerea c felul n care prezini cuiva un soft este esenial n a prinde gustul spre a-l utiliza sau a merge n alt direcie. Ceea ce aducem nou cu aceast lucrare este forma n care am ales s prezentm ceea ce ni s-a prut cu adevrat fascinant n acest univers n care programarea face lucrurile s se mite. Nu este o prezentare liniar, enumerativ, ci una plin de exemple, aplicaii i miniproiecte. Cartea se dorete a fi mai ales un ghid legat de programarea n Flash CS3 folosind Actionscript 3.0. Astfel c, cei ce cunosc elementele de interfa i conceptele de baz ale programului Adobe Flash CS3 (movieclip, timeline, butoane, library) ori cei ce au i programat n Flash folosind versiunea Actionscript 2.0, vor trece peste partea de nceput, fcnd un salt direct la capitolul: n sfrit Actionscript 3.0. Vei ntlni destul de multe exemple n care noiunile de programare se intersecteaz cu cele predate n anii de liceu la orele de informatic sau n facultate la cursurile de programare. i aceasta pentru c am scris aceast carte nu neprat pentru programatorii versai, ci pentru elevii i studenii care au prins gustul programrii i vor ceva mai mult sau pentru profesorii de specialitate care vor s realizeze cursuri opionale n colile lor. Dup ce vei parcurge ntreaga lucrare, vei fi de acord cu noi cnd spunem c a studia Flash i Actionscript 3.0 reprezint cea mai provocatoare invitaie la Be smart!. Pentru c Adobe Flash CS3 v face s gndii altfel cnd analizai o problem: complet, eficient, elegant.

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

13

1.3

Cum este structurat lucrarea

Noiunile legate de Adobe Flash CS3 sunt grupate n 3 capitole i anume: Interfaa aplicaiei Adobe Flash CS3, Elemente de baz n Flash CS3 i Animaii Flash, iar cele legate de Actionscript 3.0 n alte 3 capitole: n sfrit Actionscript 3.0, Programarea n Actionscript 3.0 i Miniproiecte. Dac ai mai lucrat pn acum n versiunile anterioare de Flash i vrei s nvai programarea n Actionscript 3.0, atunci putei sri peste noiunile legate de Flash CS3, cu toate c i aici sunt cteva elemente ce difereniaz Flash CS3 de versiunile anterioare. Capitolele i seciunile referitoare la Actionscript 3.0 v recomandm s le parcurgei n ordine deoarece noiunile noi sunt introduse pas cu pas i este posibil ca n anumite seciuni s folosii noiuni exemplificate n seciunile anterioare. Ultimul capitol al lucrrii este intitulat Miniproiecte i cuprinde exemple de aplicaii realizate n Flash CS3 folosind Actionscript 3.0. Am conceput acest capitol spre a arta cititorilor cum analizm o problem, cum transformm elementele acesteia n entiti controlabile prin Actionscript 3.0, cum dm via acestor elemente la micarea mouse-ului, la trecerea timpului ori la interaciunea utilizatorului cu aplicaia. Cu toate c aceste miniproiecte sunt independente, v sftuim s le parcurgei n ordinea n care sunt prezentate i mai ales s i realizai proiectele propuse n paralel cu lectura crii. Astfel, parcurgnd toate etapele de analiz a problemei, proiectare a codului, testare pe parcurs a modulelor scrise i apoi a aplicaiei finale vei nelege care sunt elementele cheie ale realizrii unui proiect n Flash.

1.4

Ce trebuie s tii pentru a putea parcurge aceast lucrare

Cartea nu se adreseaz necunosctorilor n ale programrii n sensul c nu ne propunem s explicm termeni de baz precum variabil, tip de dat, tablouri, instruciuni, funcii, parametri .a. Aceste elemente de programare de baz se presupun a fi cunoscute i sunt absolut necesare pentru a parcurge seciunile dedicate programrii n limbajul Actionscript 3.0 i nu doar pe cele legate de Adobe Flash CS3 ca program n care poi face animaii i fr s scrii linii de cod. Cu toate c Actionscript 3.0 presupune programare orientat obiect (OOP Object Oriented Programming), nu este necesar s avei neaprat cunotine de programare obiectual deoarece vom explica noiunile direct, cu referire la Flash. Dac ai programat anterior n Javascript, C++, C# ori PHP vei descoperi c sintaxa este asemntoare i destul de uor de stpnit.

14
1.5 Extensii: fla, swf, exe

Introducere

Sursele aplicaiilor realizate n Flash sunt fiiere cu extensia fla. La fel ca i ntr-un program C de exemplu, avei nevoie de aceast surs spre a face modificri ulterioare asupra aplicaiei voastre. Deoarece sursele flash conin de cele mai multe ori animaii, obinuim s facem referire la fiierele cu extensia fla sub forma filmul flash. n funcie de formatul final dorit, din aceast surs, printr-o simpl operaie publish putei obine: Fiierul swf care poate fi executat n browser sau local, pe computer, folosind playerul de flash. Fiierul html care este pagina web ce integreaz ntreaga animaie fcut n flash. Fiierul exe care va putea fi rulat pe orice calculator, indiferent dac acesta are sau nu instalat playerul de flash. Adobe Flash CS3 are avantajul c produsul final (fiierul swf care poate rula n browser) este deosebit de mic, deci timpul de ncrcare n browser nu este foarte mare, ci de ordinul secundelor.

1.6

Softul necesar

Putei citi ntreaga lucrare relaxai, n fotoliul dumneavoastr, dar v sftuim s v dezlipii de acolo din cnd n cnd ca s testai exemplele propuse de noi n lucrare, s v obinuii cu interfaa Adobe Flash CS3 i mai apoi cu ferestrele actionscript, s v convingei c liniile de cod pe care le scriei fac lucrurile s apar, s dispar sau s se mite, dup bunul vostru plac. Pentru aceasta avei nevoie s instalai Adobe Flash CS3. Gsii versiunea trial la adresa: http://www.adobe.com/products/flash Instalarea este simpl, parcurgei doar paii indicai n instruciunile de instalare. Deoarece crearea de animaii Flash solicit destul de mult memorie intern, cerinele sistem pot prea prea mari. Adobe Flash CS3 are nevoie de minim 512 MB RAM, dar indicat ar fi 1GB RAM (sau mai mult). Dac dorii doar s vizualizai animaii realizate cu Adobe Flash CS3, avei nevoie de Flash Player pe care-l gsii la adresa: http://www.adobe.com/go/getflashplayer

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

15

1.7

Notaii i convenii

Pentru o mai bun reperare a secvenelor de cod n cadrul lucrrii, acestea vor fi scrise sub forma: var a:String="Acesta este un text"; trace (a.toUpperCase()); Numele ferestrelor vor fi evideniate cu text italic (ex: Output, Library), la fel numele fiierelor i ale extensiilor (ex: Mesaj.as, fla, as) Expresiile de forma File Import Import to Stage se refer la selectarea meniului File, apoi a opiunii Import i mai departe a opiunii Import to Stage. n Flash exist o serie de termeni pentru care o traducere ar suna forat. Astfel, termeni precum movieclip, timeline, layer, frame rate, frame .a. vor fi folosii ca atare, netradui. De aceea, fiind vorba de termeni adoptai ca atare i nu existeni n limba romn i pe care n anumite exprimri suntem nevoii s-i folosim fie n forma articulat fie n foma de plural, vom folosi expresii precum Plasai movieclip-ul ... pe layer-ul.... Respectnd deci limba noastr romn, lsm aceti termeni acolo unde le este locul: n zona termenilor tiinifici i att, nu-i romnizm, nu-i introducem n Dex.

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

17

Capitolul 2.

INTERFAA APLICAIEI ADOBE FLASH CS3

n acest capitol
interfaa Adobe Flash CS3 proprietile unui film flash frame rate, timeline, layer Tools, ferestre panel, fereastra Properties publish: creare fiiere swf, exe, html Flash Help

18
2.1 Interfaa Flash CS3

Interfaa aplicaiei Adobe Flash CS3

Interfaa Flash este puin diferit de cea a altor aplicaii, deci nu v speriai dac v va lua ceva timp s v familiarizai cu ea. Putei vedea n imaginea de mai jos elementele acestei interfee: Bara de meniuri (Menu Bar) Panoul cu instrumente (Tools Panel) Axa timpului (Timeline) Scena (Stage) Fereastra de proprieti (Properties) Alte ferestre tip panel (Color, Library, etc) Tools Properties Stage Timeline Menu Bar Panels

Figura 1 - Interfaa aplicaiei Adobe Flash CS3

Scena este zona alb din centrul imaginii. Tot ce se deseneaz n afara scenei va fi invizibil sau parial vizibil, n funcie de poziia obiectului desenat.

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

19

n figura 1, dimensiunile scenei sunt 550 x 400 pixeli. La crearea unui fiier flash nou acestea sunt dimensiunile implicite ale scenei, dar pot fi schimbate. Observai c procentul de vizualizare este de 60%. Evident, i acesta poate fi schimbat, iar pentru aceasta vei folosi foarte des combinaiile de taste CTRL+ pentru zoom in i respectiv CTRL- pentru zoom out.

2.2

Timeline i frame rate. Proprietile unui film flash

Axa timpului (timeline) este format din frame-uri (cadre). Fiecare film flash are asociat un frame rate. Frame rate-ul este un numr care reprezint cte frame-uri se deruleaz ntr-o secund. De exemplu, dac dorim o animaie de 2 secunde i am stabilit pentru filmul flash un frame rate de 25 fps (frames per seconds), atunci vom avea nevoie de 50 frame-uri, iar dac frame rate-ul stabilit este de 12 fps, atunci vom avea nevoie de 24 frame-uri. Este bine ca acest frame rate s fie fixat nc de la bun nceput spre a nu face apoi prea multe modificri asupra animaiilor deja realizate. De obicei, nainte de a crea obiecte grafice i a le anima, stabilim ce dimensiuni (n pixeli) i ce culoare de fundal dorim s aib filmul flash. Att dimensiunile ct i culoarea de fundal pot fi schimbate i ulterior, cele fixate la nceput nu vor fi obligatoriu i cele ce vor rmne pn la finalul realizrii animaiei. Dac accesai butonul Size din fereastra Properties (ca n figura 2) vei putea seta: numrul de pixeli pe orizontal, numrul de pixeli pe vertical, culoarea pentru background i frame rate-ul pentru filmul vostru flash.

Figura 2 Proprietile unui film flash (dimensiuni, background, frame rate)

2.3

Layers

Obiectele pe scen sunt de cele mai multe ori desenate pe straturi (layers). Acest fapt permite pe de o parte ca obiectele s fie aranjate n ordinea dorit, cu sau fr suprapuneri pariale, iar pe de alt parte permite animarea acestora, fiecare animaie fiind pe un alt layer. Aceste straturi au nume implicite (Layer 1, Layer 2...), dar, pentru o mai bun organizare a informaiei, este indicat s le redenumii spre a sugera care obiect/obiecte de pe scen se afl pe acel layer (dublu click pe numele su i introducei noul nume).

20

Interfaa aplicaiei Adobe Flash CS3

n figura 3 avem un film flash n care primul layer se numete Cerc, iar al doilea Dreptunghi. Obiectele care vor fi desenate pe layer-ul Cerc se vor afla deasupra celor desenate pe layer-ul Dreptunghi pentru c layer-ul Cerc se afl deasupra layer-ului Dreptunghi. Putei crea sau terge un layer folosind butoanele Insert Layer i Delete Layer (vezi figura 3). Ceea ce desenai pe scen se va desena pe layer-ul activ. Pentru a face un layer activ efectuai un simplu click pe acesta. n orice moment tii care este layer-ul activ pentru c acesta este evideniat cu o alt culoare. n figura 3 de exemplu, layer-ul Cerc este cel activ. Putei schimba ordinea layer-elor, trgnd pur i simplu de ele n sus sau n jos. Putei ascunde/face vizibil coninutul unui layer folosind butonul de forma unui punct aflat n coloana corespunztoare icon-ului de forma unui ochi, cu precizarea c este vorba de vizibilitate n etapa design view i nu n cea de execuie a filmului flash. La fel, putei bloca/debloca un layer folosind butonul de forma unui punct aflat n coloana corespunztoare icon-ului de forma unui lact. Ambele butoane funcioneaz ca nite comutatoare. n figura 3 layer-ul Dreptunghi este invizibil i blocat. Observai felul n care este marcat acest lucru, din punct de vedere grafic, n coloanele corespunztoare icon-urilor de forma unui ochi i respectiv lact.

Figura 3 Inserarea / tergerea unui layer

De precizat c dac avei activ un layer care e invizibil sau blocat, atunci nu vei putea desena nimic pe acest layer. Dac ncercai s desenai pe un astfel de layer vei obine mesajul de avertizare cu urmtorul coninut: The current layer Dreptunghi is either locked or hidden. Would you like to unlock and show this layer? Rspunznd cu Yes acestui mesaj, acel layer se deblocheaz i devine vizibil.

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

21

2.4

Panoul Tools

n stnga ecranului se afl panolul Tools care conine instrumentele ce v permit s desenai diverse obiecte grafice, s stergei, s scriei texte, s selectai diverse zone de pe scen, s schimbai culoarea pentru umplere, respectiv pentru conturul obiectelor, etc. Numele i icon-urile ataate acestor instrumente sunt similare cu cele ntlnite n orice program de grafic i nu vom insista asupra funcionalitii lor. n cazul n care ai pierdut acest panou, urmrii ca n meniul Window, opiunea Tools s fie bifat.

2.5

Ferestre de tip panel

Sunt ferestre ce permit setri diverse pentru obiectele aflate pe scen. Ele se deschid n partea dreapt a ecranului, iar dac fereastra cutat nu se afl acolo, cutai n meniul Window s vedei dac numele acelei ferestre este bifat. De exemplu, vei folosi destul de mult fereastra Transform care v permite s schimbai dimensiunile, unghiul de rotaie ori nclinarea pe orizontal i/sau vertical pentru un obiect selectat de pe scen. n figura 4 putei observa cum, pentru dreptunghiul selectat s-au aplicat urmtoarele transformri: limea este 50% din limea iniial, nlimea este 80% din cea iniial, iar figura a fost rotit cu 20 de grade n sensul acelor de ceas.

Figura 4 Transformarea unui dreptunghi folosind fereastra Transform

O alt fereastr de tip Panel foarte des folosit este Align. Ea permite alinierea (Align), spaierea (Space), distribuirea (Distribute), schimbarea dimensiunilor (Match size) pentru unul sau mai multe obiecte selectate, operaii ce se pot face relativ la scen (To stage) sau nu.

22

Interfaa aplicaiei Adobe Flash CS3

Figura 5 Fereastra Align

Pentru a putea alinia/spaia/distribui mai multe obiecte vei avea nevoie s selectai mai nti acele obiecte, apoi s apsai butonul de aliniere/spaiere/distribuire corespunztor operaiei dorite. Sunt situaii n care aceste obiecte nu pot fi selectate folosind instrumentul Selection Tool (primul instrument din fereastra Tools) pentru c folosirea acestui instrument presupune trasarea unui dreptunghi imaginar care s cuprind toate obiectele pe care vrei s le selectai i sunt situaii n care n interiorul acelui dreptunghi imaginar se afl i obiecte pe care nu vrei s le selectai. n acest caz vei selecta obiectele n modul urmtor: inei apsat tasta SHIFT i executai click-uri succesive pe obiectele pe care vrei s le selectai.

2.6

Fereastra Properties

Este ca o prines ntre ferestre deoarece privirea vi se va ndrepta mai tot timpul spre partea de jos a ecranului, zona unde este ea implicit poziionat. Dac n-o gsii acolo, urmrii dac optiunea Window Properties este sau nu bifat. n aceast fereastr vedei proprietile obiectului selectat de pe scen, proprieti care difer n funcie de tipul obiectului selectat. De exemplu, dac nu avei niciun obiect selectat, atunci n aceast zon vei vedea proprietile filmului flash. Dac avei selectat o entitate de tip shape, atunci aici vei vedea dimensiunile n pixeli ale acesteia precum i poziia, culoarea de umplere, culoarea de contur, etc. Mai apoi, cnd vei lucra cu movieclip-uri, butoane ori texte de tip dinamic sau input text, n aceast fereastr vei putea seta numele pentru movieclip-ul, butonul sau textul selectat i, la fel de important, vei putea vedea n aceast fereastr ce anume este entitatea selectat (Shape, Graphic, Movie Clip, Button, Static Text, Dynamic Text, Input Text ori Bitmap).

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

23

2.7

Publish. Crearea fiierelor swf, html, exe

Creai un fiier nou (File New), desenai pe scen ceva, un dreptunghi de exemplu, apoi salvai fiierul cu numele exemplu (File Save) ntr-un folder nou. n acest moment, n acel folder s-a creat fiierul exemplu.fla, fiier care conine sursa flash. n meniul File Publish Settings Formats, zona Type, urmrii s fie bifate opiunile Flash, HTML i Windows Projector, apoi apsai butonul Publish. Ca efect, folderul va conine acum mai multe fiiere aa cum putei vedea n figura 6.

Figura 6 Fiiere obinute n urma operaiei Publish

Analizai dimensiunile fiierelor obinute. Pentru web vei avea nevoie de fiierele swf, html i js. Acesta din urm este creat automat de Flash CS3 pentru detectarea playerului de Flash i este folosit n interiorul codului HTML din fiierul exemplu.html. Fiierul exe observai c este mult mai mare; el include i playerul local. Dac dorii ca animaia s ruleze pe un computer pe care nu avei instalat playerul de Flash, atunci vei avea nevoie de acest fiier exe, n caz contrar este de preferat s folosii fiierul swf, acesta din urm fiind mult mai mic ca dimensiune. Iar sursa n-o ratcii, avei nevoie de ea pentru modificri ulterioare. Viitoarele operaii Publish recreeaz toate aceste fiiere, evident n funcie de formatele bifate. Combinaia de taste CTRL+Enter pe care o vei folosi foarte des pentru testarea animaiilor i care corespunde opiunii Test Movie din meniul Control, recreeaz doar fiierul swf.

24
2.8 Flash Help

Interfaa aplicaiei Adobe Flash CS3

Accesarea help-ului se face alegnd opiunea Flash Help din meniul Help ori apsnd tasta F1. Flash Help este organizat n mai multe manuale (exemplu: Features unde putei gsi informaii referitoare la folosirea aplicaiei Adobe Flash CS3, Actionscript 3.0 care conine detalii cu privire la Actionscript 3.0, la clasele implementate n Flash). Avei i posibilitatea de a cuta (ntr-un anumit manual sau n toate) folosind modulul de cutare.

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

25

Capitolul 3.

ELEMENTE DE BAZ N FLASH CS3

n acest capitol
lucrul cu imagini Bitmap simboluri Flash: simboluri grafice, butoane, movieclip lucrul cu texte: statice, dinamice, de tip input text punctul de inserie pentru un simbol filtre aplicate unui movieclip

26

Elemente de baz n Flash CS3

Adobe Flash CS3 permite lucrul cu texte, forme grafice desenate folosind uneltele pe care vi le pune la dispoziie, dar permite i importarea de imagini, sunete, filme, etc. Toate acestea sunt grupate n entiti numite simboluri pentru care Flash memoreaz definiia acestora ntr-o bibliotec numit Library. S vedem mai nti cum se lucreaz cu bitmap-uri i apoi vom analiza tipurile de simboluri ce se pot crea n Flash.

3.1

Bitmap. Inserarea de imagini

Ca aplicaie, Flash este un program orientat pe grafic vectorial, ceea ce nseamn c o form grafic este descris folosind linii i curbe, numite vectori, mpreun cu proprietile acestora (culoare, poziie, etc.). Mutarea, redimensionarea, rotirea, schimbarea culorii unei forme grafice presupun schimbri asupra ecuaiilor matematice ce descriu aceste curbe, de aceea, indiferent de ct de mare vom redimensiona o form grafic realizat n Flash, calitatea va rmne aceeai. Totui, Flash import i imagini de tip bitmap (jpg, bmp, png, gif, etc.) realizate n programe de grafic ce lucreaz cu imagini raster, lumea graficii unde imaginea este memorat ca un set de pixeli de culori diferite. Pentru a importa o imagine folosii File Import Import to Stage i selectai imaginea pe care dorii s-o importai. Deoarece la redimensionarea unei imagini raster calitatea imaginii se schimb, este indicat s stabilii dimensiunea imaginii nainte de a o importa n Flash, folosind un soft pentru prelucrarea de imagini. Putei converti o imagine n vector folosind opiunea Modify Bitmap Trace Bitmap, cu precizarea c putei obine diferene sensibile, aa cum se poate observa n imaginea de mai jos, n funcie de setrile alese n fereastra Trace Bitmap.

Figura 1 Transformarea unei imagini n vector (trace bitmap)

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

27

3.2

Simboluri Flash. Importana lor

Dac ai desenat pe scen o figur geometric s zicem i dorii s o folosii de mai multe ori, este momentul s-o convertii ntr-un simbol. Aceasta deoarece, pentru un simbol, Flash memoreaz definiia acestuia, iar folosirea lui de mai multe ori presupune simpla referire la aceast definiie. Simbolurile sunt practic mici pri cu ajutorul crora construim imagini i/sau animaii complexe. Desennd un cerc de exemplu i alegnd opiunea Convert to Symbol din meniul Modify sau, mai simplu, apsnd direct tasta F8, vei putea transforma aceast form grafic (shape) n movieclip, buton sau simbol grafic. Aadar, Adobe Flash CS3 lucreaz cu 3 tipuri de simboluri i anume: Movie Clip Button Graphic Un simbol poate conine orice elemente grafice n interiorul su, inclusiv imagini bitmap sau texte. Are un unic nume n Library, cel dat la crearea sa. Folosirea simbolurilor este deosebit de important deoarece mecanismul de lucru cu ele este urmtorul: odat creat un simbol, acesta este plasat n Library i poate fi adus pe scen n orict de multe exemplare, iar dimensiunea filmului flash nu va crete n mod semnificativ.

Figura 2 Fereastra Library

n fereastra Library putei vedea, alturi de imaginile bitmap importate, toate simbolurile create n fiierul vostru fla. n imaginea de mai sus

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

101

Capitolul 7.

MINIPROIECTE
n acest capitol
desenare prin actionscript animaie -ninsoare animaie -cuburi n funcie de micarea mouse-ului ceas analogic joc -ordoneaz numerele constelaii de stele galerie foto galerie foto cu thumbnails i informaii preluate din xml sound player package problema damelor joc -echilibreaz balana

102
7.1 Desenare frunze

Miniproiecte

Avem la dispoziie o imagine cu o frunz, de aproximativ 150 de pixeli lime i dorim s realizm un film flash n care, la apsarea unui buton s se deseneze aleator pe scen 10 frunze de mrimi diferite i cu diferite transparene. La o nou apsare a acelui buton vrem s se tearg vechiul coninut i s se aduc alte 10 frunze aleator poziionate pe ecran. S pornim deci la drum! Am pregtit mai nti un fiier numit frunza.png. Fiind fiier png, spre deosebire de jpg, acesta suport transparena, deci vom vedea doar frunzele i nu frunzele ncadrate ntr-un dreptunghi, eventual de culoare alb. Astfel, dac modificm culoarea scenei din alb n crem de exemplu, nu vom avea senzaia c n peisajul nostru au aprut dreptunghiuri cutie cu frunze n ele. Creai un nou film flash i importai imaginea frunza.png. Din aceast imagine creai un movieclip denumit frunza (ca nume n Library), avnd ca punct de inserie punctul central, apoi tergei movieclip-ul de pe scen pentru c nu mai avem nevoie de el. Nu v speriai, nu l-am pierdut, el este n Library. n acest moment, fereastra Library va arta astfel:

Mai departe trebuie s folosim actionscript pentru a aduce frunze pe ecran. Aceasta nseamn c trebuie s atam o clas movieclip-ului frunza, clas pe care o vom denumi Frunza, pentru ca apoi s putem scrie instruciuni de forma var f:Frunza=new Frunza();

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

103

Efectuai click dreapta, pe movieclip-ul frunza din Library i, din meniul care se deschide, alegei opiunea Linkage, n fereastra obinut bifai Export for ActionScript, observai c se va bifa automat i Export in first frame, iar n zona Class, introducei numele clasei, adic Frunza (atenie la litere mici/mari). n acest moment, fereastra Linkage Properties va arta astfel:

Acum avem la dispoziie clasa Frunza care a fost creat pe baza movieclip-ului frunza. Vei vedea, n proiectele viitoare, c pentru o clas astfel creat putei aduga proprieti i metode i astfel fiecare obiect de tip Frunza va avea nu doar o imagine vizual, ci i aceste proprieti i metode. Apsai butonul OK i creai un layer numit Actions, n care, pentru nceput, pe primul frame, introducei urmtorul cod: var f:Frunza=new Frunza(); f.x=200; f.y=100; addChild(f); Salvai (CTRL+S) i testai filmul flash (CTRL+Enter). Tocmai ai desenat prima frunz folosind actionscript. Observai c metoda addChild se apeleaz fr a preciza unde adugm acest nou obiect numit f, ceea ce nseamn c f se adaug scenei. Apelul addChild(f) este identic cu this.addChild(f), iar this semnific aici scena principal pentru c scriptul nostru se afl pe timeline-ul principal i nu pe timeline-ul vreunui movieclip. S desenm 10 frunze i s ne jucm puin cu funcia random. Vom ngloba secvena de desenare a frunzei ntr-o instruciune for, dar vom schimba n acelai timp i poziia (x,y), n caz contrar cele 10 frunze s-ar desena una peste alta i noi tot o unic frunz am vedea. Apoi, pentru c nu

104

Miniproiecte

vrem ca toate frunzele s aib aceeai dimensiune, vom folosi proprietile scaleX i scaleY, dar atenie la valoarea asignat pentru c vrem ca frunza noastr s fie micorat fr a fi deformat, altfel spus factorii de scalare scaleX i scaleY trebuie s aib aceeai valoare. Stabilim i transparena ca fiind aleatoare i iat codul rezultat. for (var i:int=0; i<10; i++) { var f:Frunza=new Frunza(); f.x=Math.random()*400+80; f.y=Math.random()*250+70; f.scaleX=f.scaleY=Math.random(); f.alpha=Math.random(); addChild(f); } Urmtorul pas este s pregtim butonul la apsarea cruia se vor redesena aleator cele 10 frunze. Noi am adus din biblioteca standard (Window Common Libraries Buttons) un buton de tipul tube flat green, l-am poziionat pe layer-ul bDesen, l-am denumit bDesen i l-am editat (dublu click) spre a schimba textul implicit cu Deseneaz.

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

105

Corespunztor, scriptul se va schimba pentru c avem nevoie de o funcie care s asculte de evenimentul click pe butonul bDesen i va fi: bDesen.addEventListener(MouseEvent.CLICK, desenFrunze); function desenFrunze(evt:MouseEvent):void { for (var i:int=0; i<10; i++) { var f:Frunza=new Frunza(); f.x=Math.random()*400+80; f.y=Math.random()*250+70; f.scaleX=f.scaleY=Math.random(); f.alpha=Math.random(); addChild(f); } } Salvai i executai. Vei vedea c cele 10 frunze nu se mai deseneaz necondiionat, ci doar la apsarea butonului bDesen. Numai c o nou apsare a acestui buton va desena alte 10 frunze peste cele existente i tot aa. S ne ocupm acum de tegerea tablei. S-ar zice c avem nevoie de un burete. Dac addChild este metoda ce adaug obiecte pe scen, exist i removeChild care le elimin. Iat codul final, un pic cosmetizat prin apariia unui movieclip nou numit desen (vei vedea i de ce). var desen:MovieClip; bDesen.addEventListener(MouseEvent.CLICK, desenFrunze); function desenFrunze(evt:MouseEvent):void { if (desen!=null) { this.removeChild(desen); } desen=new MovieClip(); for (var i:int=0; i<10; i++) { var f:Frunza=new Frunza(); f.x=Math.random()*400+80; f.y=Math.random()*250+70; f.scaleX=f.scaleY=Math.random(); f.alpha=Math.random(); desen.addChild(f); } this.addChild(desen); }

106

Miniproiecte

S analizm aadar codul. Am spus la nceput c Adobe Flash CS3 invit permanent la Be smart!. Acesta e motivul pentru care am introdus movieclip-ul desen. Dac movieclip-urile f (care reprezint noi frunze) le adugm nu la scen, ci la un alt movieclip numit desen, va fi suficient s eliminm movieclip-ul desen i vom elimina toate cele 10 frunze. Astfel, n instruciunea for, fiecare frunz se adaug movieclip-ului desen prin instruciunea desen.addChild(f), iar la final adugm movieclip-ul desen la scen prin instruciunea this.addChild(desen). Atenie mare, fr acest ultim addChild, nu vom vedea nimic pe scen. Deoarece la nceput pe scen nu exist niciun movieclip desen, apelul metodei removeChild este condiionat (if (desen!=null)...). i, nu n ultimul rnd, este foarte important ca variabila desen s fie declarat n afara funciei desenFrunze pentru c avem nevoie ca ea s existe i dup ce un apel al funciei desenFrunze s-a ncheiat pentru ca la urmtorul apel s putem terge ceea ce am desenat la apelul anterior.

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

183

Index

184
A
Align 19, 116 Animaii
copiere animaie 43 motion tween 34 shape tween 37

Index

E
Event
Event.COMPLETE 81, 85, 138 Event.ENTER_FRAME 73, 88, 117, 132 Event.SOUND_COMPLETE 154 MouseEvent.CLICK 75, 78, 84, 103 MouseEvent.DOUBLE_CLICK 76 MouseEvent.MOUSE_DOWN 76, 176 MouseEvent.MOUSE_UP 124, 176 MouseEvent.ROLL_OUT 84, 87, 144 MouseEvent.ROLL_OVER 84, 87, 144 ProgressEvent.PROGRESS 92 TimerEvent.TIMER 72, 137

Array
Acces 58 Creare 58 length 58, 115, 121 pop() 167 push() 58, 111, 114, 121, 151 splice() 121 unshift() 167

B
Bandwidth Profiler 93 Bitmap 24, 26, 138, 140 Buton 28, 29 bytesLoaded 92 bytesTotal 92

F
Filtre 31 Funcii
funcii predefinite 62 funcii recursive 67 funcii utilizator 63

C
ColorTransform 135, 164 Comentarii 53

G
graphics
beginFill() 64, 71 drawCircle() 71 drawRect() 64, 71 endFill() 64, 71 lineStyle() 64, 71 lineTo() 96, 131 moveTo() 96, 131

D
Date
Creare 68 fullYear 68 getDate() 68 getHours() 69 getMilliseconds() 69 getMinutes() 69 getSeconds() 69 hours 69, 117 milliseconds 69 minutes 69, 117 month 68 seconds 69, 117

Guide layer 40, 41

H
Help 22

I
Instruciuni
break 57

Flash CS3 i Actionscript 3.0 pe nelesul tuturor

do while 60 for 57, 64, 80, 103 for..in 59 if 55, 67, 88, 92 switch 56 while 60, 75 scaleX 69, 103 scaleY 69, 103 startDrag() 124, 175 stop() 71 stopDrag() 175 visible 70 width 69, 122 x 69, 123 y 69, 123

185

L
Layer 17, 18 Library 16, 26, 100, 105, 116, 118, 129, 163 Linkage 101, 105, 118 Loader 138, 144
load() 144

O
Object 59, 138 OOP 95
.as 96, 97, 106 clas 95, 96, 97 constructor 95 instan 97 internal 98 metode 95 private 98 proprieti 95 public 97, 98

M
Mask layer 38 Math
Math.abs() 62, 165, 175 Math.ceil() 62 Math.cos() 119 Math.floor() 62, 121 Math.max() 62 Math.min() 62 Math.PI 120 Math.pow() 62 Math.random() 62, 102, 106, 130 Math.round() 62, 124 Math.sin() 119 Math.sqrt() 57, 115

Operatori
aritmetici 53 condiional 54, 89 decrementare 54 incrementare 54 logici 55

P
Properties 16, 20, 116, 129 Publish 21 Punct de inserie 30

mouseX 115, 156 mouseY 115 Movieclip

addChild() 65, 70, 101, 119, 122 addChildAt() 77 alpha 69, 124, 144 buttonMode 144 Creare 28 getChildByName() 127, 177 gotoAndPlay() 71, 84 gotoAndStop() 71, 83, 92 height 69, 146 hitTestObject() 125 name 70 parent 70 play() 71 removeChild() 103, 128 rotation 70, 72, 73, 117, 118

R
return 65, 67, 75

S
Shape 64, 114, 131, 144, 172 Sound
Import 44 length 157 play() 85, 152 SoundChannel 85, 151 SoundTransform 90, 155 stop() 87

186
String
charAt() 67 length 67 split() 167 substr() 63, 67 substring() 63 toLowerCase() 63 toString() 75, 88 toUpperCase() 63 Number 51, 52 uint 51, 52

Index

Tools 19 TransitionManager 138, 140, 149 Transmiterea parametrilor 63

U
URLLoader 80
load() 80

T
Text
appendText() 82 Dynamic text 27, 89 Input text 27, 74 Static text 27 TextFormat 159, 172

URLRequest 80, 85, 138, 144

V
Variabile
Definire 50 Variabile locale i globale 66

Timeline 16, 17 Timer 73, 126

start() 72, 128 stop() 168

X
XML 79, 143, 147
XMLList 82

Tipuri de date
Boolean 51, 52 int 51, 52