[Scottae]

Many of my projects require me to embed fonts in order to do alpha fade effects with text. Since most of my work is class based, I have to dynamically create text fields. And to embed fonts for dynamic fields, you have to create font symbols. And font symbols are always big. To simply embed Arial for example is about 20K. That is only one style of the font. That doesn't include bold or italics. Those would be another 20K each. That sucks big time. But there is a work around for this.

I don't know why I didn't think of this sooner, but I came to a realization that you can use filters on the text field in order to get around the need for embedding to set text alpha. You can create a filter object that has everything set to zero so it's not visible that a filter is being used on the text. Once you set the filter object to the filters property, you can tween the alpha as if the font were embedded for the text field.

Here's some example code of what happens when you try to tween the alpha of a text field without embedding the font:

Actionscript:

import mx.transitions.easing.None;
import mx.transitions.Tween;

// Create dynamic text field
var txt:TextField = _root.createTextField("txt", 0, 20, 20, 200, 30);
txt.border = true;
txt.text = "The alpha is now : 100";

// Set up tween object to fade the alpha of the text field
var tween:Tween = new Tween(txt, "_alpha", None.easeNone, 100, 0, 3, true);
tween.onMotionChanged = tween.onMotionFinished = onAlphaChanged;
tween.FPS = 60;
tween.stop();

// Triggered when tween is changing, this will update the text field
function onAlphaChanged(pTween:Tween):Void {
	txt.text = "The alpha is now : " + Math.floor(pTween.position).toString();
}

// Click to start
onMouseUp = function(){
	tween.start();
}

When you run this and click the stage, the text field will show the alpha counting down, but the text field does not fade out. But now if you add this little bit of code at the bottom of the above code:

Actionscript:

// Adds a drop shadow to the text field
import flash.filters.DropShadowFilter;
var ds:DropShadowFilter = new DropShadowFilter(0, 0, 0, 0, 0, 0);
txt.filters = [ds];

Now when you run it and click the stage, the text field will fade out as expected.

After I tried this, I searched around and this is a known thing, but I've never run across this fact. Very nice little trick. But there are down sides to this. Most noticeable is that the font looks very aliased. But if you want your text to look like bitmap fonts, then this is a benefit.