Saturday, August 23, 2008

Fade Text Without Embedding a Font

Note to Self: A while back, Amy mentioned a really easy way to do this on Flex Coders: Set the "blendMode" property to "layer" (or BlendMode.LAYER). Another idea is to use the "filters" property to apply a filter to a DisplayObject. Both of these approaches convert the object to a bitmap for you!

Effects like Fade or Rotate won't play nice with text. One way around this is to embed a font in your SWF, but that's just New Bulk City. A coworker reminded me that everything would be hunky-dory if I converted the component to a bit map. Here's an example where I use the ImageSnapshot class to do just that.

I used view states to swap out a Canvas based component with a bitmap image in a SWFLoader. Then I used the SWFLoader's complete event to trigger the final view state, where the Fade effect is actually played.

A little bit of extra work pays off... now the text fades out with the rest of the component. Right click on the app to view the source.

No comments:

Post a Comment