Creating a storm effect

One of the quickest ways to create an animated effect is to duplicate movie clips on the stage. In this tutorial, we will create a storm effect by duplicating a movie clip.

Create a new graphic symbol called raindrop and draw a raindrop.

Create a new movie clip symbol, name it raindropMC and drag and instance of raindrop into it. Set its position at 0, 0. At frame 30, insert a keyframe and move the raindrop graphic to the bottom of the stage. Take note to only shift the raindrop graphic vertically and not horizontally. Create a motion tween between the two keyframes.

In the Library pane, duplicate raindropMC and name itraindropMCslow. Edit raindropMCslow and drag the keyframe at frame 30 out to around 60 or 70. This will slow down the animation.

Create two movie clips called largecloud and smallcloud. Draw a cloud in largecloud. In smallcloud, draw a cloud that is half the size of its counterpart in largecloud.

Create a movie clip named lightningflash. Draw a rectangle that fills the stage. Fill it with white radial gradient fill with 100% opacity at the center of the rectangle and 0% at the edges.

Return to scene 1. Create five layers: actions, flash, clouds, raindrop, and bg.

Drag raindropMC, raindropMCslow, lightningflash, largecloud and smallcloud onto the work area. Name the instances according to the master movie clips. If you cannot see the work area, go to view, click on work area. Select the bg layer and draw whatever you like for a background.

In the first frame of the actions layer, add the following code:

for (i = 0; i < 50; i++)
{
var newDrop = raindrop.duplicateMovieClip ("raindrop" +i, i);
newDrop._x = random (350);
newDrop._y = random (20);
newdrop._xscale = random (100);
newdrop._alpha = random (50)
newDrop.gotoAndPlay(random(40)+1);
}
for (j = i; j < i +100; j++)
var newDrop = raindropSlow.duplicateMovieClip ("raindropSlow" +j, j);
newDrop._x = random (350);
newDrop._y = random (20);
newdrop._xscale = random (100);
newdrop._alpha = random (25)
newDrop.gotoAndPlay(random(40)+1);
for (i = j; i < j + 60; i++)
var newCloud = smallCloud.duplicateMovieClip (" smallCloud" + i, i);
newCloud._alpha = random (100);
newCloud._x = random (450) - 100;
newCloud._y = random (60) + 10;
newCloud.step = random(4);
newCloud.onEnterFrame = cloudStep;
for (j = i; j < i + 20; j++)
{
var newCloud = largeCloud.duplicateMovieClip (" largeCloud" + j, j);
newCloud._alpha = random (100);
newCloud._x = random (450) - 100;
newCloud._y = random (40) - 20;
newCloud.step = random(4) + 2;
newCloud.onEnterFrame = cloudStep;
}
function cloudStep()
{
if (this._x >= 350) this._x = -100;
this._x += this.step;
}
lightningflash._alpha = 0;
lightningflash.onEnterFrame = function ()
{
var flashcontrol = random (10);
if (flashcontrol >= 9 ||
lightningflash._alpha > 0 && flashControl >= 5)
{
lightningflash._alpha += random (65);
if (lightningflash._alpha > 65)
{
lightningflash._alpha = 0;
}
}
};

Let me briefly explain to you the code:
Basically this code duplicates the movie clips raindropMC, raindropMCslow, largecloud and smallcloud. The for statements before each section of code specify the number of copies. The following statements randomly modifies various properties of the movie clips to create a realistic rain effect. The lightningflash section is a different. The code initiates a variable called flashcontrol and it is randomly assigned a value between 0 and 10. I set that if the number is 9, the lightning flashes.

You can download the finished effect here.

Back to my flash showcase

| email me |