flex视图转换时过渡效果及视图转换时在新视图上增加组件及事件

新视图上增加组件及事件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
<mx:Script>
   <![CDATA[
      import flash.events.KeyboardEvent;
      import flash.events.Event;
      import mx.controls.Alert;
    private function imgGetFocus():void{
     mypic.focusRect=false;
     mypic.focusEnabled=true;
     mypic.setFocus();
    }
    private function onKeyDown(evt:KeyboardEvent):void{
     if(evt.shiftKey&&evt.keyCode==79){
      mypic.setFocus();
      currentState="fullpic";
     
     }else if(evt.shiftKey&&evt.keyCode==67){
      mypic.setFocus();
      currentState="";
     
     }
    }
    private function myHandler(evt:Event):void{
    Alert.show("你点新视频上的按钮...");
    mypic.setFocus();
    }
   ]]>
</mx:Script>

<mx:states>
   <mx:State name="fullpic">
    <mx:SetProperty target="{mypic}" name="width" value="604"/>
      <mx:SetProperty target="{mypic}" name="height" value="457"/>
      <mx:SetProperty target="{mypic}" name="x" value="0"/>
      <mx:SetProperty target="{mypic}" name="y" value="0"/>
      <mx:AddChild position="lastChild">
          <mx:Button x="670" y="113" label="Button" id="bt1"/>
      </mx:AddChild>
     
      <mx:SetEventHandler target="{bt1}" name="click" handlerFunction="myHandler"/>
   </mx:State>
  
</mx:states>


<mx:transitions>
   <mx:Transition id="openPIc" fromState="*" toState="*">
    <mx:Parallel id="s2" target="{mypic}">
      <mx:Blur duration="100" blurXFrom="0.0" blurXTo="10" blurYFrom="0.0" blurYTo="10"/>
      <mx:Sequence id="p1">
       <mx:Resize duration="500"/>
    </mx:Sequence>
    <mx:Sequence id="p2">
     <mx:Rotate duration="500"/>
     <mx:Glow duration="500"/>    
    </mx:Sequence>

   
    </mx:Parallel>   
   </mx:Transition>
</mx:transitions>

<mx:Image x="243" y="85" source="../bin-debug/s7/cj3.jpg" width="40%" height="50%" id="mypic" creationComplete="imgGetFocus();" keyDown="onKeyDown(event);"/>

</mx:Application>
视图转换时过渡效果

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
   <![CDATA[
    private function toTab():void{
     if(this.currentState=='state2'){
      this.currentState="";
     }else{
      this.currentState="state2";
     }
    }
   ]]>
</mx:Script>
<mx:states>
   <mx:State name="state2">
    <mx:SetProperty target="{p2}" name="visible" value="false"/>
    <mx:SetProperty target="{p2}" name="includeInLayout" value="false"/>
   </mx:State>
</mx:states>

<mx:transitions>
   <mx:Transition id="statto" fromState="*" toState="state2">
    <mx:Sequence id="s1" target="{p2}">
     <mx:Iris duration="500" showTarget="false"/>
     <mx:SetPropertyAction name="visible"/>
     <mx:SetPropertyAction target="{p2}" name="includeInLayout"/>
    </mx:Sequence>
   </mx:Transition>

   <mx:Transition id="statfprm" fromState="state2" toState="*">
    <mx:Sequence id="s2" target="{p2}">
     <mx:Iris duration="100" showTarget="true"/>
     <mx:Zoom duration="100" />
     <mx:SetPropertyAction target="{p2}" name="includeInLayout"/>
     <mx:SetPropertyAction name="visible"/>
    
    </mx:Sequence>
   </mx:Transition>
</mx:transitions>


<mx:Tile x="46" y="10" width="300" height="100%" id="t1" direction="horizontal">
   <mx:Panel width="250" height="200" layout="absolute" id="p1" title="p1">
   </mx:Panel>
   <mx:Panel width="250" height="200" layout="absolute" id="p2" title="p2">
   </mx:Panel>
   <mx:Button label="ButtonButton" id="b1" width="232" click="toTab();"/>
</mx:Tile>

</mx:Application>