I'm looking to do a simple "flip" effect via the new rotationY attribute. I'm building my example in Flex 3.2 on AIR 1.5 using Flash player 10. My example is comprised of a viewstack with two children (canvases). The stylenames on each of the children just apply a background image. I'm also wrapping my viewstack with a canvas so I can rotate my children at a center registration point. I've got the rotation working beautifully, but the children of the viewstack are blurry after the rotation ends.
After researching this issue on the web, I've found that people have experienced the same issue with rotating a movie clip. They fixed the issue by reseting the transform.matrix on the movieclip after the rotating effect ended. This doesn't seem to work for my case. Any insight as to why this is happening and how to work-around this until the bug is resolved? Here is my sample code: <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" showFlexChrome="false"> <mx:Style source="assets/css/main.css"/> <mx:Script> <![CDATA[ import mx.controls.scrollClasses.ScrollThumb; import caurina.transitions.*; private var isTurning:Boolean = false; private function loop(e:Event):void { if(mycon.rotationY > 90) { deck.selectedChild = two; } else { deck.selectedChild = one; } } private function flip(event:MouseEvent):void { addEventListener(Event.ENTER_FRAME, loop); if(!isTurning) { Tweener.addTween(mycon,{rotationY:(mycon.rotationY==0?180:0),time:2,onComplete:function():void{isTurning=false;}}); isTurning = true; } } ]]> </mx:Script> <mx:Canvas id="mycon" x="180" y="250" clipContent="false"> <mx:ViewStack id="deck" resizeToContent="true" x="-180" y="-250" mouseDown="moveMe(event)" creationPolicy="all"> <mx:Canvas id="one" width="360" height="500" styleName="mainViewStyle"> <mx:Button id="rotateToBackBtn" label="rotateToBack" click="flip(event)"/> <mx:Text text="hello world" x="100" y="150"/> </mx:Canvas> <mx:Canvas id="two" width="360" height="500" clipContent="false"> <mx:Canvas width="360" height="500" styleName="configViewStyle" x="360" rotationY="180"> <mx:Button id="rotateToFrontBtn" label="rotateToFront" click="flip(event)"/> <mx:Text text="hello world" x="100" y="150" color="0xFFFFFF"/> </mx:Canvas> </mx:Canvas> </mx:ViewStack> </mx:Canvas> </mx:WindowedApplication>