Flash Snow 3.0

by Sam Kellett aka Sammo   | filed under Flash and ActionScript

From the current tutorials you could assume I was just a basic PHP'er. That is not true. My pride and joy is Flash. Since this is the season for snow, I figure I will create a snow tutorial that improves modestly upon the existing snow tutorials on this site.

Note

What makes this tutorial different from the Snow 2.0 tutorial by Kirupa is that all of the code is specified in one frame itself. This helps make the code more modular and easier to maintain.

The following is an example of what you will create:

[ an example of falling snow ]

You can see a more realistic example on my site at Flash Bang Pop! Let's start:

1. Create a new document in Flash. Right click anywhere on your stage and select Document Properties.
2. From the Document Properties window, set your stage's width and height to 400 by 300 pixels respectively, give your movie a dark background, set the frame rate to 25, and press the OK button:

[ the document properties window ]

3. Now, go to Insert | New Symbol. The Create New Symbol dialog window should appear. In the Name field, type the word snow. From this same window, select the option for Movie Clip and press OK.

[ the Create New Symbol dialog box ]

4. You should now be in the snow movie clip stage and timeline. Draw a small white ball to symbolize a snowflake. Feel free to make any modifications to make your snowflake look realistic. Here is how my snowflake looks (after zooming in a lot):

[ how my snowflake looks like (after zooming-in) ]

5. Click on the Scene 1 tab above your timeline to return to exit the Snow movie clip:

[ click on the Scene 1 link ]

6. Press Ctrl + L to display your Library. Right click on your snow movie clip in the library and select Linkage. Make sure to check the 'Export for ActionScript' and 'Export in first frame' checkboxes and press OK:

[ the Linkage Properties dialog window ]

7. You are almost done with re-creating the snow effect! We just need to add some code. Right click on Frame 1 and select Actions. Copy and paste the following lines of code into your Actions window:

init = function () {
  width = 300;
  // pixels
  height = 200;
  // pixels
  max_snowsize = 10;
  // pixels
  snowflakes = 50;
  // quantity
  for (i=0; i<snowflakes; i++) {
  t = attachMovie("snow", "snow"+i, i);
  t._alpha = 20+Math.random()*60;
  t._x = -(width/2)+Math.random()*(1.5*width);
  t._y = -(height/2)+Math.random()*(1.5*height);
  t._xscale = t._yscale=50+Math.random()*(max_snowsize*10);
  t.k = 1+Math.random()*2;
  t.wind = -1.5+Math.random()*(1.4*3);
  t.onEnterFrame = mover;
  }
};
mover = function() {
  this._y += this.k;
  this._x += this.wind;
  if (this._y>height+10) {
  this._y = -20;
  }
  if (this._x>width+20) {
  this._x = -(width/2)+Math.random()*(1.5*width);
  this._y = -20;
  } else if (this._x<-20) {
  this._x = -(width/2)+Math.random()*(1.5*width);
  this._y = -20;
  }
}
init();

8. Save your file and preview the animation. You should see some falling snow.

While you are finished with recreating the falling snow effect, I'm sure you would like to know how it works so you can customize it for your own animation. Who knows, you may even create a better falling snow effect!

In the previous section, you created the snow effect. In this page, you will learn why your code works the way it does.

The Init Function

Let's start with the init function whose main responsibility is to setup all of the snowflakes. Let's take it a few lines at a time:

width = 300;
// pixels
height = 200;
// pixels

The width and height variables specify the area your snow effect will be displayed in. Normally, your width and height values will be the same as the width and height of your movie's stage.

max_snowsize = 10;
// pixels
snowflakes = 50;
// quantity

The max_snowsize variable specifies the scale value used in determining the width and height of your snowflake. The larger the value, the larger your snowflake.

The snowflakes variable determines the number of snowflakes that appear on your screen at any given time. If you increase this value, more snowflakes will appear on your screen, but system performance may also decrease.

for (i=0; i<snowflakes; i++) {
  t = attachMovie("snow", "snow"+i, i);
  t._alpha = 20+Math.random()*60;
  t._x = -(width/2)+Math.random()*(1.5*width);
  t._y = -(height/2)+Math.random()*(1.5*height);
  t._xscale = t._yscale=50+Math.random()*(max_snowsize*10);
  t.k = 1+Math.random()*2;
  t.wind = -1.5+Math.random()*(1.4*3);
  t.onEnterFrame = mover;
}

Our snowflake properties are specified inside this for loop. The for loop's range is from 0 to the number specified by the snowflakes variable.

t = attachMovie("snow", "snow"+i, i);

The variable t references the movie clip returned by attachMovie. The attachMovie function takes in three arguments: movie clip identifier from the library, new movie clip name, and the new movie clip's depth. 

The argument "snow" lets you retrieve the snow movie clip you created earlier. The value for snow is the not the name of the object from your Library, but instead it is the name you entered in the Linkage Properties dialog window earlier.

The new movie clip name is going to be "snow"+i. The value of i cycles from 0 to the number stored by the snowflakes variable. Your new movies will, therefore, have names such as snow0, snow1, snow2, etc.

t._alpha = 20+Math.random()*60;
t._x = -(width/2)+Math.random()*(1.5*width);
t._y = -(height/2)+Math.random()*(1.5*height);
t._xscale = t._yscale=50+Math.random()*(max_snowsize*10);

The above four lines set the alpha, x, y, xscale, and yscale properties of the t movie clip. The statements are fairly self-explanatory so I will not go into great detail explaining them. Just be sure to note how the variables we declared are used. I use Math.random() to try to ensure that the snowflakes look different. After all, no two snowflakes are created equal :P

t.k = 1+Math.random()*2;
t.wind = -1.5+Math.random()*(1.4*3);

These two lines specify more properties of our snow movie clip. I did not include them in the above group of four lines because they do not call built in movie clip object properties. Instead, they declare and instantiate the user-created variables k and wind.

The value k references the speed at which our snowflakes hit the ground, and the value for wind stores the speed at which the snowflakes oscillate horizontally. Remember, in Flash, you do not have to explicitly declare variables prior to using them.

t.onEnterFrame = mover;

In the final line of our init function, I set the t movie clip's onEnterFrame handler to the value of the mover function.

init();

What good is a function if it isn't called? At the very bottom of all of your code, I make a call to our init function.

To summarize, the init function is responsible for displaying the snowflakes on the screen and assigning properties to each of them such as their initial x and y positions, alpha, scale, vertical speed, and horizontal speed.

Mover Function

The mover function is responsible for moving the snowflakes. It is quite straightforward, and Kirupa summarized most of how it works in his earlier iteration of this tutorial: http://www.kirupa.com/developer/mx2004/snow2.htm

The main thing about the mover function you need to remember is that is called by the onEnterFrame event handler of each snow movie clip. If your frame rate is 25, the mover function is called 25 times each second. The mover function uses the this variable to reference the properties of that particular snowflake.

If you have any questions, feel free to post them on the kirupaForums.

Sam Kellett Cannedlaughter

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

Your support keeps this site going! 😇