Fading and masking with device fonts
Excerpt from the Flash LiveDocs, emphasis added:
Which, you will find out shortly isn’t entirely true.
Here’s how embedding vs device fonts works: when you embed a font the characters that you choose to embed are added to the SWF at publish time as shapes. In essence they are no different than complex shapes you might create with the pen tool. Device fonts by contrast are completely different because the font shapes are not included with the SWF. (Note: dynamic TextFields must use either embedded fonts or device fonts. There is no third option so essentially, if you don’t embed you are using device fonts.)
When a user runs your SWF on their machine and the Flash player gets to a TextField that uses a device font then the player asks the host computer, “What is your default sans-serif font.” – or whatever it was you specified. This is pretty much the same thing that happens with an HTML webpage. Since the Flash player doesn’t have the font shapes it can’t do things like change the _alpha or use the text as a mask.
“So why not just embed the font all the time?” you might ask.
The main reason I’ve had to use device fonts here at XBox.com and Zune.net is that we have to make our Flash apps accessible to an international audience. The text is populated from an XML file so that our sister sites in other countries can add their own text, in their language, to the XML file and it will populate the TextFields accordingly. If we had used an embedded font then they wouldn’t be able to change the text to Japanese, or Russian or whatever. Of course if you use Japanese text in the XML file then the user will have to have a default Japanese font on their computer.
So how do you get around this?
Flash 8 introduced Filters and the cacheAsBitmap property. With that you can tell Flash to treat the text as a bitmap. In essence that gives the Flash player the shapes it needs to alter the _alpha or use the text as a mask. The downside to this is that the text becomes aliased – looks jagged. Since you have to use a filter to get this to work then go ahead and use the blurFilter and apply a very slight blur to the font. That’s a poor man’s way of treating the text as anti-aliased. It won’t look nearly as good as it would if it had been rendered with the Saffron text renderer built into Flash 8 but it’s good enough.
I got the idea to try this while driving home one day. (Sometimes being stuck in traffic has it’s advantages.) I expected it would work but I also expected that the TextField would now be rendered as a bitmap and wouldn’t be editable. I was trying to think up tricks that I could use to be able to change the text property but fortunately I didn’t have to. It still just works. (I wonder if Tinic Uro had any idea this would work when he baked in the Filter classes to Flash 8?)
Here’s an example of a SWF using a device font as a mask while the _alpha of the text is oscillating between 25-100%. You can click on the different languages to see how device fonts are essential for internationalization. The text is stored in an array. If you don’t have a particular font then you’re going to see some ugliness.
Here is the essential code to make this work. The instance name for the TextField is txt and the maskee is wave. Download the example.
// create a blur filter for the TextField
import flash.filters.BlurFilter;
var filter:BlurFilter = new BlurFilter(1.2, 1.2, 3);
var filterArray:Array = new Array();
filterArray.push(filter);
txt.filters = filterArray;
// cache both the mask and maskee as bitmaps
txt.cacheAsBitmap = true;
wave.cacheAsBitmap = true;
wave.setMask(txt);
Now for the bad news, you still can’t rotate the text. The good news is that this works for input TextFields as well. You can still type along in the TextField and the text will mask and fade. Give it a try in the example above.
I would caution developers to not use this unless the really need to. The Saffron text renderer is really top notch and makes Flash text look great.
Note: I’ve done some Googling and can find only one other person has run across this trick. Good work Scott as far as I can tell you deserve credit for finding it first.
By the way, this is by my count the third seemingly impossible thing I’ve done with Flash. I think I’ll treat myself to breakfast at Milliways now. :-)
If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.






