Flex book component (alpha)
by Ruben
UPDATE: The beta version of the Book class (including source-code) is now online!
rubenswieringa.com/blog/flex-book-component-beta
Lately it's been kinda quiet on my blog, this semi-silence has been with good reason though because in the past few months I have been working on a booming feature-rich pageflip book component for Flex.
Check out the alpha demo by clicking the image below, bearing in mind that this is an early alpha version, so performance may not be optimal.
UPDATE: Unfortunately the alpha version was lost during file maintenance, please refer to the beta version for the time being.
Here are some of the key-features I've implemented (or will be implementing) in my book 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.
- Optional outlines for making pageflips of semi-transparent pages more visible.
- Locking functionality to keep certain pages from being flipped.
Once the final release is ready I will also post the source of the book component.
I know there are still a few bugs and weird things in the alpha demo, but nevertheless, don't be shy to leave your praisings, feedback, or whatever in the comments-section..
Mind that all the artwork is courtesy of Theo Aartsma, who rocks for letting me use it for this demo.
Also note that in my initial post I failed to mention that I created this component during my internship at TFE. Without these guys it would surely taken me alot longer to have gotten this far, they were also kind enough to allow me to post publish component and its source-code. So thanks guys!

Comments (also 10 trackbacks, click to show)
Trackbacks:
You’ve really done it this time!
It looks great, feels great and handles great. Also I think the page ripping is a very cool feature.
Keep it up!
Ruben Cool!!!!!
I would like to know you, this component will be available for the community (Freeware) or comercial?.
Really good Job!!!!
Best,
Guillermo
@Jaap: Thanks man, you’re too kind
Even more goodness to be revealed in the next release!
@Guillermo: As I said in my post, I’m planning on publishing the source-code when a final release is ready. Right now there are still quite few optimalizations to be made and one or two bugs to be fixed.
Keep an eye on my blog in the next few weeks..
Thanks again,
I get you,
thanks for this great component
Best,
Guillermo
You’re welcome Guillermo
Amazing job Ruben!
Very Well done, and Happy Birthday
@aYo: Haha, thanks for remembering my birthday! This is my last day before passing the 20 milestone, what a day
@Matthijs: Thanks man, you rock!
Very nice indeed. Great job :]
Thanks man!
Very very very nice! The shit is looking great!
Hahahaha, that’s probably the most noteworthy comment I’ve had up to now
Very, very, very nice job Ruben!
Nice and usefull component!
I’m proud of you Ruben! I watched you develop this book from scratch along the last few weeks and it’s super!
Great component man… but I told you allready… Keep up the good work…
And to all haters that think he ripped the Ely Greenfield version…I can tell he build it himself based on some classes found on ByteArray.org……and off course my proof of concept hahahha
http://labs.flexcoders.nl/?p=33
Try build it yourself!!! Then we’ll talk again (that’s for all haters)
Wow! That’s amazing!
Keep up the good work
Thanks everybody for the awesome support and compliments, it means a great deal..
Great stuff!
Great work!!!
Hola ruben.
I have seen your demo of pageflip, I now am doing a pageflip but I have a problem, in a page there is a link and on having gone on to the following page if I pass the mouse on her, the previous link continues appearing though invisible. In your pageflip you have links to other sites how did you do in order that not transparency? Thank you. Sorry my english
Ah! One forgot me, marvellous work!
@nacho: Within a couple of weeks I will publish the source-code, then I will also explain how I realized some of the features of the Book component.
I defenitely want to grab the sources. very interesting..
This component looks awesome. Do you think you are going to implement large cover page functionality so that the cover can be larger than the inside pages?
Daniel, thanks, I might implement large cover page functionality in future version of the Book component. Though I’m pretty certain this will not be until after the next release..
Hi mate!
I must say U have awesome site!!!
this component is the best too.
I’ve send you an mail so please do read it hehe
Greets Mate
Kroket, thank you very much. I have sent you a reply to your email just a minute ago..
When do you think U’ll be finnished?
Enjoy!
I hope somewhere whithin the next 10 days, I can’t say anything for certain though, things have been real busy lately..
what are you doing that U’re so busy? Do you have multiple projects? Or are you making website’s?
Bye
wow nice effetc – amazing effect
Hello, I would like this component. How can I proceed? there is some place for me to do the download? to buy? how can we negotiate that component?
Hug.
Rafael, you can now find a link to the source-code of the Book component in the blog-post about the beta-version. Do mind that it is still a beta-version, which means that there are still a few bugs to be fixed.#
I hope this helps..
Is it possible to use custom sized pages? So for example landscape or portrait pages? (not in one book though?)
Roxlu, what exactly are you referring to when say “not in one book”? You can specify the width and height for a Book, but all pages in one Book must be of the same size (in the beta, that is)..
Hi,
I found when I fliped back one page,There will be a line on the page , and an triangle full of black . If It is a bug of the flexbook ?
Hey Apache, could you perhaps give me a little more detail? For example: when exactly did it happen; can you reproduce the bug? Thanks a lot for reporting this bug
This is an incredible component. Very well done.
I have a question though. I intermittently get this message:
“RangeError: Index ‘8′ specified is out of bounds.
at mx.collections::ListCollectionView/getItemAt()
at com.rubenswieringa.book::Book/com.rubenswieringa.book:Book::evaluateHover()
I can’t figure out whats triggering it as it seems to appear at random. I wonder if disabling page hover will cure it? Any advice would be great.
Anyway, if you take donations, let me know. This is probably one of the best custom components out there.
Sorry about the messy post. The error is being thrown in
Book::evaluateHover().
Hey Reggie,
Are you sure you have an even amount of Page instances in your Book? I do accept donations, you can do so through PayPal, I sent you an email with further instructions.
Hi,
Great component but one minor issue, when you try to use the book dynamically(place objects on it at runtime) the gradient overlay will kick in sometimes and not allow any objects to gain focus. I havent been able to work out if this is occuring within the book or the viewstack maybe you have an idea how to send the gradient to the back of the display list without destroying functionality of the book.
thanks
david F.
This is sexy! Doggy Style!!!
hi ruben , nice work on the flipbook
is it actually possible for me to use this flipbook directly in flash cs3 ?
if so do you have an example of that ?
Hi People.
I need to use this great component on a new project I am working on. Does anyone have the lost alpha code zipped up? Perhaps you could send it to Ruben any myself:
giles @ roadnight . name
Thanks
@Tenchi: Thanks! Unfortunately you’re not going to be able to use this component in Flash (or an Actionscript-only project) seeing that it is built on the Flex framework (i.e. classes that are only available in Flex projects).
@Giles: The source code for the alpha version of Book was never released in the first place and I lost it a while ago, so it’s probably going to be hard to get your hands on it, sorry man.
wow! great job!!! exactly what I was searching for! thank you!
Denis
Nice component. Very impresive
I was wondering a couple of things…
If I put flash swf’s inside, is there anyway for me to control them? something like “displayedPagedRight,gotoAndPlay(2)” or something like that.
I see that all your pages are embeded, I would need to load swf’s dynamicaly at run-time. Do yo have an example of that?
I thank you in advance for your time and patience. Coming from a .net background, some of these things arent so obvious to me.
Marco
Hey Marco,
Thanks! I don’t have a ready-made example of that, though for using embedded or loaded SWF’s in a Flex-app you should look into the docs for the SWFLoader control.
Nice work. This is a great component.
Great user interface, and Happy Birthday!
how does one acquire this tool. Where can I purchase or download.
Please.
It is too cool for words!
Wow looks really Nice thanks. Can it be used commercially?
I like your flipbook. What would it take to use it in Flash, or is that not possible as it is built in flex it appears….
: DAVE
how can you embed full screen button, like this http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/ ? !!!great job!!!
Is it possible to set the alpha “white” shine on the transparent image.
Now it´s getting more white white on the pages with each transperant image over the non transparent?
Hi!
This is just what I need on my most recent project. What do I need to do to use it for our clients? I work for a data collection company and we need this kind of stuff for our web surveys.
Thanks,
Carlos
Ruben – I have had your component for awhile now and was finally able to do something with it. Thank you for creating and sharing. Currently working on making it stage scalable for smaller screens, and larger for that matter.
I have emailed you to request permission to give credit where credit is due, it will be posted on the inside cover as soon as that page is done.
Thanks again!
Is it possible to integrate a PDF directly?
Hello,
Thanks for your code.
Do you plan to add a zoom option in your code? In fact for design book your project is OK, but not for text publication
I’m very interested by the possibility to create the book from a pdf too!!
Regards,
@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?
@Ruben
This is an amazing piece of work – very nice job!
Hey,
Great component. Works like a charm.
One prob though. My app needs the number of pages to be variable. So that I can take leaves out of the book or add them at runtime. Is that coming anytime soon please?
Great feature. But different pdf have different size . According to size of created image i have to set the bok size. But it does not allow to set rs:book size in action script.
So is it possibel to set height – width in action script?
Atul
That’s great!!!
I love the artwork in your demo =)
We’ll probably use this programm for our Fanfictions and storys on our Blog =)
Thanks for sharing this great programm with us
hi ruben
First thanks for your effort and for your open source. I am working on zoom . Is there any proces to make zoom perfect and speedy?
Atul
Hi Mr. Ruben.
That was an awesome work.
Can you suggest me how to make the swf to spread in two pages
Hi Ruben, thanks a lot for your great component.
I tried to make a new method in the book class similar than the gotoPage() one but with the difference that it would go directly to the specified page with just one flip without flipping through all pages in between but I only got very weird results. Do you have any suggestions on how to make that? I guess it’s a hard one…
Maia if you ever figure that out, please post it back.. I have been trying (unsuccessfully) to accomplish the exact same thing.. Flipping through all the pages isn’t so hot for the 168 page book I have to put up..
Hi Ruben,
I have been using your Book component . I am wondering if the book can be made into a single sided book and switch back and forth between single and double sided book.
Do you have any suggestions?