Question

I’m trying to create something with a flip effect tutorial from tutplus – http://active.tutsplus.com/tutorials/effects/iphone-page-transition-flash/

However my flip area is much bigger than the tutorial, it’s 900px wide. Everything works fine except that it leaves a trail when the width is that big. You’ll see it when you flip it a few times.

Someone else posted the same problem in the comments from last year, but no one replied.

Does anyone know a solution to this?

Edit:

Here is a screen shot: http://imageshack.us/f/823/unled2lo.jpg/ (click to enlarge)

The front is purple and the back is white.

As you can see it left a bit of the purple as the page flipped to white.

I couldn’t get a screen shot of it turning, but it’s even more obvious as the page is actually flipping because the width become narrow which reveals a whole lot more that’s left behind on the page.

Answer 1

The tutorial you are using create the flip effect using the build in flash tween classes, they are absolute rubbish, and very slow if you compare to other third part tween classes. That may be causing the trail! Lee Brimelow has a great video tutorial about how to do exact what you need: http://gotoandlearn.com/play.php?id=91 he is using caurina, but I highly recommend you to replace it with tweenLight so far the best tween I ever used.

Ok, thats the walkthrough:

1- Download the files from Lee Brimelow tutorial here http://gotoandlearn.com/files/3dflip.zip

2- Download tweenLight AS3 classes here: http://www.greensock.com/tweenlite/

3- copy the com folder inside greensock-as3 and past it inside 3dflip folder. Now you have all the tween classes you need for your flip!

4- open the flash file 3dflip.fla and replace the original code (located in the first frame) with this:

import com.greensock.TweenLite;
import fl.video.*;

con.visible = false;

var flv:FLVPlayback = con.vid.flvp;
flv.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, onStart);

function onStart(e:Event):void
{
    con.visible = true;
    loading.visible = false;
}

con.vid.spin.addEventListener(MouseEvent.CLICK, cl);
con.tclip.spin.addEventListener(MouseEvent.CLICK, cl);

var isTurning:Boolean = false;

function cl(e:Event):void
{
    if(!isTurning)
    {
        TweenLite.to(con, 1, {rotationY:con.rotationY+180, onComplete:function(){isTurning=false;}});
        isTurning = true;
    }
}

addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void
{
    if(con.rotationY > 90 && con.rotationY < 270)
        con.addChild(con.tclip);
    else
        con.addChild(con.vid);
    if(con.rotationY >= 360) con.rotationY = 0;
} 

Thats it. Now publish and see the result. Now all you have to do is replace the video player with the content that you want!