Adobe flash cs4 tutorial: 3d page flip

In this tutorial learn how to create the 3d page flip effect using actionscript 3 and the tween classes. This effect looks like the album cover flip in the new ipods.

import fl.transitions.Tween;
import fl.transitions.easing.Strong;
import fl.transitions.TweenEvent;

con.sidea.flip.addEventListener(MouseEvent.CLICK,onflip);
con.sideb.flip.addEventListener(MouseEvent.CLICK,onflip);
addEventListener(Event.ENTER_FRAME,loop);

var isStill:Boolean=true;
var arraytween:Array = new Array();

function onflip(e:Event) {
 if (isStill) {
  arraytween.push(new Tween(con,'rotationY',Strong.easeOut,con.rotationY,con.rotationY+180,1,true));
  arraytween[0].addEventListener(TweenEvent.MOTION_FINISH,reset);
  isStill=false;

 }
}
function reset(e:Event) {
 isStill=true;
 arraytween=[];

}

function loop(e:Event) {

 if (con.rotationY>=90 && con.rotationY<=270) {
  con.addChild(con.sideb);
  con.scaleX=-1;
 } else {
  con.addChild(con.sidea);
  con.scaleX=1;
 }
 if (con.rotationY>=360) {
  con.rotationY=0;
 }

}

16 comments:

Sam said...: good stuff...Keep it up.
So much easier to do this with CS4's RotationY prop.; July 2, 2009 2:47 PM
DEEP'NEST said...: THNAX FOR THIS GREAT TUTORIAL BUT PLEASE SAVE UR SOURCE FILE IN CS3 VERSION SO OTHER CAN USE IT .MOST OF US STILL WORKIN FLASH-CS3; August 18, 2009 8:02 AM
Roberto said...: Great tutorial!
One question tho...
How about the fx at the group94.com?
How they did that?; August 20, 2009 8:58 PM
Sam said...: @Roberto
which fx are you referring to?
didn't realize they were behind the eternal moonwalk site; great microsite; August 20, 2009 9:09 PM
Sam said...: @DEEP'NEST you'll need CS4/Flash Player 10 to accomplish this as in the tutorial. He's another example of this in CS4:
Interactive 3D Video Flip
http://www.gotoandlearn.com/play?id=91
You can do this in CS3 also, just requires a lot more code; August 20, 2009 9:16 PM
Anonymous said...: Great Tutorial! I just don't seem to understand why my button flickers from one side to the other. Can anyone help?; August 25, 2009 2:21 AM
Anonymous said...: Who can change those cs4 coding to cs3 format??
I can't open the source file... T.T
Thanks lot~

Leticia; September 14, 2009 2:08 PM
Anonymous said...: what if i had 3 pages and three buttons outside that would flip the corresponding page. Would that be possible... could you please help me :D; September 20, 2009 7:53 PM
Erin said...: Hey, awesome code! I was trying to include this code on a larger webpage, but it didn't work when I followed your steps for some bizarre reason. I then tried simply altering your source file, and while it works there, it doesn't work when externally loaded into another page (tried UILoader and another method). Any help with externally loading this would be greatly appreciated! :)
e-mail; October 23, 2009 7:32 AM
Ricardo said...: How can I add text/contact forms or images to this?; October 30, 2009 10:25 AM
Waarith Abdul-Majeed said...: I haven't tried to add contacts but I would just add the text fields and buttons.; October 30, 2009 3:25 PM
Rajat said...: Who can change those cs4 coding to cs3 format??
I can't open the source file & this tutorials not working CS3... T.T
Thanks lot~; December 20, 2009 9:58 AM
Anonymous said...: I noticed that when the page was rotated the Flash player consume 40-50% from my CPU , how it's possible? the animation it's finish but the CPU it's 40-50% used . tested in mozilla and IE and from Flash ( when i test the movie) Pentium 4 and athlon 64 X2 tested!!!..

with caurina class... the same ~60%

and the problem it's the animation it's stop why the CPU it's in use ? so if you wont to put an animation like this in to a complex flash site.. your CPU why l be very very used..maybe if you have an intel 2 quad ... whyl work fine; February 13, 2010 11:19 AM
Anonymous said...: Great tutorial i followed your tutorial and i was able to make a nice page flip but i have question how can i make same thing in as2 because i created page flip in as3(as per your tutorial) and rest of my movie is created in as2 so when i try to load as3 into as2 i get error and i found we can not do that so i was planning to create flip page in as2. can you please help me. where i need to make changes to make same effect in as2

thanks in advance

DjM; February 27, 2010 9:04 AM
Hardly Wisdom said...: This is great, but I have one problem... it seems as though if I have other buttons or eventListeners on sideb (for example) they don't work after the flip.

Here's an illustration (not actually what I'm trying to do, but has the same idea):

sidea and sideb both have content. sideb has a contact page. When you flip to sideb, the submit button on the contact page doesn't work. It's almost as if the eventListener was removed.

Any ideas? I've tried this a bunch of different ways with test projects and I keep getting the same result.

The AS3 code is inside sideb. Help!; March 6, 2010 1:07 PM
Sam said...: @Hardly Wisdom - I did a quick experiment by adding a simple button inside the sideb movie clip and can't seem to replicate your error. Can you post the code your using?

(added the EventListener to the button with:
con.sideb.sam_btn.addEventListener(MouseEvent.CLICK, thisnow);
function thisnow(e:MouseEvent):void
{
trace("here");
}; March 6, 2010 5:15 PM