We present a cool effect of a transition from one piece of text to another. The text becomes blurred and distorted before transitioning back to a new line of text. The effect makes use of a DisplacementMapFilter (with a Perlin noise source) and a BlurFilter, along with a Tween to control the transition. Below are three versions of the effect: colorized, monochrome, and low CPU. Click on a screen shot below or on the corresponding text link to open an effect in a new window.
Cool monochrome version:
Low CPU version:
- Download all source files corresponding to this effects: texttrans.zip
Download the zip package linked above for the complete, well-commented, and easy to customize source code.
The principles behind this transition effect are rather straightforward. During the transition, one text field changes from alpha 1 to alpha 0 (thus becoming invisible), while another text field changes from alpha 0 to alpha 1 (thus becoming visible). Meanwhile, both a blur filter and a displacement map filter are applied to the whole display, with the maximum filtering effect done halfway through the transition, and zero effect at the beginning and end.
The alpha property of the text fields, the blur amount, and the displacement amount are all controlled by a single parameter which is smoothly changed by a Tween. This one-parameter tween approach has been a favorite trick of ours, most recently seen in our Tweening Tile Image Gallery in AS3 Flash.
The displacement map filter uses a Perlin noise filled bitmap as its source. This Perlin noise is refreshed after each transition (with a randomized seed) in order to create a new distortion effect each time. We also apply a blur filter both before and after applying the displacement map filter. We have found that applying the displacement map filter more than once produces a very well-mixed image which creates a smoother transition between the text fields. Although the effect is very nice, these several filter steps put a heavier load on the CPU. The low CPU version above only uses one blur filter and one displacement map filter.
Experimenting with the Code
With a little modification, this transition can easily be applied to any display objects (including MovieClips from the library), not just to text fields.
There are several parameters that you can alter to try out different versions of this effect. The parameters maxDisplacementX and maxdisplacementY control how much distortion is caused by the displacement map filter. They can be set to different amounts to cause different amounts of distortion in the x and y directions. The Perlin noise which controls the distortion can also be made "messier" by adjusting the parameters perlinBaseX and perlinBaseY to smaller amounts. Also, the maximum blur amount can be adjusted with the parameters maxBlurX and maxBlurY.
Try using only the blur filter (with no displacement map filter) for a classic transition effect. Also experiment with using different amounts of blur and distortion in the x and y directions. A lot of different effects can be made with these adjustments.
Embedding Fonts in Flash CS5
In the examples above, we use the user-friendly Embed Fonts panel, new to Flash CS5. We need to embed fonts in order to be able to apply anti-aliasing to a dynamic TextField. See our Flash CS5 tutorial Flash CS5: 3D Text Effect, Embedding Fonts via TextFlow.fontLookup for explanations of how to use the panel and store fonts in the Library. Take a look at the simple Timeline code in the zip package above to see how to use embedded fonts in a programmatically created TextField. Note: In this effect, we do not use TLF text or TFLTextField or TLF XML markup as in the previous tutorial, just regular dynamic, created in AS3 TextFields.
Related Flash and Math Flash CS5 Text Tutorials
- AS3 Flash CS5: Cool Text Effects with TLF Text
- Flash CS5: 3D Text Effect, Embedding Fonts via TextFlow.fontLookup
- Flash CS5: XML Markup and Runtime Loading of TLF Text with AS3
- Flash CS5: Double 3D Text Effect with TLF Text
- Multicolumn Text on the Fly with New AS3 TLF Text Classes in Flash CS5
- New AS3 Text Layout Classes in Flash CS5 - Tour and Example