Flex – Fade In, Fade Out Text

This one is a very small one but one that may proove usefull to more than one 😉

I was recently playing around with flex, having fun fading in and out stuff when I realized that text components such as LABEL or TEXT where not very « fade friendly ». There was nothing special with my code, no special font or anything, so I googled a little and found out that you need to embed a font for it to be « fadable », event if it is a system font.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                width="200" height="200"
                backgroundAlpha="0"
                backgroundColor="#FFFFFF">

    <mx:Script>
        <![CDATA[
            [Embed(systemFont='Verdana', fontName='myVerdana', mimeType='application/x-font')]
            public var myVerdana:Class;
        ]]>
    </mx:Script>

    <mx:Canvas id="myCanvas"
               backgroundColor="#AAAAAA"
               backgroundAlpha="1"
               width="200" height="150"
               hideEffect="{myFade}"
               showEffect="{myFade}">
        <mx:Text horizontalCenter="0"
                 top="30"
                 color="#000000"
                 text="Embeded Font Text"
                 fontFamily="myVerdana"
                 fontSize="15"/>
        <mx:Text horizontalCenter="0"
                 top="80"
                 color="#000000"
                 text="Non Embeded Font Text"
                 fontSize="15"/>
    </mx:Canvas>

    <mx:Fade id="myFade" duration="1000" />

    <mx:Button click="{myCanvas.visible = !myCanvas.visible}"
                 horizontalCenter="0"
                 top="160"
                 label="Fade In/Out"/>

</mx:Application>

Here is an example :

Hope this helps…