Custom Search

To make a snowfall animation....

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

I will show you how to make the 'falling snow' part of the above Flash document. There is a lot of action script involved - but you can just copy and paste it! When you have the snow falling you can add a background and music as I have done in the one above... but let's start simply - and make some snow fall!

Creating Snow:

Create a new document in Flash.

Go to Modify - Document and set the width and height of the stage to anything you want. Then choose a background colour - you may want to have a dark colored background for the white snow to be visible - or to import a background image for the snow to fall in front of (in a separate background layer - which you then lock!!). Set the frame rate to 25 fames per second for a smooth playback.
 

Draw a snow particle.

In Flash - not in Fireworks - select the Oval tool (the circle icon) from your toolbox. Select a white fill from the colour palette. Ensure that the circle does not have an outline. Draw your white gradient fill circle anywhere on your stage.

Once you have created your snow particle, select it with your mouse pointer and press F8 (which is the shortcut for Insert - Convert to Symbol). The Convert to Symbol dialog should appear. Select Movie Clip and press OK.

Select the movie clip (which you converted in Step iii). Look down towards your Properties panel. Find the text field that says <Instance Name>. Click in that text field and type in the word snow:

Code to create falling snow

Right click on the movie clip and select Actions.

Copy and paste the following code into your Actions dialog box:

onClipEvent (load) {
//specifies the size of the movie stage
movieWidth = 300;
movieHeight = 200
;

//variables that will modify the falling snow
i = 1+Math.random()*2;
k = -Math.PI+Math.random()*Math.PI;

//giving each snowflake unique characteristics
this._xscale = this._yscale=50+Math.random()*100;

this._alpha = 75+Math.random()*100;
this._x = -10+Math.random()*movieWidth;
this._y = -10+Math.random()*movieHeight;
}
onClipEvent (enterFrame) {
//putting it all together
rad += (k/180)*Math.PI;
this._x -= Math.cos(rad);
this._y += i;
if (this._y>=movieHeight) {
this._y = -5;
}
if ((this._x>=movieWidth) || (this._x<=0)) {
this._x = -10+Math.random()*movieWidth;
this._y = -5;
}
}

This bit of code in red specifies the document size - adjust these figures to the ones that describe your screen size choice.

We are still not done adding actions!

Right click on the first frame in your movie and select Actions. You will see another Actions dialog box appear - this time for the first frame.
 
Copy and paste the following code into the Actions dialog box:

for (k=0; k<50; k++) {
duplicateMovieClip(this.snow, "snow"+k, k);

}

The bit of code in red specifies the number of snowparticles - you can change this to get diffeent effects. It is not a good idea to make it much bigger as that will make some computers run slow when playing your clip.... but if you use a larger graphic you may want to make it a smaller number.

Now add a background image and you will have a snowscene. Here is 'one I did earlier'...

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

I have added music to this, making it a Christmas E-Card. Click here to see it - and don't forget to have your speakers switched on.

The coding for this was taken from http://www.kirupa.com/html - an excellent site!