Derek Knox | Digital Lab

Tutorial: Embedding Font in the Flash CS3 List Component using AS3

Tutorial

July 29, 2008

Embedding Font in the Flash CS3 List Component using AS3

Notes

“Right-click” on a PC is equivalent to ctrl-click on a Mac, the idea is to simply bring up the contextual menu.

I assume the reader has a moderate understanding of Actionscript 3 and OOP.

Introduction

I’ve seen many tutorials for embedding font within components and none seem to work. I found the solution. Many tutorials utilized the setStyle property when the setRendererStyle property needed to be utilized instead. Also, embedFonts (with the s) as opposed to embedFont (without the s) makes the difference. I don’t usually use components but the List component is great for displaying data from external XML files, this tutorial simply informs how to embed fonts in components using the setRendererStyle property. The result of the tutorial is found here…

Tutorial Result with Embedded Font

Step 1 (Setup)

Create a new Flash File (Actionscript 3) as well as a new Actionscript File and save them in the same folder.
In your Flash File enter the name of your Actionscript file into the Document class setting found in the Properties Window (Window > Properties > Properties). The Document Class is the Actionscript file which instantiates or starts your program.

Step 2 (Add Assets to the Stage/Library)

The List Component

Open the Components Window (Window > Components) and drag a List component on to the stage. Immediately delete it from the stage. This is how you can quickly get the List component and its supporting files into your Library (Window > Library).
Open the Library and right-click the List component, then select the Linkage option. Make sure the Export for Actionscript checkbox is selected and hit ok.

The Font

Right-click in an empty space in the Library to bring up the contextual menu, then select New Font. Select the font you plan to embed into your List component and give it a name, make note of this name for it becomes the class name of your font.
Open the Library and right-click the Font you added, then select the Linkage option. Make sure the Export for Actionscript checkbox is selected and hit ok.

Step 3 (Coding the Actionscript File)

The code below is commented as to help you understand what is happening, the code below that has no comments. The main trick for embedding font and ensuring the font is visible on computers that don’t have the font installed is utilizing the setRenderStyle property of the UIComponents Class.

Commented Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

package

{

//import for controlling stage scale

import flash.display.StageScaleMode;

//import for utilizing List API.

import fl.controls.List;

//import for creating the container for the List object.

import flash.display.Sprite;

//import for datatyping your library/embedded font.

import flash.text.Font;

//import for setting the formatting style.

import flash.text.TextFormat;

public class Main extends Sprite

{

//create the container for the List object.

private var container:Sprite = new Sprite;

//create the List object instance.

private var list:List = new List;

//create the new font based on your library font.

//newChiselFont is the name of my font, you should

//replace this name with the Class name of the font

//you created in your library (Linkage Properties).

//always check in the library to ensure the Linkage

//property is set, for some reason in Flash CS3

//the Linkage property for fonts clears itself,

//as a result the compiled swf will not embed correctly.

private var newChiselFont:Font = new ChiselFont();

//create the TextFormat object for formatting your text.

private var textFormatter:TextFormat = new TextFormat();

//this function executes as a result of being the

//Document Class of the Flash CS3 file you created.

public function Main()

{

//set the settings of the TextFormat instance

//newChiselFont = yourLibraryFontLinkageName

//.fontName is literally what you type.

textFormatter.font = newChiselFont.fontName;

textFormatter.size = 16;

textFormatter.color = "0x000000";

//ensure no scaling

stage.scaleMode = StageScaleMode.NO_SCALE;

//adds a container object to hold the List object.

addChild(container);

//adds the list object to the container, this

//list is now in the container so where ever

//you position the container the list object

//will move with the container.

container.addChild(list);

//set the container position relative to the

//container, which in this tutorial is defaulted

//to (0,0).

list.x = 20;            list.y = 20;

list.width = 240;        list.height = 200;

//set the renderer style to the style of

//your TextFormat object and ensure that

//embedFonts is true. "textFormat" and

//"embedFonts" are typed literally.

list.setRendererStyle( "textFormat", textFormatter);

list.setRendererStyle( "embedFonts", true );

//add item labels

list.addItem({label:"circstar.com"});

list.addItem({label:"gotoAndLearn.com"});

list.addItem({label:"actionscript.org"});

list.addItem({label:"pv3d.org"});

}

}

}

Non-commented Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

package

{

import flash.display.StageScaleMode;

import fl.controls.List;

import flash.display.Sprite;

import flash.text.Font;

import flash.text.TextFormat;

public class Main extends Sprite

{

private var container:Sprite = new Sprite;

private var list:List = new List;

private var newChiselFont:Font = new ChiselFont();

private var textFormatter:TextFormat = new TextFormat();

public function Main()

{

textFormatter.font = newChiselFont.fontName;

textFormatter.size = 16;

textFormatter.color = "0x000000";

stage.scaleMode = StageScaleMode.NO_SCALE;

addChild(container);

container.addChild(list);

list.x = 20;            list.y = 20;

list.width = 240;        list.height = 200;

list.setRendererStyle( "textFormat", textFormatter);

list.setRendererStyle( "embedFonts", true );

list.addItem({label:"circstar.com"});

list.addItem({label:"gotoAndLearn.com"});

list.addItem({label:"actionscript.org"});

list.addItem({label:"pv3d.org"});

}

}

}

Comments (6)

Sergio says:

August 3, 2008 at 4:49 pm

Thanks a lot Circstar. You have killed a ghost :P with the turorial.

Cheers

DaddyJ says:

August 13, 2008 at 5:05 am

U R A genius! Thanks for the tutorial. I’d almost given up trying to style a List object with the font I wanted. The Adobe docs approach seemed to work only if the font was TrueType. Unfortunately, I needed it to work with a Type 1 font. Again, thanks for digging into the class properties and figuring out what even Adobe’s folks don’t seem to get.