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)

Bila cu efect de respingere si particule

05.01.2009
Bila cu efect de respingere si particule

In acest tutorial vei invata cum sa creezi un efect de respingere pentru o bila, folosind actiuni asociate mouse-ului si tastelor sageti.

Total vizualizari: 5866 5866 afisari   |   Comentarii  3   |   Rating   |   (11 voturi)   |   Timp necesar: 25 min 25 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

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

In acest tutorial vei invata cum sa creezi un efect de respingere pentru o bila, folosind actiuni asociate mouse-ului si tastelor sageti.

In primul rand, arunca o privire asupra swf-ului de mai sus. Poti observa ca bila este respinsa de catre cursorul mouse-lui, creand un efect de vant. Mouse-ul va muta bila in directia opusa fata de el insusi. In cazul in care cursorul este foarte apropiat de bila, ea va fi respinsa cu o forta mult mai mare comparativ cu cea generata de o distanta mai mare fata de mouse.

In plus, poti utiliza tastele sageti pentru a misca bila.

Ideea de baza a acestui tutorial este introducerea unor legi si forte fizice. Tot ceea ce vei face este sa aplici diferite fortei bilei, cum ar fi greutatea sau forta de frecare.

Crearea bilei si a particulelor

Este recomandat ca bila din aplicatie sa fie desenata vectorial. Dupa ce ai creat-o, apasa F8 pentru a o transforma intr-un MovieClip. In plus, este esential ca obiectul sa poata fi accesat de catre codul ActionScript. Pentru aceasta, in librarie (Ctrl+L pentru a deschide libraria) da click dreapta pe simbolul ce contine bila si selecteaza Linkage din meniul pop-up. In fereastra care se deschide, bifeaza optiunea Export for ActionScript si tasteaza "circle" in casuta Identifier.

Acesta va fi numele cu ajutorul caruia vei putea accesa obiectul din codul ActionScript. Deoarece movie clip-ul exista in librarie, il poti sterge de pe scena. In continuare, vei crea cel de-al doilea simbol, pentru particulele lasate in urma de bila.
In acest exemplu, pentru particule a fost folosita o bila cu o culoare putin diferita de cea originala, dar poti utiliza orice alta forma. Repeta pasii de mai sus, dar in loc de "circle", foloseste identificatorul "circleParticle".

Adaugarea codului pentru bila

Arunca o privire pe codul pentru bila, el va fi explicat mai jos.

restitution = 0.7;
  resistence = 0.997;
  acceleration_x = 0;
  acceleration_y = 0;
  gravity = 0.2;
  particleCount = 0;
  this.onEnterFrame = function() {
      generateParticles();
      this.swapDepths(_parent.getNextHighestDepth())
      acceleration_y += gravity;
      acceleration_y *= resistence;
      acceleration_x *= resistence;
      checkColision();
      _x += acceleration_x;
     _y += acceleration_y;
  };
  function accelerate(x, y) {
      acceleration_x += x;
      acceleration_y += y;
  }
  function checkColision() {
      if (_x+acceleration_x+(_width/2)>=_parent.rightLimit) {
      if (_x+(_width/2)<_parent.rightLimit) {
          _x = _parent.rightLimit-(_width/2)-0.1;
  } else {
          acceleration_x *= -1*restitution;
  }
  }
      if (_x+acceleration_x-(_width/2)<=_parent.leftLimit) {
          if (_x-(_width/2)>_parent.leftLimit) {
              _x = _parent.leftLimit+(_width/2)+0.1;
  } else {
              acceleration_x *= -1*restitution;
  }
  }
     if (_y+acceleration_y+(_width/2)>=_parent.bottomLimit) {
      if (_y+(_width/2)<_parent.bottomLimit) {
          _y = _parent.bottomLimit-(_width/2)-0.1;
  } else {
          acceleration_y *= -1*restitution;
  }
  }
      if (_y+acceleration_y-(_width/2)<=_parent.topLimit) {
          if (_y-(_width/2)>_parent.topLimit) {
              _y = _parent.topLimit+(_width/2)+0.1;
  } else {
         acceleration_y *= -1*restitution;
  }
  }
  }
  function generateParticles() {
      _parent.attachMovie("circleParticle","particle"+particleCount,_parent.getNextHighestDepth(),{_x:_x, _y:_y});
      particleCount++;
  }

Acest cod trebuie sa se afle in interiorul movie clip-ului ce contine bila, pe primul si singurul frame.
Poti observa ca au fost definite anumite proprietati fizice:

  • restitution reprezinta cantitatea de energie pierduta de bila in urma unei ciocniri
  • resistence este rezistenta aerului
  • gravity este o constanta ce va fi adauga acceleratiei pe axa Y
  • acceleration_x si acceleration_y sunt componentele acceleratiei pe cele doua axe
  • particleCount reprezinta numarul de particule lasate in urma de catre bila

Pentru a modifica proprietatile bilei la fiecare frame, trebuie sa definesti o functie onEnterFrame. Aceasta va apela functie de generare a particulelor si functia swapDepths (astfel incat bila sa se afle tot timpul deasupra particulelor). In plus, acceleratiei pe axa Y ii este adaugata constanta gravity.

Un lucru foarte important este verificarea faptului daca bila a intalnit un perete, care trebuie efectuata inainte ca pozitia acesteia sa fie modificata.

Functia checkCollision are rolul de a verifica daca a avut loc o ciocnire. Fiecarei componente a acceleratiei ii este adaugata pozitia obiectului pe axa respectiva, pentru a verifica daca valoarea finala depaseste limitele de deplasare.

In multe exemple, acest lucru este efectuat printr-o singura instructiune conditionala, dar in acest caz a fost introdusa o conditie suplimentara, astfel incat bila sa fie respinsa doar daca intr-adevar a depasit limitele admise. Daca cea de-a doua conditie este indeplinita, inseamna ca bila mai are spatiu sa se deplaseze, iar pozitia ei va fi initializata cu limita respectiva. Daca nu, inseamna ca putem inversa directia de deplasare, inmultind acceleratia cu -1.

Poti observa ca variabilele ce definesc zona de miscare a bilei (leftLimit, rightLimit, topLimit, bottomLimit) nu au fost inca initializate, ele vor fi definite in _root, astfel incat sa poate fi reutilizate daca vrei sa introduci mai multe bile pe scena.

Dupa ce au loc aceste verificari, proprietatilor _x si _y ale obiectului sunt incrementate cu acceleratiile corespunzatoare.

O alta functie care a fost definita tot aici este accelerate(), ce aduna componentelor acceleratiei valorile transmise ca parametri. Aceasta functie va fi folosita la miscarea bilei, explicata din sectiunea urmatoare.

Ultima functie este generateParticles(), care, pentru fiecare apel, creeaza in _root o particula noua, avand aceeasi pozitie cu cea a bilei.

Pagina:
1 2 »
comenteaza printeaza
Alte tutoriale Adobe Flash:
Noteaza acest tutorial
Rating tutorial
 
(11 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (3) spune-ti parerea
mtzdesign , Sambata, 27 Martie 2010, ora 09:18
#3

Ma,daca tutorialul acesta ii pt cei cu nivel mediu, din parerea ta, atunci un tutorial de nivel avansat cum arata?Oricum..foarte tare tutorialul..si eu m-am jucat ceva cu bila:))

Raporteaza acest comentariu ca injurios!
Pustiu' , Marti, 13 Ianuarie 2009
#2

Nu esti singurul :))...pe mine m-a fascinat de la inceput.

Raporteaza acest comentariu ca injurios!
Odcar , Marti, 06 Ianuarie 2009
#1

pufff... ce m-am mai jucat cu bila... :)

Raporteaza acest comentariu ca injurios!
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
4560
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4470
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4415
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4295
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4170
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Outlook Illustrator COREL DRAW StyleSheet Excel Java JSON XML HTML Photoshop Gimp Word Action Script Dreamweaver Javascript Bridge Verilog Fireworks Swift 3D XHTML PSD Vista Python CSS Ruby on Rails PHP Flash SWF SEO Lightroom Fotografie MySQL AJAX Powerpoint RoR Sony Vegas
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