Text plays a big part in many Flash projects, and you can put it there in a few ways. As explained on Text Questions, you can use the Text tool to create text fields and then alter the text's appearance using the Properties panel. But if you want your text to undergo changes over the course of an animation, you need the power of ActionScript. This chapter shows you how to use ActionScript to edit, format, and manipulate text fields as your animation runs. First, you need to know about font embedding, to ensure that your audience sees exactly the typefaces you specify. Then, to edit text on the fly, you'll learn how to add and remove characters from strings of text. The remainder of the chapter explains how to create text fields using ActionScript and how to format and animate text.
When you create your Flash masterpiece, you use the fonts installed on your computer. Dozens of fonts show up in the Properties→Character→Family list. Franklin Gothic or French Script, anyone? Whenever a program like Flash needs a font, it gets the font description from the file on your computer. Font files mathematically describe the outlines of each character. Flash uses this description to display type at all different sizes, just like resizing a vector image (Exporting Graphics from Flash).
When your project is finished and you publish it, you create an SWF file (8. Group elements). There are two ways that Flash handles text. It can look up the font description and then draw the image, or it can turn the text into a raster image. Raster images are fine, but because the text is converted to a graphic, you can't edit the words or characters when the animation is running on your audience's computer. It looks like text, but it's really just another graphic. If Flash stores the name of the font in the SWF file, then Flash Player looks up the font description and has everything it needs to draw those beautiful, complicated glyphs the make up a typeface. You can change the text on the fly using ActionScript, and your audience can even add and edit text if you let them. There's only one snag with using the font name in your Flash projects: If your audience's computer doesn't have the font file for Franklin Gothic or French Script, Flash Player uses another font in its place. In the best cases, the difference doesn't show. In the worst cases, your text looks strange and doesn't fit properly in the space you've provided.
It's not always possible to anticipate the fonts your audience will have. (Heck, these days it's hard to guess whether your audience will be watching on a computer, a telephone, an iPod, or a television screen.) So Flash provides a way to put the font descriptions in the SWF file. In Flash-speak, that's called embedding the font. With the font description in the animation file, Flash Player has everything it needs. Of course, embedding adds to the size of the SWF file, but at least your audience sees the animation as you designed it. In earlier versions of Flash, you had to remember to embed all the fonts you used in your animation. Starting with Flash Professional CS5, Flash automatically embeds any characters used in text fields. However, if you want to generate new text on the fly or give your audience the ability to add text, you need to embed additional font descriptions.
You need to embed fonts if:
You create new text objects, like text fields, on the fly using ActionScript.
You edit text with ActionScript using new characters, numerals or punctuation.
You give your audience a way to add or edit text with TLF editable, Classic dynamic or Classic input text.
You don't need to embed fonts if:
You place your text in fields at design time and use TLF read only, TLF selectable, or Classic static text.
All the text in your project is in text fields, and it won't change when the animation runs.
As mentioned earlier, embedding font descriptions in your SWF files adds to the file size—and you want to keep those SWF files as small as possible. Flash lets you embed only the necessary fonts and characters—no extras. You wouldn't want to embed Zapf Chancery, for example, if you're not using that font, and you don't need to embed character descriptions for Q, z, #, and | if they don't appear in your text. The Font Embedding dialog box (Figure 17-1) gives you the tools to embed just the right fonts and characters.
Figure 17-1. If you're new to Flash, the concept and process of embedding fonts can be a little mind-boggling. Fortunately, in Flash Professional CS5, you can do all these chores in one spot—the Font Embedding dialog box.
Follow these steps to embed a specific characters from a font in your SWF file:
With your Flash document open, choose Text→Font Embedding.
The Font Embedding dialog box opens.
Make sure the Options tab is selected, and then use the Family menu to select the Family and Style you want to embed.
The family is the common name you use for a font, like Times, Arial, or, as shown in Figure 17-1, Franklin Gothic Book. The style includes Regular, Bold, Italic, and other characteristics.
In the Name box, type a name for the font, like Franklin Gothic Book letters numbers punctuation.
Use a name that helps you identify the font description later. This name appears in the Library panel.
Use the "Character ranges" list to choose the specific characters you want to embed.
Here's where you control how much data goes into the SWF file. So if you need only lowercase letters, no numbers or punctuation, you can choose Lowercase [a..z] (27/27 glyphs). The more characters you add, the bigger your SWF gets. Glyph is another word for character; it also includes numerals and punctuation.
Optional: Add characters to the "Also include these characters" box.
Suppose you need to include the dollar sign, a comma, and periods, but don't need to include all 52 punctuation glyphs. Just type the necessary punctuation into this box, and don't select the punctuation option in the "Character ranges" list.
Optional for ActionScript: If you're going to use ActionScript with your text, click the ActionScript tab.
The ActionScript tab has three sections: Outline format, Linkage, and Sharing.
Optional for ActionScript: In the Linkage section, turn on Export for ActionScript.
The buttons and boxes in the ActionScript tab change from grayed-out to available. Flash automatically turns on "Export in frame 1", making your font available at the beginning of your animation.
Optional for ActionScript: In the Outline format section, choose either Classic (DF3) or TLF (DF4).
Your choice here must match the choices you make when you create text fields. If you happened to use the Palatino font in both Classic text fields and TLF text fields, you need to embed both fonts for both text engines.
Optional for ActionScript: In the Class box, type a name, like Franklin-GothicBook.
Like everything in ActionScript, your font description is an object based on a class. In this step, you provide the name for a new class, which is based on the flash.text.Font class.
Optional for ActionScript: Click the green checkmark button.
Flash displays a message: "A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file upon export." Translation: This is a new class that didn't previously exist, so Flash will create the necessary code to create the class when you publish your SWF file.
On the left in the Font area, click the + button.
Flash creates a font symbol and adds it to your Flash document. The name you provided in step 3 appears in the Font list in the Embedded Font dialog box, and the font symbol is shown in the Library.
There are a few technical details when you embed fonts in your SWF files. If the font's appearance isn't important to your project, consider using system fonts, as described in the box on Device Fonts: _sans, _serif, and _typewriter. Create separate font symbols for each style, such as Bold, Italic, and Regular. Remember, TLF text and Classic text are two different beasts where Flash and ActionScript are concerned. You can use both types of text in a single Flash document, but when you export text for ActionScript, you need to make sure it matches the text type.