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.
[1] Not that I take a lot of good photos.
[2] It is also accessible from LinksPage.