Working with Text

Font rendering in Flash controls the way your text appears in a SWF file—that is, how it is rendered (or drawn) at runtime. Flash 8 offers two types of anti-aliasing: normal and advanced. The advanced font rendering technology used in Flash Player 8 is called FlashType. It uses advanced rendering technology to help 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 the Flash 8 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 lets you 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.

Note: When you open existing FLA files in Flash 8, your text is not automatically updated to the Anti-Alias for Readability option; you must select individual text fields and manually change the anti-aliasing settings if you want to take advantage of the FlashType rendering technology.

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 8. 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 text Property inspector sets the anti-alias option to its equivalent anti-aliasing option from Flash MX 2004. Text from older FLA files can be anything except for Anti-Alias for Readability and Custom Anti-Alias.

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

1. Create a new Flash document.
2. Select the Text tool and create new text fields on the Stage.
3. Click the Stage and type into 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 8, 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 used in version 7 and earlier.
• Advanced: Applies advanced anti-aliasing for improved text readability, which is available in Flash Player 8. Advanced anti-aliasing allows font faces to be rendered at very high quality at small sizes. It is best used with applications that have a lot of small text.

To apply advanced anti-aliasing using ActionScript:

1. Create a new Flash document and save it as antialiastype.fla.
2. Create two movie clips on the Stage and give them instances names of normal_mc and advanced_mc. You will use these movie clips to toggle between the two types of anti-aliasing: normal and advanced.

3. Open the Library panel and select New Font from the options menu in the upper right corner of the Library panel.

   The Font Symbol Properties dialog box opens, in which you can select a font to embed in the SWF file (including a font style and font size). You can also assign a font name that appears in the document’s library and in the Font drop-down menu in the Property inspector (if you have a text field selected on the Stage).

• Select the Arial font from the Font pop-up menu.
• Make sure that the Bold and Italic options are deselected.
• Set the size to 10 pixels.
• Enter the font name of Arial-10 (embedded).
• Click OK.
4. In the library, right-click the font symbol and select Linkage from the context menu. The Linkage Properties dialog box appears.
5. Select the Export for ActionScript and Export in First Frame options, type the linkage identifier Arial-10, and click OK.

6. Add the following ActionScript to Frame 1 of the main Timeline:

   var text_fmt:TextFormat = new TextFormat();
    text_fmt.font = "Arial-10"; 
   text_fmt.size = 10; 
   
    createTextField("my_txt", 10, 20, 20, 320, 240);
    my_txt.autoSize = "left"; 
   my_txt.embedFonts = true; 
   my_txt.selectable = false;
    my_txt.setNewTextFormat(text_fmt); 
   my_txt.multiline = true;
    my_txt.wordWrap = true;
   
     var lorem_lv:LoadVars = new LoadVars(); 
   lorem_lv.onData = function(src:String) {
        if (src != undefined) {
            my_txt.text = src;
        } else {
            my_txt.text = "unable to load text file.";
        }
    };
    lorem_lv.load("http://www.helpexamples.com/flash/lorem.txt");
   
     normal_mc.onRelease = function() {
        my_txt.antiAliasType = "normal";
    };
    advanced_mc.onRelease = function() {
        my_txt.antiAliasType = "advanced"; 
   }; 

   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 specified font, Arial-10, is the linkage identifier for the font symbol that you just embedded.

   The second block of code creates a new text field with the instance name my_txt. 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 block of code defines a LoadVars instance that populates the text field on the Stage with the contents of an external text file. After the document is fully loaded (but not parsed), the entire contents of the file are copied into the my_txt.text property so that they are displayed on the Stage.

   The fourth, and final, block of code defines onRelease event handlers for both the normal_mc movie clip and the advanced_mc movie clip. When the user clicks and releases either one of these buttons, the anti-alias type for the text field on the Stage changes.

7. Save your changes to the FLA file.
8. Select Control > Test Movie to test your Flash document.
9. Click the advanced_mc movie clip on the Stage.

Clicking the movie clip 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 have a lot of small text. Advanced anti-aliasing is not recommended for very large fonts (larger than 48 points).