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).
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
- Didier Brun for making his pageflip rendering class.
- Thomas Pfeiffer (aka Kiroukou) for letting me use his distortion class.
- the Factor.e for allowing me to publish the demo and the source-code..
- Maikel Sibbald for helping me with (among a lot of things) thinking out the structure of this component. He also made a usage-example of Didier’s pageflip class which I used as reference in the early days of the Book class..
- Theo Aartsma (aka Sumeco) for letting me use his artwork in the Book demo..
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.
[...] Flex book component (beta) [...]
[...] Flex book component (beta) [...]
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?
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
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.
Any thoughts on having a single swf for both pages? Would make two page interactions way easier.
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!
hey,i can’t directly jump to a page,is there any api …
thanks
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…
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.’.
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
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!
Hey great component, does it supports any kind of zoom. If not then how big an effort would it be to add it?
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.
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
Anybody fixed the zoom render problem when mouse is over the page?
Please help me!
@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!
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
Hi,
how to change page orientation to vertical flip-chart like a calendar or similar.. ???
please email me!
Thanks a lot.
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
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
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?
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
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
[...] 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. [...]
[...] 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. [...]
[...] Flex book component [...]
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.
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
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.
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.
can anyone tell me tat deep zooming in pages can be possible in Flex book component?
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..
[...] Flex book component [...]
[...] Flex book component [...]
[...] Flex book component [...]
how can book is zooming?