E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale Adobe Flash

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

GRAFICA 2D  /  Adobe Flash  /  ActionScript (14)

Lant cu ciocniri si urmarirea mouse-ului

22.01.2009
Lant cu ciocniri si urmarirea mouse-ului

In acest tutorial vei putea citi despre realizarea unei aplicatii Flash in Action Script 2.

Total vizualizari: 7405 7405 afisari   |   Comentarii  0   |   Rating   |   (5 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Sursa:  http://www.actionscript.org  
Autor:  Alejandro Quarto
Download
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 1 2
comenteaza printeaza

Urmarirea mouse-ului

In acest exemplu, prima bila urmareste intotdeauna pozitia cursorului. In continuare vei defini o functie care sa realizeze acest lucru, pe care o poti utiliza si in alte aplicatii.

function followMouse(mc, lowerDistance) {
 orig = {x:mc._x, y:mc._y};
 dest = {x:_root._xmouse, y:_root._ymouse};
 myAngle = Math.atan2((orig.y-dest.y), (orig.x-dest.x));
 myDistance = Math2.distanceBetween(orig.x, orig.y, dest.x, dest.y)-lowerDistance;
 if (myDistance+lowerDistance>=lowerDistance) {
  mc._x -= Math2.cos(myAngle)*(myDistance/reductionMultiplier);
  mc._y -= Math2.sin(myAngle)*(myDistance/reductionMultiplier);
 }
}

Functia de mai sus are doi parametri:
1- Movie clip-ul (mc) care urmareste mouse-ul.
2- Distanta (in pixeli) dintre movie clip si cursor (lowerDistance).

In continuare este calculata distanta dintre movie clip si cursorul mouse-ului utilizand metoda distanceBetween. Unghiul fata de axa Ox al dreptei definita de cele doua puncte este calculat cu ajutorul functiei Math.atan2.  

In final, daca distanta retinuta in variabila myDistance este mai mare decat lowerDistance, inseamna ca movie clip-ul trebuie mutat pe directia data de unghiul calculat anterior. Pentru aceasta, sunt calculate deplasarile pe axele Ox si Oy cu ajutorul functiilor Math.cos, respectiv Math.sin. Ca observatie, daca maresti valoarea variabilei reductionMultiplier, aceasta deplasare se va efectua mai lent.

Cum faci o bila sa urmareasca alta bila

Codul de mai jos este similar celui pentru urmarirea mouse-ului, cu diferenta ca in locul pozitiei cursorului, foloseste pozitia unui movie clip.

function follow(mc, myTarget, lowerDistance) {
 orig = {x:mc._x, y:mc._y};
 dest = {x:myTarget._x, y:myTarget._y};
 myAngle = Math.atan2((orig.y-dest.y), (orig.x-dest.x));
 myDistance = Math2.distanceBetween(orig.x, orig.y, dest.x, dest.y)-lowerDistance;
 if (myDistance+lowerDistance>=lowerDistance) {
  mc._x -= Math2.cos(myAngle)*(myDistance/reductionMultiplier);
  mc._y -= Math2.sin(myAngle)*(myDistance/reductionMultiplier);
 }
}

Cel de-al doilea argument al functiei (mcTarget) reprezinta bila care va fi urmarita.

Constrangeri de deplasare

In continuare, ai nevoie de o alta metoda care sa tina bilele la o anumita distanta una fata de cealalta:

function keepDistance(obj1, obj2, dist) {
 orig = {x:obj1._x, y:obj1._y};
 dest = {x:obj2._x, y:obj2._y};
 myAngle = Math.atan2((orig.y-dest.y), (orig.x-dest.x));
 myDistance = Math2.distanceBetween(orig.x, orig.y, dest.x, dest.y);
 if (myDistance<=dist-0.1) {
  obj1._x -= Math2.cos(myAngle)*((myDistance-dist)/2);
  obj1._y -= Math2.sin(myAngle)*((myDistance-dist)/2);
  obj2._x += Math2.cos(myAngle)*((myDistance-dist)/2);
  obj2._y += Math2.sin(myAngle)*((myDistance-dist)/2);
 }
}

Codul nu este complicat, scopul lui este de a evita suprapunerea bilelor. In concluzie, daca distanta dintre doua bile este prea mica, cele doua movie clip-uri sunt mutate de-a lungul aceleiasi drepte suport (definita de centrele lor), dar in sensuri opuse. Deoarece bilele au acelasi diametru, ele vor fi deplasata cu distanta respectiva impartita la 2.

Observatie: numarul 0.1 este folosit pentru a evita deplasarile prea mici.

Integrarea codului

In continuare vei integra toate functiile definite pana acum in aplicatia ta.

Ultima portiune de cod de care ai nevoie este prezentata mai jos:

this.onEnterFrame = function() {
 followMouse(mc1,0);
 for (i=1; i<=balls; i++) {
  a = i+1;
  follow(_root["mc"+a],_root["mc"+i],(_root["mc"+a]._width/2)+(_root["mc"+i]._width/2));
  for (j=1; j<=balls; j++) {
   if (j<>i) {
    keepDistance(_root["mc"+j],_root["mc"+i],(_root["mc"+i]._width/2)+(_root["mc"+j]._width/2));
   }
  }
 }
};

Poti vedea ca acesta cuprinde o functie onEnterFrame, dar ca alternativa iti poti defini o functie proprie pe care sa o rulezi cu setInterval.

Sistemul va fi actualizat in mod constant. Prima instructiune din onEnterFrame il reprezinta apelul functiei followMouse, ceea ce va determina prima bila sa urmareasca mouse-ul.
Apoi, urmeaza o bucla for, al carei scop este de a face fiecare bila sa o urmareasca pe cea dinaintea ei. Functia follow primeste 3 argumente: 1. bila ce va fi mutata, 2. bila ce trebuie urmarita, 3. distanta minima dintre ele (in acest caz suma razelor lor). In aceasta bucla este inclusa o alta bucla for, care are rolul de a repozitiona toate bilele. Daca acestea nu sunt verificate dupa fiecare mutare, e posibil ca ele sa se suprapuna, ceea ce inseamna ca va fi verificata pozitia fiecarei bile fata de toate celelalte. Daca exista o suprapunere, bila respectiva va fi mutata.


Aici se incheie acest tutorial. Pentru a testa acest exemplu, poti descarca sursele accesand linkul Download.

Pagina:
« 1 2
comenteaza printeaza
Alte tutoriale Adobe Flash:
Noteaza acest tutorial
Rating tutorial
 
(5 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
5450
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5445
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
5275
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
5260
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
5010
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
CSS AJAX Bridge XML Fotografie PHP Python Flash COREL DRAW Fireworks Excel Lightroom Vista XHTML JSON SEO Illustrator Photoshop Outlook Swift 3D StyleSheet Powerpoint Gimp MySQL HTML Word Dreamweaver RoR Java Verilog SWF Sony Vegas Javascript Ruby on Rails PSD Action Script
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software