Examples and Comments

We present three new text transition effects. Text becomes broken and fuzzy, then collapses back to form a new line. Simple variation of parameters produces many different effects. Similar technique can easily be applied to images. Click on a screen shot below or on the corresponding text link to open an effect in a new window.

Random vertical lines:
Small particles:
Small squares:

Download

  • Download all source files corresponding to this effects: fuzzytrans.zip

Download the zip package linked above for the complete, well-commented, and easy to customize source code.

Comments

The engine behind the effects is similar to the one used in our very popular tutorial Cool Text Transitions in AS3 Flash CS5. The basic idea is the same: mess up the text and then clean it back up. During this transition from clean to messy and back to clean, have the text change from one piece of text to another. The 'messing up' part is different here.

This time, we are drawing the text to a bitmap, and using the copyPixels() method of the BitmapData class to redraw the text as a series of small rectangles. The size of these rectangles can be changed, resulting in the different effects you see here (smaller rectangles will use more CPU resources). While the text is being redrawn, we also use some randomization to shift the rectangles around a bit so that they create something fuzzy and unreadable during the transition.

There is one more trick at play which causes the transition from one line of text to another. When the small rectangles are drawn to form the text, the rectangle is selected from either the bitmap containing the first line of text or the bitmap containing the second line of text. A smoothly tweened variable controls the probability that the rectangle will be selected from the first (or second) bitmap. At the beginning of the transition, the probability that the first bitmap is used is 100%. By the end of the transition, the probability becomes 0, thus resulting in a complete transition to the new line of text.

Since this is in fact a transition from one bitmap to another, a simple modification of the code will allow for this effect to be used to change from any image to any other image of the same size.

Note about mobile: Effects 1 and 3 require relatively little CPU and they run very smoothly on Android phones. Effect 2 uses more CPU and runs a bit slower on phones.

Related Flash and Math Flash CS5 Text Tutorials

Back to Flash CS5 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.