Examples and Comments

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.

Sliding Text:
Lines Fading In:
Colored Lines Fading In:
Zooming In Lines In 3D:
Sliding Line by Line:

Download

  • 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:

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):

new TextSlicer(tw:Number=240)

Instance properties. Many of the names explain meaning:

instance.fontColor

Default: black.

instance.fontSize

Default: 14 px.

instance.vertPadding

Vertical padding for each line on top and bottom. (Determines line spacing.) Default: 2 px.

instance.numLinesPerSlice

How many lines per slice (or container) of text. Default: 1 line per slice.

instance.numContainers

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.

instance.slatHeight

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):

instance.importText(t:String,m:String)

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.

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.