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
hey i have been trying to create my own page flip for some time … most of the stuff online is commercial..thank you so much..love from Uganda..
Originla and improved page flip looks great…but. Is there a version that can be used with Adobe CS3. I know after effects has a page turn effect, but it’s rubbish compared to yours, and I need it to look like yours, but to be managable in CS3 PP or AE as it needs to sync with musoc and narration.
Please help…I will say thanks, and send money and sweets, I promise.
Awesome. Do you have this in actionscript 3?
[…] http://www.pixelwit.com/blog/page-flip/ – Sourcecode vorhanden, neuere Version kostenpflichtig […]
Super….i really likes this..
thanks a lot for this useful resource
Hi,
Very cool. Would love to be able to use this – are you selling it?
Thank you!
I am very interested in this… have a book that I designed that I would love to put on a website.
Thanks in advance,
KB
I publish a tabloid newspaper in Tennessee and I am interested in going digital. Please contact me with information as to how I can take advantage of this wonderful technology.
Thanks
thanks for sharing your wonderful flash expertise, and for free, a rarity! What a super cool page flip. Working with no faults too! fab.
How can you add action that will turn pages only by clicking on them? (ether corners or the page)??
Thakns, S@
Thanks!
I know you dont like to answer questions, but it’s kind of tough to expect people to understand how to use it, if you don’t give tutorials. I’ve been trying to figure out how to use this, and i’m getting really frustrated. It’s just kind of a double edge sword to say, here’s the complicated program, but you have to pay me for the directions. What’s the point then. Either make people pay for it, or give it out for free. But you can’t get mad at people for being confused, when there are no instructions. I would greatly appreciate, how I can make my magazine work, and how I can go about doing it. Maybe just a list of steps or something, I don’t know. If not, I understand I suppose.
-Graphics Grl
I am just starting with web design in order to put a local newspaper online. What program do I use the PageFlip source code in?
PageFlip is the ultimate solution for anyone who wants to make a page flipping website. After scouring the Internet for hours looking at several different PageFlip applications at various prices (one as much as $400), I discovered PageFlip and chose the Improved version as the method for developing a website for my client, a prominent charity.
I could not have been more pleased. Improved PageFlip contains everything a basic page-flipper website should need. It works flawlessly. I was able to easily customize the size, placement, etc. with little or no trouble and build a completely custom website that fit my clients’ exact specifications. And I was able to turn the website around in just three weeks, including laying out a 54 page booklet. When one modification was needed in the Actionscript to change the corner buttons, the support from Pixelwit was exemplary.
I highly recommend Improved PageFlip for anyone who wants to build a page flipper website. There is no better method that I have seen available, and the price cannot be beat.
Thank you for your wonderful code package.
Awesome. Thanks for sharing your knowledge.