Font Symbols and Shared Font Libraries

Using Font symbols and Shared libraries in your Flash authoring workflow offers several benefits that can make it worth the little time it takes to set them up. Although you can nest a Static text box inside any other symbol type if you want to reuse a specific text element in your movie, this does not change how the text is published in the Flash document. Using instances of a symbol to place repeated text elements, such as logos or taglines, offers the same benefits as converting artwork into symbols — you can make changes to the symbol stored in the Library and it will be propagated to every instance in your document, and you can also modify the appearance of individual instances without changing the original symbol.

The difference between text nested in another symbol type and a real Font symbol is that Font symbols can actually be used to store the display information for an entire font. When placed into a runtime Shared library, Font symbols can be used to link text in one movie to the font display information in a source movie; this allows you to use custom fonts without having to embed the font information in every Flash movie (.swf) individually. This workflow is especially effective on projects that involve multiple .swf files using the same custom fonts. The bonus is that if your client suddenly decides that they prefer "Leonardo script" to "Chickenscratch bold" (or whatever font switcheroo they might come up with), you can make the change in your source Font symbol without even opening any of the other files (as long as the new font is given the same name and it still fits in your layouts).

This all sounds great so far, right? Now for the reality check: Because you are storing font information in a separate file from your layouts, there is one more factor that you have to manage. The source font library (.swf) can be in the same directory as your other movie (.swf) files or it can be stored on a completely different server. It is very important to decide on the storage location of your source font files (.fla and .swf) before you begin linking text in your other Flash documents (.fla) to shared Font symbols because the URL that defines the relative or absolute path is stored in each .fla file and your font links will be broken if you later change the source movie's location.

Note 

Runtime shared assets do not need to be available on your local network when you are editing .fla documents that rely on linked assets, but the shared asset .swf must be available at your specified URL in order for the published movies (.swf) to display the linked assets at run time.

As you can imagine, having your font links fail is a major disaster, so many developers believe that relying on an external font source isn't worth the risk. On the other hand, there is always an element of uncertainty with Web delivery, so it might not be fair to eliminate what is otherwise an excellent way to optimize font management in your Flash layouts. As with any Web production, just be sure to test early and often as you develop a Flash project that uses shared fonts.

You can use Shared libraries to store other symbol types, but it is best to organize different kinds of assets in separate .fla files. For now, we'll focus on making Font symbols and creating a source file for a Shared font library.

Creating a Font Symbol

Font symbols can be integrated in your workflow in two ways. If you plan to use Font symbols within a Flash document (.fla) simply as a way to make edits faster in that one document, and you don't mind exporting the font information with every .swf, you can create a Font symbol directly in the main Library of your current document and rely on author-time sharing to update instances of the font. However, if you want to save file size by linking to the Font symbol information for runtime sharing, you should open a new Flash document before creating your Font symbols. In either case, the initial steps for creating a Flash Font symbol are the same:

1. Open the Library panel where you want to store the Font symbol.

2. From the Library options panel, choose New Font (see Figure 8-23).

3. The Font Symbol Properties dialog box appears so that you can enter a name for your Font symbol and select the font you want to embed in the file (see Figure 8-24). The name that you enter shouldn't be the same as the original font name but rather should indicate how the font is being used in your project. For example, if you are using an Impact font for your titles, instead of naming the Font symbol "Impact," you could name it "titleFont" or some other name that will inform you (and the rest of your team) how the font is being used.

4. If you also want the option to use faux Bold or Italic style on text linked to your Font symbol, select the Style check boxes for Bold and/or Italic to include these characters with the embedded font. Select the Bitmap text check box to create aliased outlines of your font symbol. If you choose to render an aliased outline of a font, you also need to enter the font size that you want to use by typing it in the Size field. This will increase the size of your source movie only — the additional size will not be passed on to other .swf files that link to the Font symbol for runtime sharing.

   Caution 

   If you create a Font symbol without the Bold or Italic options selected in the Font Symbol Properties dialog box and then try to apply the options in the Property inspector to create faux Bold or Italic style on text that is linked to the symbol, you will encounter one of two problems. If the text you are modifying is in a Static text box, then the applied styles will display, but the additional font information for the modified characters will be exported with your published file, thus increasing the size of the .swf. If the text you are modifying is in a Dynamic or Input text field, the text will not display in the published .swf file because the Flash Player will not find the font information needed to render the Bold or Italic type on-the-fly. These same rules apply to aliased outlines rendered at a specific font size.

5. Now when you browse the font menu available in the Property inspector or from the application menu (Text ð Font) you will see your new font listed with the other fonts installed on your system. Font symbols are also differentiated from regular fonts in the menu with an asterisk (*) following the name it has been given (see Figure 8-25).

