GhostWire Studios - Flash/Flex UI Components Development And Consulting Services
Quality User Interface Controls For Flash Application DevelopmentAspireUI Components

Jul 29 2009

Using uiTextStyles: Drawing Outline on Text Glyphs

Published by at 1:42 pm under Aspire UI,Flash,Tips

Drawing outlines on text glyphs can help to give the text emphasis, or simply make it more legible or visible. This type of text rendering is commonly seen in video subtitles.

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);

outline text weight 4


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 } );

outline text weight 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.

pixelstats trackingpixel
Be Sociable, Share!
               

    No responses yet

    Comments RSS

    Leave a Reply

    *
    To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
    Click to hear an audio file of the anti-spam word