To understand how big a deal CoolType is, you have to go back into the gray mists of time to around 1984 and the introduction of the Macintosh. For many of you, 1984 is a murky year in your childhood. For some of us, especially one of the authors, it was the year that graphic layout started its move from art boards, waxers, and X-Acto knives to the computer screen. Two companies—Apple and Adobe—made this possible. Apple supplied the computer and the LaserWriter printer, while Adobe supplied PostScript.

Up to that point, layout on a computer was interesting, but the problem was that stuff called "type." A letter would show up on the computer screen, but it would be blocky. There was essentially no way to differentiate a capital letter A set in Garamond from its Times counterpart. This was due to the way computers rendered on-screen type. Essentially, the letters were constructed in a grid of pixels, which gave them the rather blocky, pixelated look we have come to call "the jaggies." PostScript, developed by Adobe, somewhat solved this problem by creating a language—PostScript—that, in very simple terms, drew the letter over the pixels and gave designers what they wanted: Garamond A characters that actually looked like Garamond As on the screen. The fact that they looked even crisper when run through the LaserWriter was also a huge factor in moving the graphics industry to computers.

Still, designers spent a lot of time whining about on-screen resolution and font crispness. As the Web took hold and Flash took off, designers continued to notice the fonts they used didn't look quite right. Pixels were still being lit up to create letters, so they were subject to the lingering problems inherent in on-screen text.

As we have stated, the relatively poor readability of on-screen text compared to its paper counterpart has been a significant sticking point with designers almost from the word "Go." The source of the problem is low-resolution computer screens. While the resolution of the typical printer is often 600 dots per inch (dpi) or more, the resolution of the average laptop, PDA device, or desktop screen is only 72 (Macintosh) or 96 (PC) dpi. This means that type that looks crisp and smooth on paper appears coarse and jagged on the screen.

To combat the jaggies, traditional grayscale font anti-aliasing (also called font smoothing) buffs out the corners in text by filling in the edges of bitmapped characters with various shades of gray pixels. This can make text appear blurry at small point sizes. Also, a lot of the designers' work was in color, and adding fuzzy gray pixels around colorful letters wasn't a great solution. Macromedia attempted to address this issue when it introduced a number of anti-aliasing features into Flash in 2004. Though these features provided a huge improvement, Flash designers were not satisfied, because their text still didn't look "quite right." They looked at the introduction of CoolType in Acrobat in 2000 and asked, "Uh, what about us?"

What CoolType does is to create clearer, crisper type using a font-rendering technique Adobe calls color anti-aliasing. This works on digital liquid crystal display (LCD) screens such as those in laptops, handheld devices, and flat-panel desktop monitors. Unlike conventional anti-aliasing, which manipulates only whole pixels, CoolType controls the individual red, green, and blue subpixels on a digital LCD screen. The key word here is subpixels. The hundreds of thousands of squares on the screen, which are the pixels, are actually further subdivided into even more squares. These are the subpixels, which are something like quarks in the realm of the formerly indivisible atom.

According to Adobe, by adjusting the intensity of the subpixels independently, the strokes of a character can be aligned on any subpixel boundary, thus achieving sharper, more precise smoothing along the edges of characters. Using this subpixel technique, CoolType can dramatically increase horizontal resolution for improved readability. The key word in that last sentence is horizontal. We read text across the page, which means the characters are even sharper, which, in turn, makes them even more legible and readable. Figure 6-7, taken from the Adobe CoolType web page, shows how subpixels reinterpret character display.

Figure 6.7. On the left is regular pixelated type; on the right is the same character using subpixels.

The following properties are in the Character category:

To see a static text field in action, start a new Flash document, select the Text tool, and click somewhere on the stage. Type your name. Select the second letter of your name by dragging the mouse from one side of the letter to the other. Change the font. Select the third letter, and change the font again.

