Flex3 Panel挤压伸缩效果

不多啰嗦，直接贴代码！

 

<? 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 >