Actionscript 3 Snowfall Effect
This tutorial covers how you can create a snowfall effect using Actionscript 3.0. It could also be rain or something in between.
1. Create a new document of size 300x300.
2. Draw a shape that looks like a snowflake. My snowflake is of size 8x8.
3. Convert the shape into a movieclip (registration point at the top left corner).
4. Linkage the movie clip to a class called "Particle".
5. Remove the snowflake from the stage. We're going to do all of the animation using actionscript.
6. Before we start to code the animation, create a Particle class (.as file) by typing the following (the Particle class represents the snowflake in the tutorial).
package {
import flash.display.MovieClip;
public class Particle extends MovieClip {
//We need different speeds for different particles.
//These variables can be accessed from the main movie, because they are public.
public var speedX:Number;
public var speedY:Number;
function Particle ():void {
}
}
}
Remember to save this file ("Particle.as") in the same directory where the main movie is.
7. Now in the main movie, type the following.
var numberOfParticles:Number = 30;
var particlesArray:Array = new Array();
//This loop creates 40 particles that are positioned randomly on the stage.
for (var i=0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//Give random x and y speed to the particle. Math.random returns a random number n, where 0 <= n < 1.
particle.speedX = Math.random();
particle.speedY = 3 + Math.random();
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Set random alpha between 0.2 and 1
particle.alpha = 0.2 + Math.random() * 0.8;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
You should now have a similar setup, if you test your movie.
8. Type the following code in the actions panel.
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
function enterFrameHandler (e:Event):void {
//Loop through the particles
for (var i = 0; i < particlesArray.length; i++) {
var particle = particlesArray[i];
particle.y += particle.speedY;
particle.x += particle.speedX;
}
}
If you test your movie, the particles move nicely to the bottom. The question is, what to do with them, after they fall of the screen. In this lesson, we'll move a snowflake back to the top and start the falling again.
9. To achieve this, modify the enterFrameHandler so it looks like this.
function enterFrameHandler (e:Event):void {
//Loop through the particles
for (var i = 0; i < particlesArray.length; i++) {
var particle = particlesArray[i];
particle.y += particle.speedY;
particle.x += particle.speedX;
//If the particle is below the bottom, position it back to the top
if (particle.y > stage.stageHeight) {
particle.y = 0;
particle.x = Math.random() * stage.stageWidth;
}
}
}
10. I think have a pretty decent looking snowfall in our application. There are still two things I'd like to do. I want each snowball to differ in size and blur some of them.
11. Type the following in the for loop, where we create the particles.
//Set a random scale to each particle. Scale is between 0.5 and 1. particle.scaleX = 0.5 + Math.random() * 0.5; particle.scaleY = particle.scaleX; //Create a blur effect in each snowflake var tempBlurAmount = Math.random()*4; var blur:BlurFilter = new BlurFilter(tempBlurAmount, tempBlurAmount, 1); var particleFilters:Array = new Array(); particleFilters.push (blur); particle.filters = particleFilters;
That wasn't so hard, was it? Remember, you can change the type of particle you want to animate. For water, you probably want to change the speeds a bit higher. Play with the values and create your own rain effect!
Final code
var numberOfParticles:Number = 60;
var particlesArray:Array = new Array();
//This loop creates 60 particles that are positioned randomly on top of the page.
for (var i=0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//Give random x and y speed to the particle. Math.random returns a random number n, where 0 <= n < 1.
particle.speedX = Math.random();
particle.speedY = 3 + Math.random();
//Set a random scale to each particle. Scale is between 0.5 and 1.
particle.scaleX = 0.5 + Math.random() * 0.5;
particle.scaleY = particle.scaleX;
//Create a blur effect in each snowflake
var tempBlurAmount = Math.random()*4;
var blur:BlurFilter = new BlurFilter(tempBlurAmount, tempBlurAmount, 1);
var particleFilters:Array = new Array();
particleFilters.push (blur);
particle.filters = particleFilters;
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Set random alpha between 0.2 and 1
particle.alpha = 0.2 + Math.random() * 0.8;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
function enterFrameHandler (e:Event):void {
//Loop through the particles
for (var i = 0; i < particlesArray.length; i++) {
var particle = particlesArray[i];
particle.y += particle.speedY;
particle.x += particle.speedX;
//If the particle is below the bottom, position it back to the top
if (particle.y > stage.stageHeight) {
particle.y = 0;
particle.x = Math.random() * stage.stageWidth;
}
}
}
