Falling
Snow 2.0
by kirupa
A popular tutorial on this site,
especially over the winter period, is the falling snow
tutorial.
|
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:
|
|
The tutorial was, in my opinion, good because it
created a balance between visual appeal and simple code.
With the simpler code, though, came some annoying problems.
You were unable to have the effect work without having to
clutter your main _root timeline, it was difficult to place
the effect inside a movie clip, and adding effects such as
wind was difficult for the average user. The previous
tutorial was good, but it needed some tweaking.
This
tutorial rectifies some of the usability issues that plagued
the previous tutorial. In this version of the Falling Snow
tutorial, your effect is localized inside a movie clip, and
you have the ability to do a lot of cool things.
This
tutorial will help you to re-create the below effect and
understand the code that causes the snowflakes to behave the
way they do:
[
it's snowing....move your mouse around to adjust the wind! ]
Here's how:
Create a new document. Set the width
and height of your movie to be 300 by 200. Set your frame
rate to 25.
Now, go to Insert
| New Symbol. New Create New Symbol dialog box will
appear. Give your movie clip the name snow_mc, and
make sure you select the option for movie clip:
[ create a new movie clip
named snow_mc ]
You will now be
inside the snow_mc clip you created in the previous step.
It is time to draw your snowflake. Draw a white circle
with no border.
Select the circle
you drew, and look to your Properties panel (bottom left).
In the boxes marked W and H, enter a 4 and 4
respectively...or disrespectfully if you so choose! It's a
circle, so the order of the same two numbers does not
matter:
[
enter a 4 in the w and h fields of your circle
]
With
your circle finished, you will need to convert the circle
into a movie clip. Select your circle with your mouse
pointer and go to Modify | Convert to Symbol (F8).
The Convert to
Symbol dialog box will appear. Select Movie Clip, enter
the word snow in the name field, and press OK.
Now, select your
newly created snow movie clip. We now need to give this
movie clip an instance name. In the Properties panel at
the bottom-left, give this movie clip the instance name,
snow:
[ give your movie clip the
instance name snow ]
Make
sure you see a timeline toward the top in the snow_mc
movie clip which you have been in for the past 7 steps.
Select the first (and only) frame and press F9 to display
the Actions dialog box.
Copy and paste the following code:
snowflakes = 75;
do {
duplicateMovieClip(snow,
"snow"+k, k);
k++;
} while (k != snowflakes);
Close your Actions dialog box after
adding the above code.
Now that you have
added the above action to the first frame, select your
snow movie clip. Press F9 to display the Actions
dialog box so that you can add code to the snow movie
clip.
Copy and paste the following code:
[ copy and paste the above
code ]
Once you have the
above code copied, you are almost finished with recreating
this effect. Go to your main timeline by pressing the
Scene 1 link in the top-left side of your Flash window:
[
click the Scene 1 link ]
After
clicking the Scene 1 link, you will find yourself at the
main timeline - which is completely empty. We need to add
our snow_mc movie clip to the main timeline.
Press Ctrl + L to display the Library - either in a panel
or as a separate dialog window. Find the snow_mc movie
clip and DRAG that clip to the top-left corner of your
movie's stage:
[ drag the snow_mc
movie clip to the stage ]
It is
important that the snow_mc movie clip (containing the snow
movie clip) goes exactly in the top-left corner of your
main stage. Select the movie clip, after you have dragged
it to your stage, and set it's x and y co-ordinates in the
Properties panel to zero:
[
ensure the x and y positions for the mc are at 0 and 0 ]
Save
this animation! After you have saved it, go to File |
Publish Preview | HTML. You should see snowflakes falling
and reacting to your mouse cursor.
You
are not completely finished with this tutorial. The
next
page will explain the ActionScript, so that you can make any
adjustments or modifications to this effect!
|