Video Training – Tutorials

Flash Tutorial – Embed Fonts in ActionScript 3

November 5, 2008

For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Adobe Flash CS3 Training Videos.

Dynamically Embed Font In Actionscript 3.0

In this Flash tutorial we’ll be looking at how to embed Flash font dynamically using Actionscript 3.0. If you’ve ever used text in your Flash applications you’ve probably noticed that when you preview your Flash file the text doesn’t always render properly. Look at the image below as an example. The first example “Text Example A” has been embedded with Actionscript and the second example “Test Example B” was typed out on the stage using the basic text tool. You can clearly see the difference in the two.

Embedding your flash font also has other advantages;

• 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 embed almost any type of font on your system.

Step 1 – Library Panel

Our first task is to create a new font symbol to do this we need to open up the Library Panel (Window – Library). Inside the library panel we create a new font by clicking the drop down arrow and selecting New Font from the drop down box, this will open up the Font Symbols Properties Dialog Box. Inside the dialog box we define a name for our font symbol and select the font styles and properties that we require.

 

We then export our Font Symbol for Actionscript so that Actionscript has access to the font symbol. To do this we Right Click the font name and select Linkage from the drop down menu.

 

Once we select Linkage from the menu the Linkage Properties Box pops up. Inside the Linkage properties box we check the “Export For Actionscript” checkbox and give it a class name, in this case we’ve just kept the default class name that flash has provided for us.

So to recap;

1. Open the library panel (Window – Library).
2. Select New Font from the Library Panel menu.
3. Enter a name for the font in the Name field.
4. Select the font and styles that you require for the application.
5. Right click the new font inside the library and select Linkage.
6. Check the export for Actionscript checkbox.
7. Give it a unique class name or keep the default name (Font1).

Step 2 – Adding Actionscript

Our next task is to create some Actionscript so select the first Keyframe on the timeline and press F9 to open up the actions panel. We need to create a text field for the text so we create a new TextField object and call it flashText. This creates an instance of the TextField class and gives us access to all the properties, methods and events of that class.

var flashText:TextField = new TextField();

Our TextField is empty so we use the text property to fill it with the text of our choice, in this case it’s “Text Example A”.

flashText.text = “Text Example A”;

We can position the TextField where we want on the stage by changing the X and Y properties. The X and Y properties in Actionscript are measured in pixels and the default value is 0.

flashText.x = 25;

flashText.y = 30;

 We want to access the font that we created in step one, by creating a new instance of the Font1 symbol object gives us access to it. We’ll name this object myFont.

var myFont:Font = new Font1();

Next we create a TextFormat object called textFormat, again giving us access to all the properties, methods and events available to that class. The TextFormat class will allow us to change the size and font properties.

var textFormat:TextFormat = new TextFormat();

This line sets the font property to the flashText object’s fontName property. Essentially making sure the textFormat font property is using the font we have embedded.

textFormat.font = myFont.fontName;

Set the text size of the text to 26px.

textFormat.size = 26;

The autoSize property controls automatic sizing and alignment of text fields. We’ll us this property to align the text inside the TextField to left-justified text, this just works in the same way as left justified in a word document for example.

flashText.autoSize = TextFieldAutoSize.LEFT;

The defaultTextFormat property specifies the format applied to newly inserted text, it sets the TextFormat properties to the TextField.

flashText.defaultTextFormat = textFormat;

Setting the TextField embedFonts value to true tells the Flash Player to use the embedded font instead of the default device font.

flashText.embedFonts = true;

Setting the antiAliasType property to AntiAliasType.ADVANCED sets the text inside the TextField to anti-aliasing to advanced anti-aliasing. This allows the font to be shown at a high quality when using smaller font sizes.

flashText.antiAliasType = AntiAliasType.ADVANCED;

The addChild()method adds the TextField to the stage, making it visible when the file is previewed.

addChild(flashText);

Code In Full;

var myFont:Font = new Font1();
var textFormat:TextFormat = new TextFormat();
textFormat.font = myFont.fontName;
textFormat.size = 26;
var flashText:TextField = new TextField();
flashText.autoSize = TextFieldAutoSize.LEFT;
flashText.defaultTextFormat = textFormat;
flashText.embedFonts = true;
flashText.x = 25;
flashText.y = 30;
flashText.antiAliasType = AntiAliasType.ADVANCED;
flashText.text = “Text Example A”;
addChild(flashText);

Entry Filed under: ActionScript. Tags: ActionScript 3, AS3, Embed Fonts, Flash Tutorial.