rotationY causes blur, AS3

Question

Hi

I'm having some little bugs on my site I'm developping for a school project. I'm using a flip mechanism to navigate through my site. The problem is: once it's flipped the content been displayed good just like I want it, but there's some offset from the flipped (right) parts en the solid left part (visible when you look closely). Also the right part is now a little blurred (which is the disturbing part of my issue). This all caused by the flip (I think the rotationY is causing the problem)

I would be pleased if someone could help me out.

When I click a button I do the following:

flip=new Flip(currentPage,nextPage,richting);
content.addChild(flip);
currentPage=nextPage;
nextPage = new MovieClip();

my Flip.as file: http://zaviola.co.cc/mm3/Flip.as

my demo: http://www.zaviola.co.cc/mm3/website.html

Answer 1

there is a fix for it, consider the following:

// store original matrix
var origMatrix:Matrix = box.transform.matrix;
// set initial position
box.rotationY = -180;
// start animation
TweenLite.to(box, 1, {rotationY:0, onComplete:cleanBlur})
// execute after animation complete
function cleanBlur():void {
    box.transform.matrix = origMatrix;
}

maybe you can find better results using other 3d library.

EDIT: sorry the "box" object, I was testing in flash, but box would be any of your pages to flip. Just apply the same logic.

Answer 2

Matteo at Flash & Math has an excellent solution for this. He actually found that when you bring an object into native 3D space it expands the object by one pixel in both the width and height. This can be counteracted by scaling your object back and then setting it's z to 0 which will scale it back up. Now the object is ready to play with without the blur.

http://www.flashandmath.com/flashcs4/blursol/index.html