Embedding fonts in a Flash document allows you to rotate text fields (such as a button label) without the font disappearing. They also enable you to apply advanced anti-aliasing which can increase a font’s readability at smaller sizes (such as 10 points and lower). Using an embedded font also allows you to use fonts in your Flash documents that a user may not have installed on their machine.
Note: The biggest limitation to using embedded fonts is that they increase the file size or download size of your application.
Using embedded fonts with a Button instance is a multi-step process:
- Create a new font symbol in the Flash document’s library by selecting New Font from the Library panel’s pop-up menu (upper-right corner of the Library panel).
- Select the desired font face and properties in the Font Symbol Properties dialog box.
- Set the linkage information for the Font symbol.
- Create a new Font symbol instance using ActionScript.
- Create a new TextFormat object and specify the name of the embedded font face.
- Set the Button instance’s
embedFontsstyle totrue. - Set the Button instance’s
textFormatstyle to the TextFormat object created in step 5.
For more information on embedding fonts, see the “Embedding Fonts” Quick Start article on Adobe.com.
Full code after the jump.
Tip: If you’re using an embedded font with a Button instance, you can enable advanced anti-aliasing to improve a font’s visual quality at smaller sizes.
The following example creates two Button instances, enables embedded fonts for one of the instances, and rotates each of the buttons 90 degrees. This example requires a font in your Flash document’s library with a linkage class of MyFont:
// ActionScript 3.0 // Import the required component classes. import fl.controls.Button; // Create a new Font object from the MyFont linkage in the library. var myFont:Font = new MyFont(); /* Create a new TextFormat object and set the font name to the Font object's fontName property. */ var myTextFormat:TextFormat = new TextFormat(); myTextFormat.font = myFont.fontName; /* Create a new Button component instance, set the rotation to 90 degrees, set the embedFonts style to true, set the textFormat style to the previously created TextFormat object, and add the button to the display list. */ var embedTrue:Button = new Button(); embedTrue.rotation = 90; embedTrue.width = 120; embedTrue.label = "embedFonts = true"; embedTrue.move(30, 10); embedTrue.setStyle("embedFonts", true); embedTrue.setStyle("textFormat", myTextFormat); addChild(embedTrue); /* Create a new Button component instance, set the rotation to 90 degrees, set the embedFonts style to false (default), set the textFormat style to the previously created TextFormat object, and add the button to the display list. Since the font is not embedded for this button instance, the button's label will not display any text after the button is rotated. */ var embedFalse:Button = new Button(); embedFalse.rotation = 90; embedFalse.width = 120; embedFalse.label = "embedFonts = false"; embedFalse.move(60, 10); embedFalse.setStyle("embedFonts", false); embedFalse.setStyle("textFormat", myTextFormat); addChild(embedFalse);
The following example demonstrates how to apply advanced anti-aliasing to a Button instance’s embedded text field using the textField property. This example requires a font in your Flash document’s library with a linkage class of MyFont:
// ActionScript 3.0 // Import the required component classes. import fl.controls.Button; // Create a new Font object from the MyFont linkage in the library. var myFont:Font = new MyFont(); // Create a new TextFormat object and set the font name and font size. var myTextFormat:TextFormat = new TextFormat(); myTextFormat.font = myFont.fontName; myTextFormat.size = 8; /* Create a new Button component instance, set the embedFonts style to true, set the nested text field's antiAliasType property to "normal", and add the button to the display list. */ var normalAliasButton:Button = new Button(); normalAliasButton.label = "AntiAliasType.NORMAL"; normalAliasButton.setStyle("embedFonts", true); normalAliasButton.setStyle("textFormat", myTextFormat); normalAliasButton.textField.antiAliasType = AntiAliasType.NORMAL; normalAliasButton.width = 140; normalAliasButton.move(10, 10); addChild(normalAliasButton); /* Create a new Button component instance, set the embedFonts style to true, set the nested text field's antiAliasType property to "advanced", and add the button to the display list. */ var advancedAliasButton:Button = new Button(); advancedAliasButton.label = "AntiAliasType.ADVANCED"; advancedAliasButton.setStyle("embedFonts", true); advancedAliasButton.setStyle("textFormat", myTextFormat); advancedAliasButton.textField.antiAliasType = AntiAliasType.ADVANCED; advancedAliasButton.width = 140; advancedAliasButton.move(160, 10); addChild(advancedAliasButton);
For more information on the Flash/ActionScript 3.0 Button component, see the “Using the Button component” Flash Quick Start on Adobe.com.
{ 3 comments… read them below or add one }
You can set global styles too …
import fl.managers.StyleManager;
import fl.controls.Button;
var myFont:Font = new Font(); // in the library
var tf:TextFormat = new TextFormat();
tf.color = 0xFF0000;
tf.font = myFont.fontName;
tf.size = 11;
tf.align = TextFormatAlign.LEFT;
StyleManager.setComponentStyle(Button, “embedFonts”, true);
StyleManager.setComponentStyle(Button, “textFormat”, tf);
StyleManager.setComponentStyle(Button, “antiAliasType”, AntiAliasType.ADVANCED);
I’ve studied the Button component quick start guide, I’ve tested a bunch of styles for the button textField (including the advice above), but the one thing I cannot force it to do is align to the left. It consistently remains centered.
My menu is appearing on the left of the flash document, so I do not want centered text. the only workaround I’ve found that works is to set button.label = “”; and then create a whole new textfield. Is this really the only way?
would love to know the same thing as Sharon!