22 November 2010
General experience working with the Text tool in Flash Professional CS5 is recommended. Background knowledge of Flash concepts and working in the Flash authoring environment is required. If you are new to working with TLF text, read the description in the Flash Glossary.
When you take a first look at the Text tool in Adobe Flash Professional CS5, you'll notice that there is a major change compared to the previous versions of Flash. The introduction of the Text Layout Framework is one of the primary changes in Flash CS5. It extends the features available when using the Text tool and provides a whole new set of text formatting capabilities and options. (Classic Text, the original text engine, still exists as an option in the Property inspector when using the Text tool.)
In this article, you'll get an overview of the available Text Layout Framework (TLF) properties to get a better understanding of the differences between the new text engine and the older, Classic text. You'll also create a magazine page layout sample to learn how to use the new text engine to precisely control formatting when using TLF text.
When you use the Text tool to create TLF text, you have a choice between two types of text containers: a point text container and an area text container. A point text container is created when you click with the Text tool on the Stage to create a text field; this text field is scalable to fit as you type or paste text into the container. However, it doesn't restrict the area where the text is displayed and the text does not flow to another line until you press the Enter (Windows) or Return (Mac) key.
You can create an area text container by using the Text tool to click and drag on the Stage. Using this approach, you can create a container with a fixed area; the text area container limits the dimensions of the text content inside it. When you type or paste several lines of text, the words wrap to fit within the confines of the text area.
The following two exercises illustrate the difference between creating a point text container and an area text container. Follow these steps to create a point text container:
When you use point containers, the text is flexible and resizable depending on the amount text you enter. Contrast that behavior with the area text container, by making a second text object. Follow these steps:
You can switch between both types of containers. Double-click the small circle in the point text container and the small white square in the area text container to toggle to the other type.
Both types of containers have benefits. The choice of which to use depends on how you plan to use the text object in your project. Generally speaking, the point text container is more suitable for headers and small amounts of text, in situations where it is desireable that the text area scales along with the text.
The text area container is usually the best choice when displaying paragraphs of text that require a fixed area for the text (such as a column in a newsletter or in the main content of a web page). You'll also work with text area containers whenever you want to link multiple text areas on the Stage. This is a new feature that is covered later in this article.
When you use the Property inspector to select the TLF text option, you can choose between three options that specify how the text will be rendered in the published SWF file:
Additionally, TLF text includes the option to change the orientation of the text from horizontal to vertical. Use the orientation icon displayed next to the text type list (see Figure 2).
The new text engine also allows you to edit the text using the 3D editing tools. You can edit the text using the Position and Size area or edit its 3D properties through the 3D Position and View areas. This feature is not limited to entering the numerical values; you can also adjust the 3D properties of the text object using the 3D Rotation and 3D Transform tools.
The character section is similar to the options available when using Classic text, along with some extra features, such as underlining text or striking through characters, displayed next to the superscript and subscript icons.
You can also change both the text color (color of the characters) and the highlight color for the text (color behind the characters), to set the color of the background of the text lines (see Figure 3).
Optionally, you can change the direction of the characters from Auto, zero degrees, or 270 degrees. This is different than changing the text orientation to vertical as shown in Figure 2 because this setting changes the direction of the text field itself, rather than affecting the characters. Try setting the value to 270 degrees to see that the text field container direction rotates.
Conversely, when you change the character direction, the text area direction does not change—only the characters inside the text container change orientation (see Figure 4).
Underneath the settings described above, the Property inspector includes advanced character options. These properties are only available in the TLF engine, when you are working with TLF text. The Advanced Character section includes the options to choose the case of the characters and digits, as well as set the baseline, ligature, line breaks and locale, among other settings (see Figure 5).
The Advanced Character options are described in more detail below:
The case option allows you specify the capitalization of text characters. Use this section to set all characters as lowercase or uppercase, or only set the first character as uppercase (to display sentence capitalization).
Some OpenType fonts include different types of digit cases that can be applied to the numerical characters included with the font. This option enables you to choose between the different digit cases when the selected font includes this option (it depends if the font supports this feature). The digit cases can be set to use the Default (based on the font designers' choice), Lining (that displays all of the digits in all-caps height), and Old Style (which causes the digits to display using the older, more traditional look).
When using OpenType fonts that include both Lining and Old Style digit cases, you can set the width of the digit case based on Default, Proportional and Tabular display. The Proportional option calculates the total character width as the numeric value itself and adds a small white space around it. Alternatively, the Tabular option sets the character width as the total character width including a small space added on both sides of the character. The Tabular option is best suitable for financial statements and when displaying numeric figures in columns.
The Dominant Baseline option is active when the Asian option is selected in the Text properties context menu. This setting specifies the primary baseline for the text. When the Asian options in the panel context menu are selected, the Alignment Baseline option allows you to specify different baselines for the text and images within the paragraph, which changes how images will be aligned with the text.
Ligatures are specific pairs of characters, such as the Greek Æ combined character, which can be controlled when working with certain languages and fonts. The Ligature value can be set to Minimum, Common, Uncommon, and Exotic. Each of these values determines the complexity of the ligature used in the font, when available. This option can be helpful to create text that appears to look handwritten or to display classic typography effects by controlling the ligature space between characters.
When you create a text area paragraph, the line breaks you add cause the next set of text characters to wrap to another line (by pressing Enter or Return when typing). However, you can fine-tune this behavior by setting a specific line break value, which controls how the words will wrap at the end of the lines. Each line break option is described below:
The differences between each break value and how applying the option affects the lines of text is illustrated in Figure 6.
The Baseline Shift option changes the baseline value of the text lines. This can be varied from –720 to 720. You can choose to set the measuring value as either a point or a percentage. You can also select text and set it as either superscript or subscript.
The options in the Property inspector for TLF text are similar to those provided when working with Classic Text. There are two new features that allow you to choose to add text justification between words or between letters using the Text Justify options (see Figure 7). TLF text also includes the ability to change the direction from left to right to right to left. To see how this works, set the text option to Right to Left in either the Text section of the Flash Preferences dialog box or by choosing the option in the Property inspector.
If you've enabled the Asian option in the Property inspector while a text element is selected, you'll see some additional Advanced Paragraph options (see Figure 8). These settings are related to paragraphs containing Chinese characters and text formatting such as the Mojikumi, which controls how the paragraph will be justified, and the Kinsoku Shori Type, which specifies options for handling Japanese Kinsoku characters displayed in Flash projects.
You can also apply the leading model, which includes a combination of leading bases and directions to format Asian text characters.
One of the most exciting new features in the TLF text engine is the ability to format text into columns and link multiple text areas together. You can use the options provided in the Container and Flow section to apply specific formatting to text in columns and control how the paragraphs flow. Since this capability is new to Flash, it's important to understand how the Container and Flow options affect text formatted into columns. The available options are shown below (see Figure 9).
If the selected text element is inside a point text container, there are two types available (Single line or Multiline no wrap). However, if the selected text is an area text container, three options are provided in the Behavior menu:
If the selected TLF Text Type is set to Editable, a fourth option is added; editable TLF text includes the additional Password option in the Behavior menu:
Below the Behavior menu, you can set the maximum number of characters allowed (if the text area is set to be editable at runtime). When setting the Max chars values, the maximum value you can add is 65535. Setting the maximum number of characters is useful when you want to restrict the editing capabilities of the user at runtime.
To the right of the Max chars value, you can set the alignment of the text in the text area. The options are: Align text lines to the top, middle, bottom or justified (distributed along the vertical space of the text area), as shown in Figure 10.
The Align settings in the Container and Flow section allow you to arrange how the lines are distributed within the selected text area.
The Columns value formats the same text area to produce multiple columns. The text flow displays a certain amount of space between each column; you can adjust this by editing the width of the column gutter value (see Figure 11).
Another useful feature new to Flash is the ability to use TLF text to connect multiple text areas and create links between them to flow the text across multiple text areas. This feature is different from creating multiple columns in one text area because it offers more freedom to position the columns and arrange them around other objects on the Stage. When using multiple linked text areas, the columns of text do not have to be positioned beside each other, as is required when working with columns in a single text area.
Each text area includes two small squares on the right and left side; you can connect two text areas by clicking on the first text area square and then clicking immediately on the next text area you want to link. This operation allows the text to flow between the two text area containers (see Figure 12).
The padding values enable you to set the space on the right, left, top, and bottom of the text element. You can link all the values to use the same padding or remove the linkage to give each side specific padding values. Along with these settings, the new TLF text functionality includes the option to set a background color and outline for the text area. These settings are applied using the Container and Flow section of the Property inspector.
If desired, you can set a specific offset for the first line of text, by controlling the 1st Line Offset value. Specify the offset value as one of the following:
In the examples provided above, you've seen how the new TLF engine provides new capabilities when formatting text elements. In the next section of this article, you'll learn how to use some of these features to format the layout of a magazine page.
But before moving on to those instructions, follow along with the steps below to see how to link multiple text areas:
In this section, you'll follow a series of steps using the provided sample files to work with the TLF text options. For the purposes of this sample project, I used only text options to format the text, text color, background color and outline. The new text engine not only makes it easy to format text content in your Flash file, it also saves time compared to working with Classic Text. The sample project uses Times New Roman font but feel free to experiment using the font and font sizes that you prefer to use as you follow along.
You'll begin by creating the header text of a magazine layout page. The finished versions are shown in the sample files named magazine_layout.fla and magazine_layout_vertical.fla, if you want to open them to copy the assets or review the completed files for clarification. Follow these steps:
The text content below the header image will contain two columns. Follow the steps below to add multiple columns of text within the same text field:
Next, you'll create the sidebar content on the right side of the page. The sidebar text content will stand out because you'll set a background color and a border to the top text area container in the sidebar. Follow these steps:
Focus your attention to the bottom of the page. In the next section, you'll create a title area similar to the main header you created at the top of the page. Then you'll add three images and create four new text areas under the new header, surrounding the images. Finally, you'll populate the text areas and link them to wrap the text. Follow the steps below to arrange the text areas so that it wraps around the images:
On the bottom right side of the page, you'll create another text area using different formatting (to highlight some different text content, such as pulled quotes from the main page content article). Follow these steps:
Finally, you'll experiment with adjusting the text orientation to change the top headline text from horizontal to vertical orientation. Follow these steps:
Note: To see how this change looks in the completed file, open and review the magazine_layout_vertical.fla file in the sample files folder.
The small sample project described in this section uses concepts and options available when working with the new TLF text engine. Hopefully this quick example has illustrated how you can use the Text Layout Format text capabilities when formatting text elements in your own Flash projects.
As you've seen in this article, the Text Layout Engine includes controls that provide more precise text formatting in Flash projects than ever before. These new features can be used when designing and formatting text in the Flash authoring environment as described here, as well as with ActionScript 3 code. Both methods result in text manipulation that is easier and faster than working with Classic Text.
To learn more advanced features when using TLF text in your projects, check out the following articles: