By Fumio Nonaka
 
Created
26 July 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).
 
Set the text engine to use TLF Text in the Property inspector while the Text tool is selected.
 
Figure 1. Set the text engine to use TLF Text in the Property inspector while the Text tool is selected.
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).
 
Clicking the TLFTextField switches its progression of line placement between vertical and horizontal.
Figure 2. Clicking the TLFTextField switches its progression of line placement between vertical and horizontal.
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).
 
An example of a TLFTextField instance formatted with a TextLayoutFormat object.
Figure 3. An example of a TLFTextField instance formatted with a TextLayoutFormat object.
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:
 
To learn more about developing with ActionScript 3, see the following online resources:
 
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.