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:

  1. Create a new document. Set the width and height of your movie to be 300 by 200. Set your frame rate to 25.

  2. 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 ]

  1. 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.

  2. 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 ]

  1. 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).

  2. The Convert to Symbol dialog box will appear. Select Movie Clip, enter the word snow in the name field, and press OK.

  3. 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 ]

  1. 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);
} while (k != snowflakes);

Close your Actions dialog box after adding the above code.

  1. 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 ]

  1. 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 ]

  1. 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 ]

  1. 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 ]

  1. 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!




kirupa.com's fast and reliable hosting provided by Media Temple.