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 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):
Instance properties. Many of the names explain meaning:
Number. Color's hex number. Default: black.
Number. Default: 14 px.
Number. Vertical padding for each line on top and bottom. (Determines line spacing.) Default: 2 px.
Boolean. Default: false. Determines is text has background.
Number. Color's hex number. Default: white.
Number. Default: 1.
String. Default: "left". Possible values: "left", "right", "center", "justify".
int. 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 slice (or container) of text.
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):
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.