This is my latest experiment which I’ve named the “PeekPanel”. I saw this type of animation done on my phone and figured it would be a cool way to hide options or preferences in an application. It borrows the look and feel from the FlexBook/PageFlip components already out there, but instead of simulating a book, this is more of a way to use the “flip” to hide other components.
Try it out by clicking the ‘Show Options’ button below and then change the corners and adjust the angles of the fold using the sliders. I’ve also added the ability to see the computed geometry, gradients and lighting with the checkbox options. Click the ‘Ok’ button or anywhere on the component other than the revealed (hidden) panel to close the fold.
So how did I make it work? Well, step one was to sift through the code from the PageFlip demo by Didier Brun and the FlexBook code from Ely Greenfield. I used the PageFlip class from Didier to compute the flip graphic, and then I played around with the gradients and vectors based on what I learned from Ely’s code. I found that I liked the flip effect from PageFlip, but not the gradients so I handled them separately. Rendering the flip is easy. Computing the gradients is not. You have to make them follow the movement of the fold and I still do not have it down perfect. I had to brush up on my geometry and trigonometry and I still had a hard time computing all the angles, so you will see a lot of brute force mathematics where I really should have used more established equations (if I knew what they were).
To finish it off, I incorporated TweenMax (very nice!) to get things to move smoothly and used Ben Stucki’s reflection logic along with one of Juan’s skins to make it look nice. So after ripping off the really good Flex programmers out there, the result is what you see above. As usual, the source is provided.
You can basically use it by taking the code from the demo mxml, and plugging in your own components within the PeekPanel tag. Just provide it with the TopPage and HiddenPage components and see what happens. I have not tested this all that thoroughly so it might not work perfectly. I still need to touch up the gradients which do not always look smooth when the flip is moved at certain angles. I also need to find a good way to handle components with rounded corners. If anyone wants to suggest solutions, I’d love to hear them.
[Note: if you use dynamic rather than static values for the width and height settings, you have to set dynamic binding values for the foldOriginX/foldOriginY to make the animation work properly]
Update: I forgot to mention that I used Renaun Erickson’s Flex Logger on this as well. I’ve heard from some of you that you need the .swc for this to compile the code so here is the one I used or you can go to Renaun’s site to get the code and compile it yourself. You may have to right-click on the link and use ‘save as’ with a name of FlexLogger.swc to get the file to save to your local computer correctly. Of just remove all the reference to that swc and the logger in the code and go without the logging.