TEXT EFFECT: GRADIENT ANIMATION
(this document applies to Flash 4)
 

 

Download .FLA

 

General Technique

This effect can be accomplished by using a text to mask a gradient background.

Basic Step by Step Guide
  1. Create a new FLA (for this illustration purpose, use 450x200 pixel size).
  2. Insert/Create a new Symbol, and name the new Symbol: Animated Text.  Set behavior to MovieClip. 
  3. Create a new layer, name the first layer: Text; name the second one: Gradient.
  4. On the first frame of layer Text, type any text.  (I recommend using a large font size for better effect - 36 pt of more).  Center the text on your work area.
  5. On the first frame of layer Gradient, make a filled rectangle of about (281, 53) pixels in size; and then fill it with the standard rainbow gradient that came with Flash palette such as below.   Make sure there's no outline on the rectangle, if there's, eliminate the outlines.
          
  6. On the first frame of Gradient layer, move the rectangle so that its right edge is just touching the beginning of the text. 
  7. On the first frame of Gradient layer, duplicate the rectangle and place each duplicate on the right, next to the previous one (ie: stack the rectangles horizontally next to each other).  Keep stacking until the whole text is covered.  Be careful not to leave any gap so that the color appear seamless.  Also, the top edge should be all aligned.
  8. On the Gradient layer, make a keyframe at frame 20.
  9. On frame 20 of Gradient layer, select all the gradient squares and then drag them to the right until the left edge of the leftmost rectangle is very close to the left edge of the text.
    To clarify Step 6 to 9, I have included the following illustration.


    (Notice that the colors below the text are lined up in both frames.  In this way, when the animation is looped, the transition will be seamless.   You can use the red color (below letter "G") as an anchor to help lining up.
  10. Make a shape Tween on the Gradient layer between frame 1 to 20.  This will make the gradient moves (or scroll if you will).  Test it, the gradient scroll from left to right.
  11. Make the Text layer a mask layer (right click the layer name, and select Mask).  This causes the text to mask the gradient, so that  the gradient shows through the text.  
  12. Go back to the main stage, put an instance of the Animated Text onto the stage (make sure the behavior is set to MovieClip).
  13. Test the movie and you should see the gradient moving.  If the gradient seems to jump when it's looping, tweak the gradient rectangles animation (step 8).  It may take some work to get a seamless transition.

Advanced Technique

To put shadows behind the text:

  • Copy the text object and copy it to a new layer below the Gradient layer.  Maintain the position by using Paste in place.  Nudge the copy 2 pixels up and 2 pixels right.  Change the text color to near black.  
  • Repeat the previous step, this time nudge the copy 2 pixels down and 2 pixels left.  Change the text color to gray.

To change the color of the gradient:

  • Play around with the ColorEffect property of the object.  (See the main timeline of the .FLA example and click the object property on each key frame.)

Additional Notes

You can create interesting effects by playing around with the Color setting of the AnimatedText object.  Use the Advanced tab to change the R, G, B setting of the object to find some interesting combinations.

This tutorial is © F. Permadi
Created December 1999

<<BACK>>