Figure 8-23: Choosing to insert a new Font symbol from the Library panel options menu

Figure 8-24: Selecting a font to store in the new Font symbol and giving it a reference name

Figure 8-25: Font symbol names are followed by an asterisk in the Property inspector font menu (or in the application Text menu). Font symbols are also added to the Library list.

The next step required to use the Font symbol in your project depends on how you choose to integrate Font symbols into your workflow. As we mentioned earlier in this chapter, using symbols for author-time asset sharing can make it easier to propagate changes throughout a document, but any assets used in your document will still be embedded in each movie (.swf) that you publish. Creating a separate library for storing symbols and linking these as runtime shared assets in multiple movies takes a little more work, but it gives you the benefit of both streamlined updates and smaller file sizes. The most appropriate workflow depends on the scope and content of your particular project and on how willing you are to manage the risks involved with using runtime shared assets.

Updating Font Symbols at Author-Time

If you intend to use a Font symbol as an author-time shared asset only, you can simply leave it in your current Library so that the font is available in the font menu whenever you want to use it in your project. You will be able to modify any of the text boxes that use your Font symbol in the same way as any other text. There is no limit on the number of colors or sizes that you can use or on what you can type into each text box.

The main reason that this is a more flexible workflow than simply nesting text inside other symbols for reuse is that you can actually change the content used in individual text boxes that reference a Font symbol, while you can only modify the appearance of text that is nested in a symbol instance.

The process for updating instances of a Font symbol used within one Flash document (.fla) is much the same as updating any other symbol type or imported asset stored in the Library:

1. Open the current document Library and select the Font symbol that you want to modify.

2. Choose Properties from the Library options menu or from the contextual menu.

3. In the Font Symbol Properties dialog box, simply select a new font from the font menu, but don't change the font name that you had previously chosen. (Now it makes sense why naming your Font symbol with the same name shown in the font menu isn't a good idea, right?)

   You will find that all text that was in your old font will be updated to the new font that you have chosen, while maintaining all other formatting and style attributes.

Tip 

If you don't see your text boxes update to the new font immediately after you change it in the Font Symbol Properties dialog box, you may need to click one of the text boxes with the Selection tool — this will usually prompt Flash to refresh the display.

Using Font Symbols in Runtime Shared Libraries

In order to make your Font symbol available for use in other Flash movies without having to embed the font information in each file, you will need to create links from individual destination files to your source file or Shared library. This workflow optimizes file sizes by eliminating the storage of redundant font information between linked movies. As with HTML files, you have to specify a path in order for the Flash Player to locate font information in one movie (.swf) for text display in another. Because the font information is retrieved from an .swf file by the Flash Player and supplied to another .swf for text display, it is referred to as runtime asset sharing.

If you have already followed the steps to create a Font symbol in an otherwise empty Flash document (.fla), the next part of the process is to enter an identifier and a location (path) that will "lead" the Flash Player to your Shared library. As we mentioned previously, you will need to know where the published source movie (.swf) will be stored before you can create font links to other documents. The location (or path) can be relative or absolute.

Tip 

To keep your linkage intact while preserving source file version numbers as you develop your project, you might want to use the Publish Settings dialog box to give your published source .swf a generic name (such as titleFontSource.swf) while using a more specific naming convention for your source .fla files (such as titleFontSource101.fla). This eliminates the hassle of going back to your destination movies and changing the linkage information if you decide you need to move to a new version name to keep track of modifications to your source file (.fla).

To help clarify how runtime shared fonts are stored and accessed, we will walk through the three possible scenarios for Font symbol use and show you how each is displayed in the authoring environment (.fla) and in the published movie (.swf).

On the CD-ROM 

The Flash files illustrated in this section are included in the ch8 folder on the CD-ROM. You will find both the fontSource files (Shared library file) and the fontLink files (destination document) in the fontSymbols_complete folder with final linkage properties. As long as the files are kept together in the same storage location, the font linkage should remain intact. If you want to use unfinished files to complete the steps in this section, open the files in the fontSymbols_start folder. We have also included a fontEmbed example file with the same text entered on the Stage, but with embedded font information (including uppercase, lowercase, and punctuation for Impact), instead of linked font information to demonstrate the significant difference in file size.

The first file you will be working with is a source document, or the Flash document that contains the Font symbols that you want to use as runtime shared assets.

Caution 

If you are using the files from the CD-ROM to follow this example, you may need to modify the Font symbol in fontSource.fla to match a font that you have on your system (instead of "Impact") before you can use Test Movie to publish the .swf file (Step 5).

