MyFreeWebTemplates.info - Let Is Snow in Flash MX

Introduction

In this tutorial I'm going to show you how to create a dynamic snow effect. This can really give the final touch to a christmas card.
The snow is made with ActionScript so we don't need to tween each flake. The snow will fall in the direction of the mouse, to simulate wind. Each flake will also be scaled to its speed. The slower the flake, the smaller (because it's farther away). We'll also add a bit of randomization, so the flakes don't all fall in the same direction.

Setting up the stage

First set the framerate to 25 fps. If you want a different framerate, you'll have to edit the code. Otherwise everything will move too fast or too slow.
Now create a little circle on the stage, roughly the size you want your snowflakes to be. Now turn it into a sybmol. Call the symbol "snowflake" and press the "Advanced" button in the bottom right corner. Check the "Export for ActionScript" checkbox, and enter "snowflake" as linkage.

Convert to Symbol

The Code

With the graphics sorted out, you only have to copy and paste this code into the first frame. Don't forget to edit the width, height and total variables to the values you want.

width = 550;
height = 400;
total = 200;
for (var t = 0; t != total; t++) {
   var mc = _root.attachMovie("snowflake", "snowflake"+t, _root.getNextHighestDepth());
   mc._x = (Math.random()*(width+20))-10;
   mc._y = (Math.random()*(height+20))-10;
   mc.yspeed = (Math.random()*1.75)+0.25;
   mc.speed = (Math.random()*3)+2;
   mc._xscale = mc._yscale=(mc.speed+mc.yspeed)*10;
   mc.onEnterFrame = function() {
      var angle = Math.atan2(_root._xmouse-(width/2), _root._ymouse)+1.5707963267949;
      this._y += Math.sin(angle)*this.speed+this.yspeed;
      this._x += Math.cos(angle)*this.speed;
      if (this._x>width+10) {
         this._x = -10;
      } else if (this._x<0-10) {
         this._x = width+10;
      }
      if (this._y>height+10) {
         this._y = -10;
      } else if (this._y<0-10) {
         this._y = height+10;
      }
   };
}

If you want to know why the code works, read this, if you don't, your done.
We start by defining a few variables that control what the code does. The first two, width and height, contain the width and height of the stage. If a snowflake is outside the stage, it gets wrapped to the other end. The last one, total, contains the number of snowflakes that need to be created.

Then comes the loop that creates the snowflakes. Inside the loop, the first that we do, is take the "snowflake" symbol out of the library and put it on the stage with attachMovie. attachMovie takes 3 parameters, the linkage (symbol name), the instance name (name on the stage) and the depth. To get the depth, we use the function getNextHighestDepth.

Then put the snowflake on a random point within the stage limits. Math.random returns a random number between 0 and 1.

Next we define the yspeed and speed variables. The yspeed variable controls the speed that the snowflake travels at along the y-axis. The speed variable controls the speed that the snowflake travels at in any direction. The real x and y speeds are later calculated from these variables.

After that, the x and yscale properties are changed according to the speed. The larger the speed and yspeed values are, the larger the snowflake.

Then comes the onEnterFrame function. This function moves the snowflake. Inside the function, we first calculate the angle of the mouse, relative to the point (0, width/2). Math.atan2 returns the angle in radians. We then add 90 degrees (in radians) so the flakes will fall down instead of to the right (0 degrees is right in Flash).

Then we move the movieclip along the y-axis. We take the sine of the angle, and multiply it by the speed. Math.abs is used so the function will always return a positive value so the snowflakes won't fall upwards. We also add yspeed, so the flakes won't all fall in the same direction.

Then we move the movieclip along the x-axis by taking the cosine of the angle and multiplying it by the speed. Then we check if the snowflake isn't outside the stage. If it is, we wrap it to the other side.

That's it?

Jup, that's it. If you have any comments, please post them in this topic. If you have any questions, you can always open a topic in the "Flash" section of the forums. You can download the zip file attached to this tutorial for the FLA and SWF files.

You can download source file of this tutorial.

Welcome To MyFreeWebTemplates.info Flash Tutorials Area - Let Is Snow in Flash MX