Here is how you can draw an outline on text glyphs during run-time via ActionScript. This method works with embedded as well as non-embedded fonts.

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.

Other Posts You Might Enjoy:

• Using uiTextStyles: Drawing Outline on Text Glyphs
• [AS3] Embossed and Engraved Text Effects (Embedded Fonts)
• [AS3] Applying BitmapFilters In The Correct Order
• Using uiImage: Drawing Solid Border/Frame Around The Image
• [AS3] Fixing TextField.bottomScrollV and TextField.maxScrollV

Trackback URI | Comments RSS