Flex book component (beta)

So here it is, the beta version of my Flex Book component. The source-code is included and free for all of you to look into (mind that it is licenced under a Creative Commons licence).

Demo
Source
Documentation

UPDATE: I also created a simpe demo to demonstrate the simplicity of using the Book classes, you can view/download it here:
Simple demo
Simple demo source

There are still a few performance-optimalisations to be made, so I welcome any (constructive) feedback on the Book component. If you spot any bugs or possibilities for optimalisation then please send me an email (my email-address can be found on the contact-page).
If you have any feedback other than bug-reports and suggestions for optimalisation, then please post them in the comments.

In the next week I will hopefully put up a simple demo as well to point out the simplicity of the usage of the Book component.

FEATURES
These are the main features of the component:

  • Pageflip effect (not kidding ;))
  • Hardback option for every page, as well as a hardcover option for the containing book, automatically making the first and last pages hardback.
  • Functionality for tearing pages out of the containing book.
  • Methods allowing automatically flipping through the pages of a book ( gotopage() ).
  • Customizable easing, auto-pageflip duration, and size for the hit-regions (the page-corners whereby a page can be flipped).
  • Distortion (instead of skewing) when flipping hardback pages.
  • A variety of events that the book class dispatches, making customization alot simpler.
  • Transparency support for pages.
  • Live-bitmapping functionality for playing animation uninterrupted during pageflips.
  • Locking functionality to keep certain pages from being flipped.

CREDITS

After the first (alpha) release of the Book classes, some suggested that I ought to give credit to my sources of inspiration.
So hereby I give credit for inspiration to every book I have ever read in my life, flipping through your pages was just amazing.

If I would have to give inspirational credits to any earlier version of the pageflip effect then I would give credit to the one that Eric Natzke did for DreamWorks, which is the first I ever saw (years and years ago).

KNOWN BUGS AND ISSUES

  • For Book instances, height values greater than the height of the content may slow down the application.
  • ScrollPolicies for Page instances are disabled (the properties have been overridden and are idle in the Page class). When a Page instance is not being flipped, its fold-gradient is drawn upon a Shape instance stored within that Page its rawChildren. When scrollbars are displayed, the Shape instance will no longer be in place.
  • When a Book instance without any children is initialized a RangeError is thrown. I will look into this issue, in the meanwhile you may want to use the following workaround; Put two child Page instances in the Book instance, then (from withinin the creationComplete property of the Book instance) remove the two dummy-children by using the removeChild() method.

