CURS FLASH MX

ISA Multimedia srl

Acest curs este proprietatea ISA Multimedia srl.

Lectia 1 Notiuni introductive

1. Prezentarea Flash MX

Ce este Flash MX?

Macromedia Flash MX este o aplicatie destinata in special crearii de animatii
pentru web. Astfel se pot realiza cu destul de multa usurinta bannere si logo-uri
animate, intro-uri, site-uri web si chiar formulare web. Desi este destinat in
principal web-ului, in Flash pot fi create si alte aplicatii de sine statatoare cum ar
fi cursuri interactive sau chiar jocuri. Cursul de fata se va axa insa pe crearea de
animatii pentru web.

De ce Flash si nu Java?
Exista unele persoane care prefera folosirea appleturilor Java pentru animatii.
Gusturile nu se discuta, dar va pot spune doar 2 avantaje evidente ale animatiilor
in Flash fata de appleturile Java :
- pentru crearea appleturilor sunt necesare cunostinte destul de bune de
programare, animatiile in Flash fiind mult accesibile din acest punct de
vedere intrucat se realizeaza intr-un mediu grafic si nu in linie de cod;
- appleturile este necesar sa fie descarcate si interpretate la fiecare afisare
a paginii, ceea ce face greoaie afisarea lor, in timp ce animatiile flash au
dimensiuni reduse, se incarca destul de repede si pot fi vazute si offline.

Trebuie sa stiu programare pentru a face animatii in Flash ?

Raspunsul este nu, cu toate ca Flash foloseste un limbaj de scripting numit
Action Script, destul de asemanator cu Java Script, limbaj care este util pentru
partea de interactivitate a animatiilor, cum ar fi deschiderea unui anumit link in
urma unui clic pe un buton, sau trimiterea unui formular. Vom vedea putin mai
incolo ca, folosind fereastra (panel-ul) de Actiuni (Actions), putem atasa cu
usurinta diferite actiuni diferitor elemente, fara a fi nevoie de cunostinte de
programare.

De ce am nevoie pentru a vedea animatii facute in Flash ?

Pentru a putea vedea animatiile facute in Flash (si anume faimoasele fisiere cu
extensia swf) aveti nevoie de un browser care sa aiba instalat Macromedia Flash
Player, un plugin gratuit pe care il puteti descarca de pe site-ul Macromedia.

Ce elemente pot fi incorporate intr-o animatie in Flash?

Grafica creata in Flash folosind instrumentele de desenare ale aplicatiei este
vectoriala, ceea ce determina dimensiunea redusa a animatiile. Pe langa
aceasta, mai puteti importa grafica de tip bitmap, filme sau sunete.

2. Prezentarea spatiului de lucru

Acum ca am vazut cam ce putem face cu Flash, sa vedem cum arata interfata
aplicatiei.
Avem in primul rand bara de meniu, care cuprinde diferite optiuni pe care le vom
folosi mai tarziu.

1-1.gif
Imediat sub aceasta se afla Timeline-ul * (Linia Timpului).

1-2.gif
Aici se impun cateva explicatii. Flash imparte linia timpului in frame-uri (cadre)
care se succed cronologic (daca nu schimbam noi aceasta ordine) cu o viteza
(frame rate) precizata tot de noi (implicit viteza este de 12 frame-uri pe secunda).
Sub Timeline se afla spatiul propriu-zis de lucru, numit Stage (scena). Aici vom
stabili continutul fiecarui frame in parte, adica textul, elementele de grafica,
sunetele etc.

In partea de jos a interfetei avem fereastra de Properties (proprietati),

fereastra cu care, dupa cum ii spune si numele, puteti modifica diversele
proprietati ale diversele elemente prezente pe Stage (Scena).
In partea stanga se afla fereatra de Tools (Unelte) cu care puteti creea grafica
vectoriala in Flash.

Dupa cum puteti observa, instrumentele puse la dispozitie de Flash pentru

crearea de grafica sunt destul de elementare, asadar pentru o grafica mai
complexa va trebui sa folosim o aplicatie specializata. Despre aceste unelte
(tools) vom discuta mai pe larg imediat.
In partea dreapta a ferestrei se afla o serie de ferestre (panel-uri) cu diferite
utilitati : alegerea culorilor de umplere si pentru contur, alinierea obiectelor etc.

In legatura cu spatiul de lucru mai spun un singur lucru, dupa care trecem la
treaba. In cazul in care o fereastra care va trebuie nu este vizibila sau ati inchis-o
din greaseala, puteti intra in meniul Window, de unde le veti putea deschide din
nou.

pe parcursul lectiei voi folosi denumirile in limba engleza ale diverselor

elemente, intrucat marea majoritate a dumneavoastra au versiunea in
limba engleza a aplicatiei.

3. Crearea unui nou document

O data cu deschiderea aplicatiei, Flash va pune la dispozitie un document nou,
cu proprietati implicite. Sa vedem cum putem schimba aceste proprietati. Avem
doua variante : fereastra de Properties, si meniul Modify.
Daca folosim fereastra Properties :
In cazul in care aceasta este minimizata, vom face clic pe numele ei si aceasta
se va extinde. In aceasta fereastra vom stabili culoarea fundalului (background-
ul) negru. Pentru aceasta vom face clic in interiorul patratului alb si vom alege
culoarea dorita. Apoi vom stabili dimensiunile pe care le va avea animatia
(inaltime si latime) facand clic pe butonul din dreptul Size si completand
urmatoarele valori: 300 pentru latime (width) si 200 pentru inaltime (height) in
fereastra care se deschide. Frame rate-ul il vom lasa la valoarea implicita de 12
frame-uri/secunda.
Daca folosim meniul Modify Document, veti vedea ca feareastra care apare
este aceeasi cu cea care a aparut cand am apasat butonul Size din fereastra
Properties.

Acum ca am vazut cum se modifica proprietatile unei document, sa trecem mai

departe si sa vedem ce putem face cu instrumentele de desenare din Flash.

4. Instrumente de desenare in Flash

Instrumentul de text (Text Tool)

Pentru a introduce text in documentul nostru vom apasa instrumentul de text (in
acest moment observam ca atat cursorul, cat si fereastra de Properties se
modifica) si facem clic in interiorul spatiului de lucru. Dupa ce am terminat de
introdus textul, pentru a iesi din acest mod de lucru facem clic pe instrumentul
sageata (Arrow Tool). Vom vedea ca textul este inconjurat de o bordura
albastra, ceea ce inseamna ca este selectat, prin urmare ii putem modifica
proprietatile folosind fereastra Properties (vom alege culoarea alba si o
dimensiune a caracterelor de 14).
Instrumentul oval (Oval Tool)
Folosind acest instrument vom desena un oval cu conturul portocaliu de 2 pixeli
si culoarea de umplere (fill) gri. Selectam intai instrumentul oval, apoi, din
fereastra de Properties vom alege culoarea chenarului si dimensiunea dorita si
culoarea de umplere, apoi desenam ovalul in spatiul de lucru.
Instrumentul dreptunghi (Rectangle Tool)
Acest instrument se foloseste in acelasi mod ca instrumentul oval. Ce putem face
in plus cu acest instrument este sa stabilim raza de rotunjire a colturilor. (poza)
De retinut: daca tinem apasata tasta Shift in timp ce desenam un dreptunghi sau
un oval, acestea vor fi constranse sa aiba forma unui patrat, respectiv cerc.
Instrumentul linie (Line Tool)
Se foloseste in acelasi mod.
Instrumentul Pensula (Brush Tool)
Daca selectam instrumentul Pensula, vom putea apoi alege forma si marimea
pensulei.
Instrumentul Creion (Pencil Tool)
Cu acest instrument selectat, avem trei optiuni de desenare a liniilor cu creionul:
straighten (pentru linii drepte), smooth (pentru linii curbe), ink (pentru linii fara nici
un efect).
De retinut: Daca doua sa mai multe forme pe acelasi strat se intersecteaza,
acestea se vor segmenta, ceea ce inseamna ca nu le vom mai putea manipula
separat. Pentru a evita acest lucru se folosesc grupurile si layerele (straturile)
despre care vom discuta lectia urmatoare

