What good is a holiday animation without some snow? That is what I thought until I tried to create a snow animation that looks reasonably realistic. Most tutorials found throughout the net were either too complicated or not realistic enough. With that said, I decided to try my hand at re-creating falling snow. Hopefully, this tutorial will help you to add a cool snow effect to your animations.

	Quick Update
This version of snow is only for Flash MX. Updated versions of this tutorial can be found for the apppropriate Flash/AS version below: HTML / JS Flash CS4 / AS3 Falling Snow 3.0 Flash MX 2004 Version

The following animation is an example of what caffeine and a thrilling re-run of Charlie Brown's Christmas Special can do:

[ it's snowing....in the small box on your screen ]

You will create something similar to the above animation by following the instructions in this tutorial.

Creating Snow:

1. Create a new movie in Flash MX. Set the width and height to anything you want, and make sure you set the frame rate to 25 for smooth playback. You may want to have a darker colored background for the white snow to be visible.
    
2. Now, it is time to draw a particle of snow. Click the Oval tool (the circle icon) from your toolbox. Select a white color from the color palette. Ensure that the circle does not have an outline. Draw your white colored circle anywhere on your stage:

[ draw a white circle without an outline ]

3. Once you have created your snow particle, select it with your mouse pointer and press F8 (Insert | Convert to Symbol). The Convert to Symbol dialog should appear. Select Movie Clip and press OK.

[ convert the snow particle into a movie clip ]

4. Select the movie clip (which you converted in Step iii). Look down towards your Properties panel. Find the text field that says <Instance Name>. Click in that text field and type the word snow:

[ give the movie clip the instance name snow ]

5. Now, let's add some code to create falling snow. Right click on the movie clip and select Actions.
   
   Copy and paste the following code into your Actions dialog box:

                      onClipEvent (load) {
 //specifies the size of the movie stage
 movieWidth = 300;
 movieHeight = 200;

 //variables that will modify the falling snow
 i = 1+Math.random()*2;
 k = -Math.PI+Math.random()*Math.PI;

 //giving each snowflake unique characteristics
 this._xscale = this._yscale=50+Math.random()*100;
 this._alpha = 75+Math.random()*100;
 this._x = -10+Math.random()*movieWidth;
 this._y = -10+Math.random()*movieHeight;
}
onClipEvent (enterFrame) {
 //putting it all together
 rad += (k/180)*Math.PI;
 this._x -= Math.cos(rad);
 this._y += i;
 if (this._y>=movieHeight) {
  this._y = -5;
 }
 if ((this._x>=movieWidth) || (this._x<=0)) {
  this._x = -10+Math.random()*movieWidth;
  this._y = -5;
 }
}

 

6. We are still not done adding actions. Right click on the first frame in your movie and select Actions. You will see another Actions dialog box appear - this time for the first frame.
    
   Copy and paste the following code into the Actions dialog box:

                      for (k=0; k<50; k++) {
 duplicateMovieClip(this.snow, "snow"+k, k);
}

  

7. You are almost done with this tutorial. The remaining sections involve customizing the animation and understanding why the animation works the way it does.

Customizing the Animation
Since the crux of this animation involves ActionScript, you will have to modify some code to customize the animation:

• Adjusting the Range: Width and Height

  Right click on the movie clip and select Actions. Find the commented line that says "specifies the size of the movie stage". Change the values for movieWidth  and movieHeight from 300 x 200 to the width and height of your current movie.
   

• Adjusting number of Snowflakes Displayed

  Right click on the frame you added actions to. Select Actions from the menu that appears. Find the line that says k<50 and change the number 50 to represent the number of snow particles you want displayed at any time.
   
  The larger the number you use instead of 50, the slower the animation will seem to users with slower computers. This animation is fairly CPU intensive, so try to be kind and virtuous by keeping in mind that not all users will be able to see the animation in all its coolness when 300 snow particles are displayed at the same time. It is the Christmas season after all!

You are finished with this tutorial. I highly recommend that you go to the next section and find out how/why the code works the way it does. Not only will you find what each line of code does, you may get a better feel of ActionScript programming so you can create cool effects on your own.

---

In this section, you will learn what each line of code found in the previous section accomplishes.

The Code - onClipEvent (load)

Let's tackle the code a section at a time:

onClipEvent (load) {

 //specifies the size of the movie stage

 movieWidth = 300;

 movieHeight = 200;



 //variables that will modify the falling snow

 i = 1+Math.random()*2;

 k = -Math.PI+Math.random()*Math.PI;



 //giving each snowflake unique characteristics

 this._xscale = this._yscale=50+Math.random()*100;

 this._alpha = 75+Math.random()*100;

 this._x = -10+Math.random()*movieWidth;

 this._y = -10+Math.random()*movieHeight;

}

The goal in creating this effect was to make each snowflake unique in size, position, speed, and transparency. That goal is accomplished in the "Load" section of the code.

Because each movie is different, movieWidth and movieHeight refer to the width of the movie the action is in. If your movie was 550x400, you would modify the movieWidth and movieHeight variables to 550 and 400 respectively.

Since each particle of snow will not fall at the same speed, I use the Math.random() function to create a random speed between a set value. The variable i takes a random value between 1 and 2 for the speed of the falling snow.

If you watch the animation closely, you will notice that each snowflake oscillates horizontally with a differing period length. A period is the time it takes a sine/cosine/tan/etc. wave to complete a full oscillation. Since we are dealing with radian values, I felt like using Math.PI instead of the usual integer constant.
 
In the last section of the code, the snow particle is actually manipulated, squeezed, stretched, and customized to be unique. Since this section is so fascinating and important (better get a camera and call a friend!), the code for the last four lines is posted below:

                    this._xscale = this._yscale=50+Math.random()*100;

  this._alpha = 75+Math.random()*100;

  this._x = -10+Math.random()*movieWidth;

  this._y = -10+Math.random()*movieHeight;

 

The first line equates the horizontal scale (_xscale) and the vertical scale (_yscale) to a random value between 50 and 100. The format this._xscale = this._yscale ensures that both the x and y dimensions scale evenly. In other words, you will not have a snowflake with different x and y scales.

The next line specifies a random alpha (transparency) value between 75 and 100. While the transparency effect is not blaringly noticeable the first time you see this effect, it does add a nice dash of flavor to the animation. It is nice to engage an active observer with minor details such as this.

The next two lines randomly position the snow particles on your movie. Notice that the range for the dimensions is not definite. The upper limit (maximum value for a random number) of the x and y positions is determined by the variables movieWidth and movieHeight. Regardless of what size your movie is, the animation will "adapt" itself as long as movieWidth and movieHeight reflect the width and height of your movie.

---

The Code - onClipEvent (enterFrame)

Let's tackle the next section of code:

                    onClipEvent (enterFrame) {

 //putting it all together

 rad += (k/180)*Math.PI;

 this._x -= Math.cos(rad);

 this._y += i;

 if (this._y>=movieHeight) {

  this._y = -5;

 }

 if ((this._x>=movieWidth) || (this._x<=0)) {

  this._x = -10+Math.random()*movieWidth;

  this._y = -5;

 }

}

In the first line, I convert the value from k into radians. Why radians? Because the movie moves horizontally using the cosine trig. function, keeping the value in radian would make the movement more predictable. Remember, radians are your best friend when it comes to advanced geometry/calculus.

Notice that the value of the variable rad does not stay constant. It increments according to the value of what (k/180)*Math.PI equals. In the next line, I set the x value of the snow particle to equal the variable rad in relation to cosine. The Math.cos(variable) format is used to apply a cosine value.

In the next line, I set the y value (this._y) to increment by the value found in variable i. Notice that, even though the snow is falling, the y value is incremented. In Flash, the co-ordinate axis is slightly different than the one you may have learned in math class. The positive y-values (above the x-axis) are negative while negative y-values are positive. To make the snow fall, I increment the value of y.

The next two chunks of code are posted below because they are quite important.

if (this._y>=movieHeight) {

 this._y = -5;

}

if ((this._x>=movieWidth) || (this._x<=0)) {

 this._x = -10+Math.random()*movieWidth;

 this._y = -5;

}

In the above section of code, I set the conditions in which the snow particle will disappear from the screen and appear and repeat the falling process over again. When the snow particle goes outside the viewable boundaries of the movie (determined by movieHeight), I tell the snow particle to jump 5 pixels above its origin.

If the snow particle exceeds the left and right boundaries of the movie, it will appear in a random x position  while it's y position will be above it's origin - beyond our visible area. To see how this works, in Flash, press Ctrl + Enter. Notice how the snow particles stay within an imaginary box. This ensures that the snow particles don't go astray and waste CPU resources.

The Code - Frame

Take a deep breath; the last and easiest section of code awaits:

                    for (k=0; k<50; k++) {

 duplicateMovieClip(this.snow, "snow"+k, k);

}

Quite refreshing to see a short section of code isn't it? In the above code, all of the code applied to the snow particle is multiplied to create the snow effect you see. Since duplicating a movie clip is not new, unchartered territory, you will find a good tutorial at the following URL: http://www.kirupa.com/..../duplicate.asp

---

You are finished with this tutorial! I hope you found the explanations helpful. As you can tell, the snow effect is not the easiest effect one can accomplish. I tried to use code and methods that anybody with some brief exposure to ActionScript can understand. If you still have questions, post on the forums by clicking on the forum link found throughout this page.

Here is the source code for the animation:

As always, I'd like to thank the people in the forums and lostinbeta for helping me trim the code by three lines =)

---

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