Why does this ActionScript Flip cause a blur on my website?

Question

I'm using a flip mechanism to navigate through my site (flip file & demo). 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).

When I click a button I do the following:

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

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

adding: This fixes the scale issue, but not the blurriness. You will still need to use the matrix transformation fix posted above.