Adobe flash cs4 tutorial: 3d page flip

Adobe flash cs4 tutorial: 3d page flip

Get Fla

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.


35 comments:

Sam said...

good stuff...Keep it up.
So much easier to do this with CS4's RotationY prop.

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

Roberto said...

Great tutorial!
One question tho...
How about the fx at the group94.com?
How they did that?

Sam said...

@Roberto
which fx are you referring to?
didn't realize they were behind the eternal moonwalk site; great microsite

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

Anonymous said...

Great Tutorial! I just don't seem to understand why my button flickers from one side to the other. Can anyone help?

Anonymous said...

Who can change those cs4 coding to cs3 format??
I can't open the source file... T.T
Thanks lot~


Leticia

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

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

Ricardo said...

How can I add text/contact forms or images to this?

Waarith Abdul-Majeed said...

I haven't tried to add contacts but I would just add the text fields and buttons.

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~

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

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

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!

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");
}

Steven said...

My button flashes after you've pressed it, how do i solve it?
Thankyouuu

Anonymous said...

I have the same problem, my button flashes after I have pressed it, but only with Firefox and Safari but it works with IE.

Thank you,

ABD said...

when I tried it, it looped

Anonymous said...

My sideb also flickered between mirrored version and normal version of itself when I did Test Movie.

I went ahead and published it and ran the SWF...again the flicker.

But then I ran the HTML that was published with the SWF and it worked just fine.

Abeer said...

this works great but after it flips to side b the image keeps flickering...how can i fix this?

Mohammad said...

Very good tutorial. I want to implement this on my company website which has 7 pages.

Now, please help me in coding the action script for the 7 pages. I figure out that I need to change on the loop function but don't know what...

Please...Please...Please...

Anonymous said...

I have the same flickering... anyone work it out yet? it all seemed good in the html preview but them my swf messes up on other comps when i uploaded it :(

Anonymous said...

Solution: Flickering Problem....
Go to line 30 and set con.scaleX to 1. instead of -1. That's the problem.

Ideas without boundaries said...

Thank you for this great tutorial. However, my images seem blurry and I'm not sure why. When you first come to the page it looks crisp but when you flip it, the images become blurred. Look at my logo when you flip it. Its almost like something in the code stretches it when it rotates.

here is the link:
http://ballisticdesigns.com/holiday/holiday.html

Lemnis said...

I would like use this script for a single page flip. But when I align the container left (so that the page will flip to the left) and the animation is ended. The page will flip automatically to the other side with the original x and y coordinates. But I want it on the x and y coordinates of the last animated page flip. That's in my case 390px to the left.

When I delete the function loop it works, but the other side doesn't turn up. And it's shows in a mirror.

How can i make a proper page flip?

(sorry for my bad English and explaining of my problem)

Samuel said...

Thankyou so, so much.
I had a lot of troubles as I'm completely new to flash actionscripting, but I managed to solve them myself using the feedback you've given others regarding their errors.

Many thanks though, this has helped my current project so much.

alex said...

why does the icon of my flip keep twinkling when i move my mouse toward it???

Anonymous said...

Could figure out a way to have 2 or more squares working :(
could somebody help me out with this one?

Anonymous said...

what is the coding for the buttom

Patricia said...

Perfect!

How can I modify the script so that the flip happens on Enter_Frame (instead of on a mouse event) and then stays on sideb?

thanks!

vincent said...

my rotationY is not blue color and my 3d flip page has not work.... northing in my script... help!!!

vincent said...

my rotationY is not blue color and my 3d flip page has not work.... that is nothing wrong in my script... help!!!

Bob Moran said...

I am having trouble downloading the fla file from the site under the youtube video. Can you attach it in an email to my email address

Bob Moran said...

The link to download the .fla file is broken. Can you update the link so I can download your code. I like your presentation and would like to test it with your .fla code to see if I can use it Thanks Bob