Small caps are typically used for titles, headlines, column headings, etc. They are also good for any text that you would usually use all capitals. This is because the use of small caps makes the run of capital letters seem less jarring, and would also often require less space than all caps.

While many word processors and text formatting systems include an option to format text in small caps (which leaves uppercase letters as they are but converts lowercase letters to small caps), this is a feature that is lacking in most graphics editing software.

Some fonts have inherent small caps, ie they use smaller capital letters in place of the lowercase characters. These fonts are useful when you wish to use small caps to bring distinction to your designs.

Here are some fonts with inherent small caps:

The sample text used is:
“The Quick Brown Fox Jumps Over The Lazy Fox”

• Berlin Small Caps
  
• Copperplate Gothic Bold
  
• Copperplate Gothic Light
  
• Lithos Pro Regular
  
• Orator Std
  
• Trajan Pro
  
• Pericles
  
• Pericles Light
  

Please feel free to leave a comment to mention any other small caps font(s) not listed above.

Thanks!

First, set up the TextField:

// ActionScript 3.0
var txt:TextField = new TextField();
// new TextFormat(font, size, color)
txt.defaultTextFormat = new TextFormat("DejaVu Sans", 21, 0xFFFFFF);
txt.antiAliasType = AntiAliasType.ADVANCED;
txt.autoSize = TextFieldAutoSize.LEFT;
txt.text = "The quick brown fox jumps over the lazy dog.";
txt.x = 5;
txt.y = 5;
addChild(txt);

Drawing The Outline
To draw an outline around the text glyphs, use the flash.filters.GlowFilter:

// new GlowFilter(color, alpha, blurX, blurY, strength)
txt.filters = [new GlowFilter(0x000000, 1.0, 2, 2, 4)];

Adjusting The Outline Thickness
To thicken the outline, increase the values for “blurX”, “blurY” and “strength”. The value of “blurX”/”blurY” should be the same. You can try various values to suit your needs, but the value of “strength” should be kept at double that of “blurX”/”blurY”. For example, if I were to use value of 4 for “blurX”/”blurY”, I would set “strength” as 8. Setting “strength” too low will cause blurring to be visible; setting it excessively high and the outline may become distorted.

// new GlowFilter(color, alpha, blurX, blurY, strength)
txt.filters = [new GlowFilter(0x000000, 1.0, 4, 4, 8)];

Aspire UI
If you are using the Aspire UI library, this feature is already built-in via the uiTextStyles manager:
http://ghostwire.com/aspireui/docs/textstyles/outline-and-shadow
The “outlineWeight” text style property (v1.2.2+) determines the thickness of the outline.

When using the Aspire UI AS3 library, if you need to draw outlines on text glyphs in uiText instances, you can do so by defining the “outline” property when defining your text style(s). This feature works with both embedded as well as non-embedded fonts.

outline
Set up the text style via the uiTextStyles manager:

// ActionScript 3.0
uiTextStyles.manager.setStyle("demo", { fontFamily:"DejaVu Sans", fontSize:21, color:"#FFFFFF", outline:"#000000" } );

Place the uiText instance:

// ActionScript 3.0
var txt:uiText = new uiText();
txt.textStyle = "demo"; // assign "demo" text style
txt.text = "The quick brown fox jumps over the lazy dog.";
txt.move(5,5);
addChild(txt);

outlineWeight
To adjust the thickness of the outline, you can specify the “outlineWeight” property (v1.2.2+). The default value for “outlineWeight” is 4. Specify a larger number for a thicker outline.

// ActionScript 3.0
uiTextStyles.manager.setStyle("demo", { fontFamily:"DejaVu Sans", fontSize:21, color:"#FFFFFF", outline:"#000000", outlineWeight:8 } );

Try different values and see what works for the kind of look you want to achieve. Use values proportional to the font size. Obviously, if you are using a small font size, don’t specify a huge number for “outlineWeight”. One important thing to take note of is that this outline will not be taken into account when computing the uiText instance’s preferred size and a thick outline may therefore fall outside the bounds of its allocated space (can be rectified by giving the instance some “margin”).

