[flexcoders] Issue with Flash 10 3d api and Flex/AIR

[sofiane.oubraham]

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>