Using Embedded Fonts with Components

In this section, you will explore how to use a custom font for a Button component. There are two ways to accomplish this: Use a dummy text field that embeds the font you want to use in the component, or add a Font symbol set to export from the Library panel. Both involve some ActionScript. First of all, let's look at the easier of the two methods.

1. Open the component_style.fla document from the last section, and resave the document as component_embedded_font.fla.

2. Select frame 1 of the actions layer, and delete the existing code. Add the following code:

    var cbt:mx.controls.Button; cbt.setStyle("fontFamily", "Futura"); cbt.setStyle("embedFonts", true); 

   This code sets the font face of the Button component to Futura. The second line tells the component that it should only display embedded fonts. If you tested your movie at this point, the label text for the component would be empty because the Futura font is not embedded in the movie.

3. Create a new layer and name it tEmbedded. On frame 1 of this layer, select the Text tool and make a Dynamic text field off-stage. Give the field an instance name of tEmbedded in the Property inspector. In the font menu of the Property inspector, choose Futura. (If you don't have Futura, pick a different font name, and be sure to change the name in the code of Step 2.) Next, click the Embed button in the Property inspector. In the Character Embedding dialog box (shown in Figure 33-18), Ctrl+click (or z+click on the Mac) the Uppercase, Lowercase, and Numerals options. Click OK to accept these settings. You have now embedded the Futura font in the Flash movie.

4. Save your Flash document, and test it. The Futura font (or your substituted font, if applicable) is the font used by the cbt instance.

Figure 33-18: The Character Options dialog box

On the CD-ROM 

You can find the completed document, component_embedded_font.fla, in the ch33 folder of this book's CD-ROM.

If you don't want to use a dummy text field as this example illustrated, there is another way you can use an embedded font with a component. You can add a Font symbol to the Library panel, and set the font to export with the Flash movie. This method, however, will significantly add more weight (in bytes) to the movie's file size because all characters in the font are exported with the movie. We highly recommend you use an empty TextField instance with specific character ranges to minimize the size of your Flash movies.

Cross-Reference 

We show you how to embed specific styles of a font in Chapter 30, "Applying HTML and Text Field Formatting."