5. Aplicarea culorilor
Pentru schimbarea culorilor formelor desenate aveti doua instrumente: Ink Bottle
Tool (calimara cu cerneala) si Paint Bucket Tool (galeata cu vopsea).
Ink Bottle Tool aplica un contur formelor cu culoarea de contur selectata in
caseta Stroke Color.
Paint Bucket Tool umple o forma cu culoarea din caseta Fill Color.
Pentru aplicarea unui efect de gradient prestabilit selectam Oval Tool, apoi
facem clic pe Fill Color si in partea de jos a ferestrei care se deschide vom
avea cateva efecte prestabilite pe care le putem alege.

1-6.gif
Pentru modificarea gradientului prestabilit ne vom folosi de fereastra Color
Mixer. (Daca aceasta nu este deja deschisa, intrati in meniul Window Color
Mixer). Cu Oval Tool selectat, vom alege din fereastra Color Mixer Fill Color, si
din fereastra vom putea alege tipul gradientului (liniar sau radial) si vom putea
adauga noi culori de tranzitie facand clic cu mouse-ul in bara care indica
tranzitia.

1-7.gif
Daca doriti sa stergeti formele desenate puteti folosi instrumentul Eraser Tool
(Guma de sters). Acesta are si el cateva optiuni suplimentare, si anume
forma instrumentului (Eraser Shape), pe care o puteti alege din lista derulanta
(poza) si tipul de stergere (Eraser Mode): normal, numai linii, numai umplere etc.
Instrumentul de modificarea a umplerii (Fill Transform Tool). Cu acest
instrument selectat vom face clic pe o umplere cu gradient aplicata anterior,
moment in care ne vor aparea niste linii, patrate si cercuri. Manipuland aceste
forme vom putea roti gradientul, deplasa centrul acestuia si modifica
dimensiunea lui.
Exercitii:
1. Desenati un dreptunghi cu un gradient de umplere liniar de la negru spre
rosu.
 2. Rotiti gradientul cu instrumentu de modificare a umplerii (Fill Transform
Tool) pentru a aparea pe orizontala.
3. Cu instrumentul text (Text Tool) introduceti textul Fa clic pe mine
deasupra dreptunghiului.
4. Selectati pentru text fontul Arial, culoarea alb si o dimeniune potrivita.

Lectia 2 Straturi. Grupuri si simboluri. Frame-uri si keyframe-uri

1. Straturi
Dupa cum am spus si in lectia precedenta, daca doua forme se intersecteaza,
acestea se vor segmenta. Pentru a evita acest lucru le vom amplasa pe doua
straturi (layere) diferite. Layerele in Flash se gasesc in partea stanga a Timeline-
ului.

poza 2-1.gif
Pentru a adauga un nou strat vom face clic pe butonul din partea stanga jos a
ferestrei, Insert Layer, iar pentru a-l sterge pe cosul de gunoi din partea dreapta
jos a ferestrei.
2. Grupuri de obiecte
Pentru a manipula cu usurinta mai multe obiecte concomitent, le putem grupa.
Pentru aceasta vom selecta obiectele si vom alege optiunea Modify Group (sau
putem folosi combinatia de taste: Ctrl+G). Pentru a reveni la situatia initiala se
foloseste optiunea Modify- Ungroup (Ctrl+Shift+G).
3. Simboluri
O caracteristica a Flash este lucrul cu simboluri. Un simbol este un obiect pe
care il creati in Flash si pe care il puteti apoi folosi oricand. Simbolurile se gasesc
in panelul Library. Cand luati un simbol din Library si il plasati pe Scena, veti
creea de fapt o instanta a simbolului, careia ii puteti modifica proprietatile cum ar
fi dimensiunile, culoarea, transparenta etc, fara ca aceste modificari sa afecteze
si simbolul in sine. Pe de alta parte, daca efectuati modificari intr-un simbol,
aceste modificari vor afecta toate instantele respectivului simbol de pe Scena.
De retinut: Daca stergeti un simbol din Library, aceasta actiune nu poate fi
anulata (undo).
Flash lucreaza cu 3 tipuri de simbolul: grafice, movie clip si buton. Dar ca sa nu
va plictisesc prea rau cu teoria (sau e deja prea tarziu?! :), vom vorbi despre
fiecare tip in parte la momentul potrivit.
4. Frame-uri si keyframe-uri
Linia timpului (Timeline-ul) este format din frame-uri si keyframe-uri. Numarul
acestora, precum si framerate-ul vor determina lungimea animatiei noastre.
Pentru a insera frame-uri vom face clic cu mouse-ul cat de departe vom dori pe
linia timpului, apoi vom apasa tasta F5. Pentru a introduce un keyframe vom
face, la fel, clic in locul dorit si vom apasa tasta F6. Toate bune si frumoase, dar
care este diferenta dintre un frame si un keyframe, ma veti intreba. (Si daca nu
ma veti intreba, tot va voi spune). Cand inseram un frame, acesta va pastra
continutul frame-ului precendent fara nici o modificare. Cand inseram insa un
keyframe, si acesta va pastra continului frame-ului precedent, in schimb in
keyframe vom putea opera modificari asupra acestui continut, lucru pe care nu il
putem face intr-un frame obisnuit.

Acum ca ne-am pus la punct cu teoria, si pentru cei care inca n-au adormit de
plictiseala, sa trecem si la treaba, cu niste animatii de incalzire.
Exemplu: realizarea unei animatii
Vom deschide un nou document, pastrand proprietatile implicite. Sa ne ocupam
intai de fundalul animatiei (cerul), care va fi un gradient de la bleu spre alb.
Pentru aceasta vom desena un dreptunghi fara contur; selectam Rectangle
Tool, iar la Stroke Color vom selecta din patratul cu culori dreptunghiul alb din
coltul de sus taiat de o linie rosie.

2-2.gif
Din fereastra Color Mixer (daca nu o aveti deschisa o puteti deschide din
Window Color Mixer), vom selecta din dreptul culorii de umplere modul
Radial. Vom face clic la jumatatea liniei de tranzitie pentru a adauga o noua
culoare de tranzitie, apoi vom alege un bleu deschis. Pentru culorile de la
marginea liniei de tranzitie vom alege alb.
 poza 2-3.png
Acum vom desena in spatiul de lucru un dreptunghi care sa acopere intreg
spatiul de lucru. Pasul urmator este sa selectam instrumentul de modificare a
umplerii, Fill Transform apoi sa facem clic in dreptunghiul desenat. Vom trage
apoi cerculetul din centrul dreptughiului spre coltul din stanga sus, pentru a
deplasa centrul gradientului. Vom face apoi dublu-clic pe numele layer-ului si il
vom redenumi Fundal, apoi vom insera un nou layer pe care il vom denumi
avion. Cu acest al doilea layer selectat, vom importa o imagine, folosind
combinatia de taste Ctrl+R (sau meniul File - Import). Daca nu aveti o imagine pe
care sa o importati, salvati imaginea urmatoare pe calculator (clic dreapta pe ea,
apoi Save Image As) intr-un folder unde sa va salvati exemplele si exercitii din
acest curs, apoi importati-o.

avion.gif
Vom muta imaginea importata in partea stanga pe centru, apoi o transformam in
simbol grafic pentru a o putea anima. Cu imaginea selectata, apasam tasta F8
(sau Insert Convert to Symbol), si in fereastra care apare vom tasta numele
simbolului (avion) si vom selecta tipul Graphic.

