Jul 14 2009
[AS3] Embossed and Engraved Text Effects (Embedded Fonts)
Here is how to apply embossed (and engraved) text effect during run-time easily using ActionScript. This works only when the TextField instance is using embedded font and its antiAliasType property is set to AntiAliasType.ADVANCED.
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.
