Flash MX 2004 Ripple Effect with download .fla
This tutorial will teach you how to create a
simple Ripple effect in Flash MX 2004. The .fla file also
included at the end of the tutorial.
Please note: You need to have
Flash Player 7.0 installed to view the Flash animation.
STEPS TO FOLLOW
Create a Graphic Symbol.
-
Import an image to your work area upon which
you would like to create ripple effect.
-
Press F8, to convert this image to a symbol.
-
Name this Symbol "girl_gr" and choose
graphic behavior. Press OK.
-
Name this Layer "bg".
-
Select girl_gr and choose
Alpha 99% from color list box
in your property window.
Create a Movie clip.
-
Press Ctrl+F8, to create Ripple movie clip.
-
Name this symbol "ripple_mc"
and choose Movie clip
behavior. Press OK.
-
Drag girl_gr
to your working area from Library (ctrl+L).
-
Select girl_gr
and choose Alpha 0% from
color list box in your property window.
-
Insert Keyframe (F6) into the 5th frame.
-
Remaining on the 5th frame, Select
girl_gr and choose
Alpha 99% from color list box
in your property window.
-
Now select 1st frame, choose
Motion Tween from Tween list
box in your property window.
-
Insert Keyframe into 15th frame and later to
20th frame.
-
Remaining on the 20th frame, Select
girl_gr and choose
Alpha 0% from color list box
in your property window.
-
Select 15th frame, choose
Motion Tween from Tween list
box in your property window.
-
Insert a new layer above this layer, call it "Layer
2".
-
Select frame 1 of
Layer 2 and draw a borderless square or rectangle
depending on the type of ripple effect you want.
In the above demonstration, I have used rectangle with 15 pix
as its height.
-
Place this vector wherever you want the ripple
to begin. Make sure that the vector belongs only to layer 2.
-
Insert Keyframe into the 20th frame of
Layer 2.
-
Place the vector wherever you want the ripple
to end or ebb.
In the above demonstration, I have placed it right at the
bottom and reduced the height to 5 pix.
-
Select 1st frame, choose
Shape Tween from Tween list
box in your property window.
-
Right click on Layer
2 and select Mask.
-
Save (ctrl+S). Make it a habit to save your
work after each step you do.
Insert Ripple Movie Clip onto Scene 1
-
Now go back to Scene 1.
-
Insert a new layer above
bg layer and call it
ripple1.
-
Insert new Keyframe (F6) into the 10th frame of
ripple1 layer.
-
With 10th frame of
ripple1 layer selected, Drag ripple_mc movie clip onto
the working area. Place it appropriate to girl_gr. Make sure
that this movie clip is placed exactly where you had placed
your square or rectangular vector in ripple_mc Movie clip.
-
Insert frame (F5) into the 30th frame of
ripple1 layer. This is just
to make sure that the ripple _mc
runs only for 20 frame.
-
Insert another new layer above
ripple1 layer and call it
ripple2
-
Insert Keyframe into the 20th frame of
ripple2 layer.
-
With 20th frame of
ripple2 layer selected, Drag ripple_mc movie clip onto
the working area. Place it appropriate to girl_gr just the way
you did in step 4.
-
Insert frame (F5) into the 40th frame of
ripple1 layer. This is just
to make sure that the ripple _mc
runs only for 20 frame.
-
Insert frame (F5) into the 40th frame of bg
layer.
Here you go!! Your movie is ready. Press
Ctrl+Enter to view your movie.
Wasn't it simple.
Okay now few things to
Note - In the above demonstration I
have created a subtle ripple effect. If you want the ripples to
be more prominent, you can add few more layers of ripple_mc
movie clip and reduce the Keyframe differences between layers.
Like in the tutorial above, ripples appear every 10 frames. You
can reduce this period and make it appear every 5 frames, which
would make the ripple effect more prominent.
Download the .fla file
For Circular Ripple effect tutorial,
Click here.
|