Making Alpha Work on AS3 Dynamic Text Fields

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

43 thoughts on “Making Alpha Work on AS3 Dynamic Text Fields

  1. That’s because the text font is not embedded. Since it’s not embedded, Flash cannot apply transparency, masking, or rotation to the textfield. Using a different blend mode forces the text to be rendered to memory and *then* have the alpha applied, as if it was a bitmap, so it works.

  2. Thankfully, once you start targeting Flash Player 10, you won’t need any sort of blendMode hack to change alpha on device text. This has been a long-standing limitation of Flash Player, and I’m extremely happy that they’ve finally addressed it.

  3. You can also apply a filter, such as a blur filter… with blurX: 0 and blurY: 0.

    This also forces the textfield to be rendered as a bitmap, great for internationalizing flash sites without having to embed all font characters.

  4. Thanks very much for finding this out. It just goes to show all you need to do is simply google for several hours and you will eventually find out how to do basic things!

  5. Holy crap… I’ve been trying to figure this out for the longest time!

    Thank you sooooo much for this post! I feel like such a loser for not figuring this out.

  6. oh man.
    Thanks for that simple and clear fix.
    I am not down for adding weight to SWFs for fonts since I am mostly using standard fonts.

    Thank you.

  7. Tried this, but there’s a conflict that seems to occur when I try to set the letterSpacing of my TextFormat. In conjunction with the BlendMode, it causes the text to not render! Anyone found this, or have a solution?

  8. Thank you very much! your post was very helpful.
    One more thing, I guess we should write :
    myTextField.blendMode = “layer” instead of
    myTextField.blendMode = BlendMode.LAYER;

    Thanks again πŸ™‚

  9. Thankyou, thankyou, thankyou. That issue has been driving me nuts for ages. Such a simple hack and yet you’re the only person I’ve come across that’s blogged it. Most appreciated.

  10. Thanks a lot!!!
    It works even with alpha transition on timeline… and without specifing the font by code again.

  11. Thanks to rabidgadfly for this clean and clear tutorial, very useful πŸ™‚

    I also got a news here that I thought would be so useful for all of us as Flash devs, Now that we are talking about TextField thought to let you know about a class that is so powerful and is extended from the Adobe TextField class itself.

    It’s named TextArea which allows you every possible tags even your own custom tag and has much more abilities too.

    Check out http://doitflash.com/ for more information.
    It not only allows you to load different SWF files by calling different tags in line of your text but also you have much more control over your Text blocks and its contents… such as calling your custom functions right from your text blocks and passing multiple and different arguments through them; loading talking avatars, video players, buttons, slideshows and more… by calling their own tags and having full interaction between all of the loaded SWF modules and your text block. Check out the site for more information, downloading the platform is also free of charge πŸ™‚

Comments are closed.