2-4.jpg
Pentru animatia propriu-zisa pozitionam mouse-ul pe frame-ul 40 de pe layerul
avion si apasam tasta F6 pentru a introduce un keyframe, ceea ce ne va
permite sa modificam pozita avionului.
De retinut : linia rosie (playback head) din Timeline ne arata care este frame-ul al
carui continut apare pe Scena.
Poate va intrebati din ce cauza la frame-ul 40 a disparut fundalul. Raspunsul este
simplu : din cauza ca cerul desenat de noi apare numai in frame-ul 1, nu si in
urmatoarele. Ca sa remediem acest lucru, facem din nou clic cu mouse-ul pe
frame-ul 40, de aceasta data pe layer-ul Fundal si apasam tasta F5 pentru a
insera frame-uri pana la frame-ul 40.
Sa revenim insa la avionul nostru pe care trebuie sa-l animam. Cu linia rosie in
dreptul frame-ului 40 vom selecta avionul si il vom trage cu mouse-ul pana in
partea dreapta a scenei. (Aceasta reprezinta pozitia de final a animatiei).
In continuare ne vom intoarce la primul frame al layerului avion (il selectam cu
mouse-ul) si din fereastra Properties vom alege ca mod de tranzitie (tween)
optiunea Motion. In acest moment linia timpului ar trebui sa arate in felul
urmator.

2-5.gif
Cu linia rosie in dreptul primului frame, apasati tasta Enter si veti putea vedea
avionul cum zboara. Ca sa nu pierdeti capodopera realizata, salvati-o cu numele
lectia2.fla. (download sursa) (In cazul in care nu v-am spus pana acum, fla este
extensia documentelor sursa in Flash, iar swf este extensia dupa publicare). Dar
despre extensii si publicare vom discuta in alta lectie.
In lectia urmatoare vom invata mai multe despre animatii si tipurile de animatii pe
care le putem face in Flash.
Exercitii:
1. Desenati un oval pe un strat pe care sa il denumiti oval.
2. Introduceti un nou strat pe care sa desenati un patrat; dati numele stratului patrat.
3. Convertiti cele doua obiecte in simboluri grafice
4. Faceti pentru fiecare cate o tranzitie de miscare.

Lectia 3 Tranzitii de miscare si de forma

1. Animatii cu tranzitii de miscare (motion tweening)

In lectia precedenta am vazut o animatie simpla cu o tranzitie de miscare. Sa
vedem acum si ce alte tipuri de animatii putem face in Flash.
Exemplu 1 : tranzitie de miscare cu modificarea dimensiunilor si schimbare de
culoare.
Pentru inceput vom introduce un text selectand Text Tool si alegand apoi in
fereastra Properties urmatoarele proprietati: size 34, font Times New Roman,
culoare albastra, bold. Cu instrumentul selectat vom face clic pe spatiul de lucru
si introducem textul Vino la mare ! pe care il pozitionam in partea de jos a
spatiului de lucru centrat pe orizontala.
De retinut : pentru a alinia diferite obiecte in pagina va puteti folosi de fereastra
Align (Window Align sau Ctrl+K). Pentru a alinia obiectele fata de spatiul de
lucru (scena) trebuie ca butonul To Stage sa fie selectat, altfel nu veti observa
nici o diferenta.
Transformam apoi textul intr-un simbol grafic pentru a-l putea anima: apasati
tasta F8, introduceti text la numele simbolului si selectati Graphic la Behavior.
Schimbati numele layer-ului pe care se gaseste textul in Text si introduceti un
keyframe in frame-ul 5. (Selectati frame-ul 5 si apasati tasta F6).
In acest keyframe vom modifica instanta simbolului folosindu-ne de Free
Transform Tool. 3-1.gif
Cu acest instrument selectat vom face clic pe textul nostru si vom trage de
marginile lui pana va ajunge cam de dimensiunea aceasta.

3-2.gif
Ne vom intoarce la primul frame si cu acesta selectat vom alege din fereastra
Properties tipul de tranzitie Motion. Acum apasati tasta Enter pentru a vedea
efectul.
Sa introducem acum si o tranzitie de culoare; inserati un alt keyframe in frame-ul
10. (F6) In acest keyframe selectati instanta simbolului nostru (textul) si acum
extindeti fereastra Properties pentru a mai face cateva modificari, si anume
alegeti din lista derulanta Color optiunea Tint, optiune care va schimba
culoarea instantei simbolului. Din caseta cu culori care apare tot in fereastra
Properties alegeti o culoare care va place (eu am ales o nuata de verde) si apoi
selectati din nou frame-ul 5 si alegeti Motion Tween.
Acum sa mai adugam putina culoare animatiei. Creati un nou layer pe care sa-l
numiti fundal, si in acesta importati imaginea urmatoare (Ctrl+R), apoi pozitionati-
o centrat orizontal in partea de sus a scenei.
 mare.jpg
Ca nu cumva imaginea sa acopere o parte din text, vom trage cu mouse-ul
layerul fundal sub layer-ul text. Pe layer-ul fundal vom insera un keyframe la
frame-ul 10 (F6) si vom sterge imaginea din primul keyframe. Cu frame-ul 10
selectat vom transforma imaginea in simbol grafic (F8) cu numele mare. Mai
introducem, tot pe layer-ul fundal, un keyframe in frame-ul 20 (F6) si pe layer-ul
text, tot in dreptul frame-ul 20 vom apasa tasta F5 pentru a introduce frame-uri
simple. Selectam imaginea din frame-ul 10 si in fereastra de Propeties vom
selecta optiunea Alpha din lista derulanta Color si vom alege un indice de 0%.
De retinut: proprietatea Alpha se refera la indicele de transparenta al unui
element de pe scena. Un indice de 0% inseamna transparenta totala (elementul
este invizibil), in timp ce un indice de 100% inseamna lipsa transparentei.
Selectam frame-ul 10 al layer-ului fundal si alegem din fereastra Properties
Motion tween. In acest moment Timeline-ul ar trebui sa arate in felul urmator.

3-3.gif
Salvati documentul ca lectia3_ex1.fla. (download fisier sursa) Apasati tasta
Enter pentru a vedea animatia.
2. Animatii cu tranzitii de forma (shape tweening)
Tot ce am facut pana acum au fost tranzitii de miscare, care se refera nu numai
la miscarea obiectelor pe scena, dar si la schimbarea dimensiunilor, a culorii sau
a transparentei acestora. Tranzitiile de forma sunt utile in cazul in care vrem ca
un obiect sa se metamorfozeze in altul.
De retinut: Daca in cazul tranzitiilor de miscare este necesar ca obiectele sa fie
transformate in simboluri, in cazul tranzitiilor de forma acestea nu numai ca nu
trebuie sa fie simboluri, dar nu trebuie sa fie grupuri.
Exemplu 2: Realizarea unei tranzitii de forma.
Cu instrumentul text tastati cifra 1, cu urmatoarele proprietati: size 100, font Arial
Black, culoare rosie, apoi centrati-o atat vertical, cat si orizontal. Pe acelasi layer
introduceti un keyframe in dreptul frame-ului 10 (F6) si, folosind tot instrumentul
text, scrieti in locul cifrei 1 cifra 2. Pentru ca tranzitia de forma sa poata avea loc
va trebui sa degrupam (break apart) ambele cifre. Selectam prima cifra si folosim
combinatia de tasta Ctrl+B (sau Modify Break Apart) si facem acelasi lucru si
pentru a doua cifra. Apoi vom selecta primul frame si din fereastra Properties
alegem ca tween Shape. In acest moment timeline-ul ar trebui sa arate astfel:

3-4.gif
Pentru a testa animatia folositi combinatia de taste Ctrl+Enter sau Control Test
Movie. Ar trebui sa vedeti ceva de genul acesta.
(inserare lectia3_ex2.swf)
Daca va apare altceva, atunci downloadati fisierul sursa (download
lectia3_ex2.fla) pentru a vedea unde ati gresit. Dupa cum puteti vedea, animatiile
in Flash sunt in mod loop in mod implicit. (se deruleaza la nesfarsit) Putin mai
incolo, cand vom incepe sa folosim Action Script, vom vedea cum putem
schimba acest lucru.
Inainte de a trece la alte tipuri de animatii sa discutam putin despre modurile de
vizualizare ale scenei. Avem in primul rand instrumentul de zoom (Zoom Tool), o
unealta utila pentru marirea si micsorarea obiectelor de pe scena, cu cele doua
optiuni ale sale (Enlarge si Reduce),

