Study/Actionscript 3.0

Embedding fonts

chacolina 2010. 10. 16. 21:01

http://www.adobe.com/devnet/flash/quickstart/embedding_fonts.html#section1

Flash Quick Start: Programming with ActionScript 3.0

by Peter deHaan

Created

Jul 15, 2010

Requirements

User level

Beginning

Embedding fonts

When you specify a font for a TextField in your application, Flash Player looks for a device font(a font that resides on the user's computer) with the same name. If it doesn't find that font on the user's system, or if the user has a slightly different version of a font with that name, the text display could look very different from what you intended.

To make sure the user sees exactly the right font, you can embed that font in your application's SWF file. Embedded fonts have a number of benefits:

Embedded font characters are anti-aliased, making their edges appear smoother, especially for larger text.
You can rotate text that uses embedded fonts.
Embedded font text can be made transparent or semitransparent.
You can use the kerning CSS style with embedded fonts.
You can embed almost any font you have installed on your system, including TrueType fonts and Type 1 Postscript fonts.

The main limitation to using embedded fonts is that embedded fonts increase the file size or download size of your application.

There are many ways to embed fonts in a Flash application, including the following:

Setting the font and style properties of a dynamic or input TextField on the Stage and clicking the Embed button.
Creating and referencing a font symbol, which we'll discuss in this article.
Creating and using a run-time shared library containing embedded font symbols, an advanced workflow we won't discuss here.

The next sections describe the most popular and useful ways to use this feature.

Creating a new Font symbol

To create a new font symbol, select New Font from the library's pop-up menu (in the upper-right corner of the Library panel). This opens the Font Symbol Properties dialog box, which allows you to specify the font symbol's properties.

Figure 1. Creating a new font symbol in a Flash document's library.

Setting Font symbol properties

The Font Symbols Properties dialog box allows you to define a name for a font symbol, select a font face, and set various styles. The font name is the name that the symbol will have in the Library panel. In order to access this font dynamically using ActionScript, you'll need to set the font's linkage properties (see Setting linkage properties for a new font symbol). The font pop-up menu lets you select the desired font face from a list of fonts installed on the current computer.

Creating a font library item:

Open the library in which you want to add a font symbol.
Select New Font from the Library Panel menu.
Enter a name for the font in the Name field.
Select a font from the Font menu or enter the name of a font in the Font field.
(Optional) Select your desired font style (Regular, Italic, Bold, or Bold Italic) from the Style drop-down menu.
(Optional) To embed the font information as bitmap data rather than as vector outline data, select the Bitmap Text option and enter a font size in the Size text field. (Bitmap fonts cannot use anti-aliasing. If you select Bitmap Text, you must also select Bitmap Text as the anti-aliasing option in the Property inspector for text that uses this font.)

Note: The Size setting applies only when you use the Bitmap Text option. You'll typically set the size of the text in the TextFormat object, which you'll see later.

Figure 2. Specifying a font symbol's properties (Basic mode, top; Advanced mode, bottom).

Note: You can edit the font symbol's properties any time by right clicking the symbol in the library and selecting Properties from the context menu.

Setting linkage properties for a Font symbol

Before you can instantiate a new Font instance dynamically, you need to make sure it has a linkage class name defined. To set a linkage class:

Right-click the font symbol in the library and select Properties.
Click Export for ActionScript and enter a class name (see Figure 3). If you cannot see the Linkage information in the Font Symbol Properties dialog box, click the Advanced button (see Figure 2, bottom).
Click OK.

Figure 3. Setting a linkage class in the Font Symbol Properties dialog box.

Note: When dismissing the Font Symbol Properties dialog box, you may get an ActionScript class warning saying that a definition for the specified class could not be found in the classpath, so one will be automatically generated for you. Click OK.

Creating a new Font symbol instance using ActionScript

Once you have a font symbol in your library and a linkage class defined, you can create a new instance of that font symbol using the new operator and specify the linkage class name defined earlier. To apply the embedded font to a dynamically created TextField, you do the following:

Create a TextFormat object, set its fontFamily property to the name of the embedded font, and apply the TextFormat object to the TextField. When specifying an embedded font, thefontFamily property should only contain a single name; it cannot use a comma-delimited list of multiple font names.
If using CSS styles to set fonts for TextFields, set the font-family CSS property to the name of the embedded font. The font-family property must contain a single name and not a list of names if you want to specify an embedded font.
Set the embedFonts property of the TextField to true.

The following example creates a new font instance based on the font symbol in the library with a linkage class name of Font1. Next, the example creates a TextFormat object and sets the font name to the font specified in the myFont instance.

Example

The following example creates a new Font, TextFormat, and TextField instance and sets theembedFonts property to true.

Note: The example requires that a font symbol with the linkage class name of Font1 exists in the library.

// Create a new instance of the Font1 symbol from the document's library.
var myFont:Font = new Font1();

/* Create a new TextFormat object, and set the font property to the myFont
   object's fontName property. */
var myFormat:TextFormat = new TextFormat();
myFormat.font = myFont.fontName;
myFormat.size = 24;

/* Create a new TextField object, assign the text format using the 
   defaultTextFormat property, and set the embedFonts property to true. */
var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.defaultTextFormat = myFormat;
myTextField.embedFonts = true;
myTextField.text = "The quick brown fox jumped over the lazy dog.";
addChild(myTextField);

Result

Download the source files for this example:

embeddingfonts_section4_example1.zip (ZIP, 8K)

Setting advanced anti-aliasing

When working with embedded fonts, you can set the anti-aliasing type to either normal or advanced by setting the text field's antiAliasType property to a value in the AntiAliasType class (flash.text.AntiAliasType).

Example

The following example creates a new instance of a Font symbol, enables embedded fonts for a text field and sets the anti-alias type to advanced.

Note: The previous example requires that a font symbol with the linkage class name of Font1 exists in the library.

// Create a new instance of the Font1 symbol from the document's library.
var myFont:Font = new Font1();

/* Create a new TextFormat object, and set the font property to the myFont
   object's fontName property. */
var myFormat:TextFormat = new TextFormat();
myFormat.font = myFont.fontName;
myFormat.size = 24;

/* Create a new TextField object, assign the text format using the 
   defaultTextFormat property, set the embedFonts property to true, and
   set the antiAliasType property to "advanced". */
var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.defaultTextFormat = myFormat;
myTextField.embedFonts = true;
myTextField.antiAliasType = AntiAliasType.ADVANCED;
myTextField.text = "The quick brown fox jumped over the lazy dog.";
addChild(myTextField);

Result

Download the source files for this example:

embeddingfonts_section5_example1.zip (ZIP, 5K)

Example

The following example creates a new text field and lets the user toggle whether the font is embedded, which type of anti-aliasing to use (normal or advanced), and the size of the text in the text field.

Note: The previous example requires that a font symbol with the linkage class name of Font1 exists in the library, as well as a CheckBox component, ComboBox component, and a Slider component. An easy way to add the components to the library is to drag them to the Stage, then delete them.

// Import the required component classes.
import fl.controls.CheckBox;
import fl.controls.ComboBox;
import fl.controls.Slider;
import fl.events.SliderEvent;

// Create a new instance of the Font1 symbol from the document's library.
var myFont:Font = new Font1();

/* Create a new TextFormat object, and set the font property to the myFont
   object's fontName property. */
var myFormat:TextFormat = new TextFormat();
myFormat.font = myFont.fontName;
myFormat.size = 24;

/* Create a new TextField object, assign the text format using the 
   defaultTextFormat property, set the embedFonts property to true, and
   set the antiAliasType property to "normal". */
var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.defaultTextFormat = myFormat;
myTextField.embedFonts = true;
myTextField.antiAliasType = AntiAliasType.NORMAL;
myTextField.text = "The quick brown fox jumped over the lazy dog.";
addChild(myTextField);

/* Create a CheckBox component instance which will be used to toggle the 
   embedFonts property. */
var embedFontsCheckBox:CheckBox = new CheckBox();
embedFontsCheckBox.label = "embedFonts";
embedFontsCheckBox.move(0, 50);
embedFontsCheckBox.selected = myTextField.embedFonts;
embedFontsCheckBox.addEventListener(Event.CHANGE, checkBoxChangeHandler);
addChild(embedFontsCheckBox);

/* Create a ComboBox component instance which will be used to toggle between
   normal and advanced anti-aliasing. */
var antiAliasTypeComboBox:ComboBox = new ComboBox();
antiAliasTypeComboBox.addItem({data:AntiAliasType.NORMAL, label:"AntiAliasType.NORMAL"});
antiAliasTypeComboBox.addItem({data:AntiAliasType.ADVANCED, label:"AntiAliasType.ADVANCED"});
antiAliasTypeComboBox.enabled = myTextField.embedFonts;
antiAliasTypeComboBox.width = 200;
antiAliasTypeComboBox.move(150, 50);
antiAliasTypeComboBox.addEventListener(Event.CHANGE, comboBoxChangeHandler);
addChild(antiAliasTypeComboBox);

// Create a Slider component instance which will be used to set the font size.
var fontSizeSlider:Slider = new Slider();
fontSizeSlider.minimum = 8;
fontSizeSlider.maximum = 24;
fontSizeSlider.value = Number(myFormat.size);
fontSizeSlider.tickInterval = 2;
fontSizeSlider.liveDragging = true;
fontSizeSlider.move(400, 56);
fontSizeSlider.addEventListener(SliderEvent.CHANGE, sliderChangeHandler);
addChild(fontSizeSlider);

/* Handler function for the CheckBox component instance. This function 
   toggles the ComboBox instance's enabled property based on the current 
   value of the CheckBox. */
function checkBoxChangeHandler(event:Event):void {
    myTextField.embedFonts = CheckBox(event.currentTarget).selected;
    antiAliasTypeComboBox.enabled = CheckBox(event.currentTarget).selected;
}

/* Handler function for the ComboBox component instance. This function
   sets the text field's antiAliasType property based on the value of the
   currently selected item in the ComboBox. */
function comboBoxChangeHandler(event:Event):void {
    myTextField.antiAliasType = ComboBox(event.currentTarget).selectedItem.data;
}

/* Handler function for the Slider component instance. This function sets the
   text format's font size based on the current value of the slider and
   updates the text field's text format using the setTextFormat() method. */
function sliderChangeHandler(event:SliderEvent):void {
    myFormat.size = event.value;
    myTextField.setTextFormat(myFormat);
}
      

Result

Download the source files for this example:

embeddingfonts_section5_example2.zip (ZIP, 448K)

Tip: The benefits of advanced anti-aliasing is most apparent with smaller fonts. In the previous example, enable embedded fonts, advanced anti-aliasing, and try setting the font size slider to its lowest value (8 points).

Fading text using embedded fonts and the Tween class

Now that a font symbol is in your Library, you can fade and rotate text and use fonts that aren't on a user's computer.

The following example demonstrates how to use the various tween classes in ActionScript 3.0 to create a rotated text field that fades its text in and out.

Example

The following example uses the Tween class to control the alpha property of a text field.

Note: The previous example requires that a font symbol with the linkage class name of Font1 exists in the library.

// Import the required transition classes.
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

// Create a new instance of the Font1 symbol from the document's library.
var myFont:Font = new Font1();

/* Create a new TextFormat object, and set the font property to the myFont
   object's fontName property. */
var myFormat:TextFormat = new TextFormat();
myFormat.font = myFont.fontName;
myFormat.size = 24;

/* Create a new TextField object, assign the text format using the 
   defaultTextFormat property, set the embedFonts property to true, set 
   the antiAliasType property to "advanced", and rotate the text field. */
var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.embedFonts = true;
myTextField.antiAliasType = AntiAliasType.ADVANCED;
myTextField.defaultTextFormat = myFormat;
myTextField.text = "The quick brown fox jumped over the lazy dog.";
myTextField.border = true;
myTextField.x = 15;
myTextField.y = 5;
myTextField.rotation = 15;
addChild(myTextField);

// Create a new Tween object which will fade the text field's alpha property.
var fadeTween:Tween = new Tween(myTextField, "alpha", Strong.easeIn, 1, 0, 2, true);
fadeTween.addEventListener(TweenEvent.MOTION_FINISH, motionFinishHandler);

/* Handler for the fade tween. When the tween dispatches the motionFinish 
   event, this function gets called and reverses the direction of the tween. */
function motionFinishHandler(event:TweenEvent):void {
    Tween(event.currentTarget).yoyo();
}