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

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

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

                width="300" 

                height="300">

        <fx:Declarations>

                <!-- движение зеленого прямоугольника вверх -->

                <s:Animate id="moveFotoUp" 

                                   targets="{[fotosGroup]}" 

                                   duration="1000"

                                   effectEnd="moveFotoUp_effectEndHandler(event)">

                        <s:SimpleMotionPath property="top" valueFrom="{height-40}" valueTo="0" />

                </s:Animate>

 

                <!-- движение красного прямоугольника вниз -->

                <s:Animate id="moveVideoDown" 

                                   targets="{[videosGroup]}" 

                                   duration="1000"

                                   effectEnd="moveVideoDown_effectEndHandler(event)">

                        <s:SimpleMotionPath property="bottom" valueFrom="{height-20}" valueTo="0" />

                </s:Animate>

 

                <!-- появление красного прямоугольника сверху -->

                <s:Animate id="bindVideoDown" 

                                   targets="{[videosGroup]}" 

                                   duration="300">

                        <s:SimpleMotionPath property="bottom" valueFrom="{height+21}" valueTo="{height-20}" />

                </s:Animate>

 

                <!-- появление зеленого прямоугольника снизу -->

                <s:Animate id="bindFotoUp" 

                                   targets="{[fotosGroup]}" 

                                   duration="300">

                        <s:SimpleMotionPath property="top" valueFrom="{height+40}" valueTo="{height-20}" />

                </s:Animate>

        </fx:Declarations>

 

        <s:states>

                <s:State name="fotos"/>

                <s:State name="videos"/>

        </s:states>

 

        <fx:Script>

                <![CDATA[

                        import mx.events.EffectEvent;

 

                        override protected function stateChanged(oldState:String, newState:String, recursive:Boolean):void

                        {

                                super.stateChanged(oldState, newState, recursive);

                                switch(newState)

                                {

                                        case "fotos":

                                                contentGroup.setElementIndex(fotosGroup,1);

                                                contentGroup.setElementIndex(videosGroup,0);

                                                moveFotoUp.play();

                                                break;

                                        case "videos":

                                                contentGroup.setElementIndex(videosGroup,1);

                                                contentGroup.setElementIndex(fotosGroup,0);

                                                moveVideoDown.play();

                                                break;

                                }

                        }

 

                        protected function moveFotoUp_effectEndHandler(event:EffectEvent):void

                        {

                                contentGroup.setElementIndex(fotosGroup,0);

                                bindVideoDown.play();

                        }

 

                        protected function moveVideoDown_effectEndHandler(event:EffectEvent):void

                        {

                                contentGroup.setElementIndex(videosGroup,0);

                                bindFotoUp.play();

                        }

                ]]>

        </fx:Script>

 

        <s:Group id="contentGroup" width="100%" height="100%">

                <s:Group id="videosGroup" 

                                 width="100%" 

                                 height="100%">

                        <s:Rect width="100%" height="100%">

                                <s:fill>

                                        <s:SolidColor color="0xff0000"/>

                                </s:fill>

                        </s:Rect>

                        <s:Rect width="60"

                                        height="20" 

                                        bottom="-20">

                                <s:fill>

                                        <s:SolidColor color="0xff0000"/>

                                </s:fill>

                        </s:Rect>

                        <s:Label text="VIDEOS" bottom="-20"/>

                </s:Group>

 

                <s:Group id="fotosGroup" 

                                 width="100%" 

                                 height="100%">

                        <s:Rect width="100%" height="100%">

                                <s:fill>

                                        <s:SolidColor color="0x00ff00"/>

                                </s:fill>

                        </s:Rect>

                        <s:Rect width="60" 

                                        height="20" 

                                        top="-20" 

                                        right="20">

                                <s:fill>

                                        <s:SolidColor color="0x00ff00"/>

                                </s:fill>

                        </s:Rect>

                        <s:Label text="FOTOS" right="30" top="-15"/>

                </s:Group>

        </s:Group>

 

 

        <s:HGroup width="100%" horizontalAlign="center">

                <s:Button label="fotos" click="{currentState='fotos'}"/>

                <s:Button label="videos" click="{currentState='videos'}"/>

        </s:HGroup>

</s:Group>