<?xml version="1.0" ?>
<!-- transitions/DefiningTrans.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" >
    <!-- http://flexdocs.kr/docs/flex2/docs/00000938.html -->
    <!-- Define the two view states, in addition to the base state.-->
    <mx:states>
        <mx:State name="One">
            <mx:SetProperty target="{p1}" name="x" value="110"/>
            <mx:SetProperty target="{p1}" name="y" value="0"/>
            <mx:SetProperty target="{p1}" name="width" value="200"/>
            <mx:SetProperty target="{p1}" name="height" value="210"/>
            <mx:SetProperty target="{p2}" name="x" value="0"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="100"/>
            <mx:SetProperty target="{p2}" name="height" value="100"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
        <mx:State name="Two">
            <mx:SetProperty target="{p2}" name="x" value="110"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="200"/>
            <mx:SetProperty target="{p2}" name="height" value="210"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
    </mx:states>

    <!-- Define Transition array with one Transition object.-->
    <mx:transitions>
        <!-- Define a transition for changing from any state to any state.
        -->
        <mx:Transition id="myTransition" fromState="*" toState="*">
            <!-- Define a Parallel effect as the top-level effect.-->
            <mx:Parallel id="t1" targets="{[p1,p2,p3]}">
                <!-- Define a Move and Resize effect.-->
                <mx:Move  duration="400"/>
                <mx:Resize duration="400"/>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>

    <!-- Define the Canvas container holdig the three Panel containers.-->
    <mx:Canvas id="pm" width="100%" height="100%" >
        <mx:Panel id="p1" title="One"
                x="0" y="0" width="100" height="100"
                click="currentState='One'" >
            <mx:Label fontSize="24" text="One"/>
        </mx:Panel>
       
        <mx:Panel id="p2" title="Two"
                x="0" y="110" width="100" height="100"
                click="currentState='Two'" >
            <mx:Label fontSize="24" text="Two"/>
        </mx:Panel>
       
        <mx:Panel id="p3" title="Three"
                x="110" y="0" width="200" height="210"
                click="currentState=''" >
            <mx:Label fontSize="24" text="Three"/>
        </mx:Panel>
    </mx:Canvas>
</mx:Application>

 

<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" xmlns:my="*" >
    <my:TestUI width="100%" height="100%"/>
</mx:Application>

 

package {
    import mx.core.UIComponent;
    import flash.events.MouseEvent;
    import mx.containers.Panel;
    import mx.controls.Label;
    import mx.events.FlexEvent;
    import mx.states.State;
    import mx.states.Transition;
    import mx.states.SetProperty;
    import mx.effects.Parallel;
    import mx.effects.Move;
    import mx.effects.Resize;
    import mx.effects.Effect;
   
    public class TestUI extends UIComponent
    {
        public function TestUI()
        {
            super();
            this.addEventListener( FlexEvent.CREATION_COMPLETE, onCreationComplete );
        }
       
        private function onCreationComplete( e:FlexEvent ):void
        {
            var p1:Panel;
            var p2:Panel;
            var p3:Panel;
            var label:Label;
            var sp:SetProperty;
            var parallel:Parallel;
            var moveEffect:Move;
            var resizeEffect:Resize;
            var transition:Transition;
           
            //Panel 1
            p1 = new Panel();
            p1.name = "One";
            p1.title = "one";
            p1.x = 0;
            p1.y = 0;
            p1.width = 100;
            p1.height = 100;
            p1.addEventListener( MouseEvent.CLICK, onMouseClick );
            label = new Label;
            label.setStyle( "fontSize", "24" );
            label.text = "One";
            p1.addChild( label );
            this.addChild( p1 );
           
            //Panel 2
            p2 = new Panel();
            p2.name = "Two";
            p2.title = "two";
            p2.x = 0;
            p2.y = 110;
            p2.width = 100;
            p2.height = 100;
            p2.addEventListener( MouseEvent.CLICK, onMouseClick );
            label = new Label;
            label.setStyle( "fontSize", "24" );
            label.text = "Two";
            p2.addChild( label );
            this.addChild( p2 );

            //Panel 3
            p3 = new Panel();
            p3.name = "";
            p3.title = "Three";
            p3.x = 110;
            p3.y = 0;
            p3.width = 200;
            p3.height = 210;
            p3.addEventListener( MouseEvent.CLICK, onMouseClick );
            label = new Label;
            label.setStyle( "fontSize", "24" );
            label.text = "Three";
            p3.addChild( label );
            this.addChild( p3 );

            //State 1
            var state:State;
            var properties:Array;
            var property:Array;
           
            state = new State();
            state.name = "One";
            properties = [  [ p1, "x",     110   ],
                            [ p1, "y",   0    ],
                            [ p1, "width",  200  ],
                            [ p1, "height", 210  ],
                            [ p2, "x",    0 ],
                            [ p2, "y",    0 ],
                            [ p2, "width",  100   ],
                            [ p2, "height", 100  ],
                            [ p3, "x",    0 ],
                            [ p3, "y",    110   ],
                            [ p3, "width",  100   ],
                            [ p3, "height", 100 ],
                        ];
            for each ( property in properties )
            {
                sp = new SetProperty( property[0], property[1], property[2] );
                state.overrides.push( sp );
            }
            this.states.push( state );
           
            //State 2
            state = new State();
            state.name = "Two";
            properties = [
                            [ p2, "x",    110   ],
                            [ p2, "y",    0 ],
                            [ p2, "width",  200   ],
                            [ p2, "height", 210  ],
                            [ p3, "x",    0 ],
                            [ p3, "y",    110   ],
                            [ p3, "width",  100   ],
                            [ p3, "height", 100 ],
                        ];
            for each ( property in properties )
            {
                sp = new SetProperty( property[0], property[1], property[2] );
                state.overrides.push( sp );
            }
            this.states.push( state );

            //transition 설정
            transition = new Transition;
            transition.fromState = "*";
            transition.toState = "*";

            parallel = new Parallel();
            parallel.targets.push( p1, p2, p3 );
           
            moveEffect = new Move();
            moveEffect.duration = 400;
            parallel.addChild( moveEffect );

            resizeEffect = new Resize();
            resizeEffect.duration = 400;
            parallel.addChild( resizeEffect );
           
            transition.effect = parallel as Effect;
            this.transitions.push( transition );
        }
       
       
        private function onMouseClick( e:MouseEvent ):void
        {
            var p:Panel = e.currentTarget as Panel;
            if( null != p )
            {
                this.currentState = p.name;
            }
        }
    }
}