Flex3 Panel挤压伸缩效果

http://www.cnblogs.com/dzone/archive/2011/08/24/2152060.html

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" currentState="stateOne">
    <mx:Style>
        Application{
            background-image:Embed("assets/images/back2.png");
        }
        ApplicationControlBar{
            background-color:#FF6600;
        }
        Panel{
             background-image:Embed("assets/images/back.png");
             vertical-align:middle;
             horizontal-align:center;
        }
        Label{
            font-size:20;
            font-weight:bold;
        }
    </mx:Style>
    
    <mx:states>
        <mx:State name="stateOne">
            <mx:SetProperty target="{p1}" name="height" value="90%"/>
            <mx:SetProperty target="{p2}" name="visible" value="false"/>
            <mx:SetProperty target="{p3}" name="visible" value="false"/>
        </mx:State>
        <mx:State name="stateTwo">
            <mx:SetProperty target="{p1}" name="height" value="40%"/>
            <mx:SetProperty target="{p2}" name="visible" value="true"/>
            <mx:SetProperty target="{p2}" name="height" value="40%"/>
            <mx:SetProperty target="{p3}" name="visible" value="false"/>
        </mx:State>
        <mx:State name="stateThree">
            <mx:SetProperty target="{p1}" name="height" value="30%"/>
            <mx:SetProperty target="{p2}" name="height" value="30%"/>
            <mx:SetProperty target="{p3}" name="height" value="30%"/>
        </mx:State>
    </mx:states>
    
    <mx:transitions>
        <mx:Transition fromState="stateOne" toState="stateTwo">
            <mx:Sequence duration="500">
            <mx:Resize targets="{[p1,p2]}" />
            </mx:Sequence>
        </mx:Transition>
        <mx:Transition fromState="stateOne" toState="stateThree">
            <mx:Sequence duration="500">
            <mx:Resize targets="{[p1,p3]}" />
            </mx:Sequence>
        </mx:Transition>
        <mx:Transition fromState="stateTwo" toState="stateOne">
            <mx:Sequence duration="500">
            <mx:Resize targets="{[p1,p2]}" />
            </mx:Sequence>
        </mx:Transition>
        <mx:Transition fromState="stateTwo" toState="stateThree">
            <mx:Sequence duration="500">
            <mx:Resize targets="{[p1,p2,p3]}" />
            </mx:Sequence>
        </mx:Transition>
        <mx:Transition fromState="stateThree" toState="stateTwo">
            <mx:Sequence duration="500">
            <mx:Resize targets="{[p1,p2,p3]}" />
            </mx:Sequence>
        </mx:Transition>
        <mx:Transition fromState="stateThree" toState="stateOne">
            <mx:Sequence duration="500">
            <mx:Resize targets="{[p1,p3]}" />
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>
    
    <mx:ApplicationControlBar dock="true" width="100%" verticalAlign="middle" horizontalAlign="left">
        <mx:Spacer width="25"/>
        <mx:LinkButton id="button1" label="One" click="currentState='stateOne'"/>
        <mx:LinkButton id="button2" label="Two"  click="currentState='stateTwo'"/>
        <mx:LinkButton id="button3" label="Three"  click="currentState='stateThree'" />
    </mx:ApplicationControlBar>
    
    <mx:Panel id="p1" title="Panel one" width="100%" >
        <mx:Label id="label1" text="Labe one" />
    </mx:Panel>
    <mx:Panel id="p2" title="Panel two" width="100%" >
        <mx:Label id="label2" text="Labe two" />
    </mx:Panel>
    <mx:Panel id="p3" title="Panel three" width="100%" >
        <mx:Label id="label3" text="Labe three" />
    </mx:Panel>
    
</mx:Application>