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.

151 Responses

Note that comments are displayed in reverse chronological order with topmost comments being freshest. Subscribe | Comment
  • Jon says so:
    July 24th, 2008 | Quote

    Hi,
    This is a great app.
    Can this be used in a commercial environment? with the relevant attribution?

    Regards
    Jon

  • Prakash says so:
    July 21st, 2008 | Quote

    Hi am new to flex 3. I have downloaded your source code. I dont know how to add it or how to open it using flex 3 . can u please guide me in doing it. I want to edit the file.

  • Arnold Young says so:
    July 16th, 2008 | Quote

    Hi Ruben,
    Is it possible to spread a text area across the two page spread?

    And turn off the right page - turning upon touching the right edge for that two page spread so that turning will not conflict with the scrollbar for the text area?

    Thanks again for your wonderful component!
    Arnold

  • Francesco Cavola says so:
    July 15th, 2008 | Quote

    Hi. Very great component.
    It is on MIT licence?

  • Tino says so:
    July 14th, 2008 | Quote

    I have the same Problem like Adam (june 12th, 2008). The pages, that are not currently “touched” or flipped, appear in low quality when the book is scaled.
    I’ve played around with the stage.quality setting. When i set stage.quality=StageQuality.LOW, then the quality of the currently flipped page ist the same like the currently not-touched pages. But the stage.quality-setting works only for the currently touched/flipped Page. The other Pages are staying obviously on StageQuality.LOW (none or bad antialias). How can i fix this?

    @Ruben: I love this component, it was the reason for me to getting started with Flex. Thanks.

    Thankful for every hint — Tino

  • insomnia says so:
    July 10th, 2008 | Quote

    How to running in Flash CS3 !
    I’m only use Flash CS3!

  • CaffeinatedPonderer says so:
    June 30th, 2008 | Quote

    I preloader of sorts during certain parts of the book (i.e. at the start of every ‘chapter’) would help with the RAM issue.

    :P

  • CK says so:
    June 27th, 2008 | Quote

    Halo Ruben, I find that the Pageflip consumes lots of RAM if I add many pages. Is there any method to reduce RAM consumption? I have an idea and I would like to ask you the possibility and how to do it.

    Make 6 hard code pages object in the book. If user flips to another page, the book replace the content of the page object to the target page content (original version is change the page object directly).

    Is it possible? if yes, do you have any idea to do it?
    Thank you very much :)

  • Tom Blyth says so:
    June 22nd, 2008 | Quote

    Hi Ruben,

    Firstly thanks for your amazing component!
    I have a question for you, I have imported a Flexbook .swf into a flash as3 project I was wondering is there any way of accessing the “gotoPage() method” from the flash as3 project?

    Basically I want to reset the book to it’s start page when it is not in use.

    Please let me know, any help would be much appreciated!

    Regards,

    Tom Blyth

  • reon says so:
    June 19th, 2008 | Quote

    thanks your source.
    i want to ask if i want to design some animation within 2 pages… what action script should i go through…
    is it i need to separate the tweening to two part?
    i will damn appreciate your reply…

  • Michael says so:
    June 16th, 2008 | Quote

    @Michael: I have not yet tried to run the Book component in an AIR application, but I strongly doubt that that is what’s causing problems..

    I have attempted to put a modified version of your book component into an AIR app

    ..have you tried using the original version of Book instead of the modified one your talking about?

    I haven’t but when I say modified I mean I have basically just added scripting code on top of your component in separate classes, and I did comment a few lines out for gradient rendering but other than that nothing at all.

    I don’t get any build errors or warnings either.

    I’ve been fighting this issue for a week or so, I can’t run it in AIR, and I can’t even run the web version SWF in Flash Player. The only way it loads and runs is if it’s embedded and in a web browser. Very odd.

    I put the question up on the Adobe support forums, hopefully I will get something back.

    A follow up to this:

    #1 to have it run in Air you have to change the tag to and change the default X calculation of the book (which uses a formula that will break after this change).

    #2 to get it into a projector you have to enable “Create Accessible SWF” in the Project options.

    Now that I have gotten it into a desktop executable format I have found two bugs:

    1) The book completely freezes in Fullscreen mode. The book will still respond to commands such as clicking on a “next page” button, but the results will not animate until you go back to normal windowed mode.

    2) The book seems to displace it’s X value when the window is resized vertically. Unfortunately the AIR config file limitations on resizing don’t seem to work.

  • Adam says so:
    June 12th, 2008 | Quote

    I am scaling my flipbook to fit the browser size. Everything work ok until I mouse over the corner of a page or start flipping a page. All the text and the images go fuzzy like they are being rasterized. I take out the scaling and it is perfect. I have tried scaling with scaleX/scaleY as well as stage.scaleMode as well as exporting a SWF file and importing and scaling that file. All of them have the effect. Any ideas?

  • Michael says so:
    June 11th, 2008 | Quote

    @Michael: I have not yet tried to run the Book component in an AIR application, but I strongly doubt that that is what’s causing problems..

    I have attempted to put a modified version of your book component into an AIR app

    ..have you tried using the original version of Book instead of the modified one your talking about?

    I haven’t but when I say modified I mean I have basically just added scripting code on top of your component in separate classes, and I did comment a few lines out for gradient rendering but other than that nothing at all.

    I don’t get any build errors or warnings either.

    I’ve been fighting this issue for a week or so, I can’t run it in AIR, and I can’t even run the web version SWF in Flash Player. The only way it loads and runs is if it’s embedded and in a web browser. Very odd.

    I put the question up on the Adobe support forums, hopefully I will get something back.

  • Fedlarm says so:
    June 10th, 2008 | Quote

    No anyone? normally adding af thousand embty canvas to another canvas, wich basically is what this is, would not create any problems alike..

  • Fedlarm says so:
    June 6th, 2008 | Quote

    There are some serious performance problems when adding many pages. The more pages you add, the slower the upstart gets. if i add 1000 pages with nothing on them it takes about half a minute to start up..

    Does anyone know the reason for this?

  • Arnold Young says so:
    June 4th, 2008 | Quote

    For hiding pages on the fly, I am setting myShowFlag:Boolean as needed and using .visible = “{myShowFlag}” and .includeInLayout = “{myShowFlag}” but I not able hide those pages.

    What am I missing - like a refresh or something?

    Thanks — Arnold

    rs:Page id=”myBookPage3″
    visible=”{myShowFlag}”
    includeInLayout=”{myShowFlag}”>

  • Ruben says so:
    June 3rd, 2008 | Quote

    @Andrew: I’m afraid for that you’ll just need to be creative with transparents bitmaps or something like it..

    @CK: ..perhaps the getChildAt() and getChildName() methods will help you out with that one?

    @Sefi: You mean that the currently viewed index shifts along when a Page is added at a smaller index? Sounds sensible, I’ll keep it in mind. Not sure when this will be actually implemented though (as there are more important features etc. to be worked on), but thanks man!

    @BeN & oOo: Thanks for the input/sample-code guys!

    @Michael: I have not yet tried to run the Book component in an AIR application, but I strongly doubt that that is what’s causing problems..

    I have attempted to put a modified version of your book component into an AIR app

    ..have you tried using the original version of Book instead of the modified one your talking about?

  • Thorsten Reinhold says so:
    May 28th, 2008 | Quote

    I got it. Sorry for interruption.

    Greetings Thorsten

  • Thorsten Reinhold says so:
    May 28th, 2008 | Quote

    Hi Mr. Swieringa,

    awesome work that you are doing. Nice hp and blog anywhere.

    I tried to get your flipbook component running in flex builder 3, but i have some trouble with the as-classes BookEvent and Page. I cant get it to run. Is this a known bug? Is it possible to open this demo in flex builer 3?

    Thanks in advance.

    Greeting from germany

    Thorsten

  • Michael says so:
    May 27th, 2008 | Quote

    Hey Ruben, another question for ya:

    Do you have any experience putting your book component into an AIR application? I have attempted to put a modified version of your book component into an AIR app and it never shows up. Just get a gray background. Heck, it doesn’t even read the app dimensions. Any ideas?

  • BeN says so:
    May 25th, 2008 | Quote

    mx:HSlider
    id=”sliderbar”
    snapInterval=”2″
    value=”{myBook.currentPage}”
    width=”600″
    horizontalCenter=”0″
    bottom=”15″
    allowTrackClick=”true”
    enabled=”true”
    showDataTip=”false”
    dataTipPrecision=”0″
    rollOver=”slider_rollOver(event);”
    rollOut=”slider_rollOut(event);”
    change=”myBook.gotoPageFast(sliderbar.value)”

  • BeN says so:
    May 25th, 2008 | Quote

    private function slider_rollOver(evt:MouseEvent):void {
    Slider(evt.currentTarget).tickInterval = 2;
    }

    private function slider_rollOut(evt:MouseEvent):void {
    Slider(evt.currentTarget).tickInterval = 0;
    }

  • BeN says so:
    May 25th, 2008 | Quote

    Ooops, the full code don’t appear !!!!!!!!!!!!!

  • BeN says so:
    May 25th, 2008 | Quote

    Hello,
    here is an horizontal slider bar…

    import mx.controls.sliderClasses.Slider;

    private function slider_rollOver(evt:MouseEvent):void {
    Slider(evt.currentTarget).tickInterval = 2;
    }

    private function slider_rollOut(evt:MouseEvent):void {
    }

    function gotoPageFast => see Jevgeni post on December 10th, 2007 (insert the file book.as)

  • oOo says so:
    May 23rd, 2008 | Quote

    @Fedlarm:

    just figured out this second how to get rid of all actionscript related scaling problems (after some removechild/addchild/resizechild/etc. experiments ;)

    ..simply add a canvas first..then the book inside it and you can scale (the canvas) as you wish (scaleX/scaleY)

    @rubens
    really great work! much appreciated and thanx for sharing :)

    greez

  • Sefi says so:
    May 22nd, 2008 | Quote

    Hi Ruben,

    Thanks for the clarification on the book shades.
    I have an issue I’m trying to resolve, but mainly it relates to the issue of adding runtime pages to the book.

    Consider I have 10 pages in the book, and I want to programmaticly add another page (using addChikldAt), but not at the end of the book, but rather in the middle.
    This indeed adds the page, but causes all other pages to shift (naturally), which is fine. The problem begins when this causes the viewable pages to switch…

    To reproduce this, just open the demo app provided with the book, and change the add tearable pages index from 10 to 8. You will see that the tearable page is added at index 8, but that causes the pages to visibly shift.

    What I’d expect to happen is, that the pages are added, and the rest of the pages will have their index updated or something, so that the addition of pages before the current open pages do not visibly shift the pages…

    What do you think?

    Thanks,
    Sefi

  • BeN says so:
    May 20th, 2008 | Quote

    Hello Ruben,
    I think i’ll try to make a ‘pageZoom function’ with mx.effects.Zoom and mx.effects.Move…
    Thanks again
    if it works fine, i’ll up the code

  • CK says so:
    May 20th, 2008 | Quote

    I cannot type XML here. I show it here.
    hk.geocities.com/chingck2002/xml.html

    Thanks.

  • CK says so:
    May 20th, 2008 | Quote

    I try to import a XML file, and I use for each method to get the data of number of pages and what images are included in the page.
    In the looping, I am using addChild(ActionScript) to add a new page and using the same method to add image into a page, how can I control the image’s attribute in the page after added?
    I am trying to control everything by one XML file. For example,

    That means it has 2 pages and 2 images each page.
    Can I modify the image attribute(such as x and y) after all addchild have done and all images have loaded?

    Thank you very much.:)

  • Andrew says so:
    May 20th, 2008 | Quote

    Hi,
    I was wondering if you can think of a way to add spirals in the center. I’m not too sure how to proceed, any help would be great! :) I suppose I should change pageR.x to (this.width / 2) + 40 (where 40 = 40 pixels for the spiral image but other than that… I’m lost :S

    Thanks

    By spirals, I mean http://www1.istockphoto.com/file_thumbview_approve/4214969/2/istockphoto_4214969_old_notebook.jpg

  • Ruben says so:
    May 20th, 2008 | Quote

    @gre3n: As far as I know right now there are no tutorials yet, there are plans to create a knowledgebase with such information in the long run however.

    @Fedlarm: Strange, I haven’t run into this problem before. I’ll look into it as soon as time allows to do so..

    @Michael: There are several properties (in the Book class) that indicate in which direction a pageflip is being executed:

    - autoFlipIndex
    - lastFlippedDirection
    - lastFlippedSide

    Note that all of these are protected variables, meaning that you either will have to create a subclass of Book and implement an accessor-property (or -function), or go with plan B which is just hacking the Book class by changing the “protected” into “public” for one of the properties.
    Of course the former is preferred and the latter (obviously) not.

    If you use these properties in combination with the pageflipStarted-Event then I think you should be able to come up with a solution to your problem..

    Good luck!

    @BeN: Thanks! Yes I do, but unfortunately I do not have the time to write out a tutorial about it right now..

    @CK: ..well you could bind the source of the image to a variable with curlybrace-syntax (and later change the value of the variable):

    adobe.com/devnet/flex/quickstart/using_data_binding

  • CK says so:
    May 20th, 2008 | Quote

    I mean that how to modify it by actionscript.

  • CK says so:
    May 20th, 2008 | Quote

    Halo Ruben, please tell me, how can I modify the image property in every page without adding id to the image?
    Thanks! I really like your production.

  • BeN says so:
    May 19th, 2008 | Quote

    Hello Ruben, this is a very great job and you can be sure that i’ll use it in my project.
    Have you an idea about how i can make a ‘pageZoom’ function or somethng like this?

  • Michael says so:
    May 16th, 2008 | Quote

    Hi Ruben, I’m doing a project using your book component, and one thing I need to do is track what page the book is flipping to when the flip begins.

    So, in this case, I am calling either nextPage() or prevPage() and I need to, at that time, determine if I am headed to X page to run some code…

    I tried making autoFlipIndex in Book public and using that (it seemed to be what gotoPage was using) but I realized that prevPage and nextPage don’t use that functionality.

    Any recommendations?

  • Fedlarm says so:
    April 24th, 2008 | Quote

    Hey there..

    I’m just having some trouble with resizing the flexbook. I want to set the height through Actionscript with the percentHeight property, but for some reason i cannot do that, only with the height property.

    Futhermore Im not able to set a new height or percentHeight, if e.g I resize the window. Seems like it can only be set once?

    Any suggestions on how to be able to set som new heights and widths and/or the percentHeight problem.

    Thanks for sharing this component :)

  • gre3n says so:
    April 23rd, 2008 | Quote

    Hey there, this looks like an amazing tool and would love to have a go at fiddling around with it.
    Are there any basic tutorials on how to use it? Is it a component which you use with Flash?

  • Ruben says so:
    April 21st, 2008 | Quote

    @Sefi:

    How is it possible to make the fold gradient more subtle?
    I saw that Gradients.as defines some matrices which I assume define the fold gradient strength, but I couldn’t make sense of them…

    Hey Sefi, actually with Gradients.as you were on the right track, here’s some more info on some of the constants in the Gradients-class:

    There are 4 constants that define the shadows and highlights on the pages in Book:
    - FLIPSIDE
    - INSIDE_SMOOTH
    - OUTSIDE_SMOOTH
    - OUTSIDE_HARD

    Every one of these constants is an Object that has two properties (both Objects theirselves), called dark and light (the former defining the structure of a shadow and the latter that of a highlight).
    Both properties store three Arrays (color, alpha and ratio) that function as values for the parameters of the beginGradientFill() method of the native Graphics class. I think that reading up on that method will clarify a lot.

    As for the distinction between the 4 constants in the Gradients-class, I could write a few paragraphs on that one, but I think that you’ll get a better understanding by just adjusting values in the constants and seeing how it works..

    I hope this helped.. :)

    @Julia & David: Direct-pageflip functionality has yet to be implemented. There are, however, a few people that posted solutions for this one. Perhaps you will find something useful if you go through the comments for this post.

  • David Toro says so:
    April 18th, 2008 | Quote

    Hello i´m try to jump of page, from page i to page i+s without pass the intermediates pages, who can i do that’s? can you help me please?
    thanks

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

    Hello Ruben,
    Tell me please, how can I realize the option of the fast jump to the required page without using animation?
    Cause if I need to jump from page 1 to page 100, for example, it will take too much time.

  • [a]keman says so:
    April 15th, 2008 | Quote

    Realy great work!
    Thanks!

  • Sefi says so:
    April 14th, 2008 | Quote

    Hey Sefi,

    Is this the issue you’re having (it is indeed a bug)?

    When adding pages from actionscript, the fold-gradient of the page is gone.

    Yesssss! :) Both those links combined fixed it ! :) Now I have another question for you:
    How is it possible to make the fold gradient more subtle?
    I saw that Gradients.as defines some matrices which I assume define the fold gradient strength, but I couldn’t make sense of them…

    Any hints?

    Thanks a lot for your (and the community) help

  • Ruben says so:
    April 13th, 2008 | Quote

    Hey Sefi,

    Is this the issue you’re having (it is indeed a bug)?

    When adding pages from actionscript, the fold-gradient of the page is gone.

    ..if so then please check out this comment (it was posted by the same guy who reported the bug. Also, perhaps this comment may be useful in fixing this..

    I have included this bug in a tasklist and will repare it in a future version of the Book component..

  • Sefi says so:
    April 13th, 2008 | Quote

    Hi Ruben,

    I noticed something, and I don’t know if I’m doing something wrong or there’s a very peculiar bug in the book component.
    When I add a book to an mxml file using tag and adding pages to it using tag, everything is normal in regards to shading.

    But, when I add a book to an mxml file using tag and adding pages to it via code, using book.addchild(page), the flipping shadows work great, but when the flip animation that ends the shadow gradient abruptly and suddenly disappears (instead of it staying there to create the fold effect).

    Am I doing something wrong? I went through the Gradients.as code but saw nothing that should catch me eye…

    Thanks,
    Sefi

  • Roman says so:
    April 4th, 2008 | Quote

    There is a potential fast jamp to a page without using autoFlip?
    example: page 1 to 100, using autoFlipDuration = 600 -> Long Time

  • Ruben says so:
    March 31st, 2008 | Quote

    Hey Josue, thanks for the compliment! I would recommend Essential Actionscript 3.0 (by Colin Moock), check it out and see if it would suit your needs..

  • Josue Bonilla says so:
    March 31st, 2008 | Quote

    Hello Ruben my name is josue and i would just like to say that i appreciate the type of work you do, i’m a student graphic designer in San Francisco and although most of my work relates to print, I have an untapped passion for coding and i’m geared more towards Flex, Actionscript, Javascripts. i know very little in this language and would like to know if you could recomend anything that would help better understand these languages. Thanks again

  • Ruben says so:
    March 28th, 2008 | Quote

    @Lee: I haven’t tried it out, but I’m pretty sure it’ll also work in Flex 3, as MXML and Actionscript3.0 haven’t changed from Flex 2 to 3..

    @carlo: Dirk was referring to the showChildren()-method override in the SuperViewstack class..

  • carlo (it) says so:
    March 28th, 2008 | Quote

    Hi Dirk, i not understand where modify (showChildren), for load only three pages and not all pages…
    You send me please?
    Thanks!

  • Lee says so:
    March 21st, 2008 | Quote

    I was wondering if anyone had plans to create this in Flex3?

  • Davi says so:
    March 14th, 2008 | Quote

    Hello Ruben,
    I’m trying now to turn the make the flex book size in the same size of the computer screen, but it’s seen that the property Height/Width doesn’t work when called by ActionScript.
    I tried to find the part of the code, but with no sucess.

  • Ruben says so:
    March 12th, 2008 | Quote

    @Davi Costa:

    It’s possible the book load the first pages and turn it on visible and continue load the other pages?

    Yes, that would be possible, though this would be much more of an implementation of the component than a feature in the component.

    @zyry: I suppose adapting the library to fit your needs would be the shortest step. I do not really believe this is an issue that lies with the Book component though..

    @Mike:

    How would I use these classes to run a book in flash and not in flex?

    This question has been answered many times before; Book is a Flex-component and as such it uses Flex-only classes and components, there isn’t one almighty method or class that you can easily grab out of there and use to have the exact same thing in Flash.

  • Mike says so:
    March 12th, 2008 | Quote

    How would I use these classes to run a book in flash and not in flex? I do not seem to find the method where the book is created (pages are loaded from images)?

    Thanks for your help,
    Mike

  • zyry says so:
    March 12th, 2008 | Quote

    Hi.
    If a remotely (crossdomain) loaded image happens to be on page, you get an error in function Page::getBitmapData: “Security sandbox violation: BitmapData.draw… A policy file is required, but the checkPolicyFile flag was not set when this media was loaded”. I use 3rd party library to load images so I can’t force LoaderContext to set checkPolicyFile = true. Can someone help me?
    Greetings.

  • Davi Costa says so:
    March 11th, 2008 | Quote

    Hello Ruben,
    It’s possible the book load the first pages and turn it on visible and continue load the other pages?
    Looking your demo, looks that all content is loaded first to before show the book. In a situation that we have much pages, this could be a problem.
    Thank you.

  • Dirk says so:
    March 10th, 2008 | Quote

    @juri

    sorry

    dont set visibility to true for all children underneath selectedChild, only for the three previous ones (showChildren::SuperViewStack)

    if(i = this._selectedIndex - 2 // dirk visibility only for tree necessary page on each site (left/right stack)) {
    child.visible = true;
    }
    else {
    child.visible = false;
    }

  • Dirk says so:
    March 10th, 2008 | Quote

    @juris

    if(i = this._selectedIndex - 2 ){…

  • Dirk says so:
    March 10th, 2008 | Quote

    @juris

    complete condition:

    if(i = this._selectedIndex - 2 ) { …

  • Dirk says so:
    March 10th, 2008 | Quote

    @juris

    dont set visibility to true for all children underneath selectedChild, only for the three previous ones (showChildren::SuperViewStack)

    if(i = this._selectedIndex - 2 // dirk visibility only for tree necessary page on each site (left/right stack)
    ) {
    child.visible = true;
    }
    else {
    child.visible = false;
    }

  • WestW says so:
    March 7th, 2008 | Quote

    Hello again,

    I found a way to resolve my previous ‘issue’:
    ” Can we set/reset the width and height of the book in action script? For example, if you do not know the actual dimensions of your images before runtime. ”
    Basically, do not specify height/width in canvas; set it in action script of initialize event call back…
    Nice book implementation of the flex book again,

    James

  • WestWind says so:
    March 7th, 2008 | Quote

    Hello Ruben,

    Great work…
    Can we set/reset the width and height of the book in action script? For example, if you do not know the actual dimensions of your images before runtime.

    thanks,

    Westwind

  • Matthew SCott says so:
    March 6th, 2008 | Quote

    I had to comment out line 1090 of Book.as which looks like the following:

    if (ocf.cPoints != null && !this.tearActive) page.gradients.drawInside (this.render.graphics, ocf.cPoints, tint2, rotate);

    With dynamically added content is was causing the shadowing to be duplicated and placed in the wrong spots such as weird triangles and other such things.

    Here is my implimentation:

    private function updatePages():void
    {
    var page:Page;
    var userPage:Canvas;

    book.removeAllChildren();
    page = new Page();
    page.setStyle(’backgroundAlpha’, ‘0′);
    book.addChild(page);

    for(var i:int = 0; i < userPages.length; i++)
    {
    // Left Page
    page = new Page();
    page.setStyle('backgroundAlpha', '0');
    userPage = new UserPageLeft();
    userPage.data = userPages.getItemAt(i);
    page.addChild(userPage);
    page.lock = i == 0;
    book.addChild(page);

    // Right Page
    page = new Page();
    page.setStyle(’backgroundAlpha’, ‘0′);
    userPage = new UserPageRight();
    userPage.data = userPages.getItemAt(i);
    page.addChild(userPage);
    page.lock = i == userPages.length - 1;
    book.addChild(page);
    }

    book.gotoPage(1);
    }

    openAt="1" autoFlipDuration="600" easing="0.7" regionSize="150"
    sideFlip="true" hardCover="true" hover="true" snap="false" flipOnClick="true">


  • A.Jendrysik says so:
    March 4th, 2008 | Quote

    Wonderful effect.

    Greetings

  • Juris says so:
    March 3rd, 2008 | Quote

    @Dirk : Here’s a little something i’ve made too boost the flipping for bigger books. It just set every page.visible to false, except for the 4 you need to see. Note that if you’re using transparency on multiple layers it might not give a good result. I’ve add the function getCurrentPage and modified showChildren. All changes have been made in SuperViewStack.as

    protected function showChildren ():void {
    var i:uint;
    var child:Page;
    var pageCurrent:int = -2;
    var pageIndex:int = 0;
    var changed:Boolean;

    for (i=0;i pageIndex){
    child.visible = true;
    changed = true;
    }
    }

    }

    if(!changed && child.visible) child.visible = false;
    }
    // make sure fading is adjusted:
    this.applyFade();
    }

    private function getCurrentPage(book:Book):int{
    if (book == null){
    return 0;
    }else{
    return book.currentPage;
    }
    }

    Hi! I unfortunately part of the code You have posted is missing :( Can You please repost it?
    Thank’s

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

    @tobias: Thanks!

    @Sandy Martins: Read the first alinea of this blog-post.

    @Kevin: I already answered that question some time ago, please read my reply-comment.

  • tobias says so:
    March 2nd, 2008 | Quote

    awesome! best page-flipper there is in my opinion..
    great work thanks a lot!

    hope someone out there will develope some dynamic XML feature to this!

  • Sandy Martins says so:
    February 27th, 2008 | Quote

    Dear sir madam,

    I am writting to inquire about the price of the Software it self as soon as possible.

    Many thanks

  • Kevin says so:
    February 22nd, 2008 | Quote

    I like your component. Could it support full spread pages?

    aka.. a page that spreads across left and right side?

    Thanks,
    Kevin.

  • Dirk says so:
    February 20th, 2008 | Quote

    @CBass

    tx for the idea and it works defintly better

    but showChildren do it on one site (Set visibility to true for the children underneath selectedChild (and selectedChild itself), false for the rest)

    if(i = this._selectedIndex - 2 // i add this to avoid set visibility to true for all page underneath selectedChild

    till now works fine. also with more than 50 pages

    Best

  • CBass says so:
    February 13th, 2008 | Quote

    @Dirk : Here’s a little something i’ve made too boost the flipping for bigger books. It just set every page.visible to false, except for the 4 you need to see. Note that if you’re using transparency on multiple layers it might not give a good result. I’ve add the function getCurrentPage and modified showChildren. All changes have been made in SuperViewStack.as

    protected function showChildren ():void {
    var i:uint;
    var child:Page;
    var pageCurrent:int = -2;
    var pageIndex:int = 0;
    var changed:Boolean;

    for (i=0;i pageIndex){
    child.visible = true;
    changed = true;
    }
    }
    }

    if(!changed && child.visible) child.visible = false;
    }
    // make sure fading is adjusted:
    this.applyFade();
    }

    private function getCurrentPage(book:Book):int{
    if (book == null){
    return 0;
    }else{
    return book.currentPage;
    }
    }

  • alma says so:
    February 10th, 2008 | Quote

    alright…that makes everything much more easier for me. Thank you I really appreciate the help.

  • Dirk says so:
    February 7th, 2008 | Quote

    Hi Ruben,
    if i add 100 and more pages, also pages without content, then the flipping is getting very slow. thats why i want to create a page caching to hold only a certain number of pages e.g 20, but if i delete a pages at index below the current id than the component refresh itself and the next page is displayed. it is possible to avoid that?
    Do you have other tips for caching or by loading a lot pages?

    Thanks a lot
    Dirk

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

    Hey Alma, thanks, here’s a quick (and not too detailed) rundown on how to use the component:

    1) Download and install Flex (either Flex Builder or the Eclipse plugin):

    2) Create a new Flex project.

    3) Download the source for the Book component and open the .zip, then drag the ‘com’ and ‘org’ folders to the root of your Flex project folder.

    Note that the other folder holds files specific to the online demo (i.e. images and CSS-files), so you don’t have to use it.

    4) Now add the following namespace as an attribute to the <mx:Application> tag:

    xmlns:rs=”com.rubenswieringa.book.*”

    ..we’ve now told our Flex project that for instance <rs:Book> will correspond to a class in the com/rubenswieringa/book folder.

    Now start typing the following somewhere between <mx:Application> and </mx:Application>:

    <rs:Book width=”500″ height=”300″>
       <rs:Page>
       </rs:Page>
       <rs:Page>
       </rs:Page>
    </rs:Book>

    In essence, the <rs:Page> tag is just a <mx:Canvas> tag, so you can really put anything you want in it.

    And that’s pretty much what you need to get you started, also go through the documentation if you need to look up anything:
    rubenswieringa.com/code/as3/flex/Book/docs

    Good luck!

  • Alma says so:
    February 7th, 2008 | Quote

    ok…i was like really amazed by this it is very cool…but how can i use this… i don’t understand…could you please explain?….

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

    @Austin: Creating an implementation of the Book component is in my opinion somewhat out of the scope of providing support like I am already doing. To be frank doing just that is already very time-consuming and on top of that I already have a very busy life as it is.
    I’m sure you will be able to find a tutorial somewhere that explains how to load XML. When you know how to do that it shouldn’t be too hard to read the documentation and get the hang of the rest.

    Good luck! :)

    @Sefi: Very good point! I’ll keep that one in mind when I start doing some more work on the component.. Thanks :D

  • Sefi says so:
    February 3rd, 2008 | Quote

    Hi Ruben
    Thanks for your reply.

    I can make the changes you suggested to the code, probably will work from the sound of it (haven’t tried it yet).
    Do you think it will be possible (complexity and/or time constraints on your part) to add a property to the Book.as class that enables/disables the glossy effect?
    As you probably can imagine, I’m reluctant to make changes to an open-source component, especially one with such responsive support as you provide. I’d much rather use it as-is, plus that will make it possible for other users to use it as well.

    Please let me know what you think.
    Thanks!

  • new_flexer says so:
    February 2nd, 2008 | Quote

    Sir…

    i have doubt in this flip ….before that….its really too cool component… wanna like this….

    and… my doubt is whether we can use external images in this book i mean that we can use XML to insert image URL?

    if its yes …. how?

    let me know the explanation! :-)

    thanks in advance

    Austin