Controlling the appearance of text elements with the Text Layout Framework
Created
4 October 2010
This article is the first of seven in a series highlighting examples of programming strategies that make it easier than ever before to create rich content in Adobe Flash CS5 Professional. The new Text Layout Framework (TLF) provides more robust controls over the way text is displayed in Adobe Flash Player. The previous text engine is still available, and is now referred to as Classic Text.
When the Text Tool is selected from the Tools panel, you can choose between TLF Text and Classic Text in the Property inspector. When the TLF Text engine is selected, the Advanced Character section is available when you expand the Property inspector. This section offers granular control of characters, similar to the text formatting features available in Adobe InDesign (see Figure 1).
Using ActionScript, you can use the TLFTextField class to create a TLF Text instance and then manipulate its properties and methods. This process is similar to using a TextField instance when working with Classic Text. In the example below, the frame script dynamically creates a TextField object named my_txt, and then sets its position, size and style using the Class Text engine:
// frame script
var my_txt:TextField = new TextField();
var my_str:String = "You can add text to a FLA file using a new text engine called the Text Layout Framework (TLF).";
addChild(my_txt);
my_txt.x = 10;
my_txt.y = 10;
my_txt.width = 200;
my_txt.height = 150;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = my_str;
To create a TLFTextField object with the same settings shown above, just change the constructor method and datatype of the first statement in the frame script from TextField to TLFTextField. Don't forget to import the fl.text.TLFTextField class at the beginning. After making these two changes, the first two lines of the script above look like this:
// frame script
import fl.text.TLFTextField;
var my_txt:TLFTextField = new TLFTextField();
The TLFTextField class provides many more functions than the TextField class. For example, you can position text lines to display top-to-bottom and right-to-left, as type appears in Japanese print, by setting the TLFTextField.blockProgression property.
The following frame script creates a TLFTextField instance in the Timeline and inserts Japanese text content in the field:
// frame action
import flash.events.MouseEvent;
import fl.text.TLFTextField;
import flashx.textLayout.formats.BlockProgression;
var my_txt:TLFTextField = new TLFTextField();
var my_str:String = "TLFとはテキストレイアウトフレームワーク(Text Layout Framework)の略です。[ツール]パネルから[テキストツール]を選ぶと、[プロパティ]インスペクタのテキストエンジンとして[TLFテキスト]が選択できます。[TLFテキスト]はとくに[詳細な文字設定]を使うと、まるでInDesignのような細かな文字の設定が行えます。";
addChild(my_txt);
my_txt.x = 10;
my_txt.y = 10;
my_txt.width = 200;
my_txt.height = 150;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = my_str;
addEventListener(MouseEvent.CLICK, setRightToLeft);
function setRightToLeft(eventObject:MouseEvent):void {
my_txt.blockProgression = BlockProgression.RL;
removeEventListener(MouseEvent.CLICK, setRightToLeft);
addEventListener(MouseEvent.CLICK, setTopToBottom);
}
function setTopToBottom(eventObject:MouseEvent):void {
my_txt.blockProgression = BlockProgression.TB;
removeEventListener(MouseEvent.CLICK, setTopToBottom);
addEventListener(MouseEvent.CLICK, setRightToLeft);
}
Every time you click the object, its progression of line placement toggles between vertical and horizontal (see Figure 2).
The process of formatting a TLFTextField instance is slightly different from formatting a TextField. First, you'll create a TextLayoutFormat object, which is not directly set to a TLFTextField instance. The TextLayoutFormat is assigned to the TextFlow.hostFormat property obtained from TLFTextField.textFlow property. A TextFlow object controls all of the text content in a TLFTextField instance.
Paste the following code after the existing script in the Actions panel, to add text formatting to the Japanese characters:
// add to the end of the existing frame script
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
var myTextFlow:TextFlow = my_txt.textFlow;
my_fmt.color = 0x6600FF;
my_fmt.fontSize = 12;
myTextFlow.hostFormat = my_fmt;
myTextFlow.flowComposer.updateAllControllers();
After a TLFTextField instance is dynamically modified, you'll call the IFlowComposer.updateAllControllers() method to reference the TextFlow.flowComposer property to update the appearance of the text content, as shown in the code example below.
To test this script, create a new movie and paste this code into the Script window on Frame 1:
// paste into a new frame script in a new movie
import flash.events.MouseEvent;
import fl.text.TLFTextField;
import flashx.textLayout.formats.BlockProgression;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
var my_txt:TLFTextField = new TLFTextField();
var my_str:String = "TLFとはテキストレイアウトフレームワーク(Text Layout Framework)の略です。[ツール]パネルから[テキストツール]を選ぶと、[プロパティ]インスペクタのテキストエンジンとして[TLFテキスト]が選択できます。[TLFテキスト]はとくに[詳細な文字設定]を使うと、まるでInDesignのような細かな文字の設定が行えます。";
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
var myTextFlow:TextFlow = my_txt.textFlow;
addChild(my_txt);
my_txt.x = 10;
my_txt.y = 10;
my_txt.width = 200;
my_txt.height = 150;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = my_str;
my_fmt.color = 0x6600FF;
my_fmt.fontSize = 12;
myTextFlow.hostFormat = my_fmt;
myTextFlow.flowComposer.updateAllControllers();
addEventListener(MouseEvent.CLICK, setRightToLeft);
function setRightToLeft(eventObject:MouseEvent):void {
my_txt.blockProgression = BlockProgression.RL;
removeEventListener(MouseEvent.CLICK, setRightToLeft);
addEventListener(MouseEvent.CLICK, setTopToBottom);
}
function setTopToBottom(eventObject:MouseEvent):void {
my_txt.blockProgression = BlockProgression.TB;
removeEventListener(MouseEvent.CLICK, setTopToBottom);
addEventListener(MouseEvent.CLICK, setRightToLeft);
}
Test the movie. As you click the field in the SWF, the formatted text alternates between displaying horizontally and vertically (see Figure 3).
Note: To learn more about working with the new TLF text engine, watch the video titled Creating text with the Text Layout Framework (TLF) on Adobe TV. If you want to learn how to create formatted TLF text objects, incorporate XML data, and separate content from formatting to achieve advanced typographical effects, read my article, Working with Text Layout Framework objects and classes in Flash.
Where to go from here
As you can see from these examples, there are many new possibilities to explore when developing ActionScript 3 projects in Flash Professional CS5. Hopefully the scripts provided in these examples will serve as the starting point as you begin experimenting with the new events and capabilities for delivering rich content with interactivity.
Be sure to check out my other articles in this series:
- Manipulating springs of an IK Bone for animations
- Leveraging code snippets and using enhanced code hinting
- Dynamically drawing a vector instance that contains elements
- Displaying the audio waveform captured from a microphone
- Deploying projects on devices with touch panels
- Catching errors globally to facilitate troubleshooting
To learn more about developing with ActionScript 3, see the following online resources:
- ActionScript Technology Center
- ActionScript 3.0 Reference for the Adobe Flash Platform
- Adobe ActionScript Cookbook
Also be sure to visit the Flash Developer Center to find more articles and sample files to help you take your Flash projects to the next level.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
More Like This
- Optimizing content for Apple iOS devices
- Creating ActionScript 3.0 components in Flash – Part 6: Invalidation model
- Creating ActionScript 3.0 components in Flash – Part 7: Focus management
- Creating ActionScript 3.0 components in Flash – Part 8: Keyboard support
- Common mistakes working with fonts and text objects in Flash
- Using timeline labels to dispatch events with the ActionScript 3.0 TimelineWatcher class
- Introducing the ActionScript 3.0 debugger
- Multitouch and gesture support on the Flash Platform
- Augmented reality with animated avatars using the 3D drawing API
- Flash glossary: Preloader
| 04/23/2012 | Auto-Save and Auto-Recovery |
|---|---|
| 04/23/2012 | Open hyperlinks in new window/tab/pop-up ? |
| 04/21/2012 | PNG transparencies glitched |
| 04/01/2010 | Workaround for JSFL shape selection bug? |
| 02/13/2012 | Randomize an array |
|---|---|
| 02/11/2012 | How to create a Facebook fan page with Flash |
| 02/08/2012 | Digital Clock |
| 01/18/2012 | Recording webcam video & audio in a flv file on local drive |
