Vuurwerk

tutorial

voorbeeld

download

Intro

Dit is een turorial waar je leert hoe je een soort vuurwerk maakt.
Het is wel zeer basisch en er is veel verbeelding voor nodig, maar toch. Druk op download als je het gewoon wil downloaden of druk op voorbeeld om het afgewerkt product te zien.

1. Open je flash Document.
2. Stel de grootte in en alle andere eigenschappen. Ik heb gekozen voor 550 - 500, zwarte achtergrond
   en 12 fps.
3. Nu moeten we enkel nog de Acties neerschrijven.
4. We schrijven eerst deze lijntjes.

var depth:Number = 0;

this.onMouseDown = function() {
    setVuurwerk(_xmouse, _ymouse);
};

5. Eerst hebben we de variabele depth die straks zal gebruikt worden.
   Dan zie je de functie this.onMouseDown. Dit is een functie die elke keer de muis wordt ingedrukt zal gestart worden.
   In die functie zit de functie setVuurwerk(x, y) met daarin de x en y waarde van de muis.
6. Dan beginnen we aan de functie function rand() aangezien dit een zeer makkelijke , maar wel veelvuldig gebruikte functie is.
7. We gebruiken deze functie om een random getal te kiezen tussen een minimum en maximum waarde.

function rand(min:Number, max:Number) {
     return Math.round((Math.random() * (max - min)) + min);
}

8. Zoals je ziet kiezen we random getal met de functie Math.random(). Deze kiest een getal tussen 0 en 1.
   Dit getal vermenigvuldigen we dan met het verschil van max en min. En daarna doen we dit getal + min waarde en ronden we het getal af.
   
   voorbeeld: Max = 20, Min= 4
   
   Math.random() = 0.1454778
   0.1454778 * (20 - 4) = 0.1454778 * 16 = 2.328
   
   2.328 + 4 = 6.328
   
   Math.round(6.328) = 6
   
   En we krijgen een getal tussen 4 en 20
9. Dan beginnen we aan de hoofdfunctie.
   
   
   1. function setVuurwerk(x, y) {
   2.      var mc:MovieClip = _root.createEmptyMovieClip("vuurwerk" + depth, depth);
   3.      //
   4.      mc.color = rand(0, 256) << 16 | rand(0, 256) << 8 | rand(0, 256);
   5.      mc.dikte = rand(3, 5);
   6.      //
   7.      mc.lineStyle(mc.dikte, mc.color, 100);
   8.      mc.lineTo(1, 0);
   9.      //
   10.      mc._x = x;
   11.      mc._y = Stage.height + mc._height;
   12.      //
   13.      mc.y = y;
   14.      mc.speed = 3;
   15.      //
   16.      mc.onEnterFrame = function() {
   17.          var distance = (mc._y - y);
   18.          //
   19.          mc._y -= (distance / this.speed);
   20.         
   21.          if (distance < 2) {
   22.              this.clear();
   23.              //
   24.              var num = rand(80, 110);
   25.              //
   26.              var different = (rand(0, 5) == 0) ? true : false;
   27.              //
   28.              for (var i:Number = 0; i < num; i++) {
   29.                  var m:MovieClip = _root.createEmptyMovieClip("vuurwerkbol" + depth, depth + 1);
   30.                  //
   31.                  if (!different) {
   32.                      m.lineStyle(this.dikte, this.color, 100);
   33.                  } else {
   34.                      m.lineStyle(this.dikte, rand(0, 256) << 16 | rand(0, 256) << 8 | rand(0, 256), 100);
   35.                  }
   36.                  m.lineTo(1, 0);
   37.                  //
   38.                  var radius = rand(0, 360);
   39.                  var cos = Math.cos(radius);
   40.                  var sin = Math.sin(radius);
   41.                  //
   42.                  m.x = (200 * cos) + this._x;
   43.                  m.y = (200 * sin) + this._y;
   44.                  //
   45.                  m._x = this._x;
   46.                  m._y = this._y;
   47.                  //
   48.                  m.speed = rand(5, 15);
   49.                  //
   50.                  m.onEnterFrame = function() {
   51.                      var xdist = this.x - this._x;
   52.                      var ydist = this.y - this._y;
   53.                      //
   54.                      this._x += xdist / this.speed;
   55.                      this._y += ydist / this.speed;
   56.                      //
   57.                      this._alpha -= 3;
   58.                      //
   59.                      if (this._alpha <= 0) {
   60.                          this.removeMovieClip();
   61.                      }
   62.                  };
   63.                  //
   64.                  depth++;
   65.              }
   66.              this.removeMovieClip();
   67.          }
   68.      };
   69.      //
   70.      depth++;
   71. }

<< Klik hier om de functie te kunnen kopieren zonder nummers >>
 
