Using embedded fonts with effects -- Flex 2

The Dissolve, Fade, and Rotate effects only work with text rendered using an embedded font. If you apply these effects to a control that uses a system font, nothing happens to the text.

When you apply a Zoom effect to text rendered using a system font, Flex scales the text between whole point sizes. While you do not have to use embedded fonts when you apply a Zoom effect to text, the Zoom will appear smoother when you apply it to embedded fonts.

The following example uses two Label controls, one that uses an embedded font and one that does not. Therefore, when you apply the Fade effect to the Label control using the system font, nothing happens:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        @font-face {
            src:url("akbar.ttf");
            font-family: myAkbarFont;
        }
    </mx:Style>

    <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.5"/>
    <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.5" alphaTo="1.0"/>

    <mx:Panel id="panel" title="Fade Effect Panel">

        <mx:VBox>
            <mx:Label fontFamily="myAkbarFont" 
                mouseDownEffect="{fadeOut}" mouseUpEffect="{fadeIn}"
                text="This Label control uses the Akbar embedded font and 
                    the text will fade." />
            
            <mx:Label 
                mouseDownEffect="{fadeOut}" mouseUpEffect="{fadeIn}"
                text="This Label control uses the system font and 
                    the text will not fade." />

            <mx:Label id="status2" color="#0000FF" 
                    text="Hold mouse down on the Label control 
                        to see fadeOut effect, release mouse to see fadeIn effect.
                        The system font will not fade."/>
        </mx:VBox>
    </mx:Panel>
</mx:Application>