<s:transitions>

       <s:Transition fromState="default">

            <s:Parallel>

                <mx:Resize target="{loginPanel}" duration="100"/>

                <s:Wipe direction="right" target="{confirm}"/>

            </s:Parallel>

        </s:Transition>

       <s:Transition fromState="Register">

            <s:Sequence>

                <mx:Resize target="{loginPanel}" duration="100"/>

            </s:Sequence>

        </s:Transition>

    </s:transitions> 

<s:transitions>

        <s:Transition id="trans" fromState="*" toState="*">

            <s:Sequence>

                <s:Resize duration="800" target="{viewBox}"/>

                <s:Rotate angleBy="180" autoCenterTransform="true" duration="300" target="{bt}"/>

            </s:Sequence>

        </s:Transition>

    </s:transitions>

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>

        <![CDATA[

            protected function button1_clickHandler(event:MouseEvent):void

            {

                // TODO Auto-generated method stub

            }

        ]]>

    </fx:Script>

    <fx:Declarations>

        <!--动画效果-->

        <mx:AnimateProperty id="animateProperty" property="scaleX" fromValue="1" toValue="2"  duration="1000"/>

        <mx:AnimateProperty id="animateProperty1" property="scaleX" fromValue="2" toValue="1"  duration="1000"/>

        <!--模糊效果-->

        <mx:Blur id="blurImage" duration="1000" blurXFrom="0.0" blurXTo="10.0"   blurYFrom="0.0" blurYTo="10.0"/>

        <mx:Blur id="blurImage1" duration="1000" blurXFrom="10.0" blurXTo="0.0"   blurYFrom="10.0" blurYTo="0.0"/>

        <!--发光效果-->

        <mx:Glow id="glowImage" duration="1000" alphaFrom="1.0" alphaTo="0.3"   blurXFrom="0.0" blurXTo="50.0" blurYFrom="0.0" blurYTo="50.0" color="0xFF0000"/>

        <mx:Glow id="glowImage1" duration="1000" alphaFrom="0.3" alphaTo="1"   blurXFrom="50.0" blurXTo="0.0" blurYFrom="50.0" blurYTo="0.0" color="0xFF0000"/>

        <!--dissolve效果,,,用于显示和隐藏-->

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

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

        <!--fade淡入淡出效果-->

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

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

        <!--虹效果,-->

        <mx:Iris id="irisOut" duration="1000" showTarget="true"/>

        <mx:Iris id="irisIn" duration="1000" showTarget="false"/>

        <!--Rotate旋转效果-->

        <mx:Rotate id="rotate" angleFrom="-45" angleTo="0" target="{img2}"  duration="2000"/>  

        <mx:Resize id="expand"   target="{img3}"  widthTo="265" heightTo="265"/>

        <mx:Resize id="contract" target="{img3}" widthTo="25" heightTo="40"/>

    </fx:Declarations>

    <mx:HBox>

        <mx:VBox>

            <mx:Image id="img1"  source="asdf.jpg" rollOverEffect="{animateProperty}"  rollOutEffect="{animateProperty1}" />

            <mx:Image id="img" source="asdf.jpg" rollOverEffect="{blurImage}"  rollOutEffect="{blurImage1}" />

            <mx:Image source="asdf.jpg" rollOverEffect="{glowImage}" rollOutEffect="{glowImage1}"/>

        </mx:VBox>

        <mx:VBox>

            <mx:VBox>

                <mx:CheckBox id="cbx2" label="visible" selected="true"/>

                <mx:Image source="asdf.jpg" visible="{cbx2.selected}"   hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>

            </mx:VBox>

            <mx:VBox>

                <mx:CheckBox id="cbx" label="visible" selected="true"/>

                <mx:Image source="asdf.jpg" visible="{cbx.selected}" hideEffect="{fadeOut}" showEffect="{fadeIn}"/>

            </mx:VBox>

            <mx:VBox>

                <mx:CheckBox id="cbx1" label="visible" selected="true"/>

                <mx:Image id="Flex"  source="asdf.jpg" visible="{cbx1.selected}"  showEffect="{irisIn}" hideEffect="{irisOut}"/>

            </mx:VBox>

        </mx:VBox>

        <mx:VBox>

            <mx:Image id="img2" source="asdf.jpg" addedEffect="rotate"/>

        </mx:VBox>

        <mx:VBox>

            <mx:ControlBar>

                <mx:Button label="Expand"   click="expand.end();expand.play();"/>

                <mx:Button label="Contract" click="contract.end();contract.play();"/>

            </mx:ControlBar>

            <mx:Image id="img3" width="25" height="40" source="asdf.jpg"/>

        </mx:VBox>

    </mx:HBox>

</s:Application>

<s:states>

        <s:State name="collapsed"/>

        <s:State name="expanded"/>

    </s:states>

    <s:transitions>

        <s:Transition id="trans" fromState="*" toState="*">

            <s:Sequence>

                <s:Resize duration="800" target="{viewBox}"/>

            </s:Sequence>

        </s:Transition>

    </s:transitions>

    <s:Group id="viewBox" right="0" bottom="0" width="186" height="186"

             right.collapsed="0" bottom.collapsed="0" width.collapsed="0" height.collapsed="0">

        <s:BorderContainer id="zzz" left="5" right="5" top="5" bottom="5" width="180" height="180"

                           borderStyle="solid" cornerRadius="3"/>

        <mx:Box visible="{ovmap_show}" width="186" height="186" backgroundColor="#0D84CD"

                borderStyle="solid" cornerRadius="3" horizontalAlign="center"

                includeInLayout="{ovmap_show}" verticalAlign="middle"

                right.collapsed="0" bottom.collapsed="0" width.collapsed="0" height.collapsed="0">

            <s:Group width="180" height="180" cacheAsBitmap="true"

                     creationComplete="viewBox_creationCompleteHandler(event)" mask="{zzz}"

                     right.collapsed="30" bottom.collapsed="30" width.collapsed="0"

                     height.collapsed="0">

                <s:Rect id="vborder" left="0" right="0" top="0" bottom="0">

                    <s:fill>

                        <s:SolidColor alpha="1" color="0xFFFFFF"/>

                    </s:fill>

                </s:Rect>

                <esri:Map id="ovMap" width="180" height="180" clickRecenterEnabled="false"

                          doubleClickZoomEnabled="false" keyboardNavigationEnabled="false"

                          load="ovMapLoaded(event)" logoVisible="false" panArrowsVisible="false"

                          panEnabled="false" rubberbandZoomEnabled="false" scaleBarVisible="false"

                          scrollWheelZoomEnabled="false" zoomSliderVisible="false"/>

                <s:filters>

                    <mx:DropShadowFilter alpha="0.3" angle="45" distance="5" inner="true"/>

                </s:filters>

            </s:Group>

        </mx:Box>

    </s:Group>

    <mx:SWFLoader id="bt" right="2" bottom="2" width="20" height="20" click="toggleView(event)"

                  complete="overviewbtn_complete(event)"

                  source="widgets/OverviewMap/assets/overviewbtn.swf"

                  toolTip.collapsed="{openToolTip}"

                  toolTip.expanded="{closeToolTip}" toolTipShow="bt_toolTipShowHandler(event)"/>