RSS link icon

.

Particle snow weather with actionscript


I did it again, yet another simple particle system, this time I will show you how simple it is to make snow fall from the sky and look nice.

First we need to create the snow ball movie clip, so create a new movie clip, and within it, draw a small white circle, right click and convert it into a movie clip.

Now go to the filters panel and add these two filters as shown below.

falling snow particle system with actionscript

 

falling snow particle system with actionscript

 

Now go back to the main frame, you can add a background of a city or something to make this effect look even more nice.

 

falling snow particle system with actionscript

 

Now this part may seem a bit odd if you havent worked much with actionscript and movieclips before, so just follow along.

In the library locate the snow ball movie clip we just made, right click and choose linkage, then type in Show and check the export to actionscript checkbox like I did below.

 

falling snow particle system with actionscript

Hit ok, and flash might give you something that looks like an error, but its not, it just tells you that it will create a class for the movie clip, and thats okay.

Now we are ready to do some actionscript coding to make this falling snow particle effect work.

I tried to explain the code as detailed as possible, without making it look to overfilled.

You can see the code description inside the code, or you can just copy and paste the code into your own flash project and play around with it.

 

Just some variables we define for later use.

var snow_mcsArray:Array = new Array();
var speedX:Number;
var speedY:Number;

 

Loops through and makes 20 snow balls that we position and add properties randomly to.

for (var i=0; i < 20; i++) {
    var snow_mc:Snow = new Snow();
    
    //Give random x and y speed to the snow_mc.
    snow_mc.speedX = Math.random();
    snow_mc.speedY = 4 + Math.random();
    snow_mc.alpha = 0.3 + Math.random() * 0.8;
    
    // just making the snow balls smaller, I thought I made them too big.
    snow_mc.scaleX = .4;
    snow_mc.scaleY = .4;
    //Set the starting position
    snow_mc.y = Math.random() * stage.stageHeight;
    snow_mc.x = Math.random() * stage.stageWidth;
    
    //Add the snow_mc to the stage and add it the the array
    addChild(snow_mc);
    snow_mcsArray.push(snow_mc);
}

 

Add an eventlistener to the enterframe event, to make the snow fall repeatly

stage.addEventListener(Event.ENTER_FRAME, makeSnow);

function makeSnow(event:Event):void {
    //Loop through the snow_mcs
    for (var i = 0; i < snow_mcsArray.length; i++) {
        var snow_mc = snow_mcsArray[i];
        snow_mc.x += snow_mc.speedX;
        snow_mc.y += snow_mc.speedY;
        // makes the snow start over from the top, when it hits the bottom.
        if (snow_mc.y > stage.stageHeight) {
        	snow_mc.y = 0;
        }
    }
}

James says: 2008-09-26

Slight issue; you also need to reset x after it leaves the right side of the screen (it has a positive bias) otherwise the snow will gracefully drift completly away!! :) cheers

Anis says: 2008-06-30

Great tutorial, Thanks!