Flash Quick Start: Programming with ActionScript 3.0
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
- Setting Font symbol properties
- Setting linkage properties for a Font symbol
- Creating a new Font symbol instance using ActionScript
- Setting advanced anti aliasing
- Fading text using embedded fonts and the Tween class
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.
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.
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.
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
fontFamilyproperty to the name of the embedded font, and apply the TextFormat object to the TextField. When specifying an embedded font, thefontFamilyproperty 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
embedFontsproperty of the TextField totrue.
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:
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:
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:
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();
}
Result
Download the source files for this example:
Related Flash Quick Starts
- Embedding fonts
- Loading images and Library assets in Flash with ActionScript 3
- Loading and saving local files with the FileReference class
- Event handling
- Display list programming
- Creating a simple ActionScript 3 class
- Working with symbols and the Document class
- Programming with arrays
- Programming with the Vector class
I found it useful. Thank you.