We load TLF markup text at runtime, use a custom TextSlicer AS3 class to split the text into lines, and then tween, slide, zoom, fade in, and color. We show how to use the new AS3 classes available in Flash CS5 to accomplish a variety of interesting text effects. Click each screenshot to open a Flash movie. Then click any point on the Stage to display or replay text effect.
Lines Fading In:
Colored Lines Fading In:
Zooming In Lines In 3D:
Sliding Line by Line:
- Download all source files corresponding to this effects: texteffs.zip
Download the zip package linked above for the complete, well-commented, and easy to customize source code. Below, we present comments and the description on the custom class, TextSlicer.
The Timeline Code
In each of the five fla files in the zip package, we load at runtime an external text file with TLF marked up text. Then, we use an instance of our custom AS3 class, TextSlicer. The class slices the text into slats, each slat containing a certain number of lines. In our examples, we slice the text into one-line slats. Each slice is placed by the class in its own Sprite container. After the slices are created, we can program easily the effects presented in the examples above.
The TextSlicer class uses many of the new AS3 classes available in Flash CS5: TextFlow, StandardFlowComposer, ContainerController, and TextConverter. We discussed these classes as well as TLF markup in out previous TLF text tutorials:
- Flash CS5: XML Markup and Runtime Loading of TLF Text with AS3
- 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
The TextSlicer AS3 Class
The TextSlicer class uses the same ideas as the TextAccordion class presented in our video tutorial: New AS3 Text Layout Classes in Flash CS5 - Tour and Example.
Here is the list of public properties and methods of the TextSlicer class.
The constructor, evoked with the keyword 'new', takes one parameter, the width of our text (deafult: 240):
Instance properties. Many of the names explain meaning:
Default: 14 px.
Vertical padding for each line on top and bottom. (Determines line spacing.) Default: 2 px.
How many lines per slice (or container) of text. Default: 1 line per slice.
As text is passed to an instance of TextSlicer via importText method, the text is divided into slices (or containers or slats). The containers are created dynamically based on numLinesPerSlice and the length of the text so all of the text can be displayed. Read-only.
Read-only. The height of each slat of text.
The public method importText should be called after all other properties are set (or default values are used):
The first parameter, t, is text that is supposed to be sliced, formatted and layout out. The second parameter, m, is the type of markup of the text: 'html', 'textlayout', or 'plainText'. In our examples, we use 'textLayout'; that is, TLF markup.