Cuburi ce reactioneaza la miscarea mouse-ului

Cuburi

Pana acum n-am tinut cont de faptul ca Flash-ul stie sa "asculte" de miscarea mouse-ului.

In cele ce urmeaza vom vedea pas cu pas cum puteti obtine un efect ca cel de mai jos (miscati mouse-ul deasupra zonei).


Pe ce se bazeaza efectul?

Voi folosi proprietatile _xmouse si _ymouse,
un strop de geometrie (nu va speriati, e doar o picatura de fapt Smile )
si un mecanism de a detecta daca mouse-ul se misca (veti face
cunostinta cu "domnia sa" onMouseMove).











Inceput


Incepeti prin a crea un document nou flash la
dimensiunile 500 x 350 si fundal negru. Desenati un cub, folosind linia
punctata pentru muchiile invizibile. Cam cat de mare? Undeva intre 30
si 40 de pixeli.

Transformati ceea ce ati desenat intr-un movieclip (tasta FCool si numiti-l cub. Documentul flash ar trebui sa arate cam asa.



Mutati cubul in afara scenei. Voi face copii ale
acestui movieclip si le voi pozitiona pe scena folosind actionscript,
deci nu vreau ca acest movieclip sa se vada.

Sa desenam cuburile

Creati un nou layer pe care vom pune actiunile.

Iata scriptul care deseneaza cateva cuburi aranjate pe mai multe linii si coloane. Nu va speriati, e foarte simplu!

maxlin = 7;
maxcol = 10;
k=100;
for (i=1; i<=maxlin; i++) {
for (j=1; j<=maxcol; j++) {
cub.duplicateMovieClip("b"+i+" "+j, k++);
film = eval("b"+i+" "+j);
film._x = j*cub._width;
film._y = i*cub._width;
}
}

Daca salvati si executati veti obtine efectul acesta:



Hai sa disecam impreuna ce fac for-urile astea.

maxlin si maxcol
reprezinta numarul de cuburi pe verticala, respectiv orizontala din
matricea de cuburi. Daca aveti rabdare sa le numarati veti vedea ca
sunt 7, respectiv 10, adica valorile din atribuirile:

maxlin = 7;
maxcol = 10;

Variabila k va fi folosita pentru a preciza nivelul pe care vor fi create movieclip-urile folosind duplicateMovieClip.

Tinand cont ca movieclip-ul cub se afla pe scena (si nu in library), voi folosi duplicateMovieClip si nu


attachMovie pentru a crea cele 7x10 movieclip-uri.

Astfel, instructiunea cub.duplicateMovieClip("b"+i+" "+j, k++); creeaza pe nivelul k din stiva un nou movieclip numit "b"+i+" "+j ca si copie a lui cub.

Ramane ca acest cub nou creat sa fie pozitionat pe scena si pentru aceasta am folosit urmatoarele 3 instructiuni:

film = eval("b"+i+" "+j);
film._x = j*cub._width;
film._y = i*cub._width;

Sa facem cuburile sa se miste

Miscarea de fapt va insemna redimensionarea lor direct
proportionala cu distanta fata de mouse, plus un efect alpha setat
invers proportinal cu distanta dintre mouse si cub.

Scriptul este urmatorul:

this.onMouseMove = function() {
for (i=1; i<=maxlin; i++) {
for (j=1; j<=maxcol; j++) {
film = eval("b"+i+" "+j);
sc = Math.sqrt((film._x-_xmouse)*(film._x-_xmouse)+(film._y-_ymouse)*(film._y-_ymouse));
film._xscale = sc/1.2;
film._yscale = sc/1.2;
film._alpha = 140-sc/2;
}
}
};

Pare complicat, dar nu este deloc.

Inainte de toate, this in
cazul acesta este movieclip-un corespunzator scenei pe care este pus
scriptul, adica filmul intreg. L-am folosit pentru a atasa un cod la
evenimentul onMouseMove ce apare pentru
movieclip-ul principal. Iar codul nu face altceva decat sa ia rand pe
rand fiecare din cuburile desenate anterior, sa calculeze in variabila sc
distanta (masurata in pixeli) dintre mouse si acel movieclip (aceasta
este picatura de matematica promisa la inceputul tutorialului!) si sa
stabileasca dimensiunea acelui cub ca fiind direct proportionala cu
aceasta distanta. N-am folosit chiar sc ci sc/1.2 pentru ca am vrut sa obtin o dimensiune ceva mai mica a acelui cub. Iar proprietatea_alpha este invers proportionala cu distanta sc, de aceea am pentru ea valoarea 140-sc/2.

Daca vi se par ciudate valorile, incercati sa le modiicati si veti vedea schimbarile obtinute.

Picatura de matematica

Daca (x1,y1) si (x2,y2) sunt 2 puncte in plan, atunci distanta dintre ele este



Mai departe, pentru calculul radicalului, in Flash avem functia Math.sqrt, pentru ridicarea la patrat am folosit o inmultire repetitiva, iar


* x1 este film._x,
* x2 este _xmouse,
* y1 este film._y
* y2 este _ymouse



De aici am obtinut formula pentru calculul lui sc si anume: sc = Math.sqrt((film._x-_xmouse)*(film._x-_xmouse)+(film._y-_ymouse)*(film._y-_ymouse))