3-5.gif
si lista derulanta din partea de sus a scenei,

3-6.gif
de unde puteti alege diferite procente de vizualizare, precum si doua optiuni
suplimentare: Show Frame (mareste sau micsoreaza scena cat sa se incadreze
in fereastra), Show All (mareste sau miscoreaza scena cat sa incapa in fereastra
toate obiectele, chiar si cele care ies din scena).
Exercitii:
1. Faceti o tranzitie de culoare.
 2. Faceti o tranzitie de transparenta
3. Faceti o tranzitie de dimensiuni
4. Faceti o tranzitie de forma intre un patrat si un cerc.

Lectia 4 Straturi ghid si straturi masca

1. Tranzitii de miscare ghidata

Dupa cum ati vazut in lectiile precedente, am putut face un obiect sa se

deplaseze dintr-o parte intr-alta a scenei. Deplasarea s-a facut insa in linie
dreapta; ce este de facut daca am vrea ca obiectul sa parcurga un anumit
traseu?! Raspunsul este dat de folosirea straturilor-ghid sau a ghidului de
miscare (motion guide). Cum functioneaza o astfel de tehnica: pe un strat vom
avea ca si pana acum, miscarea obiectului intre punctul initial si punctul final, iar
pe alt strat (strat care se numeste motion guide), vom avea traseul pe care vrem
sa-l parcurga obiectul intre cele doua puncte. Traseul poate fi desenat cu
instrumentele de desenare puse la dispozitie de Flash (pencil tool, brush tool) si
poate sa aiba orice culoare sau grosime, intrucat nu va fi vizibil in animatie.
Exemplu 1: realizarea unei animatii cu ghid de miscare.
Creati un document nou si importati imaginea urmatoare: (Salvati-o cu Save As..)

flori.jpg
Denumiti layer-ul flori, apoi adaugati un nou layer pe care sa-l denumiti albina

in care importati urmatoarea imagine: albinuta.gif

Acum convertiti imaginea albinei intr-un simbol grafic pentru a-l putea anima.
(F8)
Selectati stratul albina si faceti clic dreapta cu mouse-ul. Din meniul care apare
selectati Add Motion Guide, care face sa apara un nou leyer denumit Guide.
Pe acest layer vom desena traseul albinei.
Selectati instrumentul creion (Pencil Tool), alegeti ca Stroke Color culoarea
alba (ca sa putem vedea ce desenam) si din optiunile instrumentului care se afla
in partea de jos a ferestrei Tools alegeti Smooth ca mod de desenare. (optiune
are rolul de a indulci curbele) Acum trasati cu creionul pe layer-ul Guide un
traseu. Eu am desenat ceva de genul acesta:
 4-2.gif
Acum trebuie sa cuplam albina cu traseul. Pentru aceasta, optiunea Snap to
Objects trebuie sa fie activata; daca nu e, intrati in meniul View-Snap to Objects.
(Daca este activa, optiunea ar trebui sa apara bifata; daca nu este, o selectati).
Selectati instanta albinei. Cand veti trage albina pentru a o muta la capatul de
inceput al traseului, mouse-ul trebuie pozitionat exact in centrul albinei, in zona
care apare ca o mica tinta. Astfel, cand veti trage albina va va aparea un
dreptunghi cu un cerc in mijloc care va arata pozitia in care se afla albina.

4-3.gif
Mutati albina in primul capat al traseului pana se lipeste de acesta (snaps).
Acum inserati un keyframe (F6) in dreptul frame-ului 30 pe layer-ul cu albina (in
acest keyframe vom stabili pozitia finala a albinei, dupa ce a parcurs traseul), iar
pentru celelalte 2 layere apasati pe F5 in dreptul frame-ului 30 pentru a introduce
frame-uri simple.
Cu frame-ul 30 selectat, trageti cu mouse-ul de albina (pointer-ul mouse-ului
trebuie sa se afle tot in centrul instantei cu albina, in zona ca o tinta) si mutati-o
in celalalt capat al traseului pana se lipeste.
Urmeaza sa definim tranzitia, selectand primul frame din layer-ul cu albina, si
apoi selectand din fereastra Properties Motion Tween. Ca sa nu ne incomodeze
layer-ul ghid il vom ascunde (facem clic pe ochiul din dreptul layer-ului).

4-4.gif
Crucea rosie arata ca layer-ul nu este vizibil.
De retinut: Aceasta schimbare de vizibilitate a layere-lor este doar pentru
usurarea lucrului, ea nu afecteaza vizibilitatea stratului la publicarea animatiei.
Cu alte cuvinte, chiar daca in modul de lucru vom bifa un strat ca fiind ascuns,
obiectele care se afla pe el vor aparea totusi in animatia publicata (exportata).
Apasati Enter pentru a vedea animatia sau Ctrl+Enter. Rezultatul ar trebui sa
arate in felul urmator:
Lectia4_ex1.swf
Pentru confruntare, puteti downloada fisierul sursa al exemplului. (link catre
lectia4_ex1.fla)
 2. Layere masca
Un layer masca este un layer pe care puteti desena zone prin care layer-ele de
sub ele sa fie vizibile. In cazul in care definitia v-a bagat in ceata, sa va dau un
exemplu. Sa presupunem ca avem un layer masca pe care desenam un patrat.
Atunci din layer-ul mascat nu va fi vizibila decat zona acoperita de patrat. A
desena pe un strat masca este ca si cum ai gauri o panza care acopera toate
imaginile.
Exemplu2: realizarea unei animatii cu layer masca. La sfarsitul exemplului, veti
realiza animatia urmatoare. (lectia4_ex2.swf)
Deschideti un nou document in flash, care sa aiba o latime de 230 pixeli si o
inaltime de 400 pixeli si cu fundalul (background) negru. (Dupa cum cred ca va
mai amintiti, dimensiunile animatiei se modifica din Properties, sau din Modify-
Document). Importati apoi imaginea urmatoare.

model.jpg
Centrati imaginea orizontal si vertical (Window-Align), apoi denumiti layer-ul pe
care se afla fata. Introduceti un nou layer pe care sa desenati un cerc, folosind
Oval Tool, cu diagonala de aproximatix 140 pixeli. (Nu uitati ca ii puteti modifica
dimensiunile folosindu-va de Free Transform Tool sau puteti sa-I introduceti
direct dimensiunile in fereastra de Properties). Culoarea de umplere poate sa fie
oricare, intrucat nu va aparea in animatie.
De retinut: pentru ca ovalul sa iasa cerc, tineti apasata tasta Shift in timp ce-l
desenati.

Convertiti cercul intr-un simbol grafic si deplasati-l in partea de jos a imaginii, in

