Flash Snow Storm Tutorial

Today we bring you some holiday cheer in the form of a tutorial on how to make an Actionscript based snow storm in Flash. Everything is dynamic, so whether you are looking for a few gentle flakes to liven the scene, or a full scale blizzard to freeze your users' fingers off, you'll be able to build it.

One small snowflake

Test flake

To start out with, we will code up the controls for a single snowflake. Ultimate snowstorm power will come later. So here is our brave young test flake. Yes, it is a circle, not a real snowflake. Circle test flakes are much hartier than the real thing.

So how does a snowflake fall? Now that I am living in Arizona, I don't get too much live experience. Perhaps that's why I am making virtual snow for Christmas. Having lived in colder climates previously, here are the details as I remember them. Let me know if snow falls differently since I last saw it.

  • Snow falls at a steady rate. No acceleration, just a slow, steady descent.
  • Snow dances in the wind. It meanders sporadically in the air as it falls.

And that's it. I said in the first paragraph that this would be a simple tutorial, so we'll stick with those two properties for now. If you want more complex snow, by all means.

Snow falls at a steady rate.

So first we need to make the snow fall. That's pretty straightforward. Just add a simple onEnterFrame event to the snow to move its _y value further down the screen. What do you think?

A quick note. I set my Flash movies to run at 30 fps so if you are running yours at a slower rate (the default is 12), you'll need to increase the descent value.

Falling Snowflake

The Flash plugin is required to view this example.

onClipEvent(load) {
   this.descent = 2;
}
onClipEvent(enterFrame) {
  this._y += this.descent;
}

Snow dances in the wind.

The "dances in the wind" effect will be a little more involved. We don't want any DDR gettin' jiggy with it action, just a little "meandering". At first I tried a random _x shift, but that was too jumpy for my snow.

Jerky Snowflake

The Flash plugin is required to view this example.

We are looking for a smoother movement. So instead of directly shifting the _x property, I added an intermediate variable, momentumX. Here is the updated code.

onClipEvent(load) {
  this.descent     = 2;
  this.momentumX   = 0;
  this.MAX_DELTA_X = 0.5;
  this.MAX_FORCE_X = 0.5;
}
onClipEvent(enterFrame) {
  this._y += this.descent;
  this._x += this.momentumX;
  this.momentumX += Math.random() * this.MAX_DELTA_X - (this.MAX_DELTA_X/2.0);
  if (Math.abs(this.momentumX) > this.MAX_FORCE_X) {
    this.momentumX = (this.momentumX > 0) ? this.MAX_FORCE_X : -this.MAX_FORCE_X;
  }
}

A random value, scaled by MAX_DELTA_X and centered around 0 is added to momentumX each frame. The momentumX is added to _x value each frame, giving the flake our dancing behavior. As you can see, I also had to cap off the momentum at a max and min value, otherwise some of the hyper flakes started shooting off to the side ridiculously fast.

You have a few options here to personalize your flakes. To make them more or less jerky, change the MAX_DELTA_X value. To set the hyper flakes free to fly, raise the MAX_FORCE_X value. Here is what our new flake looks like in action.

Dancing Snowflake

The Flash plugin is required to view this example.

So there we have it. Our dancing snowflake, falling lightly to the earth and inspiring poets across the globe. You could sit here and watch it fall for hours and hours.

I have consolidated all of the properties and functions for the snowflake into a SnowFlake class to make things easier for the next part of our tutorial. I won't bore you with the details here, but I will let you download the file if you're interested.

Our snowflake looks a little lonely. Part two of this Flash tutorial will have us put the "storm" into our snow storm. Until then, enjoy your happy little test flake!

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