Shared Fonts in Flash MX

Before we can discuss the other two components in the text effects set, we must first talk about a new technology in Flash called shared fonts. Shared fonts are used through ActionScript, and you can think of them as analogous to embedding font outlines into a text field. During your time as a Flash developer, you have most likely encountered the problem of disappearing text. It happens in the authoring environment when you create a text field that is either the Dynamic or Input type. When you are using such a text field on the stage and you rotate the field, the text disappears. This is because you are using a device font, a font that is assumed to be on the viewer's computer. The limitation of device fonts is that the text field must be perfectly horizontal, or else the text will not render in the movie's SWF. Flash's help files tell you that the solution is to embed the font you want to use into the text field, which literally exports the font with the rest of the movie. Once you've done this, you can rotate and size the text field in any way you want since Flash can simply use the embedded font.

On the CD 

The Chapter 7 folder on the CD contains a file named Textfield_Testing.fla that demonstrates the need for embedding fonts. On the stage, I've created four input text fields with the Flash MX text components, two of which are rotated counterclockwise by 45 degrees (as shown in Figure 7.9). Also, the bottom two text fields have embedded fonts.

Figure 7.9: The stage in the Textfield_Testing.fla file. The bottom two text fields use an embedded font.

When you test this file, you see that the top-right text field does not render, as shown in Figure 7.10. The top-right field does not use an embedded font.

Figure 7.10: When the movie is published, one text field disappears.

Outside of disappearing text, the ability to embed a font is very important. If you are using an input text for users to enter their e-mail addresses, or something of that sort, you may want to use a custom font that users most likely do not have on their computers. If you were to use the text field without embedding the font, then the font would change to the default Arial font when a viewer used the file. However, by embedding the font, viewers can see the custom font even if they do not have it on their computers.

As you can see, the concept of font embedding is quite useful. With Flash MX's new commands that give greater control of text fields, there should be an analogous way of embedding fonts through ActionScript. This is where shared fonts come into play. A shared font is simply a library symbol representing a specific font on your computer. To export the font with the movie, you give the symbol a linkage name, and that name is used to embed a font into a dynamically created text field. We need to know how to dynamically embed fonts because the next two components must be able to rotate a text field.

Creating a Shared Font

Creating a shared font is very simple. Start up a new movie in Flash and open its library. Click the small white graphic in the top-right corner of the menu to open a drop-down menu, as shown in Figure 7.11. Then, click on New Font to create a shared font.

Figure 7.11: Open the library's menu to create a new shared font.

You use the dialog box that pops up to set the attributes of the font: symbol name, font name, and style. The symbol name is not crucially important because it is only the identifier that appears in the library, but you should try to use something descriptive. For the font name, use the drop-down menu, which lists every font on your computer. Set the style attributes to make the text either bold or italic, if you want. Click OK in the dialog box, right-click the newly created font symbol, and click Linkage. Here you give the symbol a linkage name so that it will be exported with the movie. The only restriction on this name is that it cannot be the same name as the font, as that will cause some problems later on. Use a simple, descriptive name for the linkage, and remember it because you'll enter that name into the components' parameters.