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>