Flash - Animated Blurring Text
Flash Compatibility: MX 2004 (Principles and ActionScript are the same in Flash MX and Flash 5)
Written by: Joseph Levin of: Portal Web Services Email Joe
Sub Editor: David Rowe Email David
Editor: Phil Schulz
Length: 900 words
Assumed Knowledge: Some basic knowledge of the Timeline.
Access: Free Tutorial
Use Flash to learn how to make your
text rush in and out all in a blur.
Example: Download the Flash file Beg 026a
The Flash Movie you will learn to make in this tutorial: Blurred text on the run.
This blurred text effect is easy to create in Flash, as you will see.
Note: My Document Size is 550 x 50 pixels and the Background color is Black.
The settings I used for this gradient fill are as follows:
Settings for the Paint Buckets from left to right:
• Bucket 1: Color #FFFFFF with 0% alpha
• Bucket 2: Color #E3FB3E with 100% alpha
• Bucket 3: Color #FDFD2D with 100% alpha
• Bucket 4: Color #FFFFFF with 0% alpha
To add additional Paint Buckets click on the colored gradient
definition bar in the Color Mixer:
If needed, adjust the fill with the Fill Transform Tool to make it look as shown above.
Your screen should look something like:
Rectangle with gradient fill just off to the left of the Stage.
Tip: To make this easier temporarily switch on the Onion Skin at the bottom of the Timeline:
Onion Skin enables you to see a range of different frames.
Your Stage should look similar to this.
Note: You will see a small Tween arrow > in the Timeline between the two Keyframes on frame 9 and 11:
Tween as displayed in the Timeline.
Note: the blur must disappear before the text first appears on the stage, and the text must disappear before the blur reappears and then leaves the stage.
Bonus, sort of extra stuff:
If you wish to do this animation with images, as with our cat example in the Blurring a Picture tutorial, simply replace the gradient fill with the blurred JPEG (or GIF) image, and replace the text with the original, in-focus JPEG image. Be careful that the images are properly aligned on top of one another at the junction when the images appear and disappear. If you want a smidgeon more realism, instead of a Gaussian blur, use a motion blur on the original JPEG image. Just be sure to have more blurriness in the direction that the JPEG image is moving in!
As always, thank you for your time!
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here
All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.