Requirements

Prerequisite knowledge

This guide assumes you are familiar with the Flash Professional workspace and have a basic knowledge of working with FLA files. An intermediate knowledge of ActionScript is required for the sections of this learning guide that discuss how to create graphic effects programmatically.

User level

Intermediate

Font rendering in Adobe Flash Player controls the way your text appears in a SWF file—that is, how it is rendered (or drawn) at runtime. Adobe Flash Professional CS5 offers advanced anti-aliasing options available in ActionScript 2 and ActionScript 3, as well as the new Flash Text Engine (FTE) and Text Layout Framework (TLF), which give you far greater control over font rendering and layout.

Classic text, Text Layout Framework, and Flash Text Engine

Flash Professional CS5 includes two types of text fields: Classic text and Text Layout Framework (TLF) text. TLF text is a new type of text field powered by the Text Layout Framework.

The Text Layout Framework is an extensible ActionScript framework built on top of the ActionScript 3 Flash Text Engine. TLF contains a wide range of low-level formatting options not available in Classic text—including support for advanced typographical features, multicolumn and text flow features, East Asian languages, right-to-left languages, and bidirectional text.

Classic text is supported in all Flash Player versions. TLF text and text created with the Flash Text Engine are supported in Flash Player 10 and later. Use TLF and Flash Player 10 to support the full range of text formatting and localization features (see Table 1).

Table 1. Text feature support in Classic and TLF text

Feature

Classic text

TLF text

Ability to create text using Flash Professional

x

x

Ability to create text using ActionScript

x

x

Ability to use text in an animation

x

x

Ability to use text as a mask

x

 

Font embedding and anti-aliasing control

x

x

ActionScript text formatting

x

x

HTML text formatting

x

x

CSS text formatting

x

 

TLF markup support

 

x

Multicolumn support

 

x

Text flow across linked containers

 

x

Graphic effects directly applied to text

 

x

Control over Asian text attributes

 

x

Right-to-left text

 

x

Bidirectional text

 

x

Note: The Text Layout Framework does not directly support the use of CSS, but a custom implementation can be defined in ActionScript allowing CSS files to be loaded and parsed. For more information, see IFormatResolver and using CSS with TLF on the Text Layout Framework Team's blog, as well as the TLF text formatting using CSS ActionScript sample.

Working with the Text tool, Properties panel, and Font Embedding panel

You can use the Text tool to create Classic text or TLF text in Flash Professional CS5. Although TLF text is the default format, you can switch the text field type using the Properties panel (see Figure 1).

Use the Properties panel to format the text fields in your FLA file and to update older FLA files containing Classic text to TLF format.

For more information on working with TLF text field attributes, see the Working with Text Layout Framework (TLF) text section of the Flash Professional online help and the TLF text section in the Flash glossary.

In addition to creating and formatting text with the Text tool and Properties panel, you can manage embedded fonts using the Font Embedding panel (see Figure 2).

You can launch the Font Embedding panel from the Text menu or from the Embed button available in the Properties panel when a text field is selected. Use the Font Embedding panel to easily manage Classic text and TLF font outlines and character ranges embedded in the SWF file. You can also use the features under the ActionScript tab to set up the font for dynamic use at runtime.

For more information on font embedding, see the Embed fonts for consistent text appearance section of the Flash Professional online help.

Font rendering and anti-aliasing

Anti-aliasing results in smooth text so that the edges of characters displayed onscreen look less jagged—which can be particularly helpful when you want to display text at small sizes. Anti-aliasing is supported for static, dynamic, and input Classic text if the user has Flash Player 7 or later. Advanced anti-aliasing is available for Classic text in Flash Player 8 or later. Improved anti-aliasing support for TLF text is available in Flash Player 10 and later.

Flash Player 8 and later support two types of anti-aliasing for Classic text fields: normal and advanced. The advanced font rendering technology helps make Classic text appear legible and clear at small to regular font sizes. You can enable advanced anti-aliasing using either Flash Professional or ActionScript. The improved capabilities mean that embedded text appears at the same level of quality as device text, and fonts appear the same on different platforms.

Rendering options for Classic text

There are five different font rendering options available for Classic text in Flash Professional CS5 (see Figure 3).

