FlexBook
March 5th, 2007
[app]: http://demo.quietlyscheming.com/book/app.html
[formContent]: http://demo.quietlyscheming.com/book/FormContent.html
[boundaries]: http://demo.quietlyscheming.com/book/boundaries.html
[anatomy]: http://demo.quietlyscheming.com/book/Anatomy.html
[fullPage]: http://demo.quietlyscheming.com/book/FullPage.html
[dataDriven]: http://demo.quietlyscheming.com/book/DataDriven.html
[walkthrough]: http://demo.quietlyscheming.com/book/walkthrough.html
[inspiration]: http://www.iparigrafika.hu/pageflip/
[comments]: http://www.quietlyscheming.com/blog/2007/03/06/new-flex-component-flexbook/
Somewhere around two years ago (really? Wow, it’s been a while), we got our first builds of the new flash player and flex framework up and running. To celebrate, I took a crack at building one of my favorite flash components in flex, the Book component. I got some basic proof of concept up and running, but had to set it aside amid the day to day details of getting Flex 2 built.
Well a few weeks ago, I dug the old code out and polished it up. So here, for your enjoyment, is the FlexBook component.
FlexBook can act as a container, allowing the developer to flip through its children components:
### Example 1: [FlexBook as a container][app]
FlexBook can be driven by a list of data and an itemRenderer, like a List control or DataGrid. Here’s a porfolio viewer, driven by an XML data file and an MXML component itemRenderer:
### Example 2: [FlexBook as a List][formContent]
FlexBook Supports a wide variety of configuration options. Play with some of them here:
### Example 3: [FlexBook's styles and settings][boundaries]
FlexBook supports full transparency on its pages. This example is in honor of (and made possible by) my mom, who’s a world class medical illustrator:
### Example 4: [FlexBook's transparent Anatomy][anatomy]
This example doesn’t show any new functionality, but it’s a nicely put together example of a dataDriven FlexBook, combined with a state/transition driven item renderer;
### Example 5: [FlexBook as an image browser][fullPage]
Here’s an example that combines the FlexBook with the Landscape Zoomer component to browse images. Turn the page until you find a picture you like, then click on the image to zoom in. Click again to zoom back out.
### Example 6: [FlexBook with the Landscape Zoomer][dataDriven]
Interested in learning how FlexBuilder works? Take a peek at this walkthrough (work in progress)
### [A walk through the FlexBook page flip effect][walkthrough]
The code for this component is written from scratch, using AS3, flex concepts, and player 9 functionality, but it is by no means original. The functionality is inspired by [this excellent example from Macc/iparigrafika][inspiration].
Questions, Comments, Feedback, Kudos or Criticisms? As always, it’s very much appreciated. [Leave them here][comments].
Enjoy!
March 6th, 2007 at 12:30 am
[...] The source will follow, along with a little more explanation, when I’ve had a chance to clean it up. But until then, check out the FlexBook samples, then come back here and let me know what you think. [...]
March 6th, 2007 at 7:02 am
[...] I guess I get sloppy at 12:30 AM. If you tried to check out the FlexBook example but got hit with a password request, my apologies. The password has been removed, so you should be able to see it now. [...]
March 6th, 2007 at 7:37 am
[...] The source will follow, along with a little more explanation, when I’ve had a chance to clean it up. But until then, check out the FlexBook samples, then come back here and let me know what you think. [...]
March 6th, 2007 at 7:44 am
[...] Ely Greenfield (Quietly Scheming) has made a wonderful flipbook engine which is open source. Bookmark to: РPosted in Flash by Șnke [...]
March 6th, 2007 at 9:17 pm
[...] Ely talked about Flex component building, which was similar to his talk at Adobe Max back in October, except for an awsome example of Templating in Flex. His Flex Book example really impressed the crowd and was a terrific way to end the discussion. I was really amazed with his Transparent Anatomy book, this totally floored me, what an excellent idea. Ely is a great speaker with a strong voice and command of Flex component building. I only wish he would not be so “lazy” when he develops some of his Flex component examples, but he explains that he develops these in the wee hours of the morning, so I think that is probably a valid excuse given his role at Adobe and the number of components examples he has produced. [...]
March 7th, 2007 at 2:57 am
[...] http://www.quietlyscheming.com/blog/components/flexbook/ [...]
March 9th, 2007 at 10:22 am
[...] There were lots of wow moments during the conference. But the best of the best of the best doesn’t go to any of the Apollo demos, or the new features in Flex 3. It doesn’t go to the Flash 9 IDE. And it doesn’t go to anything mentioned during the keynote. Nope, the better than a Lego Vagina award goes to Ely Greenfields Flip book component. [...]
March 11th, 2007 at 3:10 pm
[...] Flexbook [...]
March 14th, 2007 at 10:51 am
[...] Flex Page-flip component Ely Greenfield has developed a wicked Flex page-flip component. You can see it here, complete with tutorial! It also appears that an Apollo version is coming. [...]
March 14th, 2007 at 9:44 pm
[...] There’s been an interesting little discussion going on in the comments of this blog post on PolyGeek about the FlexBook component — mostly pointing out the relationship between this component and the previous flash-authoring based versions, and questioning what value Flex is adding to the effect. [...]
March 15th, 2007 at 11:18 pm
[...] Quietly Scheming » FlexBook [...]
March 19th, 2007 at 9:24 am
[...] Quietly Scheming » FlexBook Looks interesting (tags: code book MIT tutorial UI) [...]
March 22nd, 2007 at 9:09 pm
[...] We were shown some very cool things that have already been done in Flex, one of which was this Awesome FlipBook in flash. I spent a few minutes looking for it, and found it. Check this out, its amazing – just a brilliant combination of design and programming. An example of the transpartent Flex Flip-book can be found here. [...]
April 8th, 2007 at 4:46 pm
[...] Flex Book Component [...]
April 9th, 2007 at 8:37 am
[...] Flipbook/Pageflip engine für Flex. Das ganze ist open source und die Beispiele sehen echt gut aus. [...]
April 14th, 2007 at 10:08 am
[...] I came across an example for a book. Sure, we’ve all seen variations of book page turning in Flash. However, Flex does it right and Ely Greenfield’s Flex Book work is shining proof of what everyone has been wishing Flash could do. His examples are beautiful, especially the one with transparency effect for the medical anatomy overlay book. It’s also nice to note that he’s also used Apollo to create a desktop application for this. I think quite a few encyclopedias and medical companies will be knocking on his door. Of course Ely has been extremely gracious enough to publish his source code so he’s put everyone at a level playing field. Ahh, the joys of open source. Well, of course he’s always going to have a better knowledge than anyone and can always create something even better. [...]
May 2nd, 2007 at 3:42 pm
[...] Quietly Scheming » FlexBook (tags: flex) [...]
June 2nd, 2007 at 4:23 am
[...] BEA Dev2Dev Tech Days: Mashups and Portals Yesterday I presented Flex at my first BEA Dev2Dev Tech Day at Royal Orchid hotel, Bangalore. The Dev2Dev TechDays are half day developer focused seminars that provide a guide for building enterprise mashups. Presented by technical experts from throughout BEA – these events will provide you with the latest technologies for creating a Mashup. The BEA presenter Mr. Raju Suravarjjala, started the day by talking about Mashups, portals, microformats, and he gave an overview of the various technologies that are being used to build mashups. He then demoed building a mashup using BEA WebLogic Platform. You can actually try out building mashups with BEA products yourself – they have a online Weblogic Portal 10 Playground at their BEA Web 2.0 technology lab (http://wlp.bea.com/) – you can actually build your own mashups using this app with the various portlets available on the site. (you will need to register to use it) My session was after Mr. Raju’s session, and I introduced Flex to the community (there were 268 registrants present – quite a number!) I started by demoing FlexBook and YourMinis, both of which were very well received. Then came the hard part, I did some real live coding in-front of the entire crowd. It was a mashup built using Flex, Amazon eCommerce Service, Yahoo Weather APIs and some java coding. The best part is that I had the FlexBuilder installed as a plugin inside of BEA Weblogic Platform Workshop. Within 15 mins, I was able to create the Flex app, convert it into a portlet and embed it into a portal – running on BEA Weblogic Portal. I was actually very amazed with the ease with which the BEA Workshop allowed me to convert the Flex app into a portlet – really developer friendly. I would suggest everyone interested in building mashups and portals to come to following Dev2Dev events. (see this link for more details on where we are having it in India – BEA Dev2Dev Tech Days in India) Last Modified : June 2nd, 2007 Filed under : Flex Events, Events Navigate : Previous post / [...]
June 22nd, 2007 at 1:27 pm
[...] Sorry for the long silence, it’s been extremely busy at work for the past weeks. I’ve also been making a website for my wedding next month, and for that I wanted to use the magnificent FlexBook component written by Elijah Greenfield. I struggled a little getting it to work on my MacBook Pro without FlexBuilder installed, but finally managed to get it to work and I’d love to share it with you as the tutorials for this component on the web seem to be non-existing. [...]
July 1st, 2007 at 5:07 am
[...] Veure FlexBook [...]
July 5th, 2007 at 1:21 am
[...] You can find the full article as also source files here. [...]
July 5th, 2007 at 4:38 pm
[...] Create simple book looking applications with this full-on Flex component. The source is now available! Check out The FlexBook component and the source. Also with Adobe Air as ApolloBook. [...]
July 9th, 2007 at 1:56 pm
[...] More here and the source is here! [...]
August 21st, 2007 at 9:06 pm
[...] FlexBook Flex flip book component. Supports transparantcy. http://www.quietlyscheming.com/blog/components/flexbook/ [...]
September 2nd, 2007 at 12:53 pm
[...] Quietly Scheming : ce blog propose un certain nombre de composants vraiment sympa visuellement, comme par exemple : Fisheye Component, Flexbook, différents graphiques, etc … [...]
October 18th, 2007 at 7:46 am
[...] At 360Flex last week, Ely Greenfield gave a talk on creating Flex components. I video taped the entire session, except for the last 3 minutes (my tape ran out). Unfortunately, that is when Ely showed the coolest stuff. He was cool enough to talk with me after the session and demonstrated his new FlexBook component. [...]
October 24th, 2007 at 3:01 am
[...] Flex Component (http://flex.org/components/): some commercial and not Flex component. My preferred are the Book (http://www.quietlyscheming.com/blog/components/flexbook/), the FishEye (http://www.quietlyscheming.com/blog/components/fisheye-component/), and the iFrame (http://ccgi.arutherford.plus.com/blog/wordpress/?p=133) [...]
June 10th, 2008 at 2:10 pm
[...] 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 [...]
June 16th, 2008 at 8:43 am
[...] all the FlexBook component was quite easy to use. It took me a bit to find that the “content” attribute is the [...]
October 21st, 2009 at 9:57 pm
hi all,
can i incorporate one more thing in this,such that when i click on any page,it zooms to cover the entire screen…and when i again click on the zoomed page,it comes back to its original size…can anybody provide the code for this effect in flex….thanks in advance..