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.
| email me |