Notice that the text field automatically widens as you type. The indicator for this is the little white circle in the upper-right corner of the text field, as you can see in Figure 6-11. If you keep typing, the text field will eventually extend past the stage and off into the wild blue yonder. To set a specific width, which causes text to wrap, hover over that white circle until you see the double-headed arrow cursor. Click and drag to the desired width. The white circle turns into a square. To switch back to auto-widen mode, double-click that square.

Figure 6.11. A white dot tells you the text field will widen as you type.

Note that the height property is disabled, because the height of static text fields is always determined by the amount of text they contain; that is, when width is taken out of its default auto-widen mode. Setting width in the Property inspector is equivalent to dragging the white circle.

The following properties are in the Paragraph category:

In the Options section, the Link and Target settings allow you to create hyperlinks inside text fields. Either select the whole text or use the mouse to select individual glyphs or words, and then type a URL into the Link field (such as http://www.VisitMe.com/). Entering anything at all into the Link field activates the Target field below it, which gives you the same four choices available to HTML anchor tags (<a>):

Hyperlinks in the Link field do not change the appearance of the text in any way, even though a dashed line appears under hyperlinked text during authoring. This differs from HTML hyperlinks, which are traditionally differentiated by an underline and a change in color. Although the Property inspector supports bold and italic, there is no way to add underlines to text without ActionScript (see the section "HTML formatting" later in this chapter). Flash hyperlinks are primarily meant for loading HTML documents, which may or may not contain additional Flash content. As a general rule, this is not the place to load external SWFs into the current movie, though it is possible to trigger ActionScript with the Link field. More on that in the section "Hyperlinks and Flash text" later on in the chapter.

Now that you know what all of that stuff in the Property inspector does, let's take that knowledge for a test drive.

In this first exercise, you will discover how to apply a filter to text and how to tween text to which a filter has been applied.

As you can see in Figure 6-12, you can apply a filter to text.

Figure 6.12. Text, buttons, and movieclips are the only Flash objects to which filters can be applied.

In Chapter 3, you learned that filters can be applied to both text and movieclips. If you need to tween a filter effect, you can do it in the Motion Editor panel.

In this next exercise, you will "explode" some text. Along the way, you are going to learn how to convert text to letters and then to art. You are also going to learn a handy way of putting the individual pieces of a grouped object into motion.

One of the themes that percolates through this book is this: let the software do the work. In this case, you have a number of letters that will need to fly off of the screen. Entering each one manually, and then spending time trying to ensure they are perfectly aligned with each other, is both tedious and a waste of billable hours. There is an easier way.

The command you just issued by keyboard shortcut—Ctrl+B (Cmd+B)—is Break Apart (Modify

Figure 6.14. Break text apart if you want to animate or manipulate the individual letters.

Now that the text has been broken apart into individual letters, let's get each letter into a layer so it can be animated.

If you didn't add this action, your movie would consist of your name blinking, not exploding, on the stage. The action stops the playhead dead in frame 1 of the main timeline, but allows the movieclip to play. Because your animation is nested inside a movieclip, you can easily reposition the group of exploding letters in one shot.

So far, you have discovered that static text can be manipulated and can have filters applied. You have also seen how to turn the text into individual graphics and put them in motion. In this next exercise, you are going to explore how text can be manipulated using a Blend mode and how to change its color. These are useful skills to know if you need to tween color changes or have the text interact with the content under it in the Layers panel.

This dialog box allows you to adjust both the tint and the alpha values of the selected object. The controls on the left reduce the tint and alpha values for each of the RGB colors. The controls on the right decrease or increase the color and alpha values by a constant amount. When you change a value, the current color values of the selection are multiplied by the numbers on the left, and then added to the values on the right.

The text changes color from the neutral gray to green, which is understandable, considering green at 70% is now the predominant color.

The color changes to a purple because you have increased the red and blue values and reduced the green value.

Now that you have changed the color, let's make it interact with the color in the image behind it.

Let's start with some poetry.

Now, remember the discussion of classes from Chapter 4? Dynamic and input text fields are instances of the TextField class, which features a text property. In this line of ActionScript, we're referencing the TextField.text property by way of the poetry instance name. It's a bit like referring to Tom or David, who are instances of Human, by personal name.

But what about line breaks? You'll see how to add them in the next section.

Figure 6.23. ActionScript can be used to add text to a dynamic text field.

ActionScript supports a widespread convention of escape sequences, which provide an encoded way to manipulate text or to represent special characters. Escape sequences can also be used to tell ActionScript to accept a character at face value, rather than interpret it as a part of the programming. Here's a practical example.

As you've seen, the TextField.text property accepts a string value. Strings are denoted by a pair of double or single quotes. The quotation mark character (") tells ActionScript when a string begins and when it ends. But what if your string contains quotation marks, such as dialogue? You need to either nest your quotes carefully or escape them. This sentence gets it wrong:

var shortStory:String = "Mary, said Fred. Mary, I'm pregnant.";

Since the preceding is a conversation, Fred's words should actually be in quotes. To accommodate double quotes in this string, you could wrap the whole thing in single quotes, like this:

var shortStory:String = '"Mary," said Fred. "Mary, I'm pregnant."';

But whoops, there's still a problem. Can you spot it? The contraction I'm itself contains a single quote! That means ActionScript considers the string ended immediately after the capital I, which makes the "m pregnant" fragment programmatic gibberish. This type of problem is not rare, and it's easy to overlook. To avoid these situations, we prefer to escape quotation marks rather than to nest them. In the following revision, the string is once again denoted by double quotes, and the interior double quotes are escaped:

var shortStory:String = ""Mary," said Fred. "Mary, I'm pregnant."";

Note that only the double quotes need to be escaped in this example. If the string had been wrapped in single quotes, only the apostrophe in I'm would have to be escaped. How? Just put a slash in front of it.

A handful of characters actually perform a task when you escape them, such as for a newline and for a tab. Let's take a look at both.

To update the ActionScript used in the previous example to add a line break, you could put everything within one line, like this:

poetry.text = "Roses are red,
Violets are blue.";

Alternatively, you could break the ActionScript over as many lines in the Actions panel as you like, which is often easier on the eyes. In this case, you will want to use the TextField.appendText() method, which appends text to existing content, rather than replacing it.

poetry.text = "Roses are red,
";
poetry.appendText("Violets are blue.
");
poetry.appendText("There's more to learn
");
poetry.appendText("Before we're through.");

You may alternately use the addition assignment operator (+=) to build a string first, and then assign it to the text field's text property:

var poem:String = "Roses are red,
";
poem += "Violets are blue.
";
poem += "There's more to learn
";
poem += "Before we're through.";
poetry.text = poem;

What about those tabs we mentioned earlier? The following ActionScript pushes each text field line farther to the right:

var poem:String = "Roses are red,
";
poem += "	Violets are blue.
";
poem += "		There's more to learn
";
poem += "			Before we're through.";
poetry.text = poem;

Note that several tabs can be used in succession, which is also true for new lines.

Is it possible to set tab stops? Sure thing. For this, you'll need an instance of the TextFormat class. Set the TextFormat.tabStops property to an array of pixel values, and then apply the formatting object to your text field.

// First, the string
var poem:String = "Roses are red,
";
poem += "	Violets are blue.
";
poem += "		There's more to learn
";
poem += "			Before we're through.";

// Then, the formatting
var format:TextFormat = new TextFormat();
format.tabStops = new Array(20, 40, 60, 80);

// Finally, apply the string and the formatting
// to the text field
poetry.text = poem;
poetry.setTextFormat(format);

That puts four tab stops at 20-pixel intervals. Try something more extreme to prove that it really works (for example, new Array(100, 200, 300, 400), which might even bump some of the lines out of the text field).

While we're on the subject, the TextFormat class provides a whole lot more. For a full list of functionality, we invite you to consult the TextFormat class entry of the ActionScript 3.0 Language and Components Reference, but here are a few common properties you may want to set:

var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.size = "24";
format.color = 0x3355CC;
format.bold = true;
format.italic = true;
existingTextField.text = "Lorem ipsum dolor sit amet.";
existingTextField.setTextFormat(format);

The TextField.setTextFormat() method accepts two optional parameters after the first, and those dictate where to start and stop. Let's say you have an overall style in mind for the whole text field. Aside from that, you want to apply special formatting to two words and another set of formatting to a third word. Let's try it:

What's going on here? Think of the styling as a special brush—actually, three brushes. The first brush gives the text field an overall formatting of 12-point Verdana. Next, you switch to a brush that makes things blue and bold, and then finally red and italic. You set your brush down at position 0, where the first letter starts (see Figure 6-24), pull it across the first word, and then lift up at position 5, which is the beginning of the sixth character (the first space).

Figure 6.24. ActionScript can be used to selectively format a dynamic text field.

Want to create a text field completely with ActionScript? It's pretty straightforward. The TextField class is instantiated like any other class. In this case, the instance name becomes the variable you use to refer to the instance. As always, consult the TextField class entry of the ActionScript 3.0 Language and Components Reference to see the full set of properties. Here are a few in common use:

Let's try adding a text field with ActionScript:

What's that addChild() business at the end? Until that final line, the previous ActionScript has gone to the effort of creating a TextField instance—and a TextFormat instance to style it—but hasn't actually displayed anything. ActionScript 3.0 introduces the concept of display lists, which gives you much more control over what actually gets displayed to the screen. By adding the benFranklinQuote object (the TextField instance) to the display list, you're effectively "lifting the curtain" to let the show begin.

First, let's use a static text field to hide and show the frog.

The first line of the code creates the listener, and tells Flash what to listen for (textEvent:LINK) and what to do (execute the function named linkHandler()) when it "hears" the event. The function checks to see which of the two hyperlinks was clicked. If it was the word Show and the event's text property is "show", then the frog movieclip has its visible property set to true, which means the frog movieclip appears. The else simply says if it isn't the word Show, then hide the frog movieclip by setting the movieclip's visible property to false.

Now that you know how to control events using static text, let's try it out using a dynamic text field.

The first line is the major difference between this and the previous example. The text field on the stage already has an instance name of changeTheFrog. The ActionScript line tells Flash to fill that particular text field with HTML text, and uses HTML tags instead of the Property inspector to add the text and enter the URL link.

Let's see how character embedding works:

The choices are pretty clear-cut. As a general rule thumb, we recommend you embed only the characters you're sure to need. There's no reason to use the All choice, for example, if Basic Latin will do.

If this text field requires only lowercase letters, choose the appropriate selection. To select more than one at the same time, hold down Ctrl (Cmd) while you click.

The Auto Fill button in the Character Embedding dialog box is pretty neat: it includes one of each character currently in the text field, without repeats.

If you change your mind and don't want to embed a character, click the Don't Embed button.

What happens if you fail to embed a character the text field ends up needing? That particular character won't show, even while the others do.

Remember the very first topic at the beginning of this chapter, about what actually constitutes a font? Stylistic variations, such as bold and italic, are counted as distinct. Embedding roman (or normal) font outlines for a given character set does not include the corresponding bold or italic fonts, even for the exact same characters. To prove this point, let's use another example.

Out of the four existing text fields, only the upper-left field shows any text (see Figure 6-32). Why? Because all four text fields are rotated, but only the upper-left field has its font outlines embedded. Even though the text field below it contains the same letters and features the same font family, the bottom field's particular variant is set to bold, while the upper-left field is set to normal. The fields to the right are interesting, because the one on the bottom is set to italic, so it makes sense that the text in that one doesn't show (no embedded fonts). But the upper-right field is set to normal, so why doesn't its text show? Again, because it doesn't have any embedded fonts. This tells you that it's not enough to have one text field embed font outlines; all text fields that need this feature must be told to use it.

Figure 6.32. Only one of the text blocks uses an embedded font.

Here's another interesting point. The upper-left text field is set to embed all lowercase letters. Meanwhile, the upper-right text field, which is composed of lowercase letters—just different ones—still doesn't show. Have lowercase font outlines been embedded, or haven't they? They have, but again, each text field that needs these outlines must make use of them.