Actionscript 3 Snowfall Effect
February 6, 2009 by: smonteThis 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 300×300.
2. Draw a shape that looks like a snowflake. My snowflake is of size 8×8.
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; } } }
Really nice script btw
looks really good and easy to understand
if I would like the snow to stop at a certain frame is there some function I can call for?