Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Working with Text and Strings > About font rendering and anti-alias text > Setting anti-alias with ActionScript

Setting anti-alias with ActionScript

Flash offers two types of anti-aliasing: normal and advanced. 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 and later, 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 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 have a lot of small text.

To use ActionScript to set anti-alias text, see the following example.

To use advanced anti-aliasing:

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

   1. Select the Arial font from the Font drop-down menu.
   2. Make sure that the Bold and Italic options are not selected.
   3. Set the size to 10 pixels.
   4. Enter the font name of Arial-10 (embedded).
   5. 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, enter 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;
   
   this.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 preceding code is separated 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 embedded in a previous step.

   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 options, 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 high quality at small sizes. It is best used with applications that have a lot of small text. Adobe does not recommend advanced anti-aliasing for fonts larger than 48 points.

For information on formatting anti-alias text, see Using a grid fit type and About formatting anti-alias text.

For a sample source file, aliasing.fla, that shows how to apply and manipulate anti-aliasing text in an application, see the Flash Sample page at www.adobe.com/go/learn_fl_samples. Download and decompress the Samples zip file and navigate to the ActionScript2.0/Advanced Anti-Aliasing folder to access this sample. You use the advanced anti-aliasing technology to create small text that's highly legible. This sample also demonstrates how text fields can scroll quickly and smoothly when you use the cacheAsBitmap property.

Flash CS3