Sharing Fonts in ActionScript 3.0 - Part 1: Creating a Font SWF
Page 1 of 2
Set for printing
In this tutorial series, you learn how to use the new Font class in ActionScript 3.0 and Flash Player 9. The Font class enables you to embed one or more fonts in a Flash movie (SWF file), and reuse the font with other SWF files. In this tutorial, you learn how to create a font SWF file and load it into another Flash movie.
NOTE: In order to follow along with the tutorials in this series, you need to use Adobe Flash CS3 Professional. The font sharing techniques discussed in this series require ActionScript 3.0 and Flash Player 9.
Developing a font sharing strategy
Before you embark on building a reusable system of font SWF files, you should carefully consider how you will implement the fonts in your Flash project. You have several options for structuring your font data in a SWF file:
- Individual font and font style: You can embed one font (and only one style for that font) per font SWF file, and build a library of individual font SWF files. For example, if your Flash project needs BlurMedium, Big Caslon Bold, and Myriad Pro, you would create three Flash files (ActionScript 3.0). Each Flash file's library would contain only one font symbol. The benefit to this approach is that the file size of each font SWF should be rather small, enabling a shorter load time into other SWF files that require the font(s). You would also avoid loading font data that wasn't being utilized by other SWF files--for example, if you're project only required Verdana in Normal style, and your font SWF contains Verdana, Verdana Bold and Verdana Italic, the latter two styles are soaking up file size (and causing a longer download time) even though they're not being used by the project. Another benefit to this approach is that you can develop a large catalog of font SWFs that you can reuse from project to project. The drawback to this approach is that you'll need to manage more font SWF files.
- Multiple fonts and/or font styles: You could also opt to build a Flash file (ActionScript 3.0) that contains multiple font symbols. The font SWF file would contain more data, and would require a longer download time into other SWF files. However, if you need to use several fonts in a movie, downloading one font SWF file may be easier to manage than downloading multiple font SWF files.
You also need to determine how you will name your font asset(s) in your font SWF files. You can use either of the following approaches:
- Use the font's name: If you want an easy system to maintain, simply name each font symbol after the font's name and style. For example, if you want to add BlurMedium Bold to your font SWF file, name the font symbol and font class BlurMediumBold.
- Create a name based on style: You can develop a font SWF that contains font symbols named after a style usage, enabling you to change specific font faces and styles without needing to update the font name used in other SWF files. For example, you could create a font symbol whose class name is BodyFont and set its font choice to Verdana. In your other SWF files that require the BodyFont style, you can refer to the term BodyFont instead of Verdana. In this way, should you ever need to change the font choice for the BodyFont symbol, you don't need to update your ActionScript code.
In this tutorial series, you learn how to use both naming structures. The first three tutorials will use the former approach, naming each font symbol directly after the font's name.
Creating and Registering a Font Symbol
Some of the steps to build an ActionScript 3.0 (AS3) font SWF are identical to those used to create shared fonts in runtime shared libraries (RSL's) available in previous versions of the Flash Player. (You can still use RSL's in Flash Player 9 as well.) Perform the following steps to create an AS3 font SWF for the common typeface, Verdana.
- Open Flash CS3, and create a new Flash file (ActionScript 3.0). Save this file as Verdana.fla.
- Open the Library panel (Ctrl/Cmd+L). Click this panel's options menu in the top right corner and choose New Font. In the Font Symbol Properties dialog, choose Verdana in the Font menu. In the Name field, type Verdana as shown in Figure 1. Click OK.
Figure 1 - The Font Symbol Properties dialog
- Right-click (or Ctrl+click on Mac) the Verdana font symbol in the Library panel, and choose Linkage. In the Linkage Properties dialog (Figure 2), select the Export for ActionScript check box. By doing so, the Export in first frame option is automatically selected as well. In the Class field, type Verdana. Now, the Verdana symbol is officially an ActionScript 3.0 class that you can use in your AS3 code. Click OK.
Figure 2 - The Linkage Properties dialog
- In the Timeline window, rename Layer 1 to actions.
- Select frame 1 of the actions layer, and open the Actions panel (F9, or Option+F9 on Mac). Add the code shown in the following code block. The Font.registerFont() method enables you to make a font symbol available to any other SWF file that loads
the SWF file containing the Verdana symbol.
import flash.text.Font;
Font.registerFont(Verdana);
- Save the Flash file, and test the movie (Ctrl/Cmd+Enter). The font SWF will not create anything on the stage, but the font is embedded in the SWF file. You can open the Bandwidth Profiler (View > Bandwidth Profiler) in the Test Movie environment to see that the SWF file is 19 KB, the size of the embedded Verdana font.
Page 1 of 2 1
2
Next
Download Support Files
Keywords
ActionScript 3.0, font sharing, Font class, Font.registerFont
