Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Turning pages with Flash

Looking for page turning effect to simulate a book

10:33 am on Dec 28, 2002 (gmt 0)

Junior Member from ES 

10+ Year Member

joined:Sept 13, 2001
votes: 0

Morning everyone.

I've seen several websites (can't remember which now, sorry) that have a flash movie like a book, in which the user can drag and turn the pages over, with a nifty page bending effect that twists the images or content as the "page" turns. I'd like to know how to do this or find some tutorial specific to that effect. If anyone can point me to some flash resource site (several of which I've already looked through without finding anything) or can pass me some tips, I'd be very grateful.


4:12 pm on Dec 29, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
votes: 0

There are 2 ways to do this depending on how intricate you want it. The first way is to create a movie clip of the page turning. When you click a hot area set up by a button, it will trigger the movie clip that will end calling a new frame in the movie(which is the new page).

The second way is complicated. You will create a dragable button that as it goes further horizontally, it will call a new frame in the movie. This will take plenty of action script. I would look for tutorials on dragable buttons and horizontal coordinates.

Personally I would go for a button that may say turn page, that would do the movie clip option.

As far as the animation goes, remember that it is not the detail of each frame that counts it is the motion. Personally I would create thye frames in illustrator or freehand then import them. Tweening does not help you for real 3d motion. You could even do them in photoshop or a raster program.

3:51 am on Jan 8, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 7, 2003
votes: 0

i think you want something quite more simple. but isn't. don't believe in a movie clip you will play. it's all action script coding. i've seen it on the hp homepage. really impressive and well made.

all you have to do is to follow the mouse-coursor and rotate the clipping over page in it's angle. then you need a mask, also rotated relativly to this page not to display the complete page. that's all.

just some action script with some maths.

later on you can add shadows with a transparent gradient to give it a more realistic experience.

good luck!