New Flex Component: FlexBook

March 6th, 2007

360Flex is happily underway, and shaping up to be a great event. In honor of all the people feelin’ the Flex love down in San Jose this week, I thought I’d put out a new sample this week.

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.

Are you at 360Flex this week? Come say hello

FlexBook component samples

Posted by Ely Greenfield Filed in Flex

65 Responses to “New Flex Component: FlexBook”

  1. Jamie Badman Says:
    March 6th, 2007 at 12:57 am

    I bet it’s good - but it’s currently password protected so I can’t know for sure ;-)

    Jamie.

  2. Anand Says:
    March 6th, 2007 at 2:23 am

    I was waiting for this control ;-). Good work, as always
    I hope to meet you at a future 360flex assuming that I am able to register within 24 hours of announcement.

  3. Leonardo Casali Says:
    March 6th, 2007 at 3:04 am

    Coming from you the component should be pretty good. But as Jamie said, as its password protected i can’t know for sure hehe ;)

  4. Jamie Badman Says:
    March 6th, 2007 at 3:29 am

    Hmmm… am I missing something ? How can Anand see this and I’m confronted with a ‘Password’ screen ?! Unless the Password Screen is actually the component - in which case it’s ok but not your best effort ;-)

  5. Alberto Says:
    March 6th, 2007 at 7:49 am

    Hi Ely,

    This is just brilliant and educational. I will like to have a look at the code while browsing your excelent visual tutorial on the effect.

    Cheers

  6. Abdul Qabiz Says:
    March 6th, 2007 at 7:56 am

    Ely,

    This is awesome…Amazing…

    -abdul

  7. Andrew Trice Says:
    March 6th, 2007 at 8:01 am

    Very impressive. Nice work Ely.

  8. John Says:
    March 6th, 2007 at 8:39 am

    Absolutely Fabulous …

  9. j.c.crosby :: realeyes media » The Amazing Ely has done it again! Says:
    March 6th, 2007 at 8:42 am

    [...] Ely always puts together some pretty amazing stuff, this is no exception. Check it out on his blog. [...]

  10. Nate Says:
    March 6th, 2007 at 9:13 am

    This is soooooooo cool. I think it will be useful at work to show relationships. I really like the anatomy example!

  11. Yifan Says:
    March 6th, 2007 at 9:13 am

    Amazing component, I hope you’ll soon be able to publish the code !

  12. Novo Componente: FlexBook « d. Says:
    March 6th, 2007 at 10:35 am

    [...] acesse o link http://www.quietlyscheming.com/blog/2007/03/06/new-flex-component-flexbook/ e acesse alguns exemplos é muito legal. [...]

  13. Brian Says:
    March 6th, 2007 at 10:40 am

    on on board with Flex now. way too cool!

  14. Yakov Fain Says:
    March 6th, 2007 at 12:02 pm

    This anathomy book It’s just wonderful! Looking forward to seeing and using the source code. Some people say that business needs drive technology. Such a brilliant use of technology can change the way people do business and design Web applications.
    Bravo!

  15. Kevin Says:
    March 6th, 2007 at 5:15 pm

    BEAUTIFUL !!!

  16. John Shuell Says:
    March 6th, 2007 at 6:13 pm

    Beautifully laid out and presented, I doubt you could make it clearer than that. Thank you once again.

  17. Thomas Burleson Says:
    March 6th, 2007 at 7:35 pm

    Frick’n awesome.

    Every time I think I might be getting good with Flex, you whip something else out… and I am humbled again.

    Thanks for setting the bar of excellence… :-))

  18. Juicability Says:
    March 7th, 2007 at 12:43 am

    Absolutely awesome! Finally a flipping book component for AS3/Flex :-)

  19. Ashutosh Says:
    March 7th, 2007 at 1:12 am

    Amazing !!

    But hey, I am not able to find sources for it while for others they are available.

  20. Joan Garnet Says:
    March 7th, 2007 at 7:30 am

    Awesome implementation.
    Thank you for sharing

  21. Mark Says:
    March 7th, 2007 at 2:29 pm

    You might very well be the coolest person that i know (of)

  22. Monkey Says:
    March 8th, 2007 at 2:49 am

    My Friend D.Lux made a very similar component in Flash. It was a pain to implement but the results were amazing. Yours looks incredibly similar, good job, I would almost think you used his as a model!

  23. Marcus Mattingly Says:
    March 8th, 2007 at 6:05 am

    Excellent component! Just what I need for a current project. Where can I find the source?? Please.

    Thanks!

  24. Monkey Says:
    March 8th, 2007 at 9:43 am

    The source Book.zip is not found (routing error) … are you planning on enlightening us with the source?

  25. zakoops Says:
    March 8th, 2007 at 9:57 am

    Fantastic!

    …but « View Source » brings the following message:
    «Routing Error
    Recognition failed for “/source/Book.zip”».

    Is it me or…?

  26. Rasheed Says:
    March 9th, 2007 at 2:22 pm

    Ely,

    This is quite simply amazing!

    I’ve tried to view the source but I also the get the following error:

    Routing Error
    Recognition failed for “/source/Book.zip”.

  27. Anthony Says:
    March 12th, 2007 at 1:36 pm

    You are amazing! (Trying to think how an interface would be good for managing reports/ magazines…)

  28. kevin Says:
    March 13th, 2007 at 12:52 am

    I need flexbook source,but i can’t found it,thank you!

  29. bhavin Says:
    March 13th, 2007 at 7:56 pm

    amazing!!!!!

    where is the sourc code :-)

  30. lee Says:
    March 14th, 2007 at 2:38 am

    Ely - amazing amazing - any chance of seeing the source for the flex books, - it seems to send me to a dead page

    Cheers in advance

  31. Pavan Podila Says:
    March 14th, 2007 at 4:03 am

    Hi,
    Its an amazing component. I am still not sure how I can use it in my own apps. Is it available in source or SWC form ?

    Thanks.

  32. mvbaffa Says:
    March 14th, 2007 at 5:33 am

    How can I download the source ????

  33. Dasa Says:
    March 16th, 2007 at 9:59 am

    Ely,

    First, thanks for this amazing component.

    I’m having a small problem with it though. It seems my custom component is being added as a child to two differnet parents causing my createChildren to be called twice.

    Here’s my code:

    <controls:FlexBook width="500" height="500">
    <l:TestCanvas backgroundColor="red"/>
    <l:TestCanvas backgroundColor="blue"/>
</controls:FlexBook>

    TestCanvas.mxml

                     override protected function createChildren():void
        {
            super.createChildren();
            trace("createChildren", this);
        }

    Trace output:

    createChildren TestFlexBook0.FlexBook6.TestCanvas4
    createChildren TestFlexBook0.FlexBook6.FlexBookPage11.TestCanvas4

    Thanks again.

  34. jeff Says:
    March 16th, 2007 at 12:35 pm

    i cannot say any word. cool!cool!cool! I will learn flex2.

  35. Laurent Says:
    March 23rd, 2007 at 7:28 am

    Ely, very nice job!

    Nevertheless, it would be VERY usefull to give us a versioned SWC file of your whole library that match examples.

    Indeed, it is nearly impossible to keep track on the QS library version you used in examples (book.zip for instance should be given with a given versioned of qs swc and not included partial qs AS library sources)

    Please, do that and people will be able to reuse your work and to start real business with it : )

    Thanks again Ely.

  36. Jim Says:
    March 28th, 2007 at 8:15 am

    Very cool. I love it, One thing I am noticing however, is that text that is on any element of a page seems to lose its anti-aliasing. This becomes more apparent with large/bold fonts. I can’t figure out why this is happening, Could there be a solution, or at least explanation of the cause?

    Other than that this component is fantastic. A+++

  37. Jamie Says:
    April 5th, 2007 at 5:50 pm

    Wow, this is indeed very cool. Is there any way to insert or remove pages dynamically? It’d be cool to click an ‘Add Page’ button that sticks in a new page for the user to add their own content to.

  38. Tanya Says:
    April 18th, 2007 at 7:11 am

    WOW!

  39. Navin Says:
    April 24th, 2007 at 10:24 am

    Very nice. Especially the walkthrough. It explained the concept very well. Thanks. :-)

  40. Dusty Says:
    April 24th, 2007 at 7:55 pm

    This is great, however, I’m getting a strange error when viewing the back cover. FlexBookPage attempts to removeChild(_rightRenderer), but the object isn’t a child, so it throws an error.

    I’ve thrown a check into the mix to keep the error from firing, but I’m still getting strange behavior with the back cover…

    I’m attempting to add in some features (like signatures and user-reordering of the pages), and any help would be greatly appreciated (and I’d gladly submit any code back to you)

  41. Matti Kiviharju Says:
    April 28th, 2007 at 10:25 am

    I made these with your tutorail

    Link 1
    Link 2
    Link 3

    Thanks about great tutorial..

  42. dersteppenwolf Says:
    May 6th, 2007 at 6:36 am

    amazing component!

  43. john Says:
    May 15th, 2007 at 9:11 am

    WOW! very nice, i’ll use it, sure. I have found some little bugs and i have fixed all of them but it still a serious one with transparency. book’s now works well with or without using depth transparency, no more hanging covers or backcovers. If transparency is not used, memory allocation is good and well garbaged by flash. But if i use transparency deph (like Anatomy book) memory used is growing, growing all the time you turn page or just entering teasing state …..it seem’s that dynamics objects ( page ?) are not released. I try to debug but i’m quite novice in Flex so if someone (ELY ?) can help.. if you don’t understand what is the “bug”, launch the Anatomy book demo and launch a task manager and look the memory used growing when you turn page.

    ELY, thanks for your code, tutorials. it’s very good job, very useful for learning advanced flex. I can tell you the few bugs i have seen if you want.

  44. blog.dsetia.com» Blog Archive » New Flex Component: FlexBook Says:
    June 3rd, 2007 at 6:54 pm

    [...] The source will follow, along with a little more explanation, when I’ve had a chance to clean […] Source: [Link] [...]

  45. Mike Johnson Says:
    June 7th, 2007 at 10:31 am

    Looks like someone stole your code and doesn’t want to give you credit:
    http://www.rubenswieringa.com/blog/flex-book-component-alpha#comment-479

    He keeps removing comments from everyone that is leaving them asking him why he claims he built this from the ground up.

  46. Mike Johnson Says:
    June 7th, 2007 at 10:32 am

    Ruben Swieringa that is

  47. Thomas Says:
    June 15th, 2007 at 12:01 am

    Really amazing, good job ! But WHERE ARE THE SOURCES ???

  48. Daniel Says:
    June 19th, 2007 at 7:52 am

    Awesome component!

    Is there are way to have covers that are larger than the inside pages?

  49. ezra Says:
    June 22nd, 2007 at 2:48 pm

    hi everybody, and, yes, this is amazing component, is wonderfull component, but, how can i use??? someone have any tutorial????

    please, i need help. Some one

  50. Ben Says:
    June 30th, 2007 at 4:41 am

    Very interesting solution. We have been working on transitioning our current PDF digital magazine format to Flex but were faced with the challenge of porting all the PDF content to another content format, XML or simple pages as images. We deal in mass quantities. Once I learned that Apollo / AIR would offer PDF support I suspended the Flex project since re-purposing PDF content has such huge advantages there was no reason to spend thousands of dollars developing a temporarily solution. I am hoping that one day Flex will likewise provide PDF support. Meanwhile for me FlexBook is just on the other side of the glass. Once PDF support is a reality for AIR and hopefully Flex then we can see a watershed of opportunity. -
    [ http://www.magazooms.com ] - digital publishing services.

  51. Tahia Sykes Says:
    July 9th, 2007 at 1:34 pm

    Hello,
    I love flex technology and the amazing depth it brings to any application. Can you explain to me how I can use it (is there an inexpensive and quick way) for school presentations?

    Thank you in advance,
    Tahia

  52. Sean Says:
    July 30th, 2007 at 6:33 am

    Great component, Ely! I think I’m in over my head. I’m no programmer (the code makes my eyes cross) but I’m looking to bind the left and right numbers to left and right buttons and have them change with each page flip. Any help would be greatly appreciated.

    Again, awesome!

  53. Sean Says:
    July 30th, 2007 at 6:35 am

    Great component, Ely! I think I’m in over my head. I’m no programmer (the code makes my eyes cross) but I’m looking to bind the left and right numbers to left and right buttons and have them change with each page flip.

    Also, is there anyway to bind the first image in the XML list to the cover (if you’re using one)?

    Any and all help will be greatly appreciated.

    Again, awesome!

  54. parnass Says:
    August 1st, 2007 at 5:12 am

    Hi! Awesome component!

    I have a question though - how do I set it up in flex?
    I have done few flex apps but not with custom components…

  55. Snap Says:
    August 8th, 2007 at 1:25 pm

    Love the FlexBook, am currently using it on a project.

    I found a bug however. It happens when using a combination of mouse drags and buttons to flip to a page. You can see the bug if you go to one of your examples - Example 1 - FlexBook as a container. What happens is that, if you use your mouse to flip to the next page, and then click the ‘Next’ button before the animation is complete, Flash will throw an error. It’s nothing big, but if you do fix it let me know.

  56. Rostislav Siryk Says:
    August 20th, 2007 at 9:07 am

    I just discovered one more flex book component, created by Ruben Swieringa few months after yours was released.

    Strange, there’s 32 responses at his page and no link or notice about you or your component (so I’ve added it there for balance).

  57. Steven Says:
    August 23rd, 2007 at 1:41 am

    Ely, your book is magnificent. A work of art!

    How and where does one implement a crossdomain policy in FlexBook? Reason: If a remotely loaded image happens to be on on FlexBook page page, and you try to turn the page, you get an error:

    SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://www.mycoolbook.com/index.swf cannot access http://farm2.static.flickr.com/1358/1210416657_b4540015e5_s.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
    at flash.display::BitmapData/draw()
    at qs.controls.flexBookClasses::FlexBookPage/copyInto()
    at qs.controls::FlexBook/qs.controls:FlexBook::updateDisplayList()
    at mx.core::UIComponent/validateDisplayList()
    at mx.managers::LayoutManager/::validateDisplayList()
    at mx.managers::LayoutManager/::doPhasedInstantiation()
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/::callLaterDispatcher2()
    at mx.core::UIComponent/::callLaterDispatcher()

    I have implemented loaderContext.checkPolicyFile = true for the remotely loaded images in the book, but when i turn the pages of the book, i get the error.

    Any ideas?

  58. Tom Says:
    September 1st, 2007 at 11:47 pm

    I have fixed a bug in FlexBook and thought I’d tell someone, the symptom was that the back cover was unviewable when the itemSize was set to half page.

    FlexBook.as line 700 change
    from: if(idx < 0 || idx >= _content.length)
    to: if(idx < 0 || idx >= maximumPageIndex)

  59. naz Says:
    September 4th, 2007 at 6:15 am

    Hi

    Cool component. I have never used flex!

    how do I start using your book component?

    please help

    naz

  60. Megan Says:
    September 10th, 2007 at 2:10 pm

    Hello!

    The company I work for has finally finished a huge Interactive NFL Guide using the FlexBook Component you built! Check it out if you have a chance.

    http://benoitmedia.com/

    Thank you!! :) Have a great day!

  61. shaz Says:
    September 30th, 2007 at 6:03 pm

    Guy you are amazing i have to say. Nut on the other hand you make me feel like a rookie :( what the heck any way fantastic component will help me alot in years to come

  62. Roko Says:
    October 14th, 2007 at 1:27 pm

    I know this is Flex 2 based, but deep linking to a page would be a great kick for this component. It could be done with Urlkit lib, or by moving to Flex 3. Just dropping an idea ;-)

  63. Tercüme bürosu Says:
    October 29th, 2007 at 2:56 am

    Excellent component! Just what I need for a current project. Where can I find the source?? Please
    Thanks!!

  64. Armand JOSEPH OUDIN Says:
    November 15th, 2007 at 1:54 pm

    Hello,

    I’m looking for help with transparency

    I’m using FlexBook, and I would like to have a special image for the cover and pages of the book. My images are in png with nice shadow. But when I use then in the book, le png is not fully transparent. I’ve a white shape everywhere.

    Does any one have an idea.
    Thank you for your help

  65. Thiago Ricieri Says:
    November 20th, 2007 at 8:15 am

    Its reaaaaly cool, this component is open-source?

Leave a Reply