1. Open your source document and select your Font symbol in the Library. If you are looking at the files on the CD-ROM, open fontSource.fla from the fontSymbol_start folder and select the Font symbol called NewFont in the Library.

2. Open the Linkage Properties dialog box (see Figure 8-26) by choosing Linkage from the Library options menu or from the contextual menu.

3. Enter an identifier that will help you to remember what this Font symbol is used for in your project (such as titleFont). The identifier will be displayed after the Font symbol name in the Library. Don't close the Linkage Properties dialog box until you have completed the next step.

4. The URL field is where you enter the path to the storage location for the source movie (.swf) that you will publish after you have finished choosing settings in the source document (.fla.) The link can be relative or absolute depending on how you will be storing your project .swfs:

   • If you are planning to keep the source movie (.swf) in the same folder as your individual destination movies (.swf), then all you need to enter in the URL field of the Linkage Properties dialog box is the name of your source .swf file — in our example fontSource.swf.

   • If the source .swf file will be stored in a different folder or even on a separate server than the destination (linked) .swf files, you need to enter an absolute path (Web address) in the URL field to specify the exact storage location of your source .swf file, such as http://yourserver.com/projectdirectory/sourceName.swf.

5. Now you can save your source .fla file to the final storage location using File ð Save (Ctrl+S or z+S) and test your source .swf using Control ð Test Movie (Ctrl+Enter or z+Return). Although nothing is displayed in the published .swf, if you turn on the Bandwidth Profiler (from the application menu: View ð Bandwidth Profiler, or with shortcut keys Ctrl+B or z+B), you will see the size of the font information for all of the embedded characters included in your Font symbol. Our sample font symbol source file was 19K (see Figure 8-27).

Figure 8-26: Setting up Linkage Properties for a Font symbol in the Flash source document (.fla)

Figure 8-27: The published source movie (.swf) with embedded font information for the Font symbol to be used in other destination movies as a runtime shared asset

You have successfully created and saved a runtime shared asset. Now you can create another Flash document that references the font information stored in fontSource.swf so that you can use your custom font without having to embed the font information:

1. Create a new Flash document or open the fontLink.fla file from the CD-ROM, and make sure that you have the Library panel for the current document open.

2. There are two ways of linking another document to the font information in your Shared library:

   • If you have already created a document that uses Font symbols as described in the section on author-time sharing and decide to link to a runtime shared asset instead, you can enter the identifier and the URL of the Shared library movie (.swf) in the Linkage properties for any Font symbol in your Library. To enter linkage information manually, you need to have a Font symbol in the document Library selected so that you can access the Linkage Properties dialog box from the options menu or from the contextual menu. Enter the identifier and the URL exactly as they appear in your font source file, but Import for runtime sharing is auto-selected instead of Export for runtime sharing (see Figure 8-28). You should now find that all instances of the Font symbol in your current document are updated with the Font information stored in the shared asset movie (.swf) — as long as it is available on your server when you publish the movie for your current document.

   • If you are authoring a document (.fla) that does not yet contain any Font symbols and you want to link to your runtime shared asset, you can simply drag the Font symbol from the source library into the current document Library. With your destination document and Library panel open, choose File ð Open or File ð Import ð Open External Library and navigate to the Flash document (.fla) for your shared asset. You can then drag your source Font symbol from the shared asset library and drop it into your destination document Library. If you access Linkage properties for the Font symbol that you dragged into your Library, you will see that Flash automatically inserts the identifier and URL for the shared asset. You can now use the font in your new document and it will be linked to the font information stored in the runtime shared asset movie (.swf).

3. When a Font symbol in your Library has the identifier and URL entered in its Linkage properties, you can use the linked font in your document by selecting it from your font menu and using the Text tool as you normally would. When you publish your movie (.swf), you will notice that your file size is much smaller than it would be with embedded font information. For an example of this, compare the file size listed in the Bandwidth Profiler shown in Figure 8-29 (linked = 235 B), with Figure 8-30 (embedded = 4644 B).

4. If you decide that you want to disable runtime sharing for a Font symbol in a destination document, you can clear the Import for runtime sharing check box in the Linkage Properties dialog box. The font information for the characters used in your file will now be embedded with the .swf file, so the file size will be larger, but the Flash Player will not require access to the shared asset.

Figure 8-28: Linkage settings for a Font symbol in a destination movie refer to the font information stored in the runtime Shared library

Figure 8-29: The published .swf file from a document using linked font information from a runtime shared asset

Figure 8-30: The published .swf file from a document using embedded font information

Caution 

Text rendered with advanced anti-alias settings (Anti-alias for readability or Custom anti-aliasing) must be embedded. For text using linked font information, use the Anti-alias for animation setting.