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
hi, your tutorial is great. thank for sharing. although i still don’t understand. i still thank you for sharing.
good work.
Great work. Kindly suggest me the step by step tutorial for this purpose.
hey your tutorial is really a help. but i want a step by step tutorial on how to make it (due to my project for our major :O). Can you uploud a video or a tutorial steps on making one please . thanks
P.s
I really need the tutorial from scratch
or send it to me????
Hi i like your work..but i just wondering if I can add page during run time.?what i mean is i would like to put this in my project webpage..and can the page add if I would like to add a page through the website page.?it is possible.?please reply me A.S.A.P..thanks though..i more prefer you reply me at my gmail..but here will do to..thanks
Hello, I am having trouble with my flip book. Everything is fine until the last 10 pages or so- which when i hover over the corner of the page a white bar pops up below and follows with the page as I flip it. Ever hear of that problem?
Overall, great product. Thank you so much for this. One I get that one problem out of the way, it will be perfect. E-mail me if you can so I can send you the link to the webpage if you have time. Thank you again and have a great day.
Stephen
Are you using the free version or the Improved PageFlip? It sounds like your content is not the same size as the page.
Yes, I’m using the improved version. I’m looking, and the content and page seem to match. 🙁 I’ll let you know if i fix it.
Hi,
Thanks for the product. I downloaded the source code and intend to make some additional modifications to the component. I want to add a control bar right under the page flip in order to navigate through the pages more easily by directly selecting the page number that I want to open. You can see what I mean on the page flip from this page:http://www.pixelwit.com/blog/page-flip/improved-pageflip/ Waiting for a response.
[…] Pixelwit.com The open source designed by Sean O’Shell in 2002, it can be the basis and original of Page-flip.Streaming media thechnology was used for easy document anagement. As time goes by, it may not as glister as the aXmag, I still admire the work he had done. Demo: http://www.pixelwit.com/flip/PageFlip.html […]
Thanks mate, that’s kind of you!
Great tool! I have just finished my version for my blog. thanks, this is exactly what I was looking for!
ok, i spent the past 48 hours of my weekend looking high and low for a nice flash book. i found a lot of good looking ones but the codes were not as clean and commented as yours; which makes understanding how things are done and customizing them so much easier. thanks for your hard work and most of all thanks for releasing this for free!
Hello there 🙂
I have been searching for more than 6 hours now but could not find any interesting help for my pageflip problems. (Just a noob)
So I was extcasized seeing you offer your very own action script zip file – now I’m sure I can manage this issue with your file and a little more time to think about it and try it out.
Just wanted to say thanks!
Great code, using your hints I was able to modify it for our testing site and the client loves the effect. The only issue I can’t solve is using ExternalInterface to contact a javascript function on the page.
Just testing for ExternalInterface.available gives me an undefined. Any thoughts?
hey your tutorial is really a help. but i want a step by step tutorial on how to make it (due to my project for our major :O). Can you uploud a video or a tutorial steps on making one please :D. thanks
P.s
I really need the tutorial from scratch 😀