dreptul picioarelor fetei (poate chiar sa iasa din partial din scena). Introduceti un
keyframe (F6) pe layer-ul cu cercul in dreptul frame-ului 50 si mutati cercul in
partea sus a imaginii, in dreptul capului fetei. Introduceti frame-uri simple (F5)
pentru celalalt layer pana la frame-ul 50. Acum definiti tranzitia de miscare
(selectati primul frame si in fereastra de Properties alegeti Motion Tween).
Urmeaza apoi sa definim layer-ul cu cercul ca layer masca. Facem clic-dreapta
pe numele lui si alegem din meniu optiunea Mask. Dupa cum puteti vedea, doar
partea acoperita de cerc este vizibila. Tastati Ctrl+Enter pentru a vedea
rezultatele.
Pentru a mai slefui animatia sa-i dam putina continuitate, adica animatia noastra
sa se termine cu aceeasi pozitie cu care a inceput.
Pentru aceasta inserati un nou keyframe pe layer-ul cu cercul in dreptul frame-
ului 100 si introduceti pentru celalalt layer frame-uri simple pana la acest frame.
Daca veti incerca sa mutati cercul, sau orice altceva, nu veti reusi, si aceasta din
cauza ca atunci cand definiti un layer ca layer-masca, atat layer-ul masca, cat si
cel mascat vor fi blocate (locked), lucru pe care il puteti observa daca va uitati in
dreptul numelor lor, unde apare cate un lacat.
De retinut: Daca un layer este blocat (locked), obiectele de pe el sunt vizibile sar
nu sunt editabile (nu le puteti muta, redimensiona, selecta etc).
Ca sa mutam cercul trebuie sa deblocam layer-ul pe care se afla. Pentru aceasta
vom face clic cu mouse-ul pe lacatul din dreptul numelui lui, moment in care
lacatul va disparea si ne va aparea cercul. Stergem cercul (ne aflam tot la frame-
ul 100) si urmeaza sa copiem in acest frame cercul din primul frame. Selectam
cercul din primul frame si tastam Ctrl+C pentru copiere, apoi de intoarcem la
frame-ul 100 si va trebui sa lipim (paste) cercul, dar in aceeasi pozitie in care se
alfa si in frame-ul 1. Pentru aceasta ne folosim de optiunea Paste in place
apasand combinatia de taste Ctrl+Shift+V (sau Edit-Paste in Place). Nu uitati ca
trebuie sa lipiti cercul pe acelasi strat, alminteri nu va mai functiona tranzitia.
Definiti apoi tranzitia de la frame-ul 50 ca Motion Tween si cercul se va intoarce
la locul initial. Blocati din nou stratul cu cercul (clic punctul din dreptul lacatului) si
vizualizati animatia finalizata. (Ctrl+Enter)
Download fisier sursa. (link catre lectia4_ex2.fla)
Exercitii:
1. Realizati o animatie in care o minge sa fie aruncata cu bolta. (indiciu:
folositi ghid de miscare)
2. Realizati o animatie in care o masina de curse sa se deplaseze pe o pista
(un traseu).
3. Realizati o animatie in care un peisaj sa se vada doar prin corpul literelor
unui text. (indiciu: folositi layer masca)
4. Realizati o animatie in care un text apare treptat in dreptul obiectivului.
(Obiectivul este fix, spre deosebire de exemplul 2, iar textul de misca).

Lectia 5 Butoane si Movie Clips. Atasarea de sunete.

1. Ce sunt butoanele
Dupa cum v-am mai spus, exista 3 tipuri de simboluri pe care le puteti creea in
Flash: grafic, buton si movie clip. Despre simbolurile grafice am tot vorbit, si
acum a venit si randul butoanelor. Prin urmare, ce sunt ele si la ce ne folosesc?
Butoanele sunt niste simboluri al caror timeline are doar 4 frame-uri, sau mai
bine zis 4 stari: Up, Over, Down si Hit.

5-1.gif
Sa le luam pe rand.
Up: corespunde starii normale a butonului.
Over: corespunde starii butonului cand se trece cu mouse-ul peste el.
Down: corespunde starii butonului cat timp este apasat cu mouse-ul.
Hit: defineste zona de actiune a butonului.
Pentru exemplificare, priviti cele doua butoane din imagine:
5-2.swf
primele 3 stari sunt usor de observat. Cea de-a 4-a stare da diferenta dintre cele
doua butoane (aparent identice). Ati observat cumva care este aceasta
diferenta? Uitati-va cu atentie!
Pentru cei care nu mai suporta suspansul, o sa divulg misterul :) La primul buton
zona de actiunea a butonului (zona la in care incepe sa reactioneze) este
reprezentata de intreg dreptunghiul rotunjit, la cel de-al doilea buton aceasta
zona este doar in dreptul textului de pe buton (deci mai mica decat dreptunghiul
rotunjit).
Sa vedem acum cum putem crea si noi un astfel de buton.
Cu instrumentul text (Text Tool) tastati un text oarecare. Selectati textul (pentru a
iesi din modul de editare text selectati instrumentul sageata) si transformati-l in
simbol (F8), alegand de data aceasta tipul Button si nu Graphic. Faceti dublu-
clic pe text si veti intra in simbol. Dupa cum puteti vedea, timeline-ul s-a
schimbat, fiind format doar din cele 4 frame-uri despre care v-am vorbit. Inserati
cate un keyframe in fiecare frame si schimbati dupa dorinta culoarea textului in
fiecare keyframe.
Acum vizualizati butonul (Ctrl+Enter). Daca incercati sa faceti clic pe el veti
vedea ca este dificil, intrucat butonul va reactiona numai daca pointer-ul mouse-
ului se afla exact pe conturul textului. Care este motivul?! Starea Hit a butonului.
Daca nu ati facut altceva decat sa schimbati culoarea textului in frame-ul Hit,
atunci zona de actiune a butonul va fi reprezentata de corpul textului, si trebuie
sa recunoasteti ca este destul de greu de nimerit. Ce este de facut? Definirea
unei zone mai mari. Asadar ne vom intoarce in keyframe-ul Hit si vom desena
peste text un dreptunghi cat de mare dorim. (nu conteaza culoarea pentru ca
acest dreptunghi nu va aparea) Vizualizati din nou butonul cu Ctrl+Enter. Alta
viata, nu-I asa?! :)

2. Atasarea de actiuni butoanelor (deschiderea unei ferestre de

browser)
Acum ca butonul este creat, sa-l punem la treaba. Ce ar putea sa faca? Pentru
inceput, sa ii dam o sarcina usoara: deschiderea unui URL. Pentru aceasta va
trebui sa-i atasam o actiune care sa faca acest lucru. Asadar vom deschide
fereastra Actions (F9 sau Window-Actions) si de acolo selectam Actions, apoi
Browser/Network, si in final actiunea getURL.

5-3.gif
Acum urmeaza completarea parametrilor acestei actiuni. Vedem ca in partea
drepta a ferestrei a fost inserat, pe langa getURL si on (release), ceea ce
inseamna ca actiunea va fi declansata atunci cand veti elibera butonul mouse-
ului. Daca selectati on (release)

5-4.gif
veti vedea ca va vor aparea o serie de evenimente care sa declanseze actiunea
getURL, dintre care cele mai folosite sunt: on Press (daca faceti clic cu mouse-
ul), on Roll Over (daca treceti cu mouse-ul peste buton). Selectati apoi getURL
si completati in partea de sus URL-ul care vreti sa vi se deschida in fereastra de
browser.

5-5.gif
Acum testati butonul (Ctrl+ Enter) si apasati-l. Veti vedea cum vi se va deschide
fereastra de browser.
3. Importul de sunete
Ca sa fie butonul si mai interesant, sa-i atasam un sunet care sa se auda cand
facem clic cu mouse-ul pe buton. Intai trebuie sa importam sunetul. (Puteti
downloada si importa sunetul acesta). (link catre clic.wav) Importul de sunete se
face ca orice alt import: Ctrl+R sau File- Import. Selectati fisierul clic.wav si
fisierul va fi importat. Acum trebuie doar sa precizam unde vrem sa-l folosim. Ca
sunetul sa se auda cand facem clic pe buton, el va trebui sa fie atasat frame-ului
corespunzator starii Down a butonului. Selectam deci acest keyframe si, din
fereastra Properties, selectam din lista derulanta Sound numele fisierului
selectat. Pentru testarea efectului, dupa cum v-ati obisnuit deja, tastati
Ctrl+Enter,

4. Movie Clips
Al treilea tip de simbol este movie clip. In linii mari, un movie clip seamana cu un
simbol de tip Graphic. Diferenta esentiala esta ca Movie Clip-ul are propriul lui
timeline. Ca sa intelegeti mai bine ce inseamna aceasta, sa facem un mic
exemplu.
Exemplu: Crearea unui Movie Clip.
Creati un nou document care sa aiba ca fundal imaginea urmatoare

cosmos.jpg
apoi creati un nou strat pe care sa puneti imaginea cometei.