CSS
Instead of hard-coding text styles via ActionScript, you may also define the style in CSS (text.css in the theme folder):

demo
{
	fontFamily:"DejaVu Sans";
	fontSize:21;
	color:"#FFFFFF";
	outline:"#000000";
	outlineWeight:8;
}

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

http://unicode.org/charts/

For example, if you need to embed Thai characters, you can look up “Thai” under “South East Asian” on that website – it will give you a PDF document, have a peek inside and you will see that Thai characters are in the range “U+0E00-U+0E7F”:

[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans",
unicodeRange="U+0E00-U+0E7F")]
public static const REGULAR:Class;

Note
The font you are embedding must of course contain the respective glyphs in the specified unicode range(s).

Set up the TextField:

// ActionScript 3.0
var txt:TextField = new TextField();
// new TextFormat(font, size, color, bold)
txt.defaultTextFormat = new TextFormat("DejaVu Sans", 21, 0x000000, true);
txt.embedFonts = true; // the font must be embedded
txt.antiAliasType = AntiAliasType.ADVANCED;
txt.autoSize = TextFieldAutoSize.LEFT;
txt.selectable = false;
txt.text = "The quick brown fox jumps over the lazy dog.";
txt.x = 5;
txt.y = 5;
addChild(txt);

Embossed Text
To apply an embossed text effect, use the flash.filters.BevelFilter:

txt.filters = [new BevelFilter(1.5, 45)]; // distance, angle

Engraved Text
To apply an engraved text effect, ie having the text look like it is etched into the surface, rotate the bevel angle by 180 degrees:

txt.filters = [new BevelFilter(1.5, 225)]; // distance, angle

The first parameter of the BevelFilter is the bevel distance – you can try various values, but I have found 1.5 to work well for most font sizes, to give the text a subtle yet visible embossed/engraved look.

Do bear in mind that in order for the effects to be visible, there must be reasonable amount of painted area on the text glyphs. If you use a small, thin font, then the effects are not going to be very visible. On the other hand, using a large, bold font is going make the effect more obvious.

If you are going to use the same filter(s) in multiple places, consider placing the filter(s) in a constant:

private const embossFilter:BevelFilter = new BevelFilter(1.5, 45);
private const engraveFilter:BevelFilter = new BevelFilter(1.5, 225);

You can then apply the filter as follows:

txt.filters = [embossFilter];

NOTE:
Notice that in the example above, the “selectable” property of the TextField instance is set to “false”. This is not really necessary, but it is important to note if the property is left as “true”, ie the text if left selectable, then when the text is selected, the portion that is selected loses the embossed/engraved effect. This is because the BevelFilter is applied to the TextField as a whole, not each alphabet individually – when there is a selection, and the background is highlighted (painted), the filter is applied to the background rather than the text in the foreground.

Faux bold is “fake” bold. It is an efficient way to display text in the same typeface but with different weights (bolder, thinner, etc.). It can be used as an alternative to the real bold font, or used in combination with the real thing.

Sometimes, the bold version of a font simply doesn’t exist so this is also where faux boldness comes in. Or, you can use this feature to make the typeface thinner (rather than bolder).

The “weight” Property
The “weight” property is defined in CSS just like the other text formatting properties:

specialstyle
{
	color:#FFFFFF;
	weight:200;
}

If you prefer to define the style within your application code using ActionScript:

	uiTextStyles.manager.setStyle("specialstyle",{color:"#FFFFFF",weight:200});

The value of the ”weight” property should be a value between -200 to 200. To make the font thinner, use a negative number. To make the font bolder, use a positive number.

You can also use some predefined values when specifying the ”weight” property:
“bolder” is equivalent to 200
“bold” is equivalent to 100
“thin” is equivalent to -100
“thinner” is equivalent to -200

Example

import com.ghostwire.ui.controls.uiText;
import com.ghostwire.ui.managers.uiFonts;
import com.ghostwire.ui.managers.uiTextStyles;
 
uiTextStyles.manager.setStyle("styleA",{fontFamily:"DejaVu Sans",fontSize:16,weight:"thinner"}); // -200
uiTextStyles.manager.setStyle("styleB",{fontFamily:"DejaVu Sans",fontSize:16,weight:"thin"}); // -100
uiTextStyles.manager.setStyle("styleC",{fontFamily:"DejaVu Sans",fontSize:16});
uiTextStyles.manager.setStyle("styleD",{fontFamily:"DejaVu Sans",fontSize:16,weight:"bold"}); // 100
uiTextStyles.manager.setStyle("styleE",{fontFamily:"DejaVu Sans",fontSize:16,weight:"bolder"}); // 200
 
// ** faux bold weights can also be combined with true bold **
uiTextStyles.manager.setStyle("styleAb",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold",weight:"thinner"});
uiTextStyles.manager.setStyle("styleBb",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold",weight:"thin"});
uiTextStyles.manager.setStyle("styleCb",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold"});
uiTextStyles.manager.setStyle("styleDb",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold",weight:"bold"});
uiTextStyles.manager.setStyle("styleEb",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold",weight:"bolder"});
 
uiFonts.manager.load("DejaVu Sans");
 
var displayTextA:uiText	= new uiText();
displayTextA.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextA.text	= "The quick brown fox jumps over the lazy dog.";
displayTextA.textStyle = "styleA";
addChild(displayTextA);
 
var displayTextB:uiText	= new uiText();
displayTextB.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextB.text	= "The quick brown fox jumps over the lazy dog.";
displayTextB.textStyle = "styleB";
displayTextB.move(0, 20);
addChild(displayTextB);
 
var displayTextC:uiText	= new uiText();
displayTextC.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextC.text	= "The quick brown fox jumps over the lazy dog.";
displayTextC.textStyle = "styleC";
displayTextC.move(0, 40);
addChild(displayTextC);
 
var displayTextD:uiText	= new uiText();
displayTextD.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextD.text	= "The quick brown fox jumps over the lazy dog.";
displayTextD.textStyle = "styleD";
displayTextD.move(0, 60);
addChild(displayTextD);
 
var displayTextE:uiText	= new uiText();
displayTextE.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextE.text	= "The quick brown fox jumps over the lazy dog.";
displayTextE.textStyle = "styleE";
displayTextE.move(0, 80);
addChild(displayTextE);
 
var displayTextAb:uiText	= new uiText();
displayTextAb.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextAb.text	= "The quick brown fox jumps over the lazy dog.";
displayTextAb.textStyle = "styleAb";
displayTextAb.move(0, 105);
addChild(displayTextAb);
 
var displayTextBb:uiText	= new uiText();
displayTextBb.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextBb.text	= "The quick brown fox jumps over the lazy dog.";
displayTextBb.textStyle = "styleBb";
displayTextBb.move(0, 125);
addChild(displayTextBb);
 
var displayTextCb:uiText	= new uiText();
displayTextCb.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextCb.text	= "The quick brown fox jumps over the lazy dog.";
displayTextCb.textStyle = "styleCb";
displayTextCb.move(0, 145);
addChild(displayTextCb);
 
var displayTextDb:uiText	= new uiText();
displayTextDb.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextDb.text	= "The quick brown fox jumps over the lazy dog.";
displayTextDb.textStyle = "styleDb";
displayTextDb.move(0, 165);
addChild(displayTextDb);
 
var displayTextEb:uiText	= new uiText();
displayTextEb.rotation = 1; // ** text will not show unless using embedded fonts **
displayTextEb.text	= "The quick brown fox jumps over the lazy dog.";
displayTextEb.textStyle = "styleEb";
displayTextEb.move(0, 185);
addChild(displayTextEb);

Note
The faux bold feature is implemented via the “thickness” property of the native flash.text.TextField class. Therefore, if you are not using the Aspire UI library, you can still implement the same faux bold feature via that property – just make sure that you have embedded the font and the “antiAliasType” property of the text field is set to flash.text.AntiAliasType.ADVANCED.

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

The uiFonts manager can work with embedded font SWFs compiled either from the Flash IDE or the Flex compiler.

When compiling using the Flash IDE, we use Font Symbols in the Library (see uiFonts usage notes).

When compiling using the Flex compiler, we use a single AS3 class file. The following shows how the AS3 Class must be written in order for the resulting SWF to work with the uiFonts manager.

If you are using Flash Develop, the following method for building font SWFs apply as well and you may use Tools -> Flash Tools -> Build Current File (CTRL-F8) to compile the class.

In this example, we will create a “DejaVu_Sans.swf” file containing the “DejaVu Sans” font. The font is available from http://dejavu-fonts.org.

package
{
	import flash.display.Sprite;
 
	public class DejaVu_Sans extends Sprite
	{
		[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans",
		unicodeRange="U+0020-U+007E")]
		public static const REGULAR:Class;
 
		[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontWeight="bold",
		unicodeRange="U+0020-U+007E")]
		public static const BOLD:Class;
 
		[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontStyle="italic",
		unicodeRange="U+0020-U+007E")]
		public static const ITALIC:Class;
 
		[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontWeight="bold", fontStyle="italic",
		unicodeRange="U+0020-U+007E")]
		public static const BOLD_ITALIC:Class;
	}
}

Class Name

• First of all, the class name must match the name of the font, converting any space to underscore.

public class DejaVu_Sans extends Sprite

REGULAR

• Embedding the REGULAR version of the font is mandatory. You may skip the BOLD, ITALIC and BOLD_ITALIC versions, but not the REGULAR version.
• The REGULAR version of the font is embedded by defining a static variable (or constant) named REGULAR and declaring the [Embed] meta tag above it accordingly:

[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans",
unicodeRange="U+0020-U+007E")]
public static const REGULAR:Class;

BOLD

• If the font has a BOLD version (depends on the font developer – not all fonts are provided with a bold version), you may embed that version by defining a static variable (or constant) with the name BOLD and declaring the “fontWeight” value as “bold” in the meta tag:

[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontWeight="bold",
unicodeRange="U+0020-U+007E")]
public static const BOLD:Class;

ITALIC

• Likewise, if the font has an ITALIC version (most CJK fonts do not have italic versions), you may embed that version by defining a static variable (or constant) with the name ITALIC and declaring the “fontStyle” value as “italic”:

[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontStyle="italic",
unicodeRange="U+0020-U+007E")]
public static const ITALIC:Class;

BOLD_ITALIC

• If the font has both BOLD and ITALIC versions, you may embed a BOLD_ITALIC version:

[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontWeight="bold", fontStyle="italic",
unicodeRange="U+0020-U+007E")]
public static const BOLD_ITALIC:Class;

unicodeRange

• The “unicodeRange” value in the [Embed] meta tag determines which glyphs to include. In the above example, we have embedded glyphs from the basic latin range:

  // BASIC LATIN
  U+0020-U+002F // punctuation
  U+0030-U+0039 // 0-9
  U+003A-U+0040 // punctuation
  U+0041-U+005A // A-Z
  U+005B-U+0060 // punctuation
  U+0061-U+007A // a-z
  U+007B-U+007E // punctuation

• If you happen to need Japanese glyphs, the following range would be useful:

  // JAPANESE KANA
  // Japanese-style punctuation
  U+3000-U+303F
  // Hiragana
  U+3040-U+309F
  // Katakana
  U+30A0-U+30FF
  // Half-width katakana
  U+FF61-U+FF9F
  // Full-width roman characters (suggest omit)
  U+FF00-U+FF60
  // CJK unifed ideographs – Common and uncommon kanji (huge!)
  U+4E00-U+9FAF

• The font you are embedding must of course contain the respective glyphs in the specified unicode range(s).

Using with the uiFonts manager

• Once you have compiled the font SWF, put it in the project’s “assets/fonts/” folder to make it available for use in your application.
• Calling the uiFonts.manager.load() method will load “DejaVu_Sans.swf” from the fonts folder (note: specify the font name when calling the load() method, not the file name).

  uiFonts.manager.load("DejaVu Sans");

