AS3 Pageflip effect: Page reversed when flipped

Question

I have a script for a book with a page flip effect. But when i flip the page from right to left, the back of the page insted of white is the reflex from the front of the page. Do you know you to make it white?

    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    import fl.transitions.TweenEvent;
    import flash.display.Sprite;
    import flash.display.Loader;

    var cont:DisplayObject;
    var cont2:DisplayObject;
    var imgLoader:Loader;
    var pages:Array = [];

for (var i:int=0; i<=4; i++)
    {
        imgLoader  = new Loader();
        imgLoader.contentLoaderInfo.addEventListener(Event.INIT, onLoadJPEG);
        imgLoader.load(new URLRequest(""+i+".png"));
    }

    var imgLoader2:Loader;

    imgLoader2  = new Loader();
    imgLoader2.contentLoaderInfo.addEventListener(Event.INIT, onLoadSketch);
    imgLoader2.load(new URLRequest("voltaatrassketchbook.png"));

    function onLoadJPEG(e : Event):void
    {
        cont = e.target.loader;//obter o loader associado ao LoaderInfo 
        cont.x = 250;
        cont.y = 50;
        cont.width = (445 - 100) / 2;
        cont.height = (604 - 100) / 2;
        addChild(cont);
        cont.addEventListener(MouseEvent.MOUSE_UP, FlipPage);
        pages.push(cont);
    }

    function onLoadSketch(e : Event):void
    {
        cont2 = e.target.loader;//obter o loader associado ao LoaderInfo 
        cont2.x = 450;
        cont2.y = 300;
        cont2.width = 181 / 2;
        cont2.height = 127 / 2;
        addChild(cont2);
        cont2.addEventListener(MouseEvent.MOUSE_UP, volta);
    }

    function FlipPage(e:MouseEvent):void
    {
        setChildIndex(DisplayObject(e.currentTarget), this.numChildren - 1);
        if (e.currentTarget.rotationY == 0)
        {
            var myTween:Tween = new Tween(e.currentTarget,"rotationY",Regular.easeInOut,0,180,1,true);
        }
        if (e.currentTarget.rotationY == 180)
        {
            var myTween:Tween = new Tween(e.currentTarget,"rotationY",Regular.easeInOut,180,0,1,true);
        }
    }

    function volta(e: MouseEvent):void
    {
        gotoAndStop(1);
        for (var i:int = 0; i < pages.length; i++)
        {
            DisplayObject(pages[i]).visible = false;
        }
        cont2.visible = false;
    }

Answer 1

Each page should be a container that contains two objects, the front and the back:

function onLoadJPEG(e : Event):void
{
    // Create container.
    var page:Sprite = new Sprite();
    page.x = 250;
    page.y = 50;

    // Create front.
    var front:Loader = e.target.loader
    front.width = (445 - 100) / 2;
    front.height = (604 - 100) / 2;

    // Create back (a white rectangle).
    var back:Sprite = new Sprite();
    back.graphics.beginFill(0xFFFFFF);
    back.graphics.lineStyle();
    back.graphics.drawRect(0, 0, (445 - 100) / 2, (604 - 100) / 2);
    back.graphics.endFill();

    page.addChild(back);
    page.addChild(front);
    addChild(page);
    page.addEventListener(MouseEvent.MOUSE_UP, FlipPage);
    pages.push(page)
}

Then you need to check the page rotations once every frame, and change the index of each page's front or back accordingly.

Add this before your function declarations:

addEventListener(Event.ENTER_FRAME, enterFrameListener);

And add this function:

function enterFrameListener(e: Event):void {
    for(var i:int = 0; i < pages.length; i++) {
        if(pages[i].rotationY >= 90 && 
           pages[i].rotationY <= 270 &&
           // the page back is underneath the front.
           pages[i].getChildAt(0) is Sprite
        ) {
            pages[i].addChild(pages[i].getChildAt(0)); // Move the back to the top.
        } else if(
            (pages[i].rotationY < 90 || pages[i].rotationY > 270) &&
            // the page front is underneath the back.
            pages[i].getChildAt(0) is Loader 
        ) {
            pages[i].addChild(pages[i].getChildAt(0)); // Move the front to the top.
        }
    }
}