How to fade text in a Flex application

Many a time I wanted to fade in/out text in a Flex app.

You can do this if you embed the font… But this option makes the compiled SWF file bigger with each font embeded.

Here you will find a showcase of a few ways to make text fade, including the above method, and a few others that do not require the font to be embeded. It includes various ways, all of them used the showEffect and hideEffect effects.

These work, but only for text that is already displayed. Setting the visible property to true/false, makes the show/hide effects run.

However, if you add text at runtime and define showEffect and hideEffect, when the text is added to the displayList it is not considered as ‘shown’ and as a result the show effect does not run and the text simply appears with no effect.

To make the text fade in when added to the displayList, you should also define a addedEffect. addedEffect is dispatched when the text is added to the displayList, so setting it to the showEffect will cause it to fade in as you would expect.


Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: