Tutorial (AS3): Using Fonts Embedded At Compile-Time

15Feb/100

Tutorial (AS3): Using Fonts Embedded At Compile-Time

I am continuing to explore the use of external assets embedded at compile time in AS3. Today we will look at how to embed and use a font in this manner. The Embed compile-time directive is available to users of the Flex SDK, Flex Builder, Flash Builder (if and when it comes out), and Flash IDE users (CS4 and beyond).

First, let's find a font

To test this properly you might want to use a font that you do not already have installed. I went to SearchFreeFonts.com and found a nice font that is free for commercial use (this isn't really a commercial use as I lose my shirt on this site, but just in case...). The name of the font is :01-10-00. I recommend that you donate to the creator of any font you find useful.

Let's start the project
I am going to use Flash Develop to do this small project. You don't have to use this. In any case, place all of the files we create in the same folder. This is the /src folder for a Flash develop project. So, for now you will have a single file (we'll use the True Type version of the font) "01-01-00.ttf". I know it is a strange name, but it is a pretty nice font.

Now we will create our main class file
In the same project folder, let's create a class file called: "FontEmbedTest.as". This will need to be the "always compile" class in Flash develop or the "document" class in the IDE.

1. First we will start off our class and import the other classes we need:

[cc lang="javascript" width="550"]
package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import Libary;

public class FontEmbedTest extends Sprite {
[/cc]

2. Next we will start the variable definition section of our code and create the TextField and TextFormat objects. We will also embed the font using the file name we downloaded and placed in the project folder. Notice that I set both the fontName and fontFamily to be 'font010100". I did this because when I just set fontName or just fontFamily (as I have seen in some other examples) I was not able to get the font to show up properly across all of the different players (Win and Mac) that I tried. We will not use the class that we create "Font010100:Class" but a class or some variable creation is required after the embed directive as the "linkage" name for the embedded asset. Notice that the embed line was broken to fit in the space alotted.

[cc lang="javascript" width="550"]
private var textField:TextField = new TextField();
private var textFormat:TextFormat = new TextFormat();

[Embed(source='01-01-00.ttf', fontFamily = 'font010100', fontName = 'font010100',
mimeType="application/x-font-truetype")]
public static const Font010100:Class;
[/cc]

3. Now we will create the constructor for our class. It will set all of the properties of the TextField and TextFormat instances as well as place the TextField on the screen. Notice that we also finish the class and package brackets to be complete.

[cc lang="javascript" width="550"]

public function FontEmbedTest() {
textFormat.font = "font010100";
textFormat.size = 48;
textFormat.color = 0x000000;

textField.defaultTextFormat = textFormat;
textField.autoSize = TextFieldAutoSize.LEFT;

textField.embedFonts = true;

textField.text = "Embedded Font";

addChild(textField);

}

}
[/cc]

Here is a screen shot of this file working: