This causes a concern for the Flash Platform in general, because this shows that existing code is basically held hostage to future Adobe Flash Player updates that may break past deployed code. I would expect Adobe QA to be more rigorous than this.

This issue can be found in the bugbase, but while marked as fixed, it is not:

https://bugbase.adobe.com/index.cfm?event=bug&id=2941694

Being an inherent player bug that causes problems to past deployed code, this is not something that can be fixed by using “workaround code”.

The problem is severe enough to warrant a quick update to version 10 (or pull 10.3.183.5 from further distribution), but Adobe has chosen to fix it only in version 11 BETA instead. I don’t think this is acceptable.

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.

A “hint” text is different from a default text value. The “hint” text is displayed only if the text field is empty; it is not displayed while the field has focus or if the field is already populated with any value. The “hint” text is also not reported as the value of the text field.

uiTextInput “hint” property
Using the uiTextInput component from the Aspire UI library, implementing a “hint” text is easy – just specify the “hint” property:

var input:uiTextInput = new uiTextInput()
input.hint = "some hint";

Example
Here is an example SWF:

The text style used when a hint is displayed can be (and should be) different from that used by the uiTextInput instance normally. The hint text uses a “_hint” sub-style of the style used by the uiTextInput instance, and can be specified either via the “text.css” CSS file in the theme folder or via actionscripting using the uiTextStyles manager. In the above example, we used the uiTextStyles manager.

uiTextStyles.manager.setStyle("searchStyle",{color:"#000000",fontSize:11});
uiTextStyles.manager.setStyle("searchStyle_hint",{color:"#777777",fontStyle:"italic"});

The rest of the 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

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 HintTextDemo extends Sprite
	{
		public function HintTextDemo()
		{
			// ** 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
		{
			// ** main application code **
 
			uiTextStyles.manager.setStyle("searchStyle",{color:"#000000",fontSize:11});
			uiTextStyles.manager.setStyle("searchStyle_hint",{color:"#777777",fontStyle:"italic"});
 
			var searchEntry:uiTextInput = new uiTextInput();
			searchEntry.textStyle = "searchStyle";
			searchEntry.hint = "Search";
 
			var searchBtn:uiPushButton = new uiPushButton(null,"search.png");
 
			var searchBox:uiBox	= new uiBox();
			searchBox.spacing		= 5;
			searchBox.addChild(searchEntry);
			searchBox.addChild(searchBtn);
 
			var searchForm:uiForm = new uiForm();
			searchForm.defaultButton = searchBtn;
			searchForm.move(20,20);
			searchForm.addChild(searchBox);
 
			addChild(searchForm);
		}
	}
}

Note: The “hint” property is available to the uiTextInput class only in version 1.1.2+.

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 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 with these two properties is that they do not update immediately at those times when they should -

(i) when a TextField instance is resized such that the vertical scroll bounds change; and

(ii) when the TextField.wordWrap property changes (from false to true or vice versa).

Some simple code to replicate and demonstrate this issue:

import flash.text.TextField;
 
var txt:TextField = new TextField();
txt.width = 100;
txt.height = 100;
txt.text = "Line 1\nLine 2\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8\nLine 9\nLine 10";
addChild(txt);
trace("bottomScrollV is:"+txt.bottomScrollV); // output 6, correct value
trace("maxScrollV is:"+txt.maxScrollV); // output 5, correct value
 
stage.addEventListener(MouseEvent.CLICK,on_click);
function on_click(evt:MouseEvent):void
{
	txt.height = 50; // ** shrink the height **
	trace("bottomScrollV is:"+txt.bottomScrollV); // output 6, WRONG!
	trace("maxScrollV is:"+txt.maxScrollV); // output 5, WRONG!
}

In the code above, when you click on the stage, the text field is shrunk to 50px height resulting in only 3 lines showing, which means that the bottomScrollV value should have been 3 and the maxScrollV 8, but the values will remain at 6 and 5 respectively… until… supposedly… one frame interval later. Yes, that is what I mean by the delayed updating issue. The same issue applies if you toggle the TextField.wordWrap property.

Apparently, this issue still exists in Flash Player 10.

Admittedly the issue is minor. Perhaps most ActionScripters will never be bothered by it. This is a problem however if you are trying to build accurate text scrollers. I suppose you could work around by living with the “timing” issue and fix it with a “timing” hack, ie checking the properties only next frame interval.

But here is a fix for the issue – just call the TextField.getCharBoundaries() method after the TextField instance is resized (or the wordWrap property has changed). In the example above, we would write the code as:

function on_click(evt:MouseEvent):void
{
	txt.height = 50; // ** shrink the height **
	txt.getCharBoundaries(0);
	trace("bottomScrollV is:"+txt.bottomScrollV); // output 3, CORRECT!
	trace("maxScrollV is:"+txt.maxScrollV); // output 8, CORRECT!
}

Don’t ask me how or why it works. It just does. My guess is perhaps when trying to resolve the character boundaries the TextField instance is forced to re-compute its bounding box and update its scroll properties… It was this guesswork that got me trying anyway, so that would be my explanation if I need to give one.

Once again, simple fix:

	txt.getCharBoundaries(0);

NOTE:
The getCharBoundaries() method accepts one parameter – the index of the character to query – and returns a rectangle that is the bounding box of that specified character. In the above case, however, we use the method only as a fix for the TextField.bottomScrollV and TextField.maxScrollV issue – we just feed any index for the parameter and we are not interested in the rectangle returned…

Multi-State Styles
Let’s take a look at a snippet of an example CSS file:

button
{
	color:#000000;
}
button_disabled
{
	color:#808080;
}
button_over
{
	color:#cc0000;
}
button_selected
{
	color:#ffffff;
}

The above demonstrates how to define text styles for different visual states. For example, a uiLabelButton instance whose “textStyle” property has been set to “button” will render its text in black (#000000) normally, red (#cc0000) when mouse over, white (#ffffff) when selected, and gray (#808080) when disabled.

Embedded Styles
While it is recommended that you keep all the text styles defined in the external CSS file for easy modifications, you can also define additional styles in your application code. For example, take a look at the following:

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.controls.uiText;
import com.ghostwire.ui.managers.uiTextStyles;
 
uiTextStyles.manager.setStyle("style1",{shadow:"#808080"});
uiTextStyles.manager.setStyle("style2",{color:"#ffffff",outline:"#000000"});
uiTextStyles.manager.setStyle("style3",{color:"#ffffff",outline:"#000000",shadow:"#808080"});
uiTextStyles.manager.setStyle("style4",{fontWeight:"bold"});
uiTextStyles.manager.setStyle("style5",{fontStyle:"italic"});
uiTextStyles.manager.setStyle("style6",{fontStyle:"italic",fontWeight:"bold"});
 
var txt:uiText = new uiText("this is normal text");
 
var txt_shadowed:uiText = new uiText("this text has gray shadow");
txt_shadowed.textStyle = "style1";
 
var txt_outline:uiText = new uiText("this is white text with black outline");
txt_outline.textStyle = "style2";
 
var txt_outshadowed:uiText = new uiText("this is white text with black outline and gray shadow");
txt_outshadowed.textStyle = "style3";
 
var txt_bold:uiText = new uiText("this is bold text");
txt_bold.textStyle = "style4";
 
var txt_italic:uiText = new uiText("this is italic text");
txt_italic.textStyle = "style5";
 
var txt_bolditalic:uiText = new uiText("this is bold italic text");
txt_bolditalic.textStyle = "style6";
 
var box:uiBox = new uiBox();
box.vertical = true;
addChild(box)
 
box.addChild(txt);
box.addChild(txt_shadowed);
box.addChild(txt_outline);
box.addChild(txt_outshadowed);
box.addChild(txt_bold);
box.addChild(txt_italic);
box.addChild(txt_bolditalic);

The above will generate the following:

(above is a screenshot of the compiled SWF)

“outline” and “shadow” Properties
As shown above, not only is it easy to define various text styles, you can also define “outline” and “shadow” properties (not otherwise available in vanilla Actionscript). The “outline” property when defined will cause the an outline to be drawn on the text glyphs. This is commonly seen in video subtitles. The “shadow” property when defined will cause the text cast a subtle shadow, resulting in either a raised or lowered look depending on the color combinations.

Containers and Style Inheritance
Note that all uiComponent instances have a “textStyle” property – you do not need to set the “textStyle” property of each individual uiText instance directly because they will inherit the property value from their containing (grand)parents if their own “textStyle” property is undefined. Therefore, you can set the “textStyle” property of a container and all the uiText instances within the container whose “textStyle” property is undefined will inherit that same value defined for that container.

Aspire UI Components Trial Version
You may experiment with the various features of the Actionscript 3.0 (AS3) Aspire UI Components by downloading the trial version at http://ghostwire.com/aspireui/download/
* Adobe Flash CS3 is required