cometa.png
Transformati cometa intr-un simbol (Movie Clip), faceti dublu clic pe imagine
pentru a intra in simbol, apoi faceti o tranzitie de miscare in care cometa sa
treaca prin spatiul cosmic. Iesiti din simbol si testati animatia. (Ctrl+Enter)
Rezultatul ar trebui sa arate astfel:
Lectia5.swf
Download sursa. (lectia5.fla)
Care este noutatea la animatia aceasta? Dupa cum stiti, timeline-ul principal al
filmului are un singur frame, iar animatia il va afisa la nesfarsit. (loop) Cometa
insa (care este un Movie Clip) isi vede insa de propriul timeline, fara a fi
constransa doar la primul frame.
Exercitii:
1. Creati un buton.
2. Atasati-I ca actiune deschiderea unei adrese link in browser.
3. Creati un movie clip in interiorul timeline-ului principal si observati-I
comportamentul.
4. Atasati un sunet animatiei din movie clip.
Lectia 6. Elemente de interactivitate cu ActionScript.
1. Etichete (labels) si scene
Pentru a usura saltul la diverse parti ale animatiei, puteti folosi etichetele si
scenele. Eticheta este o denumire pe care o dati unui keyframe, denumire cu
care veti identifica apoi acea parte a animatiei.
Pentru a atasa o eticheta unui keyframe selectati keyframe-ul respectiv si in
fereastra Properties introduceti denumirea dorita in caseta Frame Label.

6-1.gif
De retinut: Desi nu este obligatoriu este de dorit sa creati un layer special pentru
etichete si actiuni.
Pe linia timpului, o eticheta arata in felul urmator.

6-2.gif
O animatie mai elaborata este recomandat sa o impartiti in scene. Scenele sunt
parti ale filmului care vor rula si ele in ordine (in cazul in care nu vom schimba noi
aceasta ordine). Putem denumi, adauga sau sterge scene din fereastra Scene
pe care o putem deschide cu una dintre urmatoarele metode: Shift+F2, Modify-
Scene, Window-Scene.

6-3.gif
In mod implicit, la deschiderea unui nou document, Flash va creea o singura
scena numita Scene 1. Daca adaugam o noua scena (folosind butonul + din
partea de jos a ferestrei), ea va primi numele Scene 2 si asa mai departe.
Ordinea de aparitie a scenelor in animatie este ordinea in care apar in fereastra
Scene. Putem schimba aceasta ordine tragand cu mouse-ul scenele in pozitia
dorita. Sa vedem acum cum putem naviga printre scene si etichete cu ajutorul lui
Action Script.

2. Saltul la alt frame

V-am spus intr-o lectie precendenta ca frame-urile se succed in ordine cu o
anumita viteza (framerate) cu exceptia cazului in care stabilim noi o alta ordine.
Ei bine, a venit momentul sa o facem pe dictatorii si sa-I aratam dlui Flash cine
comanda aici. :)
Deschideti un nou document si creati 3 butoane cu textul Animatia 1, Animatia
2 si Animatia 3.
De retinut: Pentru mai multa rapiditate, dupa ce creati primul buton puteti folosi
comanda Duplicate Symbol din meniul care va apare daca faceti clic dreapta pe
buton, care va creea o copie a simbolului. Din fereastra Library (unde sunt
pastrate simbolurile create) puteti lua simbolul si plasa in scena, apoi il puteti
modifica.
Inserati apoi o noua scena (Modify-Scene, Add Scene) pe care sa o numiti
Animatia 1. In aceasta a doua scena vom copia o animatie precedenta facuta
de noi. Deschidem fisierul sursa lectia4_ex1.fla, selectam toate frame-urile de pe
toate layer-ele animatiei (tinand apasata tasta Shift in timp ce selectam frame-
urile),

6-4.gif
facem clic dreapta pe selectie si alegem comanda Copy Frames. Ne intoarcem
la documentul nostru in scena nou creata, selectam primul frame, facem clic
dreapta si alegem comanda Paste Frames care va copia intocmai frame-urile si
layer-ele animatiei sursa.
Mai cream inca doua scene (pe care le vom denumi Animatie 2 si Animatie 3) in
care vom copia in acelasi mod alte animatii create de noi. (eu am folosit fisierele
lectia4_ex1.fla si lectia3_ex1)
De retinut: Ne putem deplasa de la o scena la alta folosind fereastra Scene
(facem clic pe numele scenei dorite) sau din folosind butonul Edit Scene din
partea de sus a scenei.

6-5.gif

Daca vom lasa animatie asa cum este in acest stadiu, ea va incepe cu primul
frame al primei scene si se va opri la ultimul frame al ultimei scene, dupa care o
va lua de la capat. Noi vrem insa sa se opreasca la primul frame din prima scena
(cel cu butoanele) si de acolo sa ne alegem care dintre animatii vrem sa vedem
apasand butonul corespunzator.
Asadar, pentru ca animatie sa se opreasca la primul frame din prima scena vom
crea un layer nou, selectam primul keyframe si apasam tasta F9 (sau Window-
Actions) care ne va deschide fereastra de unde putem atasa actiuni. Din acea
fereastra selectam Actions-Movie Control si facem dublu clic pe actiunea stop.
Aceasta face ca animatia sa se opreasca la acel frame.
Acum vrem ca fiecare buton sa ne duca la cate o animatie. Pentru aceasta va
trebui sa atasam fiecarui buton cate o actiune care sa faca acest lucru. Selectam
butonul Animatia1 si tot din fereastra Actions vom alege Actions-Movie
Control, goto. In fereastra unde se afla textul actiunii va aparea implicit:
on (release)
gotoAndPlay(1)
Selectam textul gotoAndPlay, dupa care vom putea modifica parametrii actiunii.
Si anume scena (la Scene alegem Animatie1), tipul indicatorului (vom alege
Frame Number) si eticheta sau numarul frame-ului (lasam numarul 1, intrucat
n-am introdus nici o eticheta). Fereastra Actions ar trebui sa arate in felul
urmator.

6-6.gif
In momentul in care am apasa primul buton, ar incepe sa se desfasoare animatia
1 pana cand va ajunge la sfarsit, apoi va trece la scena urmatoare. Prin urmare
trebuie sa mai atasam o actiune stop si ultimului frame din scena Animatie1.
Introducem un nou layer in animatie (nu conteaza pozitia lui) si in dreptul
ultimului frame al animatiei introducem un keyframe pe acest layer (F6), apoi
deschidem fereastra Actions si atasam actiunea stop(). Acum primul buton
este functional.
Exercitii:
1. Continuati atasarea de actiuni si pentru celelalte doua butoane.
2. Creati in fiecare dintre cele 3 scene cate un buton care sa ne intoarca la
prima scena cu cele 3 butoane.

3. Text de tip input si dinamic

Pana acum am lucrat cu text simplu (static). In Flash mai putem insa crea inca
doua tipuri: text de tip input si text de tip dinamic. Textul de tip input este de fapt
un textfield in care utilizatorul poate insera text. (asemanator text field-ului din
formularele HTML). Textul de tip dinamic este un text care se modifica in functie
de anumite variabile sau parametri.
Sa vedem acum cum putem crea asa ceva.
Exemplu: crearea de text tip input si dinamic
Pentru inceput deschideti un nou document in Flash si selectati Text Tool, dupa
care faceti clic undeva in pagina. In fereastra Properties, in partea stanga, se afla
o lista derulanta care defineste tipul textului. (Implicit este static.)

6-7.gif
Selectati tipul Input Text apoi dimensionati caseta pana ajunge la o latime de
aproximativ 140 pixeli.

6-8.gif
(Eu am folosit pentru document un fundal gri inchis). Cu caseta textului selectata
putem sa-i stabilim atributele textului care va fi introdus: font, culoare,
dimensiune. (Am folosit fontul Arial, 17, culoarea neagra). Eu am selectat si
optiunea Show Border Around Text

6-9.gif
pentru ca textul sa fie mai evidentiat. In aceasta caseta utilizatorul va trebui sa-si
introduca numele, deci sa-i punem si o eticheta. Selectam iar Text Tool si
introducem in partea stanga a textului nostru Nume:. (Acum textul introdus va fi
de acelasi tip ca tipul introdus anterior, deci input, or noi vrem sa fie text normal.
Prin urmare, vom selecta tipul static si orice alte proprietati dorim.)

