Using the new Text Layout Framework (TLF)

show more Using the new Text Layout Framework (TLF) provides you with in-depth training on Web. Taught by Todd Perkins as part of the Flash Professional CS5 New Features show less
please wait ...

Using the new Text Layout Framework (TLF)

Flash Player 10 supports the Text Layout Framework. Up until now, the Text Layout Framework was not built into Flash. Flash CS5 offers many features of the Text Layout Framework through easy-to-use menus. In this movie, we'll look at how to use the Text Layout Framework in your applications. Again, the Text Layout Framework requires Flash Player 10 or above, so if you need to use 9 and below, you're going to have to use the legacy text engine. Let's take a look at how the Text Layout Framework works. I'm going to select a block of text on the stage.

You'll notice, in the Properties panel, that it's TLF Text. Of course, it stands for Text Layout Framework. That's the dropdown menu you use to change to Classic text, which is the Legacy engine. TLF text has three different types: Read Only, Selectable and Editable. These do what you would expect. Read Only is not selectable or editable. Selectable text is not editable. Editable text is selectable and it can be read, but it can also be changed in the Flash Player. The Text Layout Framework supports Right-to-Left and Asian text.

You could make sure those options show through the Options area of the Properties panel. Like previous versions, you can control Horizontal or Vertical text. Text Layout Framework gives you the new option to control tracking between letters and words. You have precise control over characters with the Text Layout Framework. For example, you can adjust the casing of the text. You can even adjust the casing of numbers through the Digit case and Digit width options.

Digit case refers to how the digits align with the baseline of the text and Digit width refers to the spacing between different numbers. You can adjust the baseline and you can control ligatures. This is more obvious, if I zoom in. I'm going to click and drag with the Zoom tool, zoom into this text field and watch the f and the l on flavor as I change the ligatures. So I go from Minimum to Common. Some ligatures are added. And then I go to Uncommon. More ligatures are added and the Exotic setting has the most ligatures.

I'll go back to Minimum and continue moving down the list. The Break option allows you to set where line breaks appear in your text. So let's say you wanted text to appear at the side of this ad, and where it says basil, with the text I have selected, let's say I wanted that to be on the left side of a bottle of basil oil. So I could put the text field over there, and then I could change the break setting to All, expand the text field vertically and I have vertical text with a break between each character, and I don't have to enter those breaks manually.

The advantage to that is that if I ever want to go back to standard horizontal text, I'll just turn off the break and there it is. So I'll move that text to back where it was. The new Paragraph options also allow you to control the justification of text. If I select this paragraph and choose to justify the text, you can choose whether the space in a justified line of text is made up with letters or words.

So Letter Spacing adds space between the letters, and Word Spacing adds space between the words. I'll just go back to Center Alignment. In the Advanced Paragraph setting, you have options for Asian languages and for Leading. So anything that moves up and down or right-to-left is very well supported using the Text Layout Framework. You could also control the vertical alignment of a paragraph. So I can have the paragraph start at the top, or vertically aligned to the center of the paragraph, or the bottom, or spread out between the top and bottom.

I can also add columns to the text and control spacing between those columns. So now I have two columns here in this text field, and I can control the spacing using this slider. I'll return to a one-column text field. With Padding, you can control the space from the edge of the text field, so if I lock the Padding values and I click and drag, the text fields will update.

By linking the Padding values, the space between the text and the border of the text field will remain even for each side: Top, Left, Bottom and Right. You could unlink them to increase the space between one side at a time. So I can control the Padding on just the left, or just the right, however I wish. I'll just reset the setting back to 0. You can also control, in the Text Layout Framework, the border of the text field as well as the background color, set those back to 0. You can control the 1st Line's Offset, so you can move it down a little bit using Line Height, or you can have it attach the Ascent to the text.

You can set the text to be Right to Left or Left to Right, and you can change the Locale for the language that you're using. So using the Text Layout Framework, you have much more detailed control in working with your text. Again, you need to use Flash Player 10 or above. Let's take a look at one more feature of the Text Layout Framework. This is called Multi-Column text. With the Text Layout Framework, you can actually have one block of text flow through multiple text fields. Let's take an example of how that works. On the stage here, I have a block of text, and at the bottom-right, you'll see a red box.

That indicates that there is text that's not showing, because there is not enough room to show it. So what we want to do is have this text field flow into another text field. So, on the stage, I have three empty text fields that also use the Text Layout Framework. So to link them, I just click in that red box, and then I click into a box that I want it to flow to. So I'll click in this box here, and the flow is established. So I can repeat that step to establish the flow until the end of the text.

You can tell how text fields flow by following the bottom-right and top-left corners of the text field. So this one all the way on the left, if you follow from the bottom-right, up to the top-left of the next field, you can see that it flows to there. Then that text field flows to the one to the right of it and finally ends with the one all the way on the right. To unlink text fields, to disconnect that flow, you simply double-click the top-left corner of the text field that you want to disconnect. So I double-click there, and I've disconnected the text field, double-click there and disconnected that text field.

Finally, I double-click here to disconnect the final text field. It's important to note that this feature even carries across different layers in the same frame. So text fields could be on different layers, and you could still continue the flow between the different fields. So using the new features of the Text Layout Framework in Flash CS5, you have more detailed control over your text fields, and you can link them together to create more complex layouts than you ever could before.

Using the new Text Layout Framework (TLF)
Video duration: 7m 24s 1h 19m Intermediate


Using the new Text Layout Framework (TLF) provides you with in-depth training on Web. Taught by Todd Perkins as part of the Flash Professional CS5 New Features

Flash Professional
please wait ...