PeekPanel – My New Flex Component

By | June 10, 2009

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.
View Source

Flash Player Required to view this demo.

 

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.

39 thoughts on “PeekPanel – My New Flex Component

  1. Campbell

    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.

    Reply
  2. Chad

    Nice work… a good use of preexisting code out there to make something original!

    Reply
  3. Ralph Krausse

    Awesome but where can I get the swc needed to compile it?

    Reply
  4. Aubrey

    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

    Reply
  5. Bill Post author

    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. πŸ™‚

    Reply
  6. Pingback: 36 New, Cool Flex and AS3 Tools, Libraries and Components

  7. Dusty

    Anyone fix the ability to use percent width/height, rather than having width/height fixed?

    Reply
  8. Bill Post author

    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.

    Reply
  9. Ely

    _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.

    Reply
  10. Pingback: 36 ferramentas, bibliotecas e componentes interessantes para Flex e AS3. « Breno Claizoni

  11. hsTed

    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

    Reply
  12. Bill Post author

    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.

    Reply
  13. Terion

    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.

    Reply
  14. Bill Post author

    @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.

    πŸ™‚

    Reply
  15. AntitaViots

    Thanks for a post! Added blog RSS-reader, I shall read now on a regular basis..

    Reply
  16. sairam

    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.

    Reply
    1. Bill Post author

      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.

      Reply
  17. Sai

    The best component i’ve seen so far!! i do not know where to use it in my app but.. gr8!!! nice work!

    Reply
  18. Paul

    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.

    Reply
  19. Olivier

    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 !

    Reply
  20. Bill Post author

    @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

    Reply
  21. Bill Post author

    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! πŸ™‚

    Reply
  22. Neil

    Will this work with a single toppage and multiple hiddens pages?
    Great work,
    Thanks

    Reply
    1. Bill Post author

      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. πŸ™‚

      Reply
  23. Neil

    Bill,
    I did what you suggested and put a viewstack as the top container in the hiddenpage and it worked perfect.

    Thanks again.

    Reply
    1. Bill Post author

      Very cool! You should post a demo and I will post a link to it from here. πŸ™‚

      Reply
  24. aubweb

    Thanks Bill very nice componenent !
    Any chance to have a demo with dynamic height/width ?
    Thanks.

    Reply
    1. Bill Post author

      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. πŸ™‚

      Reply
  25. Manas

    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..

    Reply
    1. Bill Post author

      I’ve posted the code I used to create my page flip effect. πŸ™‚

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *