jump to navigation

Alternatives to using the Fade Effect with text August 21, 2010

Posted by Tournas Dimitrios in Flex.

Someone recently asked if there were any ways to fade text out in a Flex app without having to embed the font for that text. Currently, if you want to appkly the Fade effect to any controls that contain text in a Flex app, you have to embed the font so that Flash Player can do the fading properly.

This question led to an interesting thread that revealed a couple of alternatives to fading text without embedding the font. The result is that the SWF file size is smaller because it doesn’t contain any font symbols.

First, here’s code that embeds a font and defines a fadeIn and fadeOut effect:

[Embed("assets/MyriadWebPro.ttf", fontName="MyMyriad")]
public var myriad_font:Class;
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

<mx:Label id="label1" text="Hello World"
fontFamily="MyMyriad" fontSize="24"
hideEffect="{fadeOut}" showEffect="{fadeIn}"/>

This app is 190K. It works very well because the Fade effect is applied directly to the control that uses an embedded font to render the text.

If you didn’t embed the font, then the Fade effect would appear to fail: instead of a slow fade, you’d get a single instant where the text disappears. Non-embedded fonts don’t include bitmap information for the Player to apply a Fade effect to.

Now for the alternatives :

The first alternative is really clever: Apply the BlurFilter to the text before attempting to fade it in and out. When you apply a BlurFilter to text, Flash Player converts the text to a bitmap. Once the text is a bitmap, it can be faded in and out with the Fade effect. So instead of actually blurring the text with the BlurFilter, you just apply the BlurFilter with some dummy settings (0,0,0), and then you can fade the text with the Fade effect.

Here’s the code that applies a BlurFilter to the text when the app initializes:

private function addBlurFilter():void {
var bf:BlurFilter = new BlurFilter(0,0,0);
var myFilters:Array = new Array();
label3.filters = myFilters;

The SWF file size is 165K. Adding the BlurFilter does not increase the SWF file size because you don’t have to embed the font symbols. It might increase runtime memory usage because Flash Player now has to keep bitmap data in memory for that text, but it’s still a damn clever trick, I think.

The second alternative is to use the Dissolve effect rather than the Fade effect. The Dissolve effect actually creates a rectangle over the target area, and applies a dissolve to the rectangle so that the underlying content appears to fade in and out.

Dissolve effects are set up and applied just like Fade effects:

<m x: Dissolve id="dissolveOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

<m x: Label id="label4" text="Hello World" fontSize="24"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>

As with the Blur effect, using the Dissolve effect does not increase the SWF file size because you don’t have to embed the font symbols.

This ZIP file (2KB) contains the complete source MXML files for the three working examples in this blog entry.



No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s