6-10.gif
Lucrul cel mai important pentru un text field de tip input este stabilirea variabilei
(variabila va contine textul din interiorul text field-ului). Selectam textul input si in
fereastra Properties, caseta Var, tastam nume.
6-11.gif
In acelasi mod vom mai crea un input text care va avea variabila prenume si
eticheta Prenume:, si un alt input text cu variabila varsta si eticheta Varsta:.
(Nu uitati de proprietatile fiecarui text field; si anume etichetele vor avea culoarea
alba, in timp ce textele input vor avea culoarea neagra si chenar.) Puteti creea
textele cu Copy/Paste, dar aveti grija sa schimbati numele variabilelor pentru
fiecare input text.
Acum vom crea un text dinamic care sa ne afiseze ce a introdus pana acum
utilizatorul
Vom selecta iar Text Tool si vom alege de data aceasta tipul Dynamic Text,
culoarea gri, fara chenar si Multiline, iar in caseta Var trecem raspuns. Cu
mouse-ul in interiorul textului vom trage de coltul din dreapta jos pana ajugne la
dimensiunile dorite.

6-12.gif
Acum va mai trebui sa cream un buton care, cand il apasam, sa ne afiseze in
caseta cu text dinamic textul introdus in text field-urile input. Introduceti butonul
deasupra textului dinamic. Urmeaza sa atasam butonul o actiune care sa-l faca
sa introduca in variabila rezultat valorile variabilelor nume, prenume si
varsta. Nimic mai simplu; variabilei rezultat ii vom atribui urmatoarela valoare:
rezultat=prenume+nume+varsta.
Presupunand ca utilizatorul a introdus Costel, Ionescu si 17, textul dinamic ar
trebui sa afiseze CostelIonescu22. Ca sa fie lizibil rezultatul, trebuie sa
introducem niste spatii intre valorile variabilelor astfel:
rezultat=prenume+ +nume+ +varsta+ ani.
Dupa cum vedeti, putem adauga siruri de caractere la valorile variabilelor
folosindu-ne de semnul + (care in Action Script este operator de concatenare).
Daca vrem sa mai complicam putin valoarea variabilei rezultat, vom scrie astfel:
rezultat=nume+" "+prenume+", ai "+varsta+" ani. Ai cam imbatranit!"
Ca sa revenim la butonul nostru, trebuie deci sa-i spunem ca atunci cand facem
clic pe el trebuie sa atribuie variabilei rezultat valoarea scrisa mai sus. Cu
butonul selectat, deschidem fereastra Actions (F9) si alegem modul de
vizualizare Expert Mode, ca sa putem scrie singuri codul. (Folosim butonul
View Options din partea stanga sus a ferestrei Actions.)

6-13.gif
In fereastra vom introduce urmatorul cod:
on (release) {
rezultat=nume+" "+prenume+", ai "+varsta+" ani. Ai cam imbatranit!";
}
Ce-a fost greu a trecut, si acuma putem sa testam in liniste rezultatul.
(Ctrl+Enter)
Lectia6_ex2.swf
Daca n-ati obtinut acelasi rezultat, uitati-va pe fisierul sursa. (link catre
lectia6_ex2.fla)

Exercitii:
3. Creati un mini-calculator care sa afiseze rezultatul adunarii a doua numere
introduse de utilizator.
Indiciu: trebuie sa transformati valorile variabilelor (care sunt tratate implicit ca
siruri) in numere, folosind functia Number(). Prin urmare, daca vreti ca
valoarea variabilei var1 sa fie tratata ca numar, veti scrie Number(var1).

Lectia 7 Exportul animatiilor

1. Formate de export
Cel mai folosit format de export (publicare) a animatiilor este swf. Acesta poate fi
inclus in paginile web (html) si vazut de oricine are un browser care are instalat
pluginul de flash. Alte tipuri de formate de export sunt: exe, gif, Sa vedem acum
cum putem exporta o animatie in formatul swf. Ei bine, trebuie sa va spun ca
pana acum ati exportat in format swf fara sa stiti, intrucat comanda Test Movie
(Ctrl+Enter) are rolul de a exporta animatia in format swf pentru a o vizualiza. Tot
pentru export puteti folosi comenzile Export Movie si Export Image pentru
export sub forma de animatii in diferite formate, respectiv exportul de imagini in
diferite formate.
Daca folosim comanda Export nu vom avea prea mare control asupra
parametrilor de export. Pentru aceasta trebuie folosim Publish Settings care se
afla tot in meniul File. Dupa cum vedeti in fereastra, ne putem alege formatele de
export, urmand apoi a detalia preferintele la fiecare. (Implicit, formatele de
publicare vor fi Flash si HTML).
Exemplu: Sa exportam pentru web una dintre animatiile precendente
(lectia4_ex1.fla) in format swf si html. Inainte trebuie insa sa testam timpul de
download al animatiei (adica in cat timp s-ar incarca pagina cu animatia in
conditiile diferitor viteze-bandwidth). Pentru aceasta folosim comanda Test Movie
din meniul Control sau Ctrl+Enter si in fereastra care apare alegem View-
Bandwidth Profiler, care ne arata o serie de statistici privind dimensiunea fiecarui
frame, timpul de incarcare etc.

