|
Vom incepe aceasta prima parte (dealtfel destul de scurta) dedicata graficii in Flash tocmai prin
realizarea unui caleidoscop. In primul rand pentru realizarea unui caleidoscop avem nevoie de un
obiect care sa isi modifice forma in timp – acesta este „motorul”
caleidoscopului care va fi copiat (de fapt oglinzile caleidoscopului dadeau
acest efect de copiere) in diverse pozitii – de obicei in forma circulara.Pentru a copia obiectul in diverse pozitii si a-l putea roti, vom avea nevoie
ca acesta sa fie creat ca un MovieClip.
Pentru inceput vom insera in scena un nou MovieClip (Insert -> New
Symbol...) si vom selecta optiunea MovieClip; tot in aceasta fereastra vom
bifa optiunea Export for ActionScript si in campul „Identifier” vom trece
„forma”. Aceste setari au rolul de a crea in librarie un obiect ce va putea fi
manipulat prin intermediul identificatorului sau (acesta fiind „forma”).
Faptul ca „Export in first frame” ramane bifat va determina Flash-ul sa
defineasca obiectul ca facand parte din primul cadru.
Acest lucru este
uneori util (atunci cand la inceputul Flash-ului avem nevoie de acest prim
obiect) dar alteori poate dauna proiectului pe care il realizam (de exemplu
daca vreti sa puneti in primul cadru un obiect construit din foarte multi
vectori, o imagine de dimensiuni mari sau un MP3, un eventual preloader
va esua in afisarea corecta a procentului de film Flash incarcat). Pentru
acest exemplu vom lasa bifata aceasta optiune:
 |
Dupa apasarea butonului OK, va apare o fereastra ce are in centru un
semn plus. Acest semn este punctul de referinta al obiectului pe care il veti
crea. De exemplu, atunci cand vom aduce MovieClip-ul din librarie si-l
vom pozitiona in punctul P(0,0), de fapt acest punct de refernita (semnul
plus) va fi suprapus peste P(0,0) si continutul MovieClip-ului va fi asezat
relativ fata de el. Cum construiti o animatie in MovieClip-ul pe care doriti
sa-l creati:
Selectati primul cadru al liniei temporale si cu ajutorul instrumentului
Text adaugati litera „A” scenei astfel incat semnul plus despre care tocmai
am discutat sa ramana in partea stanga-sus a literei adaugate. Selectati apoi
cadrul douazeci si apasati F6 (apasarea tastei F6 va duce la inserarea unui
nou cadru-cheie in aceasta pozitie; operatia de inserare a unui cadru poate
fi efectuata si apasand click dreapta pe cadrul douazeci si selectarea
optiunii Insert Keyframe sau din meniuri: Insert->Timeline->Keyframe).
In
pozitia cadrului douazeci va apare din nou litera „A” pe care o veti edita cu
ajutorul instrumentului Text si o veti transforma in litera „D”. Procedati
identic adaugand in cadrul patruzeci litera „P”, in cadrul saizeci litera „O”
si in sfarsit in cadrul optzeci din nou litera „A”.
 |
Toate literele introduse pana acum se comporta ca elemente textuale si noi aveam nevoie de o forma (grafica) care sa se modifice in timp. Pentru a
schimba tipul literelor (din text in element grafic) selectati pe rand cadrele
in care ati adaugat litere, selectati litera adaugata si apasati combinatia de
taste CTRL+B (sau din meniuri Modify->Break Apart) – aceasta operatie ar
trebui efectuata de cinci ori – nu uitati cadrul optzeci. In continuare
selectati pe rand cadrele 0, 20, 40, 60 si de fiecare data, din fereastra de
proprietati (CTRL+F3 sau din meniuri: Window -> Properties) modificati optiunea Tween in Shape.
Deasupra liniei temporale selectati „Scene1” pentru a va reintoarce sa
editati documentul initial. Din acest moment exista (cel putin) doua
posibilitati de a continua:
1. Deschideti biblioteca de obiecte (prin apasarea tastei F11 sau CTRL+L
sau din meniuri: Window -> Library) si printr-o operatie drag-and-drop aduceti in scena principala simbolul nou creat. Selectati simbolul din scena
(ar trebui sa fie incadrat intr-un dreptunghi albastru) si din fereastra de
proprietati setat-i numele de instanta „mc0” – MovieClip-ul original dupa
care vom face copiile. Tot in fereastra de proprietati selectati in dreptului drop-down-ului „Color” optiunea „Alpha” si valoarea transparentei setati-o la
25%.
Selectati primul cadru al scenei principale si (desi credeati ca ati scapat
de ActionScript) scrieti in fereastra Actions-Frame (F9 sau Window->Developmenent Panels -> Actions) urmatorul cod:
for (i=1; i<36; i++) {
_root.mc0.duplicateMovieClip("mc"+i, i);
_root["mc"+i]._rotation = i*10;
}
Codul de mai sus are rolul de a duplica MovieClip-ul existent in scena de
inca treizeci si cinci de ori si de a-l roti astfel incat sa se formeze o floare
(operatiile se repeta din cauza instructiunii „for” de 35 de ori; aceste
operatii sunt duplicare – obtinuta prin apelul functiei „duplicateMovieClip”
si rotire – obtinuta prin modificarea parametrului „_rotation” caracteristic
fiecarui MovieClip). Testati rezultatul apasand combinatia de taste
CTRL+Enter (sau Control -> TestMovie).
2. Puteti ca sa adaugati direct primului cadru urmatorul script (care
aduce din biblioteca obiectul cu numele „forma”, il duplica si ii seteaza
transparenta la 25% („attactMovie” are rolul de a aduce din biblioteca un
MovieClip, parametrul „_alpha” este de asemenea caracteristic oricarui
MovieClip si semnifica transparenta):
for (i=0; i<36; i++) {
_root.attachMovie("forma","mc"+i, i);
_root["mc"+i]._rotation = i*10;
_root["mc"+i]._alpha = 25;
}
 |
Dezavantajul pe care il are acest mod de construire a unui caliedoscop
este aceala ca dupa un timp (egal cu numarul cadrelor in care a fost
construit – 80 impartit la viteza filmului) animatia se va repeta. Vom
incerca intr-un capitol viitor sa realizam un caleidoscop care sa nu se repete
(in care forma care se modifica in timp este generata aleator).
Intrebare: puteati construi caleidoscopul fara a folosi ActionScript deloc ?
(incercati sa raspundeti singuri inainte de a citi raspunsul)
Raspuns: Caleidoscopul se putea construi si in intregime manual,
aducand pe rand treizeci si sase de instante ale MovieClip-ului din librarie si
rotite cu ajutorul ferestrei Transform (CTRL+T sau din meniuri: Window->Design Panels->Transform).
Incercati singuri sa rezolvati acest exercitiu
(veti intelege – sper – de ce este atat de important ActionScript-ul si de cata
munca inutila va scuteste).
|
2915 afisari |
10 min
|
Incepator
