Create
Falling Snow - Explanation of Code
by
kirupa
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:
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:
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:
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 =)
I hope the information helped.
If you have any questions or comments, please don't hesitate to post them on the
kirupa.com Forums. Just post your question and I, or our friendly
forum helpers, will help answer it.
The following is a list of related tutorial and help resources that you may find
useful:
|