To choose an option, select the text field and open the Properties panel. Select an option from the Font rendering method pop-up menu:

  • Use device fonts: This option produces a smaller SWF file size. The option renders using fonts that are currently installed on the end-user's computer.
  • Bitmap text [no anti-alias]: This option produces sharp text edges without anti-aliasing. It produces a larger SWF file size because font outlines are included in the SWF file.
  • Anti-alias for animation: This option produces anti-aliased text that animates smoothly. The text also animates faster in some situations because alignment and anti-aliasing are not applied while the text animates. You will not see a performance improvement when you use big fonts with lots of letters or scaled fonts. This option produces a larger SWF file size because font outlines are included in the SWF file.
  • Anti-alias for readability: The advanced anti-aliasing engine is used for this option. This option produces the most legible text. It produces the largest SWF file size because it includes font outlines and special anti-aliasing information.
  • Custom anti-alias: This option is the same as Anti-alias for readability except that you can visually manipulate the anti-aliasing parameters to produce a specific appearance. This option is useful to produce the best possible appearance for new or uncommon fonts.

Note: When Classic text is animated, the player turns off advanced anti-aliasing to improve the appearance of your text while it's moving. After the animation is complete, anti-aliasing is turned back on. Subpixel rendering is also disabled for fields with advanced anti-aliasing when they are cached as bitmaps, have a filter applied to them, or are drawn into a BitmapData object.

For more information about Classic text and anti-aliasing, see the Classic text anti-aliasing section of the Flash Professional online help. Also be sure to check out the Classic text and anti-aliasing sections of the Flash glossary.

Flash Player 10 and later support normal and advanced anti-aliasing for TLF text fields as well. The Flash Text Engine uses the CFF rendering mode and the cffHinting option to produce print-quality text for the web. The Text Layout Framework exposes these features in a way that's consistent with Classic text fields.

Rendering options for TLF text

There are three font rendering options available for TLF text in Flash Professional CS5 (see Figure 4).

To choose an option, select the text field and open the Properties panel. Select an option from the Font rendering method pop-up menu:

  • Use device fonts: This option produces a smaller SWF file size. The option renders using fonts that are currently installed on the end-user's computer.
  • Readability: The advanced anti-aliasing engine is used for this option. This option offers the highest-quality text.
  • Animation: This option produces anti-aliased text that animates smoothly. The text also animates faster in some situations because alignment and anti-aliasing are not applied while the text animates.

For more information about TLF text anti-aliasing, see the Working with character styles section of the Flash Professional online help. Also be sure to check out the TLF text and anti-aliasing sections in the Flash glossary.

Working with text and ActionScript

You can apply advanced anti-alias settings and text formatting using ActionScript. Advanced anti-aliasing for Classic text is available in Flash Player 8 and later, and TLF text in Flash Player 10 and later. To use the feature in ActionScript, you have to embed the font in the Library and set the text field's embedFonts property to true.

To set values for the antiAliasType property, use the following string values:

  • normal: Applies the regular text anti-aliasing. This matches the type of anti-aliasing that Flash Player uses in version 7 and earlier.
  • advanced: Applies advanced anti-aliasing for improved text readability. Advanced anti-aliasing allows font faces to be rendered at a very high quality at small sizes. It is best used with applications that include a great deal of small text.

Creating a Classic text field

You can create a Classic text field using the TextField class in ActionScript 3. The following sample walks you through the basic steps.

To create a Classic text field with advanced anti-aliasing at runtime:

  1. Create a new ActionScript 3 FLA file and name it classic_text_as.fla.
  2. Open the Font Embedding panel (Text > Font Embedding) and click the Add new font button (plus icon) to add a new embedded font.
  3. Set the following options for the new font:
  • Name: ArialFont
  • Family: Arial
  • Style: Regular
  • Character range: Basic Latin
  1. Click the ActionScript tab and select the Export for ActionScript option. Make sure that the Classic (DF3) option is selected.
  2. Click OK to create the embedded font. Notice that a corresponding Font symbol appears in the library.
  3. Rename Layer 1 to actions.
  4. Select Frame 1 of the actions layer and open the Actions panel (Window > Actions).
  5. Copy and paste the following code in the Script window of the Actions panel:
