Outlined Text

The easiest way to create outlined dynamic text in AS3 is to apply an instance of the GlowFilter to the TextField in which you want all individual letters of text to be outlined. Simply choose low blur parameters and large strength parameter for the GlowFilter: new GlowFilter(0x000000,1.0,2.0,2.0,10). In this tip we show exactly how to do it.

Download

Download the very well-commented source fla file corresponding to the effect above:

Comments and Code

Below is the Timeline code for the Flash movie presented here and comments.

We create two instances of TextField, field1 and field2 and position them on the stage. By default, they are dynamic TextFields. We also create an instance of TextFormat to assign format to field1 and field2.

var field1:TextField=new TextField();

var field2:TextField=new TextField();

var format:TextFormat=new TextFormat();

this.addChild(field1);

this.addChild(field2);

field1.x=105;

field1.y=20;

field1.width=350;

field1.height=250;

field1.wordWrap=true;

field1.mouseEnabled=false;

field2.x=80;

field2.y=250;

field2.width=400;

field2.height=200;

field2.wordWrap=true;

field2.mouseEnabled=false;

format.color=0xFF0000;

format.align="center";

format.size=40;

format.font="Arial";

format.letterSpacing=3;

field1.defaultTextFormat=format;

field1.text="OUTLINED TEXT SHOWS ON EVERY BACKGROUND.";

format.color=0xFF9900;

format.size=28;

field2.defaultTextFormat=format;

field2.text="OUTLINE IS OBTAINED BY APPLYING A PROPER GLOW FILTER TO A TEXT FIELD.";

The text outline is created by assigning GlowFilter to each text field. The first parameter of GlowFilter's constructor is the color of the outline. We chose black; you can replace is by any other color to get colored outlines. The second parameter is the alpha of the outline; we chose 1. The third and fourth parameters are blurX and blurY. Valid values are between 0 and 255, the default is 6.0 for both. We chose smaller blur values: 2.0. We decreased blur because we don't really want to create a glowing effect. We want outline. The next parameter is 'strength' of GlowFilter. The valid values are between 0 and 255; the default is 2. We chose higher strength: 10. The higher strength, the thicker outline. Finally, we assign filter's quality to be 'MEDIUM'. You can choose 'LOW', or 'HIGH', but 'MEDIUM' works best for creating outline. MEDIUM quality means that the filter is applied twice. If you choose HIGH, the filter is applied three times giving thicker outline.

var outline:GlowFilter=new GlowFilter(0x000000,1.0,2.0,2.0,10);

outline.quality=BitmapFilterQuality.MEDIUM;

field1.filters=[outline];

field2.filters=[outline];

The same trick can be used for outlining other DisplayObjects. In most of our photo galleries thumbnails show outline when the user mouses over them. The colored outline is created using the GlowFilter as demonstrated above. See, for example: 3D Cylindrical Photo Gallery in AS3 Flash - Outside View

Back to AS3 How-Tos and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.