FLASH TRANSITION EFFECT
FADE IN/OUT ANIMATION

 

EXAMPLE

 

Please wait until the picture loads.


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. 
  • Test the movie.

    Here's the structure of the layers.

 

(C) F. Permadi

<<INDEX>>
Terms of Use