Flash Reference Guide

It's quite likely you've had to use text in your applications at some point or another. A challenge that has dogged Flash since its inception has been text quality when type is small or displayed on a flat screen monitor. At larger font sizes, some of the problems that plagued Flash could be somewhat dismissed, but small font sizes got you every time.

For example, the following image shows a font displayed at 8 points that is almost illegible.

Figure 1

Macromedia has taken charge of this issue by introducing a new extension to the Text Object Class called Advanced Text Rendering. Advanced Text Rendering is licensed from Mitsubishi Electric Research Labs (MERL). MERL developed a technology called Saffron that brings type presentation to the best in class. Text rendering simply does not get any better.

This is an example of the same text, but with Advanced Text Rendering turned on.

Figure 2

Clearly, you can now read the text.

Saffron uses adaptively sample distance fields, or ADFs, to represent the outline of a glyph, or font. This is similar to Microsoft's ClearType initiative. Essentially, Saffron makes text easier to read through improved anti-aliasing. The end result is clear text at small sizes, whether you're looking at it on a Windows PC, Mac, or flat screen monitor.

Working With "Text" Class

Advanced Text Rendering is part of the text class you'll be using in ActionScript. By exposing the functionality of the text class, you can extend how your documents are presented. The text class, which was introduced with Flash MX 2004, has evolved extensively. You can learn more about it later in this Guide under the Text Layout section.

Before I jump into working with the new Advanced Text Rendering features, I want to run quickly through some text class fundamentals. First, the text class is an object and is treated exactly the same way as any other object in ActionScript. This means that before you can do anything with your text you need to declare a new text class object. Here's an example:

var my_format:TextFormat = new TextFormat();

Now you can create a dynamic text field.

this.createTextField("my_text1", this.getNextHighestDepth(), 10, 10, 650, 100);

The "createTextField" object places a text field, with name, size, and position on the stage. Following this, you can programmatically modify the newly created field. For example, the following code will add a string of text to your new text field:

my_text1.text = "This is some text."

The Advanced Text Rendering objects allow you to visually modify the presentation of the text. To do this with a new text field you must apply a TextFormat object. First, create a new TextFormat Ojbect with some default settings, like this:

var my_format:TextFormat = new TextFormat();
 my_format.font = "Arial";
 my_format.size = 12;

When you embed a font you must remember to add the font to the Library with a corresponding font name. Now, bind the new TextFormat to the TextField like this:

my_text1.setTextFormat(my_format);

By following these steps, you've created the following:

Figure 3

This may not look very exciting at the moment, but it gets better.

Working With Advanced Text Rendering

Advanced Text Rendering is, at its core, controlled with the antiAliasType property. The property has two values, which are Normal and Advanced. The Normal mode is the mode used for legacy type formatting in Flash. The Advanced mode is the new format.

Only when Advanced mode is turned on can you access the new advanced features.

You can test to see how the two different modes look next to each. The following ActionScript creates two text fields that are populated with a string of text. The first text field is traditional normal text and the second simply converts the text to advanced.

var my_format:TextFormat = new TextFormat();
my_format.font = "Arial";
my_format.size = 80;

this.createTextField("my_text1", this.getNextHighestDepth(), 10, 10, 650, 100);
my_text1.text = "Normal.";
my_text1.embedFonts = true;
my_text1.antiAliasType = "normal";
my_text1.setTextFormat(my_format);

this.createTextField("my_text2", this.getNextHighestDepth(), 10, 70, 650, 100);
my_text2.text = "Advanced.";
my_text2.embedFonts = true;
my_text2.antiAliasType = "advanced";
my_text2.setTextFormat(my_format);

I have blown up the font size so that you can see how this will appear visually on the screen. The difference is subtle at the moment. What you can see, however, is that the edges of the lower text field are softer than those of the upper field.

Figure 4

Controlling Text Presentation For Different Monitor Types

Advanced Text Rendering allows you to control text for specific monitor types. An LCD monitor, for example, benefits from enhanced font management. This is achieved through control over the horizontal and vertical lines of a glyph in a font.

The main property that controls how text appears for specific monitors is the gridFitType property. There are three settings: none, pixel, and subpixel.

As you might assume, assigning none turns off gridFitType property.

Setting the gridFitType property to "pixel" only works for left aligned text. You will now have strong horizontal and vertical lines. Generally, this makes text easier to read.

The "subpixel" level makes text easier to read on LCD monitors.

The following ActionScript can be used to demonstrate the different levels of functionality for gridFitType:

