Page Flip
The dynamic page flip effect as published on Pixelwit.com in May of 2002:
I've made lots of neat Flash stuff through the years but the interest generated by the PageFlip code has persisted the longest. Though the pace has slowed significantly since its heyday, I still get at least one e-mail a week asking about the PageFlip's use. If you're curious, the original dynamic page flipping source code is available to use as you see fit, free of charge. If you'd like to know how to add more pages or why your "with action" failed, I suggest you read the PageFlip Tutorials.
Although not originally designed as such, the PageFlip file has proven to be an excellent test of one's Flash knowledge. Some of the trickier parts are:
- Finding the book.
- Finding the code.
- Modifying the code.
- Modifying pages.
- Adding pages.
- Understanding the preload structure.
I'm not sure how many people figured everything out on their own, but I can tell you that roughly a billion people contacted me with their questions. I responded to as many e-mails as I could at first but that grew tiresome since most people wouldn't bother to say "thanks" after I took the time to answer their questions. BUT it's important to note that so far about 30 people have gone out of their way to express their appreciation without asking for any favors in return, two have made donations via PayPal and one even went so far as to send me the prettiest looking loaf of pumpernickel bread never to be eaten. You can blame either my particular food preferences or her particular cooking abilities, the jury is still out on that one. Thank you KT wherever you are. 😉
The Flash page flip effect has evolved a good deal since its inception long ago. My first attempt to imitate the turning of a book's page was in March 2002 and it was ugly. Then in early May of the same year I saw the light. Tony Hogqvist of Perfect Fools had combined masking, skewing and alpha gradients to simulate a page "curl" effect so convincing many people believed the image actually curled or warped as it was flipped over. After I learned the visual tricks pioneered by the Perfect Fools page flip, I tried improving their basic concept.
Essentially I took what started out as a timeline based animation and modified it to accommodate a near infinite number of page quantities and sizes by leveraging the features which were only available in the then recently released FlashMX. The new Flash drawing API was used to generate shapes and gradients which in turn were controlled via MX's new dynamic event handlers. I also tweaked the look of the gradient and initial page angle a bit to make the curl look more natural and disposed of the the skewing aspect since it seemed overly complex and added little visually.
My efforts paid off as the code I wrote won a contest on ActionScript.org. As a result, I got a free book of my choosing and a little bit of exposure.
I'm not sure, but I'd like to think my example may have inspired Erik Natzke to make his improved version of the page flip some time later. His version used Trigonometry and inertial easing to create a more interactive and realistic dragging effect.
Some time later, possibly mid 2004, Iparigrafika released a version which added a brand new feature allowing the user to tear away pages and they reintroduced the use of transparent pages which had originally been featured in the Perfect Fools' version of the page flip effect.
I've made all sorts of modifications to the page flip transition for various clients, Hard Covers, One Click Flipping, XML Table of Contents and Odd Page Shapes to name a few. If you have an idea which could be "The Next Big Thing" contact me now to learn how I can help make it happen.
Why I gave it away: Something About Sluggy.
Technical questions: Page Flip Help.
Improved PageFlip: Implements most requested features.
Comments(120)
RSS Feeds
Derrick, Without changing the source code too much, I tried to make a kind of virtual slider. Maybe it’s a start. Put my little script in the last frame, frame 14 of the original fla. Place a MC called move_mc on the main time line.
In the original code of the MC Pages you have to make 1 change: replace _xmouse by _root.move_mc._x in the function getPageRatio(). That’s all. I’d be glad to see any improvements to this :-).
Hello Everyone. Can anyone tutor me on how to modify the code to make the pageflipping auto and run on itself ? Thank you. =)
I modified the free code and made an album which runs fine on it’ own,but when I try to put it in my HTML , it won’t run (I’m using dreamweaver).When I put a hyperlink on a text which calls my swf file , it opens fine,but in another window (and with another color of background).What do I have to do to run it directly on my page?
Second question : how do I add sounds to the album?
Prince, the PageFlip file is meant to be an All-In-One solution where everything is encapsulated in the SWF file. It wasn’t meant to support dynamic loading of content, sorry.
Hi, it’s me again. This time I’m facing another problem. My magazine page/image dimension is 325×425 (WxH) & it has 84 pages. The final swf is about 2.5Mb. Is there anyway to add a preloader to every page, so it loads-on-demand. I tried some on my own code, but it appears outside the main swf (doesn’t flip).
Hi, I’m between a newbie & intermediate level in Flash. Started with MX 2004 & now using CS3. I will be using your code in our magazine site at http://www.gazmagazine.net. Working on it. Thanks.
Great piece! Thank you!
Now for a question..
How do you add a table of contents that is clickable and will take you to the next page?
Thanks!
Thanks Again, definitely one of the best page-flips around, and the price is good.
Hi Karessa, nice to hear from you. Have you been honing your baking skills or did you give up on attaining pumpernickel perfection? 😉
Thanks for the reference to the pumpernickel bread. You’ve put a huge smile on my face and it’s great that I’m not the only person who enjoys retelling that story.
thanks a lot for replying me,
i have wanted that the different pages of website (using flash8) may come through page flip (i don’t require any motion by dragging )when the user clicks the buttonof the page that he wants to open…
i hope that now you can understand my query
Aditya – explain more what you mean I bet we can help?
I have a problem as i want to change the pages on buttons event(“different pages for different button”) instead of dragging. Please help me.
Thanks a lot. This is definetly a cool way to add life to otherwise static images. I also appreciate those, like yourself, that feel sharing knowledge is better than with-holding it for personal gain. Cheers!
you are the bomb
greaaaaaat product
thanks