Making Alpha Work on AS3 Dynamic Text Fields

Posted at October 14, 2008

Getting the alpha property to work with coded TextFields is another AS3 technique that you would expect to be a little easier, or at least more intuitive, than it is. Initially, you may expect something like this to render the text invisible:

var myTextField:TextField = new TextField();
myTextField.text = "Doesn't Work";
addChild(myTextField);
myTextField.alpha = .5;

But regardless of the alpha property, the code above will be visible. The reason is that I haven’t specified a font. This means that it will be rendered by the operating system and Flash Player will have no control over it.

With this new knowledge you may figure that setting the font will solve the problem, so you write something like this:

var myTextField:TextField = new TextField();
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.font = "Arial";
myTextField.text = "Still doesn't work";
myTextField.setTextFormat(myTextFormat);
addChild(myTextField);
myTextField.alpha = .5;

But it still doesn’t work. Why? Well, I really have no idea!

Luckily, I ran across a comment left on Adobe Livedocs by Haiducii7 who suggested that by changing the blendMode to something other than NORMAL, alpha will work. The code now, looks something like this:

var myTextField:TextField = new TextField();
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.font = "Arial";
myTextField.blendMode = BlendMode.LAYER;
myTextField.text = "It works!";
myTextField.setTextFormat(myTextFormat);
addChild(myTextField);
myTextField.alpha = .5;

And it worked! According to Flash Help, BlendMode.LAYER “forces the creation of a transparency group for the display object.” I guess that makes sense, but there’s nothing in the documentation that outlines all of the steps needed to make this happen.

Not even Colin Moock’s Essential ActionScript 3.0, a book I’ve treasured in multiple versions, mentions the necessity of BlendMode.

Definitely a tip worth earmarking.

-rG

flash, intermediate

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

37 Responses to “Making Alpha Work on AS3 Dynamic Text Fields”

Leave Comment

(required)

(required)