Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

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
  24. 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.

  25. 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:

  26. Right click on Frame 70 of the Blur layer and select: Insert Keyframe
  27. Right click on Frame 72 of the Blur layer and select: Insert Keyframe
  28. In Frame 72, move the blur clip offstage to the right
  29. Right click on Frame 70 of the Blur layer and select: Create Motion Tween
  30. 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!

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 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.