Join Anastasia McCune for an in-depth discussion in this video Embedding fonts, part of Up and Running with Flash Professional.
- View Offline
Say you have a text box where the text can be changed during runtime. For instance, the user can type information in or the text is changed via ActionScript. There's a technique you need to be aware of. So please open the file called missingFont.swf in your Exercise Files to see this in action. The FLA also exist for your reference but the resulting SWF is what we're interested in. This SWF file has input text boxes with text displayed in two fonts, Arial and Tristan or at least it kind of does.
The first line of text tells you that it's supposed to be displayed in Tristan font but unless you have Tristan on your computer it's probably not. For me Flash is substituting Arial instead. The second line is just in boring old Arial and is probably displaying just fine. Now, here's why this is happening. When Flash displays input or dynamic text boxes on the screen, it looks for the definition of the fonts being used on the end user's local computer. If it finds those fonts it uses them and the fonts display just fine.
If the fonts aren't found on the user's local computer, Flash substitutes with something else. As you can see here, this can lead to some unexpected results. Now notice the last line of text, which tells you that this is what the font called Tristan looks like. You can see what it looks like, because I used a trick to make doubly sure it would display as Tristan. I'll demonstrate the trick for you here by opening up a blank FLA file. I am going to just grab my Text tool and go ahead and type some text on the stage.
Then I am going to go to Modify and Break Apart and then Modify>Break Apart a second time. Look in the Property Inspector and notice that these are now shapes. They're just blobs of color that happen to be in the shapes of letters. So that's what we have in our demonstration SWF. Letters which look like Tristan but are really shapes. So, they're not editable like regular text is. You can go ahead and close the FLA file you just created as well as the demonstration SWF.
The way to get around this problem is by embedding fonts. Embedding fonts basically means that you're including, or embedding, the vector outlines of each character into your SWF file. This way Flash knows how to draw the characters regardless of what fonts are on the end user's computer. As you can see, embedding fonts can be a very worthwhile activity. So let's learn how to do it by first opening another blank FLA file and then saving it somewhere on your computer as fonts.fla. Now, grab your Text tool and choose Classic Text if it's not already chosen.
Under the next dropdown, choose Input Text. For the font, I am going to choose Berlin Sans FB, but you should pick a font on your computer that isn't one that everyone would have. Now, type on the stage a phrase, such as "I need to embed this font." Let's test our movie by pressing Ctrl+ Enter while it will publish and look just fine to you because you're using a font on your computer, Flash will give you an output message stating that Fonts should be embedded for any text that maybe edited at runtime.
The output message is here next to where the Timeline is. It also encourages you to embed your fonts. So, let's do that. Close your SWF file if you haven't already and return to Flash. Grab your Arrow tool and be sure your text box is selected. Then in the Character area of the Properties panel, click on the button labeled Embed. The Font Embedding dialog comes up. Here in the Name area, you can type a more descriptive name than the default to identify with the font you're embedding is meant to be So, I'll type "Berlin Sans." Then in the checkbox area, I am going to select to embed the Uppercase, Lowercase and Punctuation glyphs.
You can also type in any special or unusual characters you want to use in this area. I'd recommend not selecting all because as you can see that would be 245 glyphs. You're embedding the vector outline of each glyph into the SWF file, so the fewer glyphs you embed, the smaller the file size, and the faster the movie loads for your user. Once you've made your selections, click OK. Let's test our movie by pressing Ctrl+ Enter and note that the little reminder to embed fonts we saw before is gone. We're set for now but know that if you're using an unusual font in multiple text boxes in your Flash movie, you need to go through this process for each text box.
Here's an alternative you could use instead of embedding fonts. Using your Arrow tool, select your text box again and under the font dropdown in the Property Inspector, scroll to the top and find the top three fonts. These are device fonts and you'll see out of these three we have Sans, which looks like Arial, Serif, which looks like Times, and Typewriter, which looks like Courier. By using device fonts, you're telling Flash to just pick a font on the user's local computer that most closely resembles the device font.
By choosing device fonts, you don't have to embed and the SWF size is smaller. However, since the font outlines are not embedded, expect some variation in what your end-users will see, since you don't know what font they may have installed that corresponds to the device font that you chose. So, now you've seen why and how to embed fonts. The only thing to remember is that you should embed fonts for text boxes like input boxes or dynamic boxes that can change during runtime. You don't have to embed fonts for static text boxes.
- Choosing the type of document to work with
- Changing document settings and orientation
- Importing bitmaps and vector files
- Organizing layers
- Understanding the timeline, frames, and keyframes
- Creating shapes
- Understanding the three symbol types (graphics, buttons, and movie clips)
- Defining motion and shape tweens
- Nesting timelines
- Using effects and masks
- Working with text
- Importing and adding audio and video
- Publishing your project