flex3d效果（立方体）

该效果可用于4个容器的切换，即立方体的前后左右四个面。


组件代码：

<?xml version="1.0" encoding="utf-8"?>
<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="400" height="300">
  <s:layout>
      <s:BasicLayout/>
  </s:layout>
  <fx:Script>
  <![CDATA[
      import mx.controls.Alert;
      import mx.events.EffectEvent;
      private var swap:Boolean = true;
      private var curPaper:int = 3;
      private var toPaper:int = 0;
      private var curAngle:int = 0;
      private var secPaper:int = -1;
      public function onRotate(t:int):void
      {
          if(curPaper != t && !r1.isPlaying)
          {
              var csubt:int = Math.abs(curPaper - t);
              if(csubt == 2)
              {
                  secPaper = t;
                  rotate(Math.abs(curPaper - 1));
              }
              else
              {
                  rotate(t);
              }
          }
      }
      private function rotate(t:int):void
      {
          if(!r1.isPlaying)
          {
              toPaper = t;
              r1.angleYFrom = curAngle;
              if(!(curPaper == 0 && toPaper == 3) && (toPaper > curPaper || (curPaper == 3 && toPaper == 0)))
              {
                  r1.angleYTo = curAngle + 90;
                  curAngle = curAngle + 90;
              }
              else
              {
                  r1.angleYTo = curAngle - 90;
                  curAngle = curAngle - 90;
              }
              if(curPaper　< toPaper)
              {
                  b1.swapElementsAt(curPaper, toPaper);
                  b1.getElementAt(curPaper).visible = true;
              }
              else
              {
                  b1.getElementAt(toPaper).visible = true;
              }
              swap = true;
              r1.play();
          }
      }
     
      protected function r1_effectEndHandler(event:EffectEvent):void
      {
          // TODO Auto-generated method stub
         
          if(curPaper > toPaper)
          {
              b1.getElementAt(toPaper).visible = false;
              b1.swapElementsAt(curPaper, toPaper);
          }
          else
          {
              b1.getElementAt(curPaper).visible = false;
          }
          curPaper = toPaper;
          if(secPaper >= 0)
          {
              rotate(secPaper);
              secPaper = -1;
          }
      }
     
     
      protected function r1_effectUpdateHandler(event:EffectEvent):void
      {
          // TODO Auto-generated method stub
          if(r1.duration/2 < r1.playheadTime && swap)
          {
              swap = false;
              b1.swapElementsAt(curPaper, toPaper);
          }
      }
     
  ]]>
  </fx:Script>
 
  <fx:Declarations>
      <!-- 将非可视元素（例如服务、值对象）放在此处 -->
      <s:Rotate3D id="r1" target="{b1}" duration="500" effectEnd="r1_effectEndHandler(event)" effectUpdate="r1_effectUpdateHandler(event)"/>
     
  </fx:Declarations>
  <s:BorderContainer id="b1" width="100%" height="100%" backgroundAlpha="0" borderVisible="false" transformX="{b1.width/2}" transformZ="{b1.width/2}">
      <s:BorderContainer id="b11" width="100%" height="100%" backgroundColor="#000000" borderVisible="false" z="{b1.width}" transformX="{b1.width}" rotationY="-90" visible="false">
      </s:BorderContainer>
      <s:BorderContainer id="b12" width="100%" height="100%" backgroundColor="#000000" borderVisible="false" z="{b1.width}" transformX="{b1.width/2}" rotationY="180" visible="false">
      </s:BorderContainer>
      <s:BorderContainer id="b13" width="100%" height="100%" backgroundColor="#000000" borderVisible="false" z="{b1.width}" rotationY="90" visible="false">
      </s:BorderContainer>
      <s:BorderContainer id="b14" width="100%" height="100%" backgroundColor="#000000" borderVisible="false">
      </s:BorderContainer>
  </s:BorderContainer>
</s:Group>






应用程序代码：


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*" creationComplete="application1_creationCompleteHandler(event)" backgroundColor="#5499AD">
  <fx:Script>
      <![CDATA[
          import mx.events.FlexEvent;
         
          import spark.components.BorderContainer;


          protected function application1_creationCompleteHandler(event:FlexEvent):void
          {
              // TODO Auto-generated method stub
              myCom3ID.b11.addElement(myButton1);
              myCom3ID.b12.addElement(myTextArea1);
              myCom3ID.b13.addElement(myButton2);
              myCom3ID.b14.addElement(myTextArea2);
          }
      ]]>
  </fx:Script>
  <fx:Declarations>
      <!-- 将非可视元素（例如服务、值对象）放在此处 -->
      <s:Button id="myButton1" label="front" width="100%" height="100%"/>
      <s:TextArea id="myTextArea1" text="back" width="100%" height="100%"/>
      <s:Button id="myButton2" label="frontttt" width="100%" height="100%"/>
      <s:TextArea id="myTextArea2" text="backkkkkk" width="100%" height="100%"/>
  </fx:Declarations>
  <s:Button x="321" y="569" label="front" click="myCom3ID.onRotate(0)"/>
  <s:Button x="408" y="569" label="back" click="myCom3ID.onRotate(1)"/>
  <s:Button x="486" y="569" label="frontttt" click="myCom3ID.onRotate(2)"/>
  <s:Button x="564" y="569" label="backkkk" click="myCom3ID.onRotate(3)"/>
  <local:myCom3 id="myCom3ID"/>
</s:Application>