The Effect and Comments

Text is loaded dynamically at runtime. Thanks to the new TLF methods, the body of the text is divided between two 3D boards and split into separate lines. Each line flips in 3D with a tween. Super cool! Click the screenshot to open Flash movie in a new window.

Download

  • Download all source files corresponding to this effect: text3d.zip

In the zip package, you will find a fla file with well-commented Timeline code and a custom AS3 class, TextSlicer. We descibe the class below.

The TextSlicer AS3 Class

Our custom AS3 TextSlicer class is the engine behind the effect. The class splits text into slices and places each slice in a separate Sprite container. Each container is placed in an instance of ContainerController for the same instance of the TextFlow class. Hence, the text is split up but its flow is preserved. This is possible thanks to the new TLF classes easily accessible in Flash CS5.

The TextSlicer class presented here is an expanded version of TextSlicer from our earlier tutorial: AS3 Flash CS5: Cool Text Effects with TLF Text.

Here is the list of public properties and methods of the TextSlicer class. Many are new to this version of the class.

The constructor, evoked with the keyword 'new', takes one parameter, the width of our text, in other words, the width of each slice (default: 240):

new TextSlicer(sw:Number=240)

Instance properties. Many of the names explain meaning:

instance.fontColor

Number. Color's hex number. Default: black.

instance.fontSize

Number. Default: 14 px.

instance.vertPadding

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

instance.hasBack

Boolean. Default: false. Determines is text has background.

instance.backColor

Number. Color's hex number. Default: white.

instance.backAlpha

Number. Default: 1.

instance.textAlignment

String. Default: "left". Possible values: "left", "right", "center", "justify".

instance.numLinesPerSlice

int. 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.sliceHeight

Read-only. The height of each slice (or container) of text.

instance.sliceWidth

Read-only. The width of each slice (or container) 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.