Wipe Effect

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

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

    horizontalAlign="center" backgroundGradientColors="[#511A1A, #651717]" paddingTop="0"

    backgroundGradientAlphas="[1.0, 1.0]" height="100%">

   

    <mx:WipeDown id="dwipeOut" duration="1000"/>

    <mx:WipeDown id="dwipeIn" duration="1000"/>

       

    <mx:Panel title="WipeDown Effect" layout="absolute" color="0xffffff" borderAlpha="0.15" width="353" height="240"

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

        

         <mx:Text width="100%" color="0x323232" textAlign="center" paddingBottom="5"

            text="Use the WipeDown effect to show or hide the text and image." x="10" y="5"/>

       

        <mx:Image id="dflex" source="@Embed('images/compass.jpg')" visible="{dcb1.selected}" hideEffect="{dwipeOut}" showEffect="{dwipeIn}" x="95" y="35"/>

       

        <mx:Label color="0x323232" text="Flex" fontSize="14" visible="{dcb1.selected}" hideEffect="{dwipeOut}" showEffect="{dwipeIn}" x="223" y="87"/>

       

        <mx:ControlBar horizontalAlign="center" paddingBottom="0" paddingTop="0" x="0" y="216">

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

        </mx:ControlBar>

    </mx:Panel>

   

   

    <mx:WipeLeft id="lwipeOut" duration="1000"/>

    <mx:WipeLeft id="lwipeIn" duration="1000"/>

       

    <mx:Panel title="WipeLeft Effect" layout="absolute" color="0xffffff" borderAlpha="0.15" width="345" height="240"

         paddingTop="5" paddingRight="10" paddingBottom="0" paddingLeft="10" horizontalAlign="center" x="367" y="268">

        

         <mx:Text width="100%" color="0x323232" textAlign="center" paddingBottom="5"

            text="Use the WipeLeft effect to show or hide the text and image." x="10" y="5"/>

       

        <mx:Image id="lflex" source="@Embed('images/boots.jpg')" visible="{lcb1.selected}" hideEffect="{lwipeOut}" showEffect="{lwipeIn}" x="102" y="46"/>

       

        <mx:Label color="0x323232" text="Flex" fontSize="14" visible="{lcb1.selected}" hideEffect="{lwipeOut}" showEffect="{lwipeIn}" x="258" y="88"/>

       

        <mx:ControlBar horizontalAlign="center" paddingBottom="0" paddingTop="0" x="0" y="216">

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

        </mx:ControlBar>

    </mx:Panel>

   

    

    <mx:WipeRight id="rwipeOut" duration="1000"/>

    <mx:WipeRight id="rwipeIn" duration="1000"/>

       

    <mx:Panel title="WipeRight Effect" layout="absolute" color="0xffffff" borderAlpha="0.15" width="350" height="240"

         paddingTop="5" paddingRight="10" paddingBottom="0" paddingLeft="10" horizontalAlign="center" y="268" x="9">

        

         <mx:Text width="100%" color="0x323232" textAlign="center" paddingBottom="5"

            text="Use the WipeRight effect to show or hide the text and image." x="10" y="5"/>

       

        <mx:Image id="rflex" source="@Embed('images/helmet.jpg')" visible="{rcb1.selected}" hideEffect="{rwipeOut}"

                showEffect="{rwipeIn}" x="37" y="48"/>

       

        <mx:Label color="0x323232" text="Flex" fontSize="14" visible="{rcb1.selected}" hideEffect="{rwipeOut}"

                showEffect="{rwipeIn}" x="213" y="91"/>

       

        <mx:ControlBar horizontalAlign="center" paddingBottom="0" paddingTop="0" x="0" y="216">

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

        </mx:ControlBar>

    </mx:Panel>

   

  

    <mx:WipeUp id="uwipeOut" duration="1000"/>

    <mx:WipeUp id="uwipeIn" duration="1000"/>

       

    <mx:Panel title="WipeUp Effect" layout="absolute" color="0xffffff" borderAlpha="0.15" width="345" height="240"

         paddingTop="5" paddingRight="10" paddingBottom="0" paddingLeft="10" horizontalAlign="center" x="367" y="10">

        

         <mx:Text width="100%" color="0x323232" textAlign="center" paddingBottom="5"

            text="Use the WipeRight effect to show or hide the text and image." x="10" y="5"/>

       

        <mx:Image id="uflex" source="@Embed('images/backpack.jpg')" visible="{ucb1.selected}" hideEffect="{uwipeOut}"

                showEffect="{uwipeIn}" x="45" y="48"/>

       

        <mx:Label color="0x323232" text="Flex" fontSize="14" visible="{ucb1.selected}" hideEffect="{uwipeOut}"

                showEffect="{uwipeIn}" x="210" y="93"/>

       

        <mx:ControlBar horizontalAlign="center" paddingBottom="0" paddingTop="0" x="0" y="216">

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

        </mx:ControlBar>

    </mx:Panel>

   

</mx:Application>