import flash.text.*; // Create the field's format var format:TextFormat = new TextFormat(); format.color = 0x336699; format.size = 10; format.font = "Arial"; // Create the text field var myText:TextField = new TextField(); myText.autoSize = TextFieldAutoSize.LEFT; myText.antiAliasType = AntiAliasType.ADVANCED; myText.selectable = false; myText.embedFonts = true; myText.text = "Hello World"; myText.setTextFormat(format); myText.x = (stage.stageWidth - myText.textWidth) / 2; myText.y = (stage.stageHeight - myText.textHeight) / 2; myText.addEventListener(MouseEvent.CLICK, clickHandler); addChild(myText); // Toggle the anti-alias mode when the text is clicked on function clickHandler(event:Event):void { if( myText.antiAliasType == AntiAliasType.NORMAL ){ myText.antiAliasType = AntiAliasType.ADVANCED; }else{ myText.antiAliasType = AntiAliasType.NORMAL; } }
  1. Take a moment to review the code. The TextFormat object is used to define the format for the text field. Then a new TextField instance is created, followed by an event handler function setup to respond to a click on the text field.
  2. Run the Test Movie (Control > Test Movie) command to see the text. Notice that when you click the text, the anti-aliasing option changes from advanced to normal showing the visual difference between the two settings.
  3. Save the file.

For more information on the TextField programming interface, see the sections on TextField and TextFormat classes in the ActionScript 3 Reference for the Flash Platform.

Creating a TLF text field

You can create a TLF text field using the TLFTextField class in ActionScript 3. The following sample will walk you through the basic steps.

To create a TLF text field with advanced anti-aliasing at runtime:

  1. Create a new ActionScript 3 FLA file and name it tlf_text_as.fla.
  2. Embed the Arial font in the FLA (see Steps 2–5 in the previous section). This time, be sure to select the TLF (DF4) option under the ActionScript tab.
  3. Rename Layer 1 to actions.
  4. Select Frame 1 of the actions layer and open the Actions panel (Window > Actions).
  5. Copy and paste the following code in the Script window of the Actions panel:
import fl.text.*; import fl.text.TLFTextField; // Create the field's format var format:TextFormat = new TextFormat(); format.color = 0x336699; format.size = 10; format.font = "Arial"; var myText:TLFTextField = new TLFTextField(); addChild(myText); myText.selectable = false; myText.antiAliasType = AntiAliasType.ADVANCED; myText.embedFonts = true; myText.text = "Hello World"; myText.setTextFormat(format); myText.width = 200 myText.height = 100; myText.x = (stage.stageWidth - myText.textWidth) / 2; myText.y = (stage.stageHeight - myText.textHeight) / 2; myText.addEventListener(MouseEvent.CLICK, clickHandler); // Toggle the anti-alias mode when the text is clicked on function clickHandler(event:Event):void { if( myText.antiAliasType == AntiAliasType.NORMAL ){ myText.antiAliasType = AntiAliasType.ADVANCED; }else{ myText.antiAliasType = AntiAliasType.NORMAL; } }
  1. Take a moment to review the code. Notice that the process for configuring a TLF text field is very similar to a Classic text field. It's designed this way so that older FLA files can be updated to TLF text without having to rewrite existing scripts. The difference is that the TLF text field instance can support a far wider range of formatting options. For example, you could use a TextLayoutFormat object to define support for different languages, or switch the direction of the text to right-to-left using the direction property.
  2. Run the Test Movie (Control > Test Movie) command to see the text.
  3. Save the file.

For more information on the TLFTextField programming interface, see the sections on TLFTextField and TextFormatLayout classes in the ActionScript 3 Reference for the Flash Platform.

Working with text and graphic effects

You can apply graphic effects to text. TLF text fields support blend modes, filters, 3D rotation, and color effects the same way movie clip instances do. In addition, TLF text fields can manipulate device fonts in the same way as embedded fonts. Classic text directly supports the use of filters but does not support the other range of effects and transformations possible with TLF text. If you need to apply effects to a Classic text field, nest it inside a movie clip symbol and make sure to embed the font in the text field. You can apply the transformation to the movie clip instance to achieve the desired effect.

You can also use text as a way to generate graphic effects. Animating text to create scrolling effects or letter-by-letter animations can be a great way to create logos, banners, or other types of visually rich content. Use text to mask other objects to create interesting graphic effects.

Note: TLF text fields cannot be used to mask other content. Use Classic text to create masks or break apart (Modify > Break Apart) TLF text fields so they appear as a vector shape.

For more information on using text as a mask, see the Masks section of the Graphic Effects Learning Guide as well as the masks entry in the Flash glossary.

Where to go from here

This section of the Graphic Effects Learning Guide provides an overview of text rendering and formatting topics. Check out the Using the Text Layout Framework section of the ActionScript 3 Developer's guide to learn more about programming with the Text Layout Framework.

Also check out the following resources for more information on TLF: