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.
oh that is just too cool! 🙂
Thats damn cool mate!
Only problems I see are that it becomes a little un-useable if too much is shown behind.
Cool none the less.
Nice work… a good use of preexisting code out there to make something original!
WOW. Great. I loved the effect on the iphone.
Really nice! Like it alot!
Awesome but where can I get the swc needed to compile it?
Looks really great – I’ve downloaded the sample to try out and am getting a compile error:
“unable to open FlexLoggerbinFlexLogger.swc”
Where can I find this swc or the source to create it?
Thanks for a really nice component!
Aubrey
Sorry about that. I guess I forgot to reference the work of Renaun Erickson’s Flex Logger. I just use it to give me some extra realtime logging functionality. You can read about it here: http://renaun.com/blog/flex-components/rialogger/. I’ve also added a link for the .swc file I used in the post above if you just want to download it. If all else fails, you should be able to remove the reference to the logging library and entries in the code and just run it without the logging. 🙂
Pingback: 36 New, Cool Flex and AS3 Tools, Libraries and Components
Anyone fix the ability to use percent width/height, rather than having width/height fixed?
Not yet. Right now the only dynamic settings I’ve used it to reference other components sizes through bindings. And when you do this, you have to set dynamic binding values for the foldOriginX/foldOriginY to make the animation work properly. But no, I’ve not been able to use this with something like width=”100%” height=”80%” yet.
_Love_ it BIll. The biggest problem with Book interfaces is that they typically are sacraficing form for function in a place it doesn’t belong. Your use of the effect, without the interaction, means you get some nice aesthetics (at least to my programmer’s eye) without pissing the user off.
Ely Greenfield
Adobe, Flex SDK.
Pingback: 36 ferramentas, bibliotecas e componentes interessantes para Flex e AS3. « Breno Claizoni
I spent the better part of today working with your component and really like it a lot. Good work! You’ve even inspired me to look into TweenMax
Glad you were able to use it. And yes, TweenMax rocks! Once you get the hang of it, you find it really makes the coding of animations much cleaner.
Man, your component is amazing, but i have a little trouble with it. When a web browser window is resized the component is not displayed properly. i ‘ve solved this in the following way: i added a handler on the application resize event with the following code
peekPanelView.foldOrigX = this.width-2;
if (peekPanelView.foldIsActivated)
{
peekPanelView.fold();
}
however, this trouble still shows up sometimes (randomly).
so, could you please help me with that?
P.S. if you need it, i can send you a project sample with the trouble.
@Terion:
Yes I found this to be a shortcoming of the original design. I’ll take a shot at improving it if I can get free from work. However, in the meantime, the solution should be to have the peek panel listen for its own resize event and then continue to execute the redraw method until the destinationX and destinationY values have been reached by the fold. Rather than having the application tell the panel to update itself, the peek panel should just use the existing notifications that a resize is occurring and re-initiate the painting process showing the fold being updated. This might get complicated if the fold breaks the boundary where its polygon’s corners increase or decrease in number (ie. the fold area becomes a 4 pointed poly rather than a 3 pointed triangle). Also, you will probably need to bind the originX and originY values of the fold to a fixed value in the application. The fold will be calculated based on the difference between the original X/Y and the destination X/Y so both will need to be reevaluated when the fold is repainted/updated.
🙂
Hey Bill,
It’s simply awesome 🙂
Thanks for a post! Added blog RSS-reader, I shall read now on a regular basis..
Hey Great Work ! Keep it up !
The page clip is really cool and could you please send me the swc file so that I can now check it here. I will be greatful to you for this.
The source for the PeekPanel is available by right clicking on the demo and selecting ‘view source’. You can download that and run it where ever you like.
The best component i’ve seen so far!! i do not know where to use it in my app but.. gr8!!! nice work!
I don’t know how to get a copy of TweenMax.swc, I am a beginner and have download the greensock library but have no idea how to compile the swc. any help would be great.
Go here (http://www.greensock.com/) and download the free software for TweenMax. The SWC should be included in the ZIP file.
It seems that TweenMax has been updated. Some of the TweenMax class’s methods don’t exist anymore as the sequence() function.
Is it possible to publish Greensock’s files used in your demo please ? I did not find any archive section in their website.
Thanks !
@Olivier
I think I can update the code to use the latest methods in TweenMax. I’m a huge fan of TweenMax updating the panel to use the current version seems worthwhile. Check back in a day or so.
Bill
Ok, I’ve updated the source code to work with the latest version of TweenMax. I’ve also renamed the Vector class to CustomVector so it would not conflict with the new Vector class that Adobe added in the latest Flex 4 release. Enjoy! 🙂
Will this work with a single toppage and multiple hiddens pages?
Great work,
Thanks
I don’t see why not but you will have to apply the flip effect to the components underneath. I would suggest you try modifying the code by using a viewstack and when the viewstack index changes, apply the page flip effect accordingly. 🙂
Bill,
I did what you suggested and put a viewstack as the top container in the hiddenpage and it worked perfect.
Thanks again.
Very cool! You should post a demo and I will post a link to it from here. 🙂
Thanks Bill very nice componenent !
Any chance to have a demo with dynamic height/width ?
Thanks.
I have not put much thought into the dynamic sizing of the animation, but you can easily modify the peekpanel component’s width and height in the mxml and the effect will still work. 🙂
Very cool, thank you!
Really nice component!
hi bill, I am a programmer and now a days I am developing a election directory book that include more than 5000 pages per book(a-z)..so I want to load only two pages at a time for managing the bandwidth (it is a very crusial part of development in india specially)..can u help me to find out the code of page flip effect in mxml applications..
I’ve posted the code I used to create my page flip effect. 🙂
really nice one