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. Flash CS4 offers the advanced anti-aliasing options available in ActionScript 2 and ActionScript 3, as well as the new Flash Text Engine (FTE), which gives developers far greater control over text rendering and layout.

This section describes how to work with anti-alias text controls in the TextField class and the new controls in the Flash Text Engine.

Requirements

To follow along with this learning guide, you will need to install the following software:

Flash CS4 Professional

• Try
• Buy

Prerequisite knowledge

This article 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.

Working with text anti-aliasing

Flash Player 8 and later offers two types of anti-aliasing: normal and advanced. The advanced font rendering technology helps make text appear legible and clear at small to regular font sizes, such as when you apply advanced anti-aliasing to your text fields. You can enable advanced anti-aliasing using either the Flash CS4 authoring tool 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.

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 text if the user has Flash Player 7 or later.

Advanced and custom anti-alias features support the following:

• Scaled and rotated text
• All fonts (plain, bold, or italic) up to a 255 point size
• File exporting to most formats (such as JPEG or GIF files)

Advanced and custom anti-alias features do not support the following:

• Flash Player 7 or earlier
• Skewed or flipped text
• Printing
• File exporting to the PNG file format

Note: When 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.

There are five different font rendering options available in Flash CS4. To choose an option, select the text field and open the Property inspector. Select an option from the Font rendering method pop-up menu:

• 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 offers the highest-quality text with 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.

When you open a FLA file created for use with Flash Player 7 or earlier, the Property inspector sets the anti-alias option to its equivalent anti-aliasing option from Flash MX 2004 to the file's text.

To use the Anti-alias for Readability or Custom Anti-Alias options with your text fields:

1. Create a new FLA file.
2. Select the Text tool and create new text fields on the Stage.
3. Type inside the text field to create text.
4. Select the text field to which you want to apply the Anti-Alias for Readability or Custom Anti-Alias option.
5. In the Property inspector, select Anti-Alias for Readability or Custom Anti-Alias from the Font Rendering Method pop-up menu.

Tip: Advanced anti-aliasing is not recommended for very large fonts (larger than 48 points).

You can also apply Anti-alias for Readability or Custom Anti-alias using ActionScript, which is essential when you need more control over the appearance, content, and formatting of your text fields. Advanced anti-aliasing is available only in Flash Player 8 and later, and can be used only if you embed the font in the library and have the text field's embedFonts property set to true. For Flash Player 9, the default setting for text fields created using ActionScript is normal.

To set values for the TextField.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, which is available in Flash Player 8 and later. Advanced anti-aliasing allows font faces to be rendered at very high quality at small sizes. It is best used with applications that include a great deal of small text.

To apply advanced anti-aliasing using ActionScript:

1. Create a new ActionScript 3 FLA file and save it as antialiastype.fla.
2. Somewhere off the Stage and out of view, create a new dynamic text field using the Text tool and set the font to Arial.
3. With the text field selected, click the Character Embedding button in the Property inspector and embed the Arial font set into the text field. This step embeds the font and makes it available to the following code in Step 4.
4. Add the following ActionScript to Frame 1 of the main Timeline:
   

   // 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.embedFonts = true;
   myText.autoSize = TextFieldAutoSize.LEFT;
   myText.antiAliasType = AntiAliasType.ADVANCED;
   myText.defaultTextFormat = format;
   myText.selectable = false;
   myText.mouseEnabled = true;
   myText.text = "Hello World";
   myText.addEventListener(MouseEvent.CLICK, clickHandler);
   addChild(myText);
   
   // Toggle the antialias 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;
      }
   }

   The previous code is split into four key areas. The first block of code creates a new TextFormat object, which specifies a font and font size to be used for a text field that will be created shortly.

   The second block of code creates a new text field with the instance name myText. In order for the font to be properly embedded, you must set embedFonts to true for the text field instance. The code also sets the text formatting for the new text field to the TextFormat object that you created earlier.

   The third, and final, block of code defines the click handler, which toggles the antiAliasType property between normal and advanced.

5. Save your changes to the FLA file.
6. Select Control > Test Movie to test your file.
7. Click the text field on the Stage.

Clicking the text field switches the anti-alias type from normal (the default) to advanced. When you are dealing with text fields with a smaller font size, setting the anti-aliasing to advanced can dramatically improve the readability of the text.

Tip: Advanced anti-aliasing allows font faces to be rendered at very high quality at small sizes. It is best used with applications that include a great deal of small text. Advanced anti-aliasing is not recommended for very large fonts (larger than 48 points).

Flash Player 10 includes the new Flash Text Engine (FTE) classes, which allow for far more complex text formatting operations including control over text metrics, formatting, and bidirectional justifications. The FTE classes also include improved support for multilingual applications, such as those that switch between Latin text and multibyte Asian text.

The following example shows how the justification can be precisely controlled in a simple text block. In this case, all lines in the text block are justified except the last line.

To apply precise text justification to a text block using the FTE classes:

1. Create a new ActionScript 3 FLA file and save it as justifiedtext.fla.
2. Add the following ActionScript to Frame 1 of the main Timeline:

   import  flash.text.engine.*; 
   import flash.display.Sprite; 
   var str:String =  "Lorem ipsum dolor sit amet, consectetur adipisicing elit, " + 
      "sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut " + 
      "enim ad minim veniam, quis  nostrud exercitation ullamco laboris nisi ut " + 
      "aliquip ex ea commodo  consequat."; 
   
   var  format:ElementFormat = new ElementFormat(); 
   var  textElement:TextElement = new TextElement(str, format);
   var  spaceJustifier:SpaceJustifier = new SpaceJustifier("en",  LineJustification.ALL_BUT_LAST);   
   var  textBlock:TextBlock = new TextBlock();
   
   textBlock.content =  textElement;
   textBlock.textJustifier  = spaceJustifier; 
   
   var textLine:TextLine  = textBlock.createTextLine(null, 150); 
   var yPos = 20; 
   while( textLine ) 
   { 
      addChild(textLine);
      yPos += textLine.textHeight + 2;
      textLine.x = 15; 
      textLine.y = yPos;
      textLine =  textBlock.createTextLine(textLine, 150);
   } 

   Notice that the SpaceJustifier class allows you to set the justification to all but the last line with an indicator that the font being justified is in the English language (en). The FTE gives you element-, line-, and block-level access to font rendering.

3. Save your changes to the FLA file.
4. Select Control > Test Movie to test your file.

Where to go from here

For more information on programming text fields, please see the Using the TextField class section of the Programming ActionScript 3.0 for Flash online documentation.

For more information on working with the new Flash Text Engine, please see the Using the Flash Text Engine section.

About the author