Masking and Alpha effects on system fonts in Flash 8

By scott

First off I want to say yes, it is possible. I actually figured this out by mistake and this isn’t 100% tried tested and true.

If you create a MovieClip, and inside your MovieClip you add a Textfield with _sans, _serif, or _typewriter (system or device fonts) selected as your font (you can also select another font and not embed it, be warned though, if the user does not have the font you selected on their machine font substitution will occur). Now with your font selected you can either add text dynamically or by simply typing it in the TextField (for you timeline folk ). Now, if you were to add a mask or set the _alpha to 0 you would still see the text when you test the movie. But if you add a blur effect (or any filter for that matter) with the blurX and blurY values set to 0 masks and _alphas work perfectly. You can even animate the movieclip from an alpha of 0 to 100.

So why does this work you ask, well, from what I can tell it is because when you put an effect on a movieclip it sets the CacheAsBitmap property to true. The part I can’t figure out is when I dynamically set CacheAsBitmap to true with no blur filter it doesn’t work? I may be missing something, I haven’t really looked into it. I am just glad it worked. The other thing I haven’t tried is different filters to see the difference in performance, the file size is still tiny and I don’t see a difference in my performance useage. Happy masking.

Here is some example code, cut and paste this into a new move and it will work, remember you have to publish for Flash 8 for it to work. Sorry for the long code, just wanted to make sure everyone could figure out what was going on. The same thing can easily be accomplished with half the code.

import flash.filters.BlurFilter;
import mx.transitions.easing.*;
import mx.transitions.Tween; 

var template_mc:MovieClip = this;
var textHolder:MovieClip = template_mc.createEmptyMovieClip('textHolder_mc',
 template_mc.getNextHighestDepth());

var tf:TextFormat = new TextFormat();
tf.font = '_serif';
tf.color = 0x000000;
tf.size = 14;

textHolder.createTextField('text_txt', 1, 0, 0, 200, 50);
textHolder.text_txt.text = 'This is my device font test';
textHolder.text_txt.autoSize = 'left';
textHolder.text_txt.setTextFormat(tf);

textHolder._x = (Stage.width/2) - (textHolder._width/2);
textHolder._y = (Stage.height/2) - (textHolder._height/2);

var filter:BlurFilter = new BlurFilter(0, 0, 1);
var filterArray:Array = new Array();
filterArray.push(filter);
textHolder.filters = filterArray;

var fadeUpText = new Tween(textHolder, '_alpha', Regular.easeOut, 0, 100, 4, true);