• As shown in the previous demo, the uiFonts manager will work hand-in-hand with the uiTextStyles manager to automatically apply embedded fonts to uiText instances on the stage (instances that are using the respective font(s)) after loading completes.

The Problem
Unfortunately, embedding fonts into the application SWF can seriously bloat the file size. It will also increase compile time significantly, wasting much development time.

The Solution
Using the uiFonts manager from Aspire UI Standard Edition, it is possible to use embedded fonts without compiling them into the main application SWF. Instead, each individual font exists in its own external SWF file which is loaded into the application on-demand during run-time. These font SWF files can be created once for each font and re-used across different applications.

This is especially helpful for applications where the use of embedded fonts is essential, such as an apparel print design or greeting card design application that offers multiple font choices.

Live Demo
The following is a live demo of the uiFonts manager in action (FontsExample.swf):

• The text displaying “The quick brown fox jumps over the lazy dog.” is slightly rotated, so it won’t show up unless it is using embedded fonts.
• The application starts with no embedded font available for usage.
• Clicking the “DejaVu Sans” button loads the “DejaVu_Sans.swf” file from the “assets/fonts/” folder. Once it is loaded, the embedded font will be used automatically. To load the font dynamically during run-time, uiFonts.manager.load(“DejaVu Sans”) is called – the font name is specified, not the font file name.
• Likewise, clicking the “SanaFon” button loads “SanaFon.swf” – uiFonts.manager.load(“SanaFon”) is called.
• A Bold version of the “SanaFon” font does not exists.

FontsExample.as
Here is the source code of the FontsExample.as class:

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

