November 4, 2008 3:50 PM
The page flip effect found in Ely's Flexbook or flash page flip is simply amazing. But the cool thing about Ely's post was that he had also posted an explanation of the page flip effect which inspired me to try my own hand at it. After a few hours of coding and stealing some code from Ely's original sample, i had a decent version of it up and running minus the cool gradient shadows. Then I added a turnPercent variable to it so that the amount of flip can be tweened and made into a Flex effect. The Flex effect supports flipping and resetting back to the original state. My site was missing a photo gallery section1 and though a lisp / html version of it is there in code form, I decided to write a Flex version utilizing this effect for the heck of it. As always, the source code is also available.
To try it out, click on the image to launch the application2.
Some of the cool and unique things about this application:
- The home view shows thumbnails of the photos. Move the mouse over an album and a play button appears next to it. If you mouse over this play button, the topmost thumbnail flips to reveal the next thumbnail and so on.
- In the album view, previous and next buttons trigger the flip effect. You can also download and open the photo in the browser.
- Only two photos are downloaded at a time while viewing. When next is clicked, one more is set for download.
- It supports deep linking. You can copy a URL pointing to a particular photo and send it to a friend. When he pastes it, he will be taken to that exact photo.
- The photos resize according to the available screen size while preserving the aspect ratio.
- Clicking on the previous button does the reverse of page flip which actually looks cool. Sort of.
Photos in the sample albums are stolen from Ely's Displayshelf sample. The flowers album is my own lack of expertise with the camera though.
The source code is available for download.