Book beta bug-fixes & simple demo

Yesterday I got back from my holidays with Dave in Nottingham, so today I decided to fix some major bugs in the Book beta.

In the first beta a page-corner would sometimes ’stick’ to the user’s mouse (dubbed the sticky-page bug).
The second bug was that when the user would open the Book and then close it, an Error would be thrown (the book-opening bug)..
Both of the above bugs have been fixed in the second beta, for more information please see the bugs-section in the original beta blog-post.

The second beta demo is now online:
Demo
Source
Documentation

I also created a very basic usage-example for the Book component. The original demo was meant to show off as many features and as much functionality as possible.
As a side-effect though, the main application MXML-file might give the impression that using the Book component gets really complicated. The contrary is true.

You can view/download the simple demo here:
Simple demo
Simple demo source

25 Responses

Note that comments are displayed in reverse chronological order with topmost comments being freshest. Subscribe | Comment
  • Ruben says so:
    April 21st, 2008 | Quote

    Hey Randa,

    …but the book script overrides any script added latter.

    I can assure you that the Book component itself doesn’t override anything. What exactly is it you’re asking?

  • Randa says so:
    April 18th, 2008 | Quote

    Hey ,

    would like to say GREAT WORK! Love the style and the applications that are added on.

    I have a question. I’m trying to have links to sound mp3 files that play upon a button being pressed on a specific page and having it either pop up a sound clip file that can be stopped or paused. Also want to have a video .mov file be able to play by a button or words being pressed. Have tried to make buttons that play the embedded movie. Have also tried to link to an outside file located in a specific .mov that would have to load in…but the book script overrides any script added latter. Any advice??

    Thank you so much

  • Ruben says so:
    April 2nd, 2008 | Quote

    @Ids: Hey Ids, how’ve you been? Thanks for the suggestions, I’ll keep them in mind.

  • Ids Klijnsma says so:
    April 1st, 2008 | Quote

    Yo Ruben,
    Just a few suggestions to make your book a bit more useful:
    1. Adding the possibility to provide a dataProvider and itemRenderers, that way you don’t have to add every page yourself;
    2. Disable the animations;
    3. Jump to page x immediately (without scrolling through each page);
    4. Add a default page (useful when the number of pages is not even);
    5. Lazy loading / creation policies, for performance.

    Just some thoughts that came to my mind, cheers!
    Ids.

  • Ruben says so:
    March 22nd, 2008 | Quote

    @matsiya: Thanks! Man that one’s easy to overlook, I’ll be sure to fix that in the next version..

    @Ander: Actually yes, the Book component is still not compatible for Actionscript-only projects (it uses Flex-framework components such as ViewStack and Canvas). However, you do not need Flex-server software to use the component, just Flex Builder.

    As for porting this component, as it makes use of many Flex-components it may be a better idea to just build your own (Actionscript-only) Book component from scratch (or to just get Flex Builder and start using mine ;) )..

  • Ander Hettich says so:
    March 22nd, 2008 | Quote

    Hi,
    nice work and I would like to use it for a AS3 Project.
    But is it still true that it is not possible to use the Project in pure AS3 Projects?
    I am an expierienced AS3 Programmer and would like to try to port the Project to pure AS3 because I need a Pageflip without using Flex Server.

    Do you think this is possible? How many MXML:Flex Components do you use? And for what? How much work will it be to port it to AS3? Can you help me with it? Or is there allready source code that allows me to use your nice flip in AS3?

    thanks
    ander

  • matsiya says so:
    February 29th, 2008 | Quote

    Hi,

    Great job you’ve done here.

    I’ve found a little fix when you want to load dynamic content, and get the gradient, after doing the Page.drawFoldGradient(), you’ll see that the gradient is always on the left side. It’s because Page.side() is always -1;
    The function responsible of that is get side():int;

    The fix is :

    if (this.index == -1){
    return -1;
    }else{
    return ((this.index+1) % 2);
    }

    instead of

    if (this._index == -1){
    return -1;
    }else{
    return ((this._index+1) % 2);
    }

    I hope that will help some of you ;)

  • Bryce says so:
    February 26th, 2008 | Quote

    Hi Ruben,

    great component - the effects are amazing! I was wondering if there was a way to programmatically flip to a page without flipping through all the pages in between and also being able to disable corners? I ask this since I’m trying to use the component on a site that has a login, but there are some pages that should be accessible by everyone. Plus, I want to add links to the top of the page so that people can flip to the page, but not necessarily have to go through all the pages in between. Thanks!

  • Ruben says so:
    February 18th, 2008 | Quote

    Don’t know anything about flex and i wonder if i can do reverse : load some flash compiled swf or flv into one of the pages.
    Than my app would look like: flash app loads flex book, flex book loads (or embed) another swf compiled in flash before. Is it possible ?? What are the limitations ?

    Hey Chris, that will probably be a hell of a lot of work. If you ask me you will be much better of just learning how to use Flex, it’s not so bad if you already have the hang of Actionscript.. :)

  • Chris says so:
    February 11th, 2008 | Quote

    Hi, nice work - it was a hope for me :), but unfortunately i realised i can not work with it in flash ide. Damn.. so i download flex, compiled it and loaded book to my as3 project. Don’t know anything about flex and i wonder if i can do reverse : load some flash compiled swf or flv into one of the pages.
    Than my app would look like: flash app loads flex book, flex book loads (or embed) another swf compiled in flash before. Is it possible ?? What are the limitations ?

    Thanks man

  • Chris says so:
    January 3rd, 2008 | Quote

    sorry, here it goes (part of a loop):
    this._bookPages[i].page = new Page();
    // adding the missing gradient for dynamically created pages
    this._bookPages[i].page.drawFoldGradient();
    book.addChild(this._bookPages[i].page);

  • Chris says so:
    January 3rd, 2008 | Quote

    I have the same problem as George when adding pages dynamically
    at runtime that the gradient between the pages is missing.

    Can someone please give me a hint as how to call the:
    Page.drawFoldGradient()

    I am getting an error at that point. My code looks like that
    for(var i:int = 0; i

  • Mike Britton says so:
    September 30th, 2007 | Quote

    Nice job with this project — it rocks! However, when loading images from a remote server, BitmapData.draw is throwing a checkPolicy file not set error.

  • Ruben says so:
    September 23rd, 2007 | Quote

    Thanks Olivier. I hope to soon have the time to look into making the Book compatible for Flash too. As for having an swf-only version, I’m not sure, perhaps. Keep an eye on my blog if you want to stay up to date ;)

  • Olivier Allouch says so:
    September 18th, 2007 | Quote

    Hi, I just love when nice effects enhance the user experience.
    Such a nice thing, your DistortImage class.
    Do you plan on making a SWF only version where we only specify an XML file (with the pages description) to download ? I’d like to stick to Flash CS3 (FlashDevelop actually) and not take the leap to Flex.

  • Ruben says so:
    September 14th, 2007 | Quote

    Hey George, I left a reply to your other comment.. :)

  • George says so:
    September 12th, 2007 | Quote

    In the original beta blog thread I wrote about loosing page gradients if created from AS code. The simple solution was to call Page.drawFoldGradient() and that fixed the problem.

    One thing I wonder is how can I flip the book straight to page X w/o going through all the pages in between? I looked at the code but unfortunately I know much less about how it works then needed to accomplish this :( Any hints would be greatly appreciated!

  • Ruben says so:
    August 18th, 2007 | Quote

    Nice Donovan, keep it up! :)

  • Donovan Adams says so:
    August 16th, 2007 | Quote

    Great stuff Ruben! Here’s the link to an AS3 only example of simple page flipping. Not nearly as functional as yours, but a starting place:)

    http://blog.hydrotik.com/2007/08/15/pageflip-tweener-as3-part-1/

  • Ruben says so:
    August 9th, 2007 | Quote

    Thank you Akyia! Basically tearing a page out of the book is a normal pageflip rotated by 90 degrees, after that all you have to do is actually get rid of the page (remove it). But of course that’s just the concept, code-wise it’s a little more complicated than that ;)

  • Akyia Buford says so:
    August 9th, 2007 | Quote

    This is awsome! Your a really smart guy. I love the part in the demo where you can tear the page. How did you do that?

  • Ruben says so:
    July 22nd, 2007 | Quote

    Looks good man, thumbs up! If you ever do a similar project and decide to use my component then be sure to send me an email (email-address is in the contact-section)..

  • MadSpin says so:
    July 22nd, 2007 | Quote

    Hey they ended up changing the site …heres the site I designed last year http://madsp.in/allgoodwear/

  • Ruben says so:
    July 22nd, 2007 | Quote

    Cheers man! That is an awesome compliment to make, that really put a big smile on my face.. :)

  • MadSpin says so:
    July 22nd, 2007 | Quote

    Hey man!

    I seen your previous book demo and its dope man! I dunno if you’ve heard of http://www.flippingbook.com My friend’s dad ended up buying it last year and I designed a site for my friend’s clothing company with it. The code was like Flash5 though, I had to end up decompiling then hacking around just to find some methods to do simple things like turning to a set page. The functionality you put into your beta alone blows their product out the water. The site i built using the hacked up code is @ http://www.allgoodwear.com I ended up creating 2 movieclips that could be loaded into the pages instead of images to handle dynamic text layout and previews within a page.

    Keep it up dood!

    - Spinz

Leave a Reply