Dissolve

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="top"

    horizontalAlign="center" backgroundGradientColors="[#7A2626, #7B1313]" paddingTop="0" backgroundGradientAlphas="[1.0, 1.0]">

   

    <mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>

    <mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

       

    <mx:Panel title="Dissolve Effect" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500"

         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" top="10" left="10">

         <mx:HBox width="90%" height="100%" horizontalGap="50" horizontalAlign="center">

        

             <mx:Text width="100%" color="0x323232" textAlign="center" paddingBottom="10" hideEffect="{dissolveOut}" showEffect="{dissolveIn}" visible="{cb1.selected}"

                text="Use the Dissolve effect to show or hide the text, image, and button. The Dissolve effect works with system and embedded fonts, unlike the Fade effect which requires embedded fonts."/>

            <mx:Image id="flex" source="@Embed('images/backpack.jpg')" visible="{cb1.selected}" hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>

       

        </mx:HBox>

       

        <mx:ControlBar horizontalAlign="center">

            <mx:CheckBox id="cb1" label="visible" selected="true" textRollOverColor="0xACACAC" textSelectedColor="0xACACAC"/>

        </mx:ControlBar>

    </mx:Panel>

   

</mx:Application>