var my_format:TextFormat = new TextFormat();
 my_format.font = "Arial";
 my_format.size = 20;

 this.createTextField("my_text1", this.getNextHighestDepth(), 10, 10, 400, 100);
 my_text1.text = "This text has sharpness set to 400."
 my_text1.embedFonts = true;
 my_text1.antiAliasType = "advanced";
 my_text1.gridFitType = "pixel";
 my_text1.setTextFormat(my_format); 

 this.createTextField("my_text2", this.getNextHighestDepth(), 10, 40, 400, 100);
 my_text2.text = "This text has sharpness set to 0."
 my_text2.embedFonts = true;
 my_text2.antiAliasType = "advanced";
 my_text2.gridFitType = "subpixel";
 my_text2.setTextFormat(my_format); 

 this.createTextField("my_text3", this.getNextHighestDepth(), 10, 70, 400, 100);
 my_text3.text = "This text has sharpness set to -400."
 my_text3.embedFonts = true;
 my_text3.antiAliasType = "advanced";
 my_text3.setTextFormat(my_format);

Using The Sharpness Property

Sharpness is a property that allows you to control how much anti-alias is applied to the text. In the past, when you were working with text in Flash, you could only turn anti-alias on or off. There were no levels of control. With sharpness, you now have 800 levels of control from negative anti-alias through to positive anti-alias. The following image demonstrates three levels of anti-alias:

Figure 5

Sharpness levels can be controlled through ActionScript as shown here:

var my_format:TextFormat = new TextFormat();
 my_format.font = "Arial";
 my_format.size = 40;

 this.createTextField("my_text1", this.getNextHighestDepth(), 10, 10, 650, 100);
 my_text1.text = "This text has sharpness set to 400."
 my_text1.embedFonts = true;
 my_text1.antiAliasType = "advanced";
 my_text1.gridFitType = "pixel";
 my_text1.sharpness = 400;
 my_text1.setTextFormat(my_format); 

 this.createTextField("my_text2", this.getNextHighestDepth(), 10, 40, 650, 100);
 my_text2.text = "This text has sharpness set to 0."
 my_text2.embedFonts = true;
 my_text2.antiAliasType = "advanced";
 my_text2.gridFitType = "subpixel";
 my_text2.sharpness = 0;
 my_text2.setTextFormat(my_format); 

 this.createTextField("my_text3", this.getNextHighestDepth(), 10, 70, 650, 100);
 my_text3.text = "This text has sharpness set to -400."
 my_text3.embedFonts = true;
 my_text3.antiAliasType = "advanced";
 my_text3.sharpness = -400;
 my_text3.setTextFormat(my_format);

As you can see, the level of control for text sharpness has never been higher.

Using The Thickness Property

You may know Thickness, the new property in Advanced Text Rendering, as either boldness or leading. Essentially, all three terms mean the same thing—the thickness of the glyph in a font as it is presented on the screen.

The Thickness property has 400 levels of control. The following image demonstrates text thickness at levels 200, 0, and -200.

Figure 6

As with the Sharpness property, you can control the thickness of text with ActionScript. Here is the ActionScript used to create the above example:

var my_format:TextFormat = new TextFormat();
 my_format.font = "Arial";
 my_format.size = 40;

 this.createTextField("my_text1", this.getNextHighestDepth(), 10, 10, 650, 100);
 my_text1.text = "This text has thickness set to 200."
 my_text1.embedFonts = true;
 my_text1.antiAliasType = "advanced";
 my_text1.gridFitType = "pixel";
 my_text1.thickness = 200;
 my_text1.setTextFormat(my_format); 

 this.createTextField("my_text2", this.getNextHighestDepth(), 10, 40, 650, 100);
 my_text2.text = "This text has thickness set to 0."
 my_text2.embedFonts = true;
 my_text2.antiAliasType = "advanced";
 my_text2.gridFitType = "subpixel";
 my_text2.thickness = 0;
 my_text2.setTextFormat(my_format); 

 this.createTextField("my_text3", this.getNextHighestDepth(), 10, 70, 650, 100);
 my_text3.text = "This text has thickness set to -200."
 my_text3.embedFonts = true;
 my_text3.antiAliasType = "advanced";
 my_text3.thickness = -200;
 my_text3.setTextFormat(my_format);

Building an Application: How It All Works Together

All of these samples are good, but it's easier to see how this works in practice. The following example demonstrates how you can change font formatting dynamically within a Flash application.

Figure 7

You will need to add the following Components to the stage.

When you have the Components on the stage you can add the following ActionScript:

