[TUT] Sneeuw met AS

Sneeuw in Flash ActionScript

In deze tuturial ga ik je leren hoe je een effect kan bereiken van vallende sneeuw. Je zou dit natuurlijk met allemaal tweens een voorgedefineerde movieclips kunnen doen, maar buiten dat dit veel meer tijd kost geeft het niet zo'n goed effect.



Een voorbeeldje van wat je kan maken aan de hand van deze tutorial:





Welke onderdelen van ActionScript zullen aan bod komen.

• Natuurlijk Math.random() om random waardes te kiezen


• De _width en _height properties van MovieClips


• Variabelen gebruiken om beweging te creeren.


• Attachmovie


• Stage.width en Stage.height

Wat heb je nodig op je stage? Nou, eigenlijk, helemaal niets..... Het eninge waaruit dit effect gaat bestaan is een movieclip in je library, en voor de rest zal je script het werk doen!



Dus, laten we er eerst voor zorgen dat deze movieclip in de library komt. Om in je Library te komen kies je in je menubalk voor Window --> Library (of met de sneltoetsen ctrl+l).
Voeg hier een nieuwe movieclip toe met de 'Add Symbol' Knop. Hierna komt een scherm omhoog, je kies bij type voor 'MovieClip'.

Wanneer je voor 'OK' hebt gekozen kom je meteen in de timeline van dit object terecht. Hier teken je een rondje, of hoe je het uiterlijk van een sneeuwvlokje ook maar wilt hebben. Zorg ervoor dat je registration point linksboven blijft.

Waneer je dit gedaan hebt moet je er voor zorgen dat AS kan herkennen wat je object is. Hiervoor geef je hem een linkage. Dit doe je door in je Library met je rechtermuisknop te klikken op linkage. Hier vink je de optie 'Export voor ActionScript' aan en vult bij 'Identefier' in: rondje (zie bijgevoegde afbeelding)



Nou gaan we verder met het script. Om te beginnen moet je altijd goed nadenken wat je nou eigenlijk precies wilt. Dit is in dit geval niet "Ik wil sneeuw maken". Je moet jezelf afvragen HOE je het gaat doen. Een beter idee is dus bijvoorbeeld: "Ik wil sneeuwvlakjes random op het scherm laten verschijnen met een random grootte, snelheid, positie en richting". Hierbij heb je al een antal elementen genoemd die je wil gebruiken om je effect te bereiken.



Hoe gaan we dit script opbouwen?

We willen elk frame een sneeuwvlokje toevoegen, en deze random waardes meegeven. We gebruiken dus een onEnterFrame. In deze onEnterFrame laten we eerst de MovieClip uit de Library halen en op de stage zetten:

var i:Number = 0;

var nieuweSneeuw:MovieClip

this.onEnterFrame = function() {

i++;

nieuweSneeuw = this.attachMovie("rondje", "rondje"+i, i);

};

De variabele 'i' word elke keer met 1 opgehoogd. Deze houd dus bij hoeveel sneeuwvlokjes er zijn, maar bepaald hierbij ook de depth en de instancename van het nieuwe sneeuwvlokje.



Als het goed is zie je nu in je linkerbovenhoek een sneeuwvlokje verschijnen. Ze krijgen allemaal de positie (0,0) mee, en er staan er dus wel meer, je ziet er alleen maar 1. Bij het aanmaken wil je ze dus een random _x waarde meegeven. Even een korte uitleg over het gebruik van Math.random() in Flash:

Math.random() geeft een random waarde tussen 0 en 1. Aan een getal tussen 0 en 1 hebben wij vrij weinig, onze stage is immers wel grooter dan 1 pixel. Hiervoor kan je deze waarde keer de maximum waarde doen. B.v.: Een random waarde tussen 0 en 5:

trace(Math.random()*5);

Om dit verhaal toe te passen: wij willen een random waarde van 0 tot de breedte van de Stage. De breedte van de Stage kan je opvragen met:

Stage.width

Na het attachen van het nieuwe vlokje geven wij hem dus een random _x waarde:

var i:Number = 0;

var nieuweSneeuw:MovieClip

this.onEnterFrame = function() {

i++;

nieuweSneeuw = this.attachMovie("rondje", "rondje"+i, i);

nieuweSneeuw._x = Math.random()*Stage.width-12;

};

Wanneer je dit test zul je zien dat er bovenaan allemaal Sneeuwvlokjes worden neergezet, maar: er zit nog geen beweging in!
We laten dus ook een random snelheid, en een random breedte meegeven, en maken zijn eigen onEnterFrame voor de beweging:

var i:Number = 0;

var nieuweSneeuw:MovieClip

this.onEnterFrame = function() {

i++;

nieuweSneeuw = this.attachMovie("rondje", "rondje"+i, i);

nieuweSneeuw._x = Math.random()*Stage.width-12;

nieuweSneeuw.xSpeed = (Math.random()*12)-6;

nieuweSneeuw.ySpeed = (Math.random()*4)+3;

nieuweSneeuw._width = nieuweSneeuw._height=(Math.random()*5)+5;

nieuweSneeuw.onEnterFrame = function() {

this._x += this.xSpeed;

this._y += this.ySpeed;

};

};

En zoals je ziet: "It's Alive!". Dan om de puntjes nog op de i te zetten: het leuke van sneeuw is dat het op de grond blijft liggen... Maar dat doet het nog niet! Met een simpel if-statementje zorgen we ervoor dat de onEnterFrame van het sneeuwvlokje ophoud zodra hij beneden is:

var i:Number = 0;

var nieuweSneeuw:MovieClip

this.onEnterFrame = function() {

i++;

nieuweSneeuw = this.attachMovie("rondje", "rondje"+i, i);

nieuweSneeuw._x = Math.random()*Stage.width-12;

nieuweSneeuw.xSpeed = (Math.random()*12)-6;

nieuweSneeuw.ySpeed = (Math.random()*4)+3;

nieuweSneeuw._width = nieuweSneeuw._height = (Math.random()*5)+5;

nieuweSneeuw.onEnterFrame = function() {

this._x += this.xSpeed;

this._y += this.ySpeed;

if (this._y>=400-this._height) {

this._y = 400-this._height;

delete this.onEnterFrame;

}

};

};