Page layouts in Flash with the Text Layout Framework

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:

1. Select the Text tool. In the Property inspector, check that the TLF text type is selected in the Text properties.
2. Click once on the Stage to create a point text area container.
3. Type a sentence or two of text in this area. Notice that the text line does not wrap until you press Enter (Windows) or Return (Mac) to create a new line of text.

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:

1. Select the Text tool. Again, ensure that you've selected the TLF text type from the Text properties in the Property inspector.
2. Click and drag the Text tool on Stage to create a text area container.
3. Type a sentence or two of text into the container. Notice that the text wraps to fit the length and height of the text area you've defined (see Figure 1).

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:

1. Read only: Creates read only text that is not editable; the user cannot select or edit the text displayed in the final SWF output.
2. Selectable: Creates text that the user can select, in order to copy the text in the published SWF file and paste it into another program. The text is not editable. This option is similar to the selectable text option available when using Classic text.
3. Editable: Creates text that the user can select and edit in the published SWF file. Use this option if you want users to type in the text field and rewrite the contents.

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.

Character settings

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).

Advanced character settings

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:

Case settings

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).

Digit Case and Width settings

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.

Dominant Baseline and Alignment Baseline options

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

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.

Line breaks

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:

• Auto: This is the default option; the words wraps based on the font's Unicode characters.
• All: This option handles all characters in the words as breaking lines; as a result, each character is displayed on its own separate line.
• Any: This option treats any of the characters at the end of a line as a break opportunity.
• No Break: This option does not consider any character as a line break opportunity. The line breaks after complete words only.

The differences between each break value and how applying the option affects the lines of text is illustrated in Figure 6.

Baseline Shift

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.

Paragraph settings

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.

Advanced paragraph settings

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.

Container and Flow options

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:

• Single line
• Multiline
• Multiline no wrap

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:

• Single Line
• Multiline
• Multiline no wrap
• Password

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:

1. The Pt option enables you to set a specific numeric value.
2. The Ascent option sets the distance between the first link and the top of the text areas, based on the tallest glyph in the selected font.
3. The Line height option sets the space between the first line and the top edge of the text area as the same as the distance set between the lines of text.

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:

1. Open the text_area.fla included in the sample files folder provided in the Requirements section of this article. This file contains an image that will be used to wrap the text content around it.
2. Create four text areas around the image, as shown in Figure 13.
3. Click the right square in the left text area and then click the left square in the second (top center) text area to link two text areas together.
4. Repeat Step 3 to link the top center text area to the bottom center text area, and the bottom center text area to the right text area.
5. Type or copy more text paragraphs in the first text area and notice how the text flows to the rest of the linked text areas as it becomes longer (see Figure 13).

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:

1. Create a new ActionScript 3 file. Save the file inside the sample files folder that you downloaded previously. Name the file: magazine.fla. Set the Stage size to 550 x 700 pixels.
2. Use the Text tool to create a TLF text area at the top that spans across most of the page width, with just a small border on all sides. Type a page title (Lorem Ipsum) then set the text color to white using the Property inspector.
3. While the text area is selected, use the align center icon in the Paragraph section to align the text content to the middle of the text area.
4. In the Container and Flow section, set the vertical alignment of the text to middle by clicking the icon next to the option: Align text in the middle of the container.
5. Also in the Container and Flow section, set the container color of the text area to red (see Figure 14).

6. Next, add the large image to the left side of the page (the movie clip named big-image), as shown in Figure 15.
7. Repeat steps 1-2 to create the header text below the image. This time, draw the text area to match the width of the large image above it and add two lines of white placeholder text. Align the text to the left side of the text field and set the background color of the container to black. After making these changes, the image header will look like the example in Figure 15.

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:

1. Use the Text tool to create a TLF text area under the image header. As you drag it out on the Stage, match its width to the width of the black header below the image, to ensure it is big enough to hold multiple columns of text.
2. Type or copy and paste some placeholder text into the text field. If desired, copy the text from the magazine_layout.fla file. Use the Container and Flow section of the Property inspector to format the text into two columns.
3. Set the gutter space between columns to 15 px. After making these changes, your sample project should look similar to the example below (see Figure 15).

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:

1. Create a text area on the top, directly below the top header that follows along the right side that takes up about half of the height of the existing page elements.
2. Add some placeholder text to this new text area. Use the options in the Container and Flow section of the Property inspector to change the text top padding to 75px. Double-check that the linkage icon is not active, so that this padding setting only affects the top padding of the text area (and doesn't add padding to all sides).
3. Use the menu at the top of the Library panel to select the magazine_layout.fla file's library. Copy and insert the sidebar image (image01) in the empty area directly above the text content in the top sidebar.
4. Use the Container and Flow options to set the text area background color to light gray. Set the border color to a darker gray with a 1 pt width, as shown below.
5. Create another sidebar text area under the first one, to the right of the main page content. Copy the image02 movie clip and the placeholder text from the magazine_layout.fla file, and arrange the elements to make your sample project look similar to the example shown below (see Figure 16):

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:

1. Create a single, centered header with placeholder text below the column text, matching the width of the main page content. You can use Lorem Ipsum for the text again. This time, set the text color to black and keep the default background color (no color).
2. Position the three smaller images (image03, image04, and image 05) on the Stage as they appear in the magazine_layout.fla file.
3. Add four text areas in the empty spaces between the text elements.
4. Select the first text area, click the square on the left of the text border and then click on the right square of the next text area to link them. Repeat this process to link all of the text areas. While the text areas are selected, link lines are displayed between the text areas (see Figure 17).

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:

1. Create a new text area on the lower right side. Enter some placeholder text and set it to display with a larger font size, by updating the options in the Property inspector.
2. Use the options in the Character section of the Property inspector to set the Highlight color for the text to orange. This creates a background color for the text lines on the left side, rather than adding a background color for the entire container.
3. Change the Leading to 23px to adjust the space between the lines of text.
4. Press Control+Enter (Windows) or Command+Return (Mac) to preview the text format in the published SWF file (see Figure 18).

Finally, you'll experiment with adjusting the text orientation to change the top headline text from horizontal to vertical orientation. Follow these steps:

1. Set the Stage width to 600 pixels wide (to add more room to the right side).
2. Delete the existing top header text area (with the red background).
3. Create a new text area similar to the header text area, using the same white centered text with a red background container color. Except this time, you'll set the text area to display vertical text along the right side of the magazine page.
4. Select the new text area and change the text orientation to Vertical, using the menu located at the top of the Property inspector.
5. Press Control+Enter (Window) or Command+Return (Mac) to test the movie and preview the page layout in the SWF file (see Figure 19).

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:

• Formatting text for localized Flash projects
• Using the Text Layout Framework in Flash Professional CS5

You can also watch the video titled Creating text with the new Text Layout Framework. Also be sure to visit the Flash Developer Center to find more Flash articles and sample projects.