Snowfall Effect

February 6, 2009 by: smonte

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 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”.

Linkage

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;
                }
        }
}
  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. Creating a Chain Explosion
  2. Creating Fireworks with ActionScript 3
  3. Advanced Animation with Drawing API
  4. Creating a Shake Effect
  5. Shooting Masks via ActionScript 3



Filed under: ActionScript 3 Advanced
Tags:

Comments

6 Responses to “Snowfall Effect”
  1. Readio says:
    December 2, 2009 at 1:41 am

    Great tutorial and great timing.

    I have used a more defined snowflake shape and if you add a slow rotation it creates a nice effect.

    This is easily done by adding:

    particle.rotation += 0.5;

    after these lines:

    particle.y += particle.speedY;
    particle.x += particle.speedX;

    Log in to Reply
  2. Porter says:
    October 22, 2009 at 9:57 pm

    That actually looks really good, I’m going to follow this and mess with it myself, see if I can get anything else going out of it. Thanks a lot for sharing, winter is coming up, can’t think of a better way to further my knowledge of particle animation.

    Log in to Reply
  3. Caryl says:
    May 26, 2009 at 6:23 am

    I really liked this code, and used it instead to make a confetti square fall down. Do you know of how to randomize the color of the object/flake in AS 3?

    Log in to Reply
  4. Mr.T says:
    May 16, 2009 at 1:12 pm

    Nice tutorial!

    Cami: you could play with the speed variable, maybe by setting it to 0 would do the job.

    Log in to Reply
  5. Cami says:
    March 5, 2009 at 7:33 am

    Really nice script btw :)looks really good and easy to understand

    Log in to Reply
  6. Cami says:
    March 5, 2009 at 7:32 am

    if I would like the snow to stop at a certain frame is there some function I can call for?

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.