7-1.gif
Putem sa vedem cum se comporta animatia in conditiile mai multor viteze
alegand viteza dorita din meniul Debug.
2. Preloadere
In cazul in care cream o animatie pentru web, se obisnuieste atasarea la aceasta
animatie (in cazul in care are dimeniuni mai mare) a unui preloader, care sa
arate utilizatorului cat mai are de asteptat pana i se incarca animatia.
Sa salvam intai animatia cu numele de lectia7.fla, apoi ii adaugam o noua scena
(Modify Scene Add scene) pe care o deplasam cu mouse-ul deasupra scenei
actuale, apoi o denumim intro (dublu clic pe numele ei pentru a i-l schimba). In
aceasta scena tastam in centrul ei textul loading in primul keyframe, apoi
introducem inca doua keyframe-uri goale. Adaugam un nou layer in care vom
avea actiunile. Pentru primul keyframe introduceti in fereastra Actions (F9)
urmatoarele actiuni:
if (getBytesLoaded()==getBytesTotal()) {
gotoAndPlay("Scene 1", 1);
Inserati un nou keyframe in al treilea frame si introduceti urmatoarea actiune:
gotoAndPlay(1);
Sa vedem ce inseamna aceste actiuni. Daca numarul de bytes care s-au incarcat
(numar dat de functia getBytesLoaded) este egal cu numarul total de bytes al
animatiei (dat de functia getBytesTotal) atunci se poate sari direct la animatia
propriu-zisa (Scena 1, frame-ul 1). Daca aceasta conditie nu este indeplinita,
adica daca animatia nu s-a incarcat, atunci se vor derula in mod normal frame-
urile urmatoare, pana la frame-ul 3, care trimite inapoi la primul frame pentru a
verifica daca s-a incarcat animatia, si asa mai departe pana se incarca toata.
Incercati sa testati animatia in acest moment: Ctrl+Enter, Show Bandwidth
Profiler si Show Streaming pentru a vedea cum se incarca. Daca alegeti viteze
diferite veri vedea cum textul loading clipeste pana se incarca toata animatia,
apoi incepe animatia propriu-zisa.
Preloader-ul nostru nu ne arata insa cat s-a incarcat pana acum din animatie si
cat mai avem de asteptat. Sa-I atasam asadar un text de tip dinamic care sa
afiseze procentajul de bytes incarcati.
Introduceti un nou layer, iar in primul keyframe al acestui layer introduceti doua
texte de tip dinamic. Primul cu eticheta bytes loaded, care ne va arata cati
bytes s-au incarcat pana acum, avand variabila loaded, si al doilea cu eticheta
% loaded, care ne va arata procentul de bytes incarcati pana acum, avand
variabila proc. Stiti cum vom calcula valorile celor doua variabile? Sunt sigura
ca da, dar va spun oricum.
loaded=getBytesLoaded()
si proc=(getBytesLoaded()/getBytesTotal())*100
Pentru variabila proc calculul pare mai complicat, dar nu este. Ea imparte
numarul de bytes incarcati la numarul total de bytes si inmulteste rezultatul cu
100 pentru a obtine un procentaj.
Acum luam cele doua varibile calculate si le inseram la actiunile din primul
keyframe astfel:
if (getBytesLoaded()==getBytesTotal()) {
gotoAndPlay("Scene 1", 1);
} else {
loaded=getBytesLoaded();
proc=(getBytesLoaded()/getBytesTotal())*100;
}
ceea ce inseamna ca cele doua valori ale variabilelor vor fi afisate in cazul in
care nu este indeplinita conditia din if, cu alte cuvinte in cazul in care animatia nu
s-a incarcat complet.
Acum testati din nou animatia (folosind din nou Show Streaming). Mult mai bine,
nu?!
Download sursa. (link catre lectia7.fla)
Acum sa publicam pentru web animatia, adica sub forma unui swf inclus intr-o
pagina html. Pentru aceasta folositi combinatia de taste Ctrl+F12 sau File-
Publish Preview (Default) si apare pagina web.

3. Reguli de optimizare pentru web

Intrucat marea majoritate a animatiile in Flash sunt create pentru web, este
necesar sa incercam sa reducem pe cat posibil dimensiunile acestora pentru a
nu-I descuraja pe cei cu conexiuni la Internet mai putin rapide.
Asadar iata cateva reguli generale de optimizare:
- evitati pe cat posibil folosirea de umpleri cu efect de gradient (gradient fill),
care ocupa maimult spatiu decat umplerile cu o singura culoare.
 - evitati folosirea de sunete sau video importate, care au dimensiuni foarte
mari. Pentru sunet, se recomanda formatul mp3, care are cea mai mare
compresie
- incercati sa nu animati imaginile de tip bitmap, ci doar pe cele de tip
vectorial.
- convertiti in simboluri obiectele care apar de mai multe ori in animatie;
- grupati elementele care apar impreuna;
- nu este nevoie sa va zgarciti la numarul de layere, intrucat acestea nu
afecteaza dimensiunea animatiei.

Exercitii:
1. Creati diverse tipuri de preloadere.
2. Exportati animatiile si in alte formate (mov sau gif animat) folosind diversi
parametri pentru a vedea schimbarile.

Test online
1. Care este utilitatea aplicatiei Macromedia Flash MX?
Realizarea de animatii
Crearea de baze de date
Crearea de foi de calcul tabelar
Navigarea pe web
2. Cum se numeste limbajul de scripting folosit de Flash?
Java Script
Action Script
VB Script
Jscript
3. Cum se numeste in Flash spatiul de lucru unde puteti insera text, imagini, desene?
Timeline
Stage
Properties Toolbar
Tools Bar
4. Cu care dintre instrumentele de mai jos puteti umple o forma cu o anumita culoare?
Oval Tool
Rectangle Tool
Paint Bucket Tool
Eraser Tool
5. Care dintre urmatoarele caracteristici sunt adevarate in ceea ce priveste simbolurile?
Pot fi numai imagini gif
Daca modificati un simbol se modifica toate instantele acestuia
Un simbol nu poate fi folosit decat o data
Nu puteti avea mai mult de 5 simboluri intr-o animatie
6. Care sunt tipurile de simboluri pe care le puteti realiza in Flash?
Grafice, dinamice si statice
Grafice, buton si movie clip
Buton si grafic
Flash nu permite folosirea de simboluri
7. Din ce este formata linia timpului (Timeline) in Flash?
Frame-uri si keyframe-uri
Layere
Simboluri
Nici unul dintre raspunsurile de mai sus
8. Ce trebuie sa faceti daca doriti ca, la un anumit moment din linia timpului, continutul
scenei sa se modifice?
Inserati un keyframe
Inserati un simbol
Inserati un strat
Continutul scenei nu poate fi modificat
9. Cate tipuri de tranzitii pot fi definite in Flash?
Tranzitii de miscare si de forma
Tranzitii dinamice si statice
Tranzitii de grafice si de text
Nici un raspuns nu este corect
10. Care dintre animatii de mai jos reprezinta o tranzitie de miscare?
Schimbarea unei forme din cerc in patrat
Schimbarea unei forme din patrat in cerc
Deplasarea unui text dintr-o parte intr-alta a scenei
11. Care dintre animatii de mai jos reprezinta o tranzitie de forma?
Deplasarea unui text dintr-o parte intr-alta a scenei
Schimbarea unei forme din patrat in cerc
Deplasarea unui cerc dintr-o parte intr-alta
Schimbarea culorii unui patrat
12. In cazul carui tip de tranzitie este necesar ca obiectul animat sa fie transformat in simbol?
Tranzitiilor de miscare
Tranzitiilor de forma
Nici un raspuns nu este corect
13. Cum puteti deplasa un obiect de-a lungul unui traseu?
Folosind un strat ghid
Folosind o tranzitie de miscare
Folosind un strat masca
Acest lucru nu se poate realiza in Flash
14. Cum puteti dezvalui numai anumite parti ale unei imagini?
Folosind un strat ghid
Folosind o tranzitie de miscare
Folosind un strat masca
Acest lucru nu se poate realiza in Flash?
15. Ce tip de editare poate fi facuta asupra obiectelor de pe un strat blocat (locked)?
Schimbarea culorii
Schimbare pozitiei
Modificarea dimensiunilor
Obiectele dintr-un strat blocat nu pot fi editate
16. Pentru a simula deplasarea unei masini pe un traseu, ce veti folosi?
Miscare ghidata
Strat masca
Tranzitie de forma
17. Cate stari puteti defini pentru un buton?
Una singura
4
20
oricate
18. Care dintre urmatoarele stari defineste aspectul butonul cand se trece cu mouse-ul peste
el?
Up
Over
Down
Hit
19. Ce actiune puteti atasa unui buton pentru a deschide o ferastra de browser?
getURL
open_browser_window
browser:open
un buton nu poate deschide o fereastra de browser
20. Care dintre urmatoarele stari defineste aspectul butonul cand este apasat de mouse?
Up
Over
Down
Hit
21. Cum puteti atasa denumiri keyframe-urilor?
Folosind etichetele
Transformandu-le in denumiri
Transformandu-le in frame-uri
Nu se pot atasa denumiri keyframe-urilor
22. Cum se poate schimba ordinea de derulare a frame-urilor?
Transformandu-le in keyframe-uri
Schimbandu-le etichetele
Atasand actiuni care fac saltul spre alte frame-uri
Nu se poate schimba ordinea de derulare a frame-urilor
23. Care este utilitatea scenelor?
Permit inserarea de simboluri diferite
Permit schimbarea etichetelor
Usureaza lucrul cu animatii mai elaborate
Nu au nici o utilitate
24. Ce rezultat obtineti daca definiti un text de tip input?
Un text dinamic
O caseta in care utilizatorul poate insera date
Un text care isi schimba culoarea
Un simbol grafic
25. Care dintre urmatoarele formate nu nu este un format de export din Flash?
SWF
HTM
GIF
ZIP
26. Care este optiunea care va permite schimbarea parametrilor de export?
Publish Setting
Insert Symbol
File Properties
Modify Scene
27. Ce puteti folosi pentru a arata navigatorului cat mai are de asteptat pana i se incarca
pagina?
Ii trimiteti un email inainte
Includeti un preloader in animatie
Inserati o animatie cu tranzitie de miscare
Inserati o animatie cu tranzitie de forma
28. Care dintre cele enumerate mai jos nu este o regula de optimizare a animatiilor pentru
web?
Evitati pe cat posibil folosirea de umpleri cu efect de gradient
convertiti in simboluri obiectele care apar de mai multe ori in animatie;
grupati elementele care apar impreuna
includeti cat mai multe sunete importate.