Flash Snow Storm Tutorial: Part 2

Seeing as how it snowed here in Tucson last week, something that NEVER happens, I guess that's a hint that I need to finish this tutorial. So now that you have a lonely snowflake, it is time for him to party with some friends. This tutorial will use the SnowFlake class from the first part and use it to dynamically create enough snowflakes to make a storm.

Modify Snowflake for External Control

First we need to make some changes to the Snowflake class, to allow us to control it from the outside. We will want to be able to set all of the flake's major components when it is created. To do this, I added a bunch of static functions to change the flake's constants. Here is one example.

static function ChangeForceX (maxforce, maxdelta) {
  SnowFlake.MAX_FORCE_X = maxforce;
  SnowFlake.MAX_DELTA_X = maxdelta;
}

Let it Snow

Now that we can control the clip from the outside, it is time to write up our snow storm controller. To keep things as clean as possible, I am writing all of the Actionscript for my movie in an external file called SnowStorm.as. In the actual movie, I simply add the line #include SnowStorm.as to the frame in the movie where I want it to snow.

First I created an empty movie clip, snowStorm_mc, to orchestrate my storm. This clip will hold all the properties and functions we need to make it snow. Putting all of this in a new clip rather than on _root protects everything from being stomped on by other movie clips that may be loaded into the _root Flash file. It is a poor man's version of namespacing.

Now let's make our storm. The following AddFlake function dynamically adds a flake to the movie and randomly positions it on the screen.

snowStorm_mc.AddFlake = function ():Void {
  var curFlake = snowStorm_mc.attachMovie('snowflake', 'flake_'+snowStorm_mc.flakeIdx, snowStorm_mc.flakeIdx);
  ++snowStorm_mc.flakeIdx;
  curFlake._y = snowStorm_mc.startY;
  curFlake._x = Math.random() * (snowStorm_mc.endX - snowStorm_mc.startX) + snowStorm_mc.startX;
}

To test it, we just add a little code to set the parameters for randomly positioning the flake. We want it to start out above the screen and to be placed somewhere between the left and right edges. Then we call the AddFlake function on load and watch our masterpiece unfold.

snowStorm_mc.startX  = 0;
snowStorm_mc.endX    = Stage.width;
snowStorm_mc.startY  = -25;

snowStorm_mc.onLoad  = function () {
  this.AddFlake();
}

Random Snowflake

Now to make this an actual storm we simply need to call this function over and over and over again. What better way to do that than using the snowStorm_mc's onEnterFrame event?! Now we don't necessarily want to add a new flake every frame. To control the flake rate, I wrote the following onEnterFrame handler.

snowStorm_mc.onEnterFrame = function ():Void {
  if (0 == (this.frameIdx++ % this.snowRate)) {
    AddFlake();
  }
}

To make this work, snowRate must be a positive integer. The larger it is, the slower the flakes will fall. Set it to 1 and you will get a flake a frame. I wanted to make my snow storm just right, so I added a few controls to test out different scenarios. Try playing with the bars to see what kind of storm you prefer.

I plan to explain how to build custom scroll bars like these in a future tutorial.

Falling Snowflake

And finally, a little seasons greetings to everyone who made it through this tutorial.

Season's Greetings

I added a little spin to my flakes to make it more interesting. Feel free to download the files and try them out for yourself.

This entry was posted in actionscript, Flash, Tutorials and tagged , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.