{"id":29,"date":"2009-06-10T00:30:02","date_gmt":"2009-06-10T05:30:02","guid":{"rendered":"http:\/\/billdwhite.com\/?p=29"},"modified":"2022-02-22T02:44:12","modified_gmt":"2022-02-22T02:44:12","slug":"peekpanel-my-new-flex-component","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/","title":{"rendered":"PeekPanel – My New Flex Component"},"content":{"rendered":"\n

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.\u00a0 It borrows the look and feel from\u00a0the FlexBook<\/a>\/PageFlip<\/a> 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<\/strong> and then change the corners and adjust the angles of the fold using the sliders.\u00a0 I’ve also added the ability to\u00a0see 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.<\/p>\n\n\n\n

View Source<\/a><\/p>\n\n\n\n

Flash Player Required to view this demo.<\/div>\n\n\n\n

So how did I make it work? Well, step one was to sift through the code from the PageFlip<\/a> demo by Didier Brun<\/a> and the FlexBook<\/a> code from Ely Greenfield<\/a>.  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).<\/p>\n\n\n\n

To finish it off, I incorporated TweenMax<\/a> (very nice!) to get things to move smoothly and used Ben Stucki’s reflection logic<\/a> along with one of Juan’s skins<\/a> 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. \ud83d\ude42<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

[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]<\/p>\n\n\n\n

Update<\/strong>:<\/strong> I forgot to mention that I used Renaun Erickson’s Flex Logger<\/a> on this as well.  I’ve heard from some of you that you need the .swc for this to compile the code so here<\/a> is the one I used or you can go to Renaun’s site<\/a> 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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.\u00a0 It borrows the look and feel from\u00a0the FlexBook\/PageFlip components already out there, but instead of simulating a book, this\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[19,25,26,36,37],"class_list":["post-29","post","type-post","status-publish","format-standard","hentry","category-adobe-flex","tag-adobe-flex","tag-flash","tag-flex","tag-ria","tag-rich-internet-applications"],"yoast_head":"\nPeekPanel - My New Flex Component - Bill White<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PeekPanel - My New Flex Component - Bill White\" \/>\n<meta property=\"og:description\" content=\"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.\u00a0 It borrows the look and feel from\u00a0the FlexBook\/PageFlip components already out there, but instead of simulating a book, this\u2026 Read More »\" \/>\n<meta property=\"og:url\" content=\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Bill White\" \/>\n<meta property=\"article:published_time\" content=\"2009-06-10T05:30:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-22T02:44:12+00:00\" \/>\n<meta name=\"author\" content=\"Bill White\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:site\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bill White\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/\"},\"author\":{\"name\":\"Bill White\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"headline\":\"PeekPanel – My New Flex Component\",\"datePublished\":\"2009-06-10T05:30:02+00:00\",\"dateModified\":\"2022-02-22T02:44:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/\"},\"wordCount\":620,\"commentCount\":39,\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"keywords\":[\"Adobe Flex\",\"Flash\",\"Flex\",\"RIA\",\"Rich Internet Applications\"],\"articleSection\":[\"Adobe Flex\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/\",\"name\":\"PeekPanel - My New Flex Component - Bill White\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\"},\"datePublished\":\"2009-06-10T05:30:02+00:00\",\"dateModified\":\"2022-02-22T02:44:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/billdwhite.com\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PeekPanel – My New Flex Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/\",\"name\":\"Bill White's Blog\",\"description\":\"UI Development and Data Visualization: Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc\",\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\",\"name\":\"Bill White\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"caption\":\"Bill White\"},\"logo\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.billdwhite.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PeekPanel - My New Flex Component - Bill White","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/","og_locale":"en_US","og_type":"article","og_title":"PeekPanel - My New Flex Component - Bill White","og_description":"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.\u00a0 It borrows the look and feel from\u00a0the FlexBook\/PageFlip components already out there, but instead of simulating a book, this\u2026 Read More »","og_url":"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/","og_site_name":"Bill White","article_published_time":"2009-06-10T05:30:02+00:00","article_modified_time":"2022-02-22T02:44:12+00:00","author":"Bill White","twitter_card":"summary_large_image","twitter_creator":"@bill_d_white","twitter_site":"@bill_d_white","twitter_misc":{"Written by":"Bill White","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/#article","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/"},"author":{"name":"Bill White","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"headline":"PeekPanel – My New Flex Component","datePublished":"2009-06-10T05:30:02+00:00","dateModified":"2022-02-22T02:44:12+00:00","mainEntityOfPage":{"@id":"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/"},"wordCount":620,"commentCount":39,"publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"keywords":["Adobe Flex","Flash","Flex","RIA","Rich Internet Applications"],"articleSection":["Adobe Flex"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/","url":"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/","name":"PeekPanel - My New Flex Component - Bill White","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/#website"},"datePublished":"2009-06-10T05:30:02+00:00","dateModified":"2022-02-22T02:44:12+00:00","breadcrumb":{"@id":"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/billdwhite.com\/wordpress\/2009\/06\/10\/peekpanel-my-new-flex-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/billdwhite.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"PeekPanel – My New Flex Component"}]},{"@type":"WebSite","@id":"https:\/\/billdwhite.com\/wordpress\/#website","url":"https:\/\/billdwhite.com\/wordpress\/","name":"Bill White's Blog","description":"UI Development and Data Visualization: Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc","publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314","name":"Bill White","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","caption":"Bill White"},"logo":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.billdwhite.com"]}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":11,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":2083,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/29\/revisions\/2083"}],"wp:attachment":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}