This simple tutorial shows how to do fade-in and fade-out animation effects in Flash authoring environment. Such effects can be used in slide-shows, games, etc. The movie above shows an example of the animation that will be achieved.
DIRECT
FADE TO TARGET IMAGE
This will make the initial image fade to
target image.
Create a new movie.
Create two layers.
On the bottom layer, insert the the initial image (when
referring to an "image," I am referring to a symbol
that contains the image). Note:
Flash 4 can only fade symbols. An imported image
(bitmap) can not be faded directly; instead, it must be turned into a symbol
first. The symbol behavior
can be set as Graphics or Movie Clip, it doesn't really matter at this
point.
Decide the frame number where the target image should start to
fade in. Let's use frame 30 as an example. Insert a
key frame on the top layer on frame 30.
Put the target image on that frame.
Decide where the target image should complete its fade
sequence. Let's use frame 50 for this example.
Insert a key frame on the top layer on frame 50. This
should copy the target image into that frame.
Go back to frame 30, set the Alpha property of the target
image to 0%. (Setting the Alpha to 0% will cause the image
to be invisible.) In Flash 4, the Alpha property can be accessed by
selecting the symbol, then Modify->Instance, select Color
Effect tab.
In Flash 5, it's accessible via
Window->Panels->Effect.
To create the animation, insert a Motion Tween between frame 30 to 50 on the layer
where the target images are located (this should be the topmost
layer). This motion tween will cause the image to
gradually appear. I.e.: the tween causes the Alpha to
increase from 0% (at frame 30) to 100% (at frame 50).
Extend the initial image so that it extends to frame 50.
(I.e.: insert a frame at frame 50)
Test the movie.
Here's the structure of the layers.
FADE TO
THE BACKGROUND COLOR
This will make the initial image
fade out completely before the target image fade in.
Continuing from the above example.
Set movie canvas color to white (or any color).
Let's suppose that the initial image should fade
completely at frame 25. On the layer where the
initial image is located (the bottom layer), make a
key frame at frame 25.
Set the Alpha of the image at that frame to
0%. Flash 4 Flash 5
To create the animation, insert a Motion Tween between frame 1 to 25 on the
layer where the initial images are located (bottom
layer). This will cause the image to
gradually turns completely transparent.
Make a keyframe at frame 26, then delete the image
from that frame. (This is because there is no
reason to have the image after it turns invisible, it
just take up rendering time.
