We present a custom AS3 SnowDisplay class which can be used to create a variety of snow animations. You can superimpose the animated snow over your image or place it behind an object. You can place your graphics between two instances of SnowDisplay to create incredibly real-looking effects. The size of the snowfall animation and the properties of the snowfall are controlled through easy manipulation of parameters. We give two examples below. Click each of the two images to open the corresponding applet in a separate window.
- Download the source files for both examples: snow.zip
About the Effect
In a recent conversation between two of us here at Flash and Math (Barbara and Dan), we discussed the difficulty of creating a snowfall effect that looks realistic. We observed that snow moves in somewhat random patterns due to turbulence in the air, and not always moving downwards. However, it doesn’t suffice to simply make snowflakes move around with independent random motions, because snowflakes near each other should move in similar ways. What we need is some kind of vector field which defines the acceleration caused by turbulence, which can be applied to each particle according to its position. But this could get computationally complex and inefficient.
We came up with a solution that uses Perlin noise to determine acceleration for the snowflakes, and we use a parallax effect to create a 3D effect. We will describe this method in greater detail on the next page of this tutorial.
How to Customize
To make the snow effect as easy to use as possible, we have created a SnowDisplay class which extends the Sprite class. Thus a SnowDisplay is an interactive display object which can be added to the stage. To create a snow effect, you simply invoke the constructor with the new keyword:
var snow: SnowDisplay = new SnowDisplay (550,300);
The code above creates a snow display of width 550 and height 300. Once added to the stage, it will begin to animate falling snowflakes. The snow effect can be placed over an image of your choosing, simply by layering a bitmap (or any other graphics) behind the SnowDisplay.
In the first applet, we have showcased some of the possibilities for this snowfall class with some radio buttons that allow you to see some examples with different parameter settings. Many more looks for the snow effect are possible; experiment to see what you like the best. In the second example, we layered two instances of SnowDisplay: one instance behind an object and one in front of it. We did it to achieve the effect of smaller snowflakes appearing behind an object and larger in front of the pine trees. In addition both instances are behind the window.
The basic code here is adapted from Dan's many particle examples. The SnowDisplay class makes use of a more basic ParticleDisplay class, which is similar to the class we used for earlier particle examples, but simplified. Most notably, we have made one important change: our earlier examples made use of particles which evolved over time (getting larger or smaller, changing color, etc.). This required the particles to be erased and redrawn on every frame. Here the particles do not change at all, and so only their positions need to be changed. The ParticleDisplay class can be repurposed for any application where unchanging particles are moved around a display area.
In our testing, we have noticed that with a very large number of snowflakes, the animation can run with somewhat less smoothly on some computers, especially on Snow Leopard Macs. To increase the likelihood of a smooth animation on a wide variety of systems, parameters can be set which will cause fewer snowflakes to fall.
The waitCount public property of the SnowDisplay class sets how many frames to wait before new snowflakes are added to the display, and the particlesToAddEachFrame public property sets how many new snowflakes will be added. Thus a higher waitCount or a lower particlesToAddEachFrame will cause fewer snowflakes to fall. You can see various values for those properties in action in the fla file, SnowDisplay.fla, corresponding to our first example. Also, you can experiment with the depth of the 3D effect. Using a greater depth will cause the particles all the way in the back to fall very slowly, and thus they will linger in the display for longer. Changing values for the zBack and the zRange properties (which are explained in comments within the code) can set up the animation to use less depth.
On the next page, we discuss the ideas behind the snowfall effect in detail.