Sharing Fonts in ActionScript 3.0 - Part 1: Creating a Font SWF

By: Robert Reinhardt

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.

1. Open Flash CS3, and create a new Flash file (ActionScript 3.0). Save this file as Verdana.fla.
2. 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
3. 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
4. In the Timeline window, rename Layer 1 to actions.
5. 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);
6. 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.

Loading the Font SWF into Another Flash movie

After you've created an AS3 font SWF file, you're ready to test the font by loading the SWF into another Flash movie. In this section, you create a tester that loads the font SWF and shows the name of the embedded font in the Output panel. Complete the following steps to load the font SWF file ito another Flash movie:

1. In Flash CS3, create a new Flash file (ActionScript 3.0). Save this file as font_tester.fla. Save this file in the same location as the Verdanda.swf file created in the last section.
2. 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. This code create a new Loader instance to grab the Verdana.swf created in the last section. When the SWF has finished the loading, the Font.enumerateFonts() method is used to list all of the embedded fonts available to use in the Flash movie.
   import flash.display.Loader;
   import flash.display.LoaderInfo;
   import flash.net.URLRequest;
   import flash.events.Event;
   
   var fontLoader:Loader = new Loader();
   var fontLoaderInfo:LoaderInfo = fontLoader.contentLoaderInfo;
   
   fontLoaderInfo.addEventListener(Event.COMPLETE, onFontLoaded);
   
   fontLoader.load(new URLRequest("Verdana.swf"));
   
   function onFontLoaded (e:Event):void {
      var info:LoaderInfo = e.currentTarget as LoaderInfo;
      var loader:Loader = info.content as Loader;
      var embeddedFonts:Array = Font.enumerateFonts(false);
      for(var i:Number = 0; i < embeddedFonts.length; i++){
         var item:Font = embeddedFonts[i];
         trace("[" + i + "] name:" + item.fontName + ", style: " + item.fontStyle + ", type: " + item.fontType);
      }
   }
3. Save the Flash file, and test the Flash movie (Ctrl/Cmd+Enter). Once the Verdana.swf file loads into the font_tester.swf file, the onFontLoaded() function is invoked. The Output panel in Flash CS3 should show the following message:
   [0] name:Verdana, style: regular, type: embedded

Conclusion

You now know how to build an AS3 font SWF and load it into another Flash movie with ActionScript 3.0 code. In the next tutorial of this series, you learn how create a text field which displays text using an embedded font symbol from another SWF file.