Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash - Animated Blurring Text

026   Beginners
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.

Level: Medium

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.

1. Open a new Flash document: File > New (Ctrl N)
2. Set the Document Size and color: Modify > Document (Ctrl J)

   Note: My Document Size is 550 x 50 pixels and the Background color is Black.

3. Rename Layer 1 to: Blur
4. Insert a new layer by clicking on the Insert Layer button:
5. Rename the new layer to: Text
6. Highlight frame 84 of both layers: Frames 84
7. Right click (Mac: Ctrl click) on the selected frames and select: Insert Frames
8. Right click on Frame 12 of the Text layer and select: Convert To Blank Keyframe
9. Select this frame and place some text on the stage.
   
   I used yellow text. You may do anything you wish! It might look something like:
   
   
   Frame 12 of the Text layer.
   
   
10. Right click on Frame 70 of the Text layer and select: Insert Blank Keyframe
11. Right click on Frame 9 of the Blur layer and select: Insert Blank Keyframe
12. Just off Stage to the left, use the Rectangle Tool to draw a rectangular box of the approximate height and length of the text phrase you placed on the stage in point 9: Draw a Rectangle
13. With the Selection Tool double click on the Stroke (outline) and press: Delete
14. Open the Color Mixer: Window > Design Panels > Color Mixer (Shift F9)
15. Apply a linear gradient fill to your rectangle: Gradient Fill
    
    

    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.
    
    

16. Right click on the filled shape you just made and select: Convert to Symbol...
17. For Behavior select: Movie Clip
18. Name it anything you wish with any registration point
19. Click: OK
20. Right click on Frame 11 (1 frame before the frame with text in it on the Text layer) on the Blur layer and select: Insert Keyframe
21. Move the blur clip from Frame 11 so that it is in approximately the same position as your text

    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.

22. Turn Onion Skin off.
23. Right click on Frame 9 of the Blur layer and select: Create Motion Tween

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.


24. Right click on Frame 12 of the Blur layer and select: Insert Blank Keyframe
    
    You now need to repeat the same process (from point 20 above) so that the blurred gradient moves off to the right of the Stage. But this time start the process from Frame 70 instead of Frame 9.
    
    What you will create is a mirror of frames 9 - 11 so that the text blurs off to the right:
    
    
25. Right click on Frame 70 of the Blur layer and select: Insert Keyframe
26. Right click on Frame 72 of the Blur layer and select: Insert Keyframe
27. In Frame 72, move the blur clip offstage to the right
28. Right click on Frame 70 of the Blur layer and select: Create Motion Tween
29. Right click on Frame 73 of the Blur layer and select Insert Blank Keyframe
    
    Your Timeline should look should look like this:
    
    
    The blur should now run off from Frame 70 on the Timeline. Click for: Larger Illustration

    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.

That's it!

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!