287 Responses to “Flex book component (beta)”

  1. David Garay says:

    Hey I can’t get all of the source… all that I get is the demo page source but not the library source. Can anyone help?

  2. Mike says:

    Hi Ruben,

    really awesome component. Can I use the Component also for normal AS3 Books? I there any Tutorial how to manage that?

    Cheers Mike

  3. Liang says:

    such awesome! come out with a such elegant and clean solution for the page flip. the code is very tidy as well. Thanks for sharing.

  4. Brett says:

    Any thoughts on having a single swf for both pages? Would make two page interactions way easier.

  5. Tina says:

    Hi there. I believe i have the most stupid question. I am working on my portfolio and I came across your book and it seems perfect for me. I admire that you’ve gave access to the source code, too. I have some experience with programing but i have never worked in flash (but i do have the cs4 version), so I kinda don’t know what to the with the source. So my question: what should i do with the code? I’ve browsed through some tutorials but there is too much things that i don’t really need to know and it’s really exhausting watching a guy explaining some basic stuff that every application has… I would really appreciate any tips, if not it will just have to do with the plain pdf, anyhow, keep up with your amazing work!

  6. batty says:

    hey,i can’t directly jump to a page,is there any api …
    thanks

  7. batty says:

    I was wondering if there were a way to flip to a page directly rather than have to wait for each page to flip. If I jump to page 18 from page 2, can I go right to that page and not see each page flip?

    thanks a lot…

  8. Erik says:

    Hi - Great component - but I keep getting this error
    ‘C:/dev/qs/web/public/book’ is not a valid location. The location is relative to undefined workspace path variable “C.’.

  9. Jan says:

    Hi,
    a have a (maybe simple) question: how can I start a specific script by entering a page? I have different actions that should start outside the book, when the user is opening special pages. For example when somebody opens page number 3 a butterfly should fly acros the whole screen. I couldnt find any command that says “when entering page X do Y” an that would work in the -Tags…
    Could anybody give me an answer to this?
    Thanks a lot!
    Jan

  10. Lior bruder says:

    Hi There,

    I found a solution to the problem that the book is getting slow if lots of pages are entered.

    you add this function to Page.as to improve the speed:

    override public function set visible(value:Boolean):void {

    /** Enable only the pages that are in range **/

    if (value) {
    // Request to show the page
    if ((book.currentPage + 4 > index) &&
    (book.currentPage - 4 < index)) {
    // The page is in range - show it
    super.visible = true;
    }
    else {
    // The page is not in range - don’t show it
    super.visible = false;
    }
    }
    else {
    // Request to hide the page
    super.visible = false;
    }
    }

    Good luck!

  11. Vikas says:

    Hey great component, does it supports any kind of zoom. If not then how big an effort would it be to add it?

  12. Miguel says:

    Hi. I was trying to use this in ActionScript using Flex Builder 3.
    This code:
    package {
    import com.rubenswieringa.book.*;

    import flash.display.Sprite;

    [SWF(width='900',height='600',backgroundColor='0xffdd00')]

    public class flexBookAS extends Sprite
    {
    public function flexBookAS()
    {
    var flexBook:Book = new Book();
    flexBook.x = 100;
    flexBook.y = 100;
    flexBook.width = 800;
    flexBook.height = 350;
    flexBook.openAt = 1;
    var page1:Page = new Page();
    var page2:Page = new Page();
    flexBook.addChild(page1);
    flexBook.addChild(page2);

    }
    }
    }
    doesn’t work. Flex Builder keeps telling me that there is no class definiton for Canvas. I didn’t change any of the source files (there is import mx.containers.Canvas) - with the same files MXML version (simple demo):

    works just fine. Does anyone have any idea why Flex Builder 3 in this case loses mx.containers.Canvas and makes it impossible to import?
    Thx for any help.

  13. Sunil says:

    Hi,

    When i am changing the width and height of book run time then it doesn’t apply to the book. If you have any solution then please let me know

    Thanks

  14. Leo says:

    Anybody fixed the zoom render problem when mouse is over the page?
    Please help me!

  15. TylerC says:

    @GregM
    “Currently working on making it stage scalable for smaller screens, and larger for that matter.”

    I’ve been working on this for a few hours now and I haven’t had much luck. I can make it scale, but can’t seem to get the math quite right so it’s always just a little off. Did you get this working? I’m much more experienced in Flash than Flex, and in Flash it’s built into the publish settings…

    @Ruben
    This is an amazing piece of work - very nice job!

  16. Amit says:

    hi,
    this is one the best examples of flipbook i have seen :) .

    I just need help on a topic.
    i wanted to use book as newpaper instead of magzine look and feel.
    I want to open the book directly to second page like a newpaper.
    and the flip should turn 2 pages .

    e.g.s: First page will show pages (1 | 2) when flipped it will show (3 | 4)
    (1 is on left side , 2 on right) .

    Is it possible?
    if the navigation is using button then i think flipping both pages is possible but when corners are dragged it is not possible..

    Also can movement be given to the entire book?

    please help .

    thx
    amit

  17. John says:

    Hi,
    how to change page orientation to vertical flip-chart like a calendar or similar.. ???
    please email me!
    Thanks a lot.

  18. Daniele says:

    Hi, me too have problem with init the Book object in Runtime and set/change its dimensions.

    @batty: to jump form one page to another instantly try to set the book’s autoFlipDuration to 0

  19. LW says:

    Hi,
    I need to create my book dynamically, but I’m getting a remote swf using:
    var loader:Loader = new Loader()…
    i add the loader in a UIComponent and so i add to my page object.
    The problem is when i try to add my page in the book:
    myBook.addChildAt(pg,0);
    I get the error: can not convert Shape to UIComponent

    if i try to do the same with a local SWFLoader everything work ok.
    Anybody can help me?
    please email me!
    Thanks a lot

  20. Ketan Gohil says:

    I am using this in one of my flex desktop application.

    I have 200 pages in my flip book.

    Each page contains image having size of 800 kb to 1.5 mb.

    While book is loading , it is trying to load all images at a time and my application is getting slow.

    I want to load images when i am flip the page, it means it should load max 2 images at a time.

    Can you please help me on this?

  21. ben10 says:

    This totally cool. thanks for the class. I just to use this for my portfolio and I’ll like to ask permission from you , if its OK..

    thanks pal. more power and knowledge

  22. Durrab says:

    Hi Ruben,
    Is this book is scalable.

    I want to make it scalable if you know the areas of improvments then let me know

    I want to make the percentWidth and percentHeight for it

  23. [...] Embed chronicle – It is the unstable chronicle of E-Reader with dual simple differences: it does not have page pen or poke as great as it should have report about the price of the book (if it is to sale) as great as report about alternative books of the same writer (name of the books as great as star-rate) Reference – Text Layout Framework: http://labs.adobe.com/technologies/textlayout/ , SWF Tools: http://www.swftools.org/ , as great as Flex Component Page Flip: http://www.rubenswieringa.com/blog/flex-book-component-beta. [...]

  24. [...] Embed chronicle – It is the unstable chronicle of E-Reader with dual simple differences: it does not have page pen or poke as great as it should have report about the price of the book (if it is to sale) as great as report about alternative books of the same writer (name of the books as great as star-rate) Reference – Text Layout Framework: http://labs.adobe.com/technologies/textlayout/ , SWF Tools: http://www.swftools.org/ , as great as Flex Component Page Flip: http://www.rubenswieringa.com/blog/flex-book-component-beta. [...]

  25. [...] Flex book component [...]

  26. Pave says:

    Hi, great component.

    I wonder, have anyone solved the fullscreen problem with the left pages? Book works great until I put for example linkbuttons to the left side of the book, then whole program crashes. When I put linkbuttons to the right side it works fine. In “no fullscreen mode” both sides works OK.

    Thanks.

  27. ramakrishna says:

    hi..this is looking good. is this free to use? or need to purchase this component? if yes please let me know the cost of this component.

    Thanks,
    Rama

  28. Sarah says:

    Hi! This is a great component, and it’s so nice that it’s actually commented - I’m just running into one slight problem, when you flip backwards in the book (towards the front page), the shadows seem to draw themselves incorrectly. I would think they’d be on the pages being hidden, but instead, it seems to use the upper left hand corner of the book, the lower middle corner of the page being turned, and two points a page width to the left of the left page. It doesn’t seem to map correctly to the turning pages. Any suggestions for fixing this problem? I can’t seem to figure out exactly how these points are being calculated.

  29. Sarah says:

    My bad… it’s something in my page code that’s causing the shadows to go off. Trying to figure out what in them could break the book’s shadow code though.

  30. vinay says:

    can anyone tell me tat deep zooming in pages can be possible in Flex book component?

  31. Adil says:

    I too like this book.. Thank you for making it as a open source
    I want you to please give me an idea of how to apply authentication to the front page .. thank you..

  32. saurin says:

    how can book is zooming?

Leave a Reply