Relax Breath of Solution.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #0C3404]" viewSourceURL="srcview/index.html">

<mx:Style>
       @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
       }

       .captionText {
            fontFamily: ArialEmbedded;
            color : #ffffff;
            fontSize : 16pt;
       }
</mx:Style>

<mx:Script>
    <![CDATA[
        private function showCaption():void{
            fadeIn.play();
        }
        private function hideCaption():void{
            fadeOut.play();
        }
    ]]>
</mx:Script>
    <mx:Canvas rollOver="showCaption()" rollOut="hideCaption()" >
        <mx:Image id="img" source="1.jpg" width="320" height="240" />
        <mx:Box id="caption" height="30" width="320"
            alpha="0" backgroundColor="#000000" backgroundAlpha=".5"
            bottom="10" horizontalCenter="0" horizontalAlign="center">
            <mx:Label text="Cheetah beauty @ Cologne zoo" styleName="captionText" />
        </mx:Box>
    </mx:Canvas>
    <mx:Label text="(Rollover the image to see the caption)"
        color="#000000" fontStyle="italic" fontSize="10" fontFamily="Arial"/>

    <mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" />
    <mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" />
</mx:Application>