Create

In this section, you will learn what each line of code found in the previous page 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;
}

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:

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:

download source for flash mx

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