package
{
	import com.ghostwire.ui.containers.*;
	import com.ghostwire.ui.controls.*;
	import com.ghostwire.ui.data.*;
	import com.ghostwire.ui.events.*;
	import com.ghostwire.ui.enums.*;
	import com.ghostwire.ui.managers.*;
 
	import flash.display.Sprite;
	import flash.events.*;
	import flash.system.Capabilities;
 
	public class FontsExample extends Sprite
	{
		// ** instances **
		private var displayTextA:uiText;
		private var displayTextB:uiText;
		private var progressText:uiText;
 
		public function FontsExample()
		{
			// ** make sure stage is not null **
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
 
		private function init(evt:Event):void
		{
			// ** let assets preload before starting application **
			uiSkins.manager.addEventListener(Event.INIT,main);
		}
 
		private function main(evt:Event):void
		{
			// ** topLevelPane **
			var topLevelPane:uiPane = new uiPane();
			topLevelPane.padding	= 4;
			topLevelPane.setSize(stage.stageWidth,stage.stageHeight);
			addChild(topLevelPane);
 
			var titleText:uiText	= new uiText("Aspire UI Components Example");
			titleText.alignX	= ALIGN.CENTER;
			titleText.background	= {color:0x819A98,cornerRadius:12}
			titleText.padding	= "6,12";
			titleText.textStyle	= "title";
			topLevelPane.addChild(titleText);
 
			var versionText:uiText	= new uiText("Flash Player Version "+Capabilities.version);
			versionText.alignX	= ALIGN.CENTER;
			versionText.y		= topLevelPane.height - 80;
			topLevelPane.addChild(versionText);
 
			var footerText:uiText	= new uiText("© 2008-2009 GhostWire Studios")
			footerText.background	= {color:0x819A98};
			footerText.padding	= 3;
			footerText.alignX	= ALIGN.CENTER;
			footerText.fillX	= true;
			footerText.textStyle	= "footer";
			footerText.y		= topLevelPane.height - 60;
			topLevelPane.addChild(footerText);
 
			var ghostwireMark:uiImage	= new uiImage("GhostWireStudiosMark");
			ghostwireMark.alignX	= ALIGN.CENTER;
			ghostwireMark.alignY	= ALIGN.BOTTOM;
			topLevelPane.addChild(ghostwireMark);
 
			// ** display text **
			displayTextA		= new uiText();
			displayTextB		= new uiText();
 
			displayTextB.rotation = 2; // ** text will not show unless using embedded font **
 
			displayTextA.text	=
			displayTextB.text	= "The quick brown fox jumps over the lazy dog.";
 
			var txt:uiBox	= new uiBox();
			txt.vertical		= true;
			txt.alignX		= ALIGN.CENTER;
			txt.y			= 60;
			txt.addChild(displayTextA);
			txt.addChild(displayTextB);
 
			topLevelPane.addChild(txt);
			// ** end display text **
 
			// ** buttons **
			var buttons:uiBox	= new uiBox();
			buttons.alignX		= ALIGN.CENTER;
			buttons.y		= 150;
			buttons.spacing		= 20;
 
			var buttonA:uiLabelButton	= new uiLabelButton("DejaVu Sans");
			var buttonB:uiLabelButton	= new uiLabelButton("SanaFon");
 
			buttonA.fillY			= true;
			buttonB.fillY			= true;
 
			buttonA.data		= "styleA";
			buttonB.data		= "styleB";
 
			buttonA.addEventListener(MouseEvent.CLICK,on_click,false,0,true);
			buttonB.addEventListener(MouseEvent.CLICK,on_click,false,0,true);
 
			buttons.addChild(buttonA);
			buttons.addChild(buttonB);
 
			topLevelPane.addChild(buttons);
			// ** end buttons **
 
			// ** progress text **
			progressText		= new uiText();
			progressText.alignX	= ALIGN.CENTER;
			progressText.y		= 190;
			topLevelPane.addChild(progressText);
			// ** end progress text **
 
			// ** end topLevelPane **
 
			// ** create some text styles **
			uiTextStyles.manager.setStyle("styleA",{fontFamily:"DejaVu Sans",fontSize:16});
			uiTextStyles.manager.setStyle("styleB",{fontFamily:"SanaFon",fontSize:16});
			uiTextStyles.manager.setStyle("styleABold",{fontFamily:"DejaVu Sans",fontSize:16,fontWeight:"bold"});
			uiTextStyles.manager.setStyle("styleBBold",{fontFamily:"SanaFon",fontSize:16,fontWeight:"bold"});
		}
 
		/**
		apply new text style and load external font swf on demand
		*/
		private function on_click(evt:MouseEvent):void
		{
			displayTextA.textStyle = String(uiLabelButton(evt.target).data);
			displayTextB.textStyle = displayTextA.textStyle+"Bold";
			if (displayTextA.embedFonts)
			{
				// ** embedded font already loaded and in use **
				progressText.text = "";
			}
			else
			{
				// ** begin loading external font swf **
				progressText.text = "Loading...";
				uiFonts.manager.load(uiLabelButton(evt.target).text);
				uiFonts.manager.addEventListener(ProgressEvent.PROGRESS,on_loadProgress);
			}
		}
 
		/**
		tracks download progress
		*/
		private function on_loadProgress(evt:ProgressEvent):void
		{
			progressText.text = ((evt.bytesLoaded == evt.bytesTotal) ? "Total: " : "Loading: ")+evt.bytesLoaded+" bytes";
		}
	}
}

• Lines 67-84: This is the display text for “A quick brown fox jumps over the lazy dog”. Notice that the “rotation” property of the containing box is set to 2 – the text will not show unless embedded fonts are used.
• Lines 87-108: These are the buttons that will set the text to the text styles using the respective fonts, and initiate the loading of the external font swf files.
• Lines 111-116: This is the text that shows the loading progress while an external font SWF file is being loaded.
• Lines 121-124: Set some text styles to use the respective fonts.
• Lines 130-146: Event handler when a button is clicked. Notice the “embedFonts” property is queried – this property automatically assume true/false depending on whether the embedded font is available or not.
• Lines 151-155: Event handler for tracking the download progress of external font SWF files.
• Notice that there is no code explicitly asking text fields to use embedded fonts (after the fonts are loaded) – this is not necessary because the uiFonts manager works together with the uiTextStyles manager to invalidate and redraw uiText instances automatically after a font is loaded.

Font SWF Files
For instructions on how to create individual font SWF files, please refer to uiFonts usage notes.

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.