Search:                                                     

[../../index_add/searchmain.htm]

The following animation shows what you will create by the end of this tutorial:

Unlike many other cool effects, you don't have to use a blank animation to apply the snow flakes. Open any animation that wish you apply the effect to. I will be creating a blank movie for tutorial purposes.

Here is how to add random snowflakes:

1. Create a new movie or open an existing movie. Insert another layer in your main timeline and label the layer, "snow".

 
[ your timeline should look similar to this image ]

2. You now need to create one snowflake in your snow layer. If you cannot create a snowflake at this moment, simply draw a circle or another object. Alternatively, can choose to download snowflake graphics and incorporating them into your flash animation from the following URL: http://dgl.microsoft.com/
    
3. I went ahead and used a snowflake. Make sure whatever you choose to create is small enough to look somewhat like a small object falling and hitting the ground. I will refer to snowflakes instead of "strange falling objects" throughout this tutorial. Ensure that the snowflake you created is above the actual movie. You don't want the snowflake to be visible in your main movie when viewed in Flash:

[ the snowflake is located above the actual movie ]

3. Select the snowflake and press F8. From the Symbol Properties dialog box that appears, select Movie Clip. (Mac users go to Insert | Convert To Symbol). Once the snowflake has been converted into a movie clip, copy the movie clip and paste it a few units to your right:

[ copy and paste the snowflake movie clip]

4. Right click on the snowflake on your far left and select Actions. The Object Actions dialog box will display. Copy and paste the following code into the Actions box:

//Thanks to upuaut8 //Snow Effect on http://www.kirupa.com onClipEvent (load) { clipCount = 0; } onClipEvent (enterFrame) { //this checks to see if the movie should create another snowFlake yet checker = random(100); if (checker<=8) { clipCount += 1; duplicateMovieClip (_root.snowFlake, "snowFlake"+clipCount, clipCount); //change this clipCount number to change the total number of clips that can be on the screen at once if (clipCount == 100) { clipCount = 1; } } }

[ copy and paste the above code in the Object Actions dialog box ]

5. Now that you have the above code added, close the Object Actions dialog box. Select the snowflake movie clip on the right. Once the snowflake movie clip on the right has been selected, select the Instance panel and give it the name "snowFlake":

[ name the snowflake movie clip on the right to snowFlake ]

6. Once you named that movie clip 'snowFlake', it is time to add some actions to that movie clip. Right click on that movie clip and select Actions. The Object Actions dialog box will appear again. Copy and paste the following code:

onClipEvent (load) { // this random number sets a random x location for the new snowFlake and sets y location at -10 this._x = random(300); this._y = -10; // this sets the y and x points which the snowFlake will rotate around. yCenterSpin = 0; xCenterSpin = this._x+100; // scaleIt set variables yscaleIt = 1; xscaleIt = 1; this._yscale=100; this._xscale=100; } onClipEvent (enterFrame) { // if the _yscale of the movie clip is less than -100 reverse the scaling. if (this._yscale<=-100) { yscaleIt *= -1; // if the _yscale of the movie clip is greater than 100 reverse the scaling. } else if (this._yscale>=100) { yscaleIt *= -1; } // if the _xscale of the movie clip is less than -100 reverse the scaling. if (this._xscale<=-100) { xscaleIt *= -1; // if the _xscale of the movie clip is greater than 100 reverse the scaling. } else if (this._xscale>=100) { xscaleIt *= -1; } // random modifier to reverse it again, occationaly, not always if (random(10)<=1) { yscaleIt *= -1; } if (random(10)<=1) { xscaleIt *= -1; } //add a little rotation into the mix if (yscaleIt>0){ this._rotation+=5; } if (yscaleIt<0){ this._rotation-=5; } // scale the snowFlake this._yscale -= yscaleIt*5; this._xscale -= xscaleIt*5; // move the yCenterSpin point down by a measure of 0 to 10 yCenterSpin += 3; // change, or keep the same, the velocity this._y += yVelocity; this._x += xVelocity; if (this._y>=yCenterSpin) { yVelocity -= 1; } else if (this._y<=yCenterSpin) { yVelocity += 1; } if (this._x>=xCenterSpin) { xVelocity -= 1; } else if (this._x<=xCenterSpin) { xVelocity += 1; diff = yCenterSpin-this._y; yVelocity += diff/200; diff = xCenterSpin-this._x; zVelocity += diff/200; } //get rid of extra clips if (this._y>=800) { this.removeMovieClip(); } }

[ copy and paste the above code in the Object Actions dialog box ]
 

9. That is all there is to this effect. Save the FLA and preview the animation in your browser. You should see snowflakes appear.

Customizing the Code
While the movement is random, just like life, there are certain boundaries. The only boundary you will encounter in this movie is the width of your movie. You would want to have snowflakes to appear at sometime during the full width of your movie.

// this random number sets a random x location for the new snowFlake and sets y location at -10
 
this._x = random(300);
 

Change the value in the parentheses to reflect the width of your movie. For example, my movie's width was 300 pixels, so I entered 300 as the value under random. You can change the value to reflect whatever your movie's width is.

Downloads
These few sentences conclude the tutorial on creating the snow effect. Right click on File and select Save Target As and save to your hard drive before opening. The Actions window does not work properly when viewed without downloading the file to the hard drive first.

Final Source for this Tutorial

Conclusion
I'd like to thank upuaut8, who gave me permission to use his original FLA and source code. If you ever post on the forums, there is a good chance that upuaut8 replied. The original post can still be found by clicking here. You can also visit his really cool site by going to the following URL: http://www.centerspin.com

[../../pages/me.htm]

[../../pages/rightinfo.htm]

 navigation:

features:

[../../pages/gl.htm]