_root.createTextField("sampleTextBox",100 , 18, 78, 380, 380);
_root.sampleTextBox.background=true;
_root.sampleTextBox.border=false ;
_root.sampleTextBox.backgroundColor=0xFFFFFF;//white
_root.sampleTextBox.borderColor=0x000000;//black
_root.sampleTextBox.multiline=true;
_root.sampleTextBox.wordWrap= true;
_root.sampleTextBox.embedFonts = true;
_root.sampleTextBox.antiAliasType = "advanced";
_root.sampleTextBox.gridFitType = "subpixel";
myTextFormat1 = new TextFormat();
myTextFormat1.font = "Arial";
myTextFormat1.size = fontSizeFeedback.text = 32;
myTextFormat1.color = 0x000000; //black

_root.sampleTextBox.setNewTextFormat(myTextFormat1);
sampleTextCopy = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio ";
sampleTextCopy += sampleTextCopy;
sampleTextCopy += sampleTextCopy;
_root.sampleTextBox.text = sampleTextCopy;
sampleTextBox.antiAliasType = 1;
sampleTextBox.thickness = thicknessFeedback.text = 0;
sampleTextBox.sharpness = sharpnessFeedback.text = 0;

sampleFonts = ["Arial", "Arial Black", "Arial Italic", "Century Gothic", "Comic Sans MS", "Courier New", "Georgia", "Georgia Italic", "Helvetica", "Impact", "Times New Roman", "Times New Roman Italic", "Trebuchet MS", "Verdana", "Burweed ICG"];

/********************************************/
customTable = new Array();
entry = {  fontSize: 16.0,
         insideCutoff: 1, // absolute filter value
         outsideCutoff: -1 // absolute filter value
       };

customTable.push(entry);

entry = {  fontSize: 32.0,
      insideCutoff: 0.8, // absolute filter value
      outsideCutoff: -0.8 // absolute filter value
   };

customTable.push(entry);

flash.text.TextRenderer.setAdvancedAntialiasingTable("Comic Sans MS", "none", "dark", customTable);

/*********************************************/

// initialize the font combobox
for (i = 0; i < sampleFonts.length; i++)
  sampleFont.addItem(sampleFonts[i]);

// sampleFont handler
function sampleFontHandler(eventObj){
  if (eventObj.type == "change") {
   myTextFormat1.font = sampleFont.text;
   _root.sampleTextBox.setNewTextFormat(myTextFormat1);
   _root.sampleTextBox.text = sampleTextCopy;
  }
}
sampleFont.addEventListener("change", sampleFontHandler);


function fontNSHandler(eventObj){
  if (eventObj.type == "change") {
   myTextFormat1.size = fontSizeNS.value;
   fontSizeFeedback.text = fontSizeNS.value;
   _root.sampleTextBox.setNewTextFormat(myTextFormat1);
   _root.sampleTextBox.text = sampleTextCopy;
  }
}
fontSizeNS.addEventListener("change", fontNSHandler);

function antiAliasCheckboxHandler(eventObj){

 if (eventObj.type == "click"){
 if (antiAliasCheckbox.selected)
  {
   sampleTextBox.antiAliasType = "advanced"; // use Saffron
  }
  else
  {
   sampleTextBox.antiAliasType = "normal"; // use old Flash legacy text rendering
  }
 }
}
antiAliasCheckbox.addEventListener("click", antiAliasCheckboxHandler);

function subPixelGridFitCheckboxHandler(eventObj){

 if (eventObj.type == "click"){
 if (subPixelGridFitCheckbox.selected)
  {
   sampleTextBox.gridFitType = "subpixel"; // 2 is subPixelGridFitType, 1 is reserved for future use...
  }
  else
  {
   sampleTextBox.gridFitType = "pixel"; // off
  }
 }
}
subPixelGridFitCheckbox.addEventListener("click", subPixelGridFitCheckboxHandler);

function thicknessNSHandler(eventObj){
  if (eventObj.type == "change") {
   sampleTextBox.thickness = thicknessNS.value;
  }
}
thicknessNS.addEventListener("change", thicknessNSHandler);


function sharpnessNSHandler(eventObj){
  if (eventObj.type == "change") {
   sampleTextBox.sharpness = sharpnessNS.value;
  }
}
sharpnessNS.addEventListener("change", sharpnessNSHandler);

When you run this movie, you'll find that you can dynamically control the formatting of your font.

Summary

Controlling text has always been a challenge for Flash. With Advanced Text Formatting—new in Flash 8—you gain significant control over the presentation of your text.