10. Ik zal nu regel per regel proberen uit te leggen.
    
    
    r 2: We maken een nieuwe Movieclip aan en noemen hem vuurwerk, we geven hem de diepte : depth. Dit is een variabelen dat we in het begin hebben vastgelegd.
    
    r 4: We kiezen nu een random kleur. We doen dit door drie maal een random getal tussen 0 en 256 te kiezen met onze functie rand().
    De eerste waarde is die van de kleur rood, de tweede van groen en de derde van blauw. Dit is een speciaal soort getal.
    
    r 5: We kiezen de dikte, een getal tussen 3 en 5.
    
    r 7 - 8: We teken nu een bolletje. Dit doen we met de lineTo functie. Deze tekent een lijn van één pixel groot.
    Maar de lijn daarvoor hebben we de lineStyle vastgelegd.We hebben de lijn een eigen kleur en dikte meegegeven. Omdat de lijn vrij dik is lijkt die precies op een bolletje.
    
    r 10 - 11: We leggen de x en y vast van het bolletje. De x is gelijk aan de waarde meegegeven via de functie en de y is juist onder de Stage zodat hij nu nog onzichtbaar is.
    
    r 13: Nu leggen we de y vast waar het bolletje naar toe moet bewegen. Deze waarde is ook meegegeven via de functie.
    
    r 14: Hier leggen we de snelheid van het bolletje vast.
    
    r 16: Start van de onEnterFrame. Alles wat in deze functie staat wordt elke frame herhaald.
    
    r 17: De afstand tussen de huidige y-waarde en de target y - waarde. De totale afstand dat dus nog moet worden afgelegd.
    
    r 19: We doen dan de huidige y-waarde - (de afstand / de snelheid). (distance / this.speed) >> Hoe groter de afstand hoe groter de snelheid zal zijn, hoe dichter hoe trager.
    
    r 21: Als de afstand tot ons doel kleiner is als 2 dan kunnen we beginnen aan de volgende stap.
    
    r 22: Het huidige bolletje wordt gewist.
    
    r 24: Er wordt een random nummer gekozen tussen 80 en 110. Dit is het aantal bolletjes dat gaan ontstaan.
    
    r 26: Dit is een boolean dat true wordt als de random waarde = 0. Als deze waarde true is dan zullen alle verschillende bolletjes een andere kleur hebben. Anders zullen ze dezelfde kleur
    hebben als het "hoofdbolletje".

    Een boolean is een variabele dat slechts twee waarden kan hebben >> true en false

    r 28: For loop.
    
    r 29: Een nieuwe movieclip voor een nieuw bolletje.
    
    r 31 - 36: Als de variabele different false is dan wordt de kleur gebruikt van het hoofdbolletje anders wordt er een random kleur gebruikt. Dan wordt het bolletje getekend.
    
    r 38 - 40: Eerst wordt er een random waarde gekozen tussen 0 en 360. Dit is dan zogezegd de hoek aangezien we willen dat dat ene bolletje ontploft in meerdere verschillende bolletjes die er allemaal rond vliegen.
    Van die hoek pakken we dan cosinus en de sinus.
    
    r 42 - 43: Nu leggen we de variabele x vast>> we vermenigvuldigen 200 ( = max straal van onze cirkel) met de cos en doen dit + de x-waarde van ons hoofdbolletje.
    Hetzelfde voor de variabele y. Deze 2 waarden zijn de target x en y van het bolletje. De x en y waar het bolletje moet geraken.
    
    Om dit een beetje veel duidelijker te maken >> een voorbeeld:
    
    radius = rand(0,360) = 140
    cos = Math.cos(140) = -0.197813574004268
    sin = Math.sin(140) = 0.980239659440312
    
    x = (200 * -0.19781) + this._x = (200 * -0.19781) + 275 = -39.562 + 275 = 235.4
    y = (200 * 0.98024) + this._y = (200 * 0.98024) + 250 = 196.048 + 250 = 396.0
    
    
    r 48: De random snelheid van het bolletje. Als je deze snelheid constant zet dan krijg je een cirkel.
    
    r 50: functie die voor elk bolletje elke frame wordt herhaald.
    
    r 51 - 52: De afstand tot de x-waarde en de afstand tot de y-waarde
    
    r 54 - 55: Hetzelfde principe als daarnet. De x en y wordt vermeerderd met de afstand gedeeld door de snelheid.
    
    r 57: De alpha wordt verminderd met drie.
    
    r 59 - 61: Als de alpha < 0 dan wordt dit bolletje verwijderd.
    
    r 64: Depth wordt vermeerderd met één.
    
    r 66: Het hoofdbolletje wordt verwijderd.
    
    r 70: Depth wordt vermeerderd met één.


Dit was de tutorial. Heb je nog vragen stuur mij dan zeker een e-mail of plaats een opmerking.
Wil je mijn afgewerkt product zien druk dan op voorbeeld of download mijn .Fla.

Bedankt voor het volgen van mijn tutorial

Geef hier je waardering:	Matig	1	2	3	4	5	Geweldig!
	Waardering:

Reageer
Andere Effecten TUTORIALS
• Bewegende wolken
• Maken van sneeuw m.b.v. ActionScript
• Flitsend teksteffect
• Hoe maak je een schaduw animatie effect?
• Soepele Button Animatie
• Distort Tutorial
• Ease tutorial (animatie met vertraging)
• Lichtzwaard
• animatie van getypte text
• [FMX] shapetweening tutorial
Meer TUTORIALS van Baptist vandersmissen
• Maken van sneeuw m.b.v. ActionScript
• 3D Engine II
• 3D Engine m.b.v. Actionscript
• rond een decimaal getal af naar aantal ingegeven decimalen
Actie Cy Warez (24 October 2009, 13:35)

Waar kan je de acties invoeren?

Reactie stefan govaard (31 December 2008, 11:10)

Kun je er geen geluid bij maken als het ontploft?

1-2