Thursday, February 14, 2008

device font masking and alpha!

device fonts in Flash still needs a lot of fixes. one of the most common problems:

  • non-rectangular shaped masks don't work properly with device fonts
  • alpha opacity of a text field rendered with device fonts dont work
  • animated text fields with alpha values (like a fade effect) just wont work too. text field either appears with 100% alpha or not appear at all. no transperancy! :(

luckily, graphic filters come to save us. here's a cute trick to work around this problem. simply place your text field inside a movie clip and apply any graphic filters (such as Blur, Drop Shadow, etc) to the movie clip. this will force Flash player to cache the content of the movie clip including the text field as a bitmap. then you can mask the movie clip and change the alpha value of the movie clip and get the device font transperancy. change the filter parameters to zero so the effect actually will not distort the original text field image. (apply a Blur filter and set the blur amount to 0 will not blur the text)

remember! alpha values applied from the text field's fill color wont work with device fonts. you need to change the alpha value of the movie clip either from the properties panel or _alpha property using ActionScript.

what if you can't place your text field inside a movie clip? then you'll have to apply a graphic filter to the text field and change the _alpha value using ActionScript. simple as placing the following ActionScript lines in frame actions.

import flash.filters.*;

var dummyFilter:BlurFilter = new BlurFilter(0,0,0);
myTextField.filters = new Array(dummyFilter);
myTextField._alpha = 50;


Note: in ActionScript 3.0 alpha values are always less than one. so 50 becomes 0.5.

using this method you can make masks (with non-rectangular shapes) work with device fonts and apply transperancy to device fonts, animate them with fade like effects, etc.

but we still need a better device font rendering from Flash. hopefully in next release! :)

Share This!