Ruben’s blog

Awesome!!!
Its great to finally see the source out .. keep up the good work Dude.

Meanwhile, I might have run into a bug … I grabbed the edge of the live dragging page to flip it .. but now i was stuck .. i could not let go of the page .. it kept moving around as the mouse moved around … no matter where i clicked, it just didn’t let go … i was able to reproduce this a couple of times.

Hi Rubben,

Almost sure, you’ve already thought of making this an AIR app, or/and making the content (the book’s content) load dynamically.

Are there any future plans for these?

Really good job done so far, anyway.

Regards,
Iuliu

I can confirm the “can’t let go of the page” bug. I gather pageFlipFinished event isn’t being called correctly?

just wanted to let you know that you have one of the most amazing flash plugin there is and we will use it on site CSULBVSA thanks you

if you turn page in fast speed,the page can’t put down,it will go with the mouse for ever. I just have to fresh the webpage!

Hey all, concerning the sticky-page bug, I have taken it into account and will fix it as soon as possible, thanks for mentioning!
The same goes for all other bugs that people have told me about through the comments-section and email..

@Mrinal: Thanks for your ever so kind words Mrinal. I hope it’s okay for me to hit you up on googletalk regarding the sticky-page bug?

@iuliu: Making the Book component load its content dynamically is actually a usage-case that you can make happen yourself now that the source-code is out, so try it out I’d say and let me know how it goes!

@Andre: Thanks for the compliments! I’m very curious about how you will be using my component and I would very much like you to send me a link (email or post it in the comments) when you have it implemented..

Aloha,

Just wanted to let you all know a quick workaround for the sticky page bug. It is not a complete solution, but it makes the component functional enough for me.

First of all, steps to reproduction. To get the bug to show, put the mouse over a corner and get the corner to start flipping. Quickly, move the mouse out of the corner so that the corner starts unflipping. Then, before it completely unflips, move the mouse back into the corner.

If you click at this point, you will get the sticky bug error.

The workaround that I am using is as follows. Open Book.as and find the following line of code:

// stop if none of the pagecorners are hit:
if (!this.isPageCornerHit() && (!this.sideFlip || !this.isPageSideHit()) && !this.autoFlipActive){
return;
}

Then, just add a call to endPageFlip(), like so:

// stop if none of the pagecorners are hit:
if (!this.isPageCornerHit() && (!this.sideFlip || !this.isPageSideHit()) && !this.autoFlipActive){
this.endPageFlip();
return;
}

I’m not sure if this introduces other bugs, but I havent found any thus far in my testing. When Ruben returns, I’m sure he will clarify this all for us. In the meantime, this might help you get something working.

I love this component, and I am very thankful to Ruben for releasing it.

Mahalo Nui Loa,

Rob

Concerning the sticky-page bug : just replace
if ((this._status == BookEvent.PAGEFLIP_ENDING || this._status == BookEvent.HOVER_ENDING) && !this.autoFlipActive && !this.lastFlipSucceeded){
by
if ((this._status == BookEvent.PAGEFLIP_ENDING || this._status == BookEvent.HOVER_ENDING) && !this.autoFlipActive && !this.lastFlipSucceeded && !this._status == BookEvent.PAGEFLIP_STARTED){
in function startPageFlip () in Book.as

@rob & Grapsus: thanks very much for the bug-fixes and your help in general. I will try them out and update the book source as soon as I have the time, hopefully within the next seven days..

Thank your great job first. I notice in your bugs list, the second one said ” When opening the Book and immediately closing it, an ArgumentsError will be thrown”, in fact aften open the book, then click the second page to close the book, a page index error always happened, no matter how long you wait.

Thanks, I had not noticed that yet.

Today I spent some time on fixing the sticky-page and book-opening bugs and I am pleased to say that they have been fixed:
Book beta bug-fixes & simple demo

Seems that the sticky page bug’s been fixed just fine. Well done!

How is this different from the iparigrafika one?

Hey Carl, I can see where your question is coming from, seeing that the actual generated content (the demo) may at first sight look not that different from the iparigrafika pageflip.

Don’t let that fool you though, this component is in many ways different.
The biggest difference is perhaps that while the iparigrafika pageflip was made in Flash, my Book component was written for Flex, which makes it easier in usage (although some may not agree on this).

Another big difference is that the iparigrafika pageflip was built in Actionscript2.0, whereas my Book component was made in Actionscript3.0, which has a few technical advantages.

Also worth noting is one specific feature where hard-back pages (when being flipped over) distort, rather than skew.
I’m not sure if my component is the first that shows distortion on hard-back pages, but I haven’t seen it anywhere else up to now.

Of course there are a few more distinct features, but the ones I mentioned above are pretty much the main differences between this component and the one built by the people over at iparigrafika..

I hope this answered your question

..oh and thanks Brad!

Hey Ruben! First of all congrats on the great job! Well done! I may have found a bug though…When adding pages from actionscript, the fold-gradient of the page is gone. Perhaps it’s related to the ScrollPolicy issue that has the same effect when turned on? Thanks.

Code snippet:
…
var page:Page=new Page();
myBook.addChildren(page);
…

Thanks George, I will look into this issue and try to fix it in the next release..

Great job and beautiful content!
I’ll be sure to use your flip book in some project.

Luv it!
/Petit

Thanks for the great work and making it available.

What I would love to see is the ability to see the edges of pages that are beneath the current ones. (perhaps even clickable so you can jump to anyplace in the book – tabs would be an even neater addition!) This gives you an intuitive feel for where you are in the book. It would also be great to make it simple to add a sound effect for the page turn.
Allowing for a slight downwards perspective would also help to emulate the real thing. Much like reading a book on a table. This would make it easier to see the overall page position and book thickness.

I maybe adding these features myself if I get some time. If I do I will pass the code on to you.

Would it be possible to animate a transition when the hard cover property is changed? It’s not major, but it would be a nice addition.

@Rick:

quote from Rick:

What I would love to see is the ability to see the edges of pages that are beneath the current ones. (perhaps even clickable so you can jump to anyplace in the book – tabs would be an even neater addition!) This gives you an intuitive feel for where you are in the book.

quote from Rick:

Allowing for a slight downwards perspective would also help to emulate the real thing. Much like reading a book on a table. This would make it easier to see the overall page position and book thickness.

That would indeed give the Book a whole new look-and-feel. However, I predict that implementing the feature you’re describing may prove to be a real bitch.
As far as the tabs go you will already be able to do this by reading the pages property of the Book class, and using its gotoPage() method..
In the meanwhile, be sure to hit me up if you get the implementation of these features done without making the code too messy or cpu-intensive..

quote from Rick:

It would also be great to make it simple to add a sound effect for the page turn.

Use the pageTurned-event and play the sound from within the event-listener. That’s pretty simple, right?

@Brad:

quote from Brad Beattie:

Would it be possible to animate a transition when the hard cover property is changed? It’s not major, but it would be a nice addition.

Actually that would be a really nice feature, I will think about implementing it, thanks!

Hi, this is a marvelous creation you have here. I am a genealogist and would love to be able to put scanned images of books with this instead of having to go from link to link to see an image. Also images of records ie marriage certicate / death cert / photos etc.. Then being able to print the pages for us would be great.

How does someone who knows nothing of this type of work change the images etc for my use? I do basic webpages but that is the extent of it.

Thanks for such an awesome program.
smiles to you!

hi dude, by far this Flex book is the best flex component around. I think you should work on something else to bring out more creative components.

@Brenda: Thank you very much.
At this stage the Book component is targeted at Flex developers. However, A few days ago I had a conversation with an employee at a large advertising-agency in which we discussed that it might be cool to have some sort of wizard which would enable people with no knowledge about Flex (or Flash) to put together their own Book implementation.
Creating such a tool might take some time though, and I’m still not even sure if this is going to be one of my priorities in the near future, so don’t get your hopes up too much

@Moxie: Thanks! In what way precisely do you mean that I should work on “something else” to bring out more creative components?

Interesting. I saw flex book component developed by Ely Greenfield nearly three months ago, with a bunch of examples and sources. Have you seen it?

Yes, I did see Ely’s FlexBook component, I especially liked the sample with the human anatomy pages..

Ok let me start out by saying I love your flex book and I am glad to know that your source code is free. But I am totally lost now, in order to use this on my website what goes where and how do I add my own pictures to every page??

Is there parts that go in the header tags, parts that go in between the body tags ect.
I wish this was a simple flash thing that I could just edit to put my own pictures in and then just insert the flash applet or whatever into the web brower, but such isnot the case I am sure, any help you can give me would be appreciated

Hey Larry, as I said to Brenda, the Book component is currently targeted at Adobe Flex developers. Which means that in order to create your own custom implementation, you will have to compile your SWF (Flash file) yourself..

In the future I may create a tool that makes it possible for other people (not familiar with Flex) to create their own customized Books, but this is still just an idea..

Really great looking book. Somebody already mentioned this, but a page turning sound would be great to see.

I’ve been developing simple to moderate Flash work for about 7 years now, but am new to this level of AS coding. What’s the best way to get started with Flex? I would love to get to the point where I could at least know enough to understand programming like this.

Wow amazing work m8, Im trying to make a setup in in the FLASH UI (not using FLEX) but i can’t get it work. Probably FLASH not accepts “Extends Canvas”. Can somebody help me with setting up a FLASH version of this really awesome PAGEFLIP?

All credits to you RUBEN!

Hi Ruben,
Great widget, by the way, excellent work.
I am actually using your component as part of an AIR application I am building. It is very cool to see a book full of live web pages that you can turn through
One problem seems to be that for books of smaller size and where the background of the page is basically white (as is the case with lots of web pages) the shadow is over-powering as is the light effect. Is there some simple way to turn down the intesity of these effects? I could not see it in the code.
Any help appreciated,
Geoff

Hi Rubens. It is possible to use your Book Classes in ActionScript 3 only? I mean, without the MXML. I tried to compile an Instance in Flex 2 SDK, but got compiler errors.

@Cheese: Like I said before:

quote from Ruben:

Use the pageTurned-event and play the sound from within the event-listener. That’s pretty simple, right?

@James: Hmm, tough one. Especially since programming is mainly something that alot of people learn throughout the years, mostly by simply doing it alot.

Here’s something to get you started though:
blinklist.com/rubenswieringa/getting started+actionscript
blinklist.com/rubenswieringa/getting started+flex

@Robert: Thanks, the reason that the component is not working in Flash is like you said because it was built for Flex. I might make it cross-compatible in a future release though.

I tried posting in an update thread but apparently its not being read too often. My question is how can I flip the book straight to page X w/o going through all the intermediate pages? 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!

Hey George,

Sorry about not yet having replied to your other comment, spring-break just ended a few weeks ago and school has been too busy for me to do anything about my blog.

As for going straight to another page, I’m afraid this functionality isn’t featured in the Book beta. Some time ago someone asked me about the exact same thing, here’s what I told him:

quote from Ruben:

There’s a method in the Book class called gotoPage() that automatically flips all the pages inbetween the current- and target-Page. Also — pretty sure the following won’t be of much use to your problem — there is a property called openAt with which you can specify which pair of Pages will be visible when the Book application starts.

In the current version (beta) of the Book component classes there is no way to flip multiple sheets as one, meaning that if you were looking at page #3 and you’d want to go to page #9, then three pageflips would have to occur (be it by hand/mouse or with the gotoPage() method).

Of course thank you very much for the hint about the lost gradients.

@Geoff: Unfortunately there is currently no simple way of turning down the shadows or highlights.
One (ugly) option would be to edit the constants (FLIPSIDE, INSIDE_SMOOTH, OUTSIDE_SMOOTH, INSIDE_HARD, and OUTSIDE_HARD) in the Gradients class, but I’m afraid that’s about as good as it gets.

@M:ke:

quote from M:ke:

It is possible to use your Book Classes in ActionScript 3 only? I mean, without the MXML. I tried to compile an Instance in Flex 2 SDK, but got compiler errors.

No, right now the Book component uses components from the Flex framework, which makes it impossible to use it in an Actionscript-only project.

After few hours of digging around, I finally got the book to flip directly to target page without flipping all the pages in between. If anyone interested I can share the code. It’s kinda dirty hack but it works. I’m sure Ruben isn’t

quote from George:

After few hours of digging around, I finally got the book to flip directly to target page without flipping all the pages in between. If anyone interested I can share the code. It’s kinda dirty hack but it works. I’m sure Ruben isn’t

Hi George,

I’m very interested! Please tell me where i can find the code

… and another great wish: How can i include all the pages as seperate mxml-Files instead of .swf’s.
If you have a single file for each page the (visual) creation is much easier …

hopefully,
hannes

quote from Hannes:

Hi George,

I’m very interested! Please tell me where i can find the code

It isn’t on any public server. I can share it via email, and, of course, use it at your own risk

quote from Hannes:

… and another great wish: How can i include all the pages as seperate mxml-Files instead of .swf’s.
If you have a single file for each page the (visual) creation is much easier …

hopefully,
hannes

Either I don’t understand your question or…What can possibly stop you from doing so? Create a MXML component and add it as a child to .

quote from George:

It isn’t on any public server. I can share it via email, and, of course, use it at your own risk
Either I don’t understand your question or…What can possibly stop you from doing so? Create a MXML component and add it as a child to .

Hi George,

yes, i can create a component. But then i have to addd all childs ‘by hand’. My wish is to include all pages in a loop. If this is possible, please show me an example.

Thanks very much,
hannes

quote from George:

quote from Hannes:

Hi George,

I’m very interested! Please tell me where i can find the code

It isn’t on any public server. I can share it via email, and, of course, use it at your own risk

Hi George, I am very interested in your multipage-flipping at once method. Could you send it to me?

Hi George,

could you please mail me the directly gotoPage code
as well?

Thanks
Chris

Hi again,

forgot the email
chris (at) poyo (dot) de

thanks!

quote from Thomas:

quote from George:

quote from Hannes:

Hi George,

I’m very interested! Please tell me where i can find the code

It isn’t on any public server. I can share it via email, and, of course, use it at your own risk

Hi George, I am very interested in your multipage-flipping at once method. Could you send it to me?

guess an email address would be useful
thomas [dot] roosen [at] gmail [dot] com

Firstly, excellent flex component, its so easy to work with even though I’m a novice to Flex and AS.

I found a way to fix the bug where adding a Page using AS doesn’t draw the gradient.

After adding it to the book add the lines

aPage.initialize();
aPage.drawFoldGradient();

Hope this helps someone

Ryan

Wow! It is really a fantastic creation. It would be better if you can convert the doc that can be download.

I’m looking to pay a developer to turn a 12 page pdf catalog into a flex book. Interested parties are welcome to contact me at:

dbaly (at) berries (dot) com

Please indicate how much you would charge and how long this project would take.

Thank you.

Dustin

quote from Ryan:

I found a way to fix the bug where adding a Page using AS doesn’t draw the gradient.

@Ryan: Thanks for the kind words man, and even more for the bug-fix, cheers

Hi,

Huge and beauty work.

I am very interested in your multipage-flipping at once method. Could you send it to me and the gotoPage code as well ?

Thanksfully !

keep on !

Hi

I love the page flip component and I am currently using it in one of my projects.

I am trying to re-size the book after it has been created. Do you have any tips or example code for this?

I can re-size the pages ok but they are masked by the original size of the pages. When I flip a correct size page flips but is masked again when the flip is finished.

Thanks

Hi Everybody,

since me and some of you needed a way to directly jump to a page,
I wrote a new method called directGotoPage, and here is the code:

public function directGotoPage (page:*, cancelable:Boolean=true):void {

page = this.getPageIndex(page, true);
if (page%2 != 1 && page != -1) page -= 1;

// return if we’re already at the specified Page:
if (this._currentPage == page){
return;
}

// set target index and start pageflip:
this.autoFlipIndex = page;
this.autoFlipCancelable = cancelable;

/*
set _currentPage before / after the page we want to get to,
according to currentPage position
*/
var prePage:int = (this._currentPage < page)
? page -2
: page +2;

this._currentPage = prePage;

if (!this.autoFlipActive){
this.autoFlipActive = true;
this.startPageFlip();
}
}

Many people are asking for a goToPage(number) without flipping. Here’s my code :

public function gotoPageWithoutFlip (page:*): void
{
page = this.getPageIndex(page, true);
if (page%2 != 1 && page != -1) page -= 1;
if (this._currentPage == page)
{
return;
}
this._currentPage = page;
this.refreshViewStacks();
}

I’ve just put this in the book.as file, just after the gotoPage() method.
It seems to work perfectly.
Enjoy

quote from Thomas:

Many people are asking for a goToPage(number) without flipping. Here’s my code :
…

Great Tip!
Here is another method, for FAST fliping

public function gotoPageFast(page:*):void {
page = this.getPageIndex(page, true);
if (page%2 != 1 && page != -1) page -= 1;
if (this._currentPage == page)
{
return;
}
if (this._currentPage<page) {
if (page-2>2)
this.gotoPageWithoutFlip(page-2);
} else {
if (page+2<pages.length)
this.gotoPageWithoutFlip(page+2);
}
gotoPage(page);
}

Hi,

I was wondering if there is a way to disable the glossy effect when flipping pages. When flipping gapes, there is a glossy effect to the page (like flipping a magazine page) – I’d like to remove it…

Is there a way to do this?

Thanks!

Thank you for this wonderful Flex component. Up until three days ago I was building all my Action Script 3 components in Flash CS3. I needed a page flip effect but all the Flash based ones are Action Script 2. This was the push I needed to start using Flex. Wow! Have I been missing out. If I can figure out how to implement SWFAddress or URLKit so that pages can be bokmarked it will be a happy new year. Any suggestions?
Thanks again.

Hi,
As I stated in my previous post I’m new to Flex. I’m interested in placing items under the book that would be visible when the book is closed. Would I use something like addChildAt (0) or maby
. Is there a way to have myObject be under myBook without placing it there dynamically?
Thank you

I don’t know if its exactly a bug but….

I’ve tried to rotate the Book component adding the “rotation” attribute to the main frame. The result is that the pages are rotated correctly but all the flex stuff (UI components as TextAreas, Buttons…) are displayed only when the page is grabbed, otherwise it disappears.

I hope that there is an easy way to fix that and I’ll try to give you some kind of solution but I must study the code for that.

Thanks a lot for the component by the way.

I appreciate you sharing the flex book component. I’ve been playing around with Ely’s Flexbook component, and really prefer your version since it allows me to use the creationPolicy properties of the containers within the book (which I cannot do with the other component without substantial modification).

One thing that I would like to see (is it easy to implement?) is a property setting that allows me to setup a container for a full spread (one container to hold both left and right pages). Any thoughts for ways to implement this without major code rewrite?

@Sefi:

quote from Sefi:

I was wondering if there is a way to disable the glossy effect when flipping pages. When flipping gapes, there is a glossy effect to the page (like flipping a magazine page) – I’d like to remove it…

Hey Sefi, the glossy effect is present in two ways:

a) The first is on a Shape instance (stored in the protected render-property of the PageManager-class) on which the Pages their bitmapdata is drawn during pageflips. Hereafter the gradients (the ‘glossy’ effects) are drawn on top of the bitmapdata from the Page-instances.
The gradients are drawn by methods from the Gradients-class, so if you cancel calls to this method (by putting a return-statement on the first line of the method) you should be safe as far as this part goes. Alternatively you could comment out any calls to the methods from the Gradients-class.

b) When no pageflip is active the glossy effect is achieved through a gradient drawn on a Shape-instance in each of the two Page-instances in question (accessible through a protected property called _shape). This gradient is also drawn through methods from the Gradients-class, but I guess you could set the Shape-instance its visible-property to false to be safe.

@Greg:

quote from Greg:

If I can figure out how to implement SWFAddress or URLKit so that pages can be bokmarked it will be a happy new year. Any suggestions?

Hey Greg, this is not specific to the Book component, I sent you an email which might help you out.

@Omar:

quote from Omar:

I’ve tried to rotate the Book component adding the “rotation” attribute to the main frame. The result is that the pages are rotated correctly but all the flex stuff (UI components as TextAreas, Buttons…) are displayed only when the page is grabbed, otherwise it disappears.

This most probably is some kind of bug (even though I’m not sure if it’s caused by my component or the Flex framework itself). I’ll try to look into it as soon as possible, thanks for pointing out.

@David:

quote from David:

One thing that I would like to see (is it easy to implement?) is a property setting that allows me to setup a container for a full spread (one container to hold both left and right pages).

Thanks. Actually a centerfold-feature is something alot of people have been asking for. Unfortunately it will most probably involve a large rewrite/restructure of the original code, right now I can’t really say when I will have the time to start working on it. Keep your eye on my blog and I’ll keep everyone posted.

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

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!

@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

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?….

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:

quote from Ruben:

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>:

quote from Ruben:

<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!

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

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

@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;
}
}

@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

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

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

Thanks,
Kevin.

Dear sir madam,

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

Many thanks

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!

@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.

quote from CBass:

@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

Wonderful effect.

Greetings

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">

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

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

@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;
}

@juris

complete condition:

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

@juris

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

@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;
}

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.

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.

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

@Davi Costa:

quote from 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:

quote from 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.

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.

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

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

@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..

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

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..

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

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

Hey Sefi,

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

quote from George:

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..

quote from Ruben:

Hey Sefi,

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

quote from George:

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

Realy great work!
Thanks!

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.

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

@Sefi:

quote from 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.

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?

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

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?

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?

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.

I mean that how to modify it by actionscript.

@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

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

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.:)

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

Thanks.

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

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

@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

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)

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

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

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

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)”

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?

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

I got it. Sorry for interruption.

Greetings Thorsten

@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..

quote from Michael:

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?

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}”>

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?

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

quote from Ruben:

@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..

quote from Michael:

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.

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?

quote from Michael:

quote from Ruben:

@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..

quote from Michael:

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.

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…

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

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

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

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

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

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

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

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.

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

Regards
Jon

great work

is amazing is like the book in flash really but this have more

transparency effect is really nice

I was wondering, is any Zoom in the making?
This is a pretty awesome component, the only thing missing is being able to zoom in.
I print large magazines, and wanting to show them online in the archive requires ability to zoom in to see the details.

If its trivial, could someone let me know?
pmoghaddam@gmail.com

Thank you

it is a nice code for understanding book component in flex
thank you for this help.
how can i download the assets folder from this plz reply

Rubin or anyone, must an image be embeded. It seems to break if the images are not embeded. Or is this just false, an i am missing something else? Ultimately, i would like to load an xml that has the paths to images for loading to Pages

Hello CK
I’m refering to your post on May 20th about importing XML file.
Could you explain your method to load an XML file ?

Could you post your code ?

Thanks a lot

@Fedlarm:

quote from Fedlarm:

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..

I am of Book having some performance problems, although I have not yet looked into it, it of course is something that I will try to take care of in the future.

@Michael: Thanks for that info, it’s been included in the tasklist and I’ll look into the bugs you mentioned.

@Adam:

quote from Adam:

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.

Okay, here’s a very likely explanation: the Book component works with Canvas instances (Page is a subclass of Canvas), that are swapped so that the right pages are being displayed.

When a page is turned however, a snapshot is taken of that particular Canvas, and the snapshot is (effectively onenterframe) processed through an image-panipulation that constructs the visual representation of the folded page. The manipulated snapshot is then drawn upon a Bitmap that is positioned on top of the flipped page.

The problem you’re having is most probably because the Bitmap is scaled, which might cause the somewhat abnormal rasterizing that you’re seeing.

In the future functionality will probably be implemented that actually crops/expands the Bitmap, instead of resizing it. Do note that I’m not sure if this will be anywhere in the next few months or even this year, things with school (mostly graduation) have been really busy, and I am really keen on maintaining my social life too..

@reon:

quote from reon:

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?

You will probably need to do the animation in two parts, yes. I guess you could try to synchronize the two animations with a LocalConnection or Events dispatched by both movies, or something like it.

Note that at this point there is no functionality that allows you to have containers that span over the width of two pages (centerfolds or spreadpages as some people call them), it’s also not very likely that this will be implemented in the near future as it is very hard to do so within the current base-structure of the Book component.

@Tom: You can indeed access methods inside of content loaded through the Loader class, but that’s something more related to the general topic of Actionscript3.0 than it is related to the Book component itself, so you’re going to have to work that one out without my help..

@CK:

quote from CK:

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).

I’m not sure I understand what you are proposing, could you try to clarify your idea?

@insomnia: The Book component is a component that is meant to be used in Adobe Flex projects (http://www.adobe.com/go/flex), it cannot be used in Flash (or Actionscript-only) projects, sorry.

@Tino: Thanks very much for the kind words, I really appreciate it. As for your problem, please read my reply to Adam’s comment and see if it helps you out..

@Francesco: Please follow the link on the words “Creative Commons” in the first alinea of this blogpost.

@Arnold:

quote from Arnold Young:

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?

Hmm, I’m afraid not, centerfolds/spreadpages are still not an implemented functionality of the Book component.

@Jon: Yes it can, see the link to the creativecommons-site in the first alinea of this blog-post.

@Marco: Thank you!

@Payam: There is no zoom-functionality in the making, that’s something for you to implement. You don’t actually expect me to build you your complete product for free, do you?

@tausif: Thanks! The assets-folder is actually included in the source.

@mlecho: Could you be a bit more specific, how exactly does it ‘break’?

I’m working on a viewer that should show all SWFs as pages that are in a specified folder.
These SWFs have unified names: p1.swf … pXX.swf, and I know how much pages will be there.
How can I load them by ActionScript (running from 1 to the number of pages through the folder)?

These SWFs will have buttons that call a function that is in the viewer. It’s allways the same function with different parameters.
How to call this function (with parameters)?

In my viewer I load the pages as external SWFs.
When I jump to a page – i.g. 100 pages from the page the book shows now – the book will stay empty.

Am I doing something wrong?

Ruben,

Thanks for a wonderful component. If I can suggest an improvement it would be with the cpu load & memory requirements for more than 30+ pages. I have had some issues with the load times and the amount of memory being used by the application. I have spent a lot of time modifying your code to try to overcome this issue but alas, I am stumped. Congrats on Graduation and everything else.

Thanks again,

Ross

@Benedikt: Your question doesn’t specifically have to do with the Book component, but you’ll probably want to use the SWFLoader or Image class to load your SWF-files.

@Ross: Thanks for the suggestion, memory-improvement is indeed high on the list for improvements upon the Book beta

Hello

Did someone know how can I use an XML file to create a dynamic flexbook?

Thanks

Does anybody can dynamically resize this component uzin width=”100%” height=”80%”, for example?

Thanks for such a great component and making it available to every one.

FLEX rocks.

Great component! Documentation and examples have an outstanding quality. When every component had this kind of documentation Flex would be a lot easier to learn.

If anyone ever wants an tiling background in combination with this component please use the component of Flexcoders, since the component of Renaun won’t work somehow…

Hello sir
it is a great code for book component.
here i have to implement dynamic page
adding in book and images are coming from
database which i have to maintain on those pages
will u plz help me any idea
Thank You

Hello Tausif Diwan , i did something like this working with 2 page tags in my MXML content and the others loading dynamically in tag.

Hello Leonel, could you give me help for what you’ve done with dynamic pages ? I want to create my own page dynamically by drag and dropping elements into pages in order users will be able to edit their own book but impossible to drag and drop intro a canvas which is child of a page…
Well , congratulations for the book component
Here my mail if you want to help me Leonel : sted62@hotmail.com

Thanks !

Hi

You’re book demo is sweet! The features are awesome particularly hard covers are a really nice touch.

Great stuff!

I wish it was available for Flash I’m not up to speed with the Flex approach yet – I’m only a student.

How can I create book dynamically in AS3 and pages in loop (for)? Can anyone help me?

Hi Great Component!

But the book hangs when navigating from the last page to the second last page (14 pages total).

Error only ccoures when hardCover=”false”. With hardCover=”true” navigating works fine. But there are some issues with the shadows :/

Link to screenshot bug:

http://www.abload.de/image.php?img=flex68u.jpg

Is there a way to remove the EnterFrame Event once the flex book is removed from the screen? Thanks in advance!

quote from tf:

How can I create book dynamically in AS3 and pages in loop (for)? Can anyone help me?

It is difficult to create the book dynamically because of the time of load of all the image.
I found a solution to create all the book dynamically and my mxml file have only ten lines but my code is not complete

this code can help you

import mx.controls.Image;

private function init():void {
for(i=0;i<10;i++) createPage(i);
}

private function creerPages(i:int):void{
var im:Image = new Image();
var p:Page = new Page();
im.source=”image”+i+”.jpg”;
p.addChild(im);
myBook.addChild(p);
}

Thank Ruben for your good work

Dean

Please can you try my work

http://book.nosarts.com

Dean

Hey Ruben,

I love how you have commented on every line of the code making it very very helpful for learning!

Right now I am using the FlexBook component on QuietlyScheming.com because it is a little more user (not developer) friendly due to it catching mouse clicks mid page turn. Is there an easy way to enable this on your version?

Example:
Click dragging a page and then trying to drag the next page (or currently flipping page) gives no response, and feels very unnatural / confusing to the user.

In one of the QS examples: http://demo.quietlyscheming.com/book/FullPage.html
You can click drag as fast as you can and you always feel “in control” of the book.

I just wish I could use yours because I really like how you defined pages in the mxml. One page can be an image, and another one have a button on it easily. The QS one I liked to uses one itemrenderer that is a “load image from location” loader.

Thumbs up!

I can’t change the Book width and height through Scripting, and also if I put width value like “Application.application.height-80? this way direct in book component then also it is not working. Please reply

Can you help me, how change width and height of book component through Scripting. And also if I give book width or height like
” Math.round(Application.application.width-80) ” this way that is also not working. Pls give reply

Hi… Great job here…

Still, I have just this one question. How did you manage to control page flipping when the mouse pointer leaves stage?

Thanks

nice job man !

I’m using the flex book component in a fullscreen webapplication.
It seems however that, when I put anything (text or buttons or…) on a left page, the browser completely crashes (both IE and firefox).
When I put data on the right page, it works fine.
I’ve been trying to debug for hours now… any clues?

(if I don’t run in fullscreen there is no problem. This only occurs in full screen mode)

quote from esurior:

It seems however that, when I put anything (text or buttons or…) on a left page, the browser completely crashes (both IE and firefox).

I was able to find the line of code which causes this issue but don’t know how to solve it (yet).
On line 548 in PageManager.as there is the method refreshViewStacks().
The line which says:

this.pageL.selectedChild = Page(this._pages.getItemAt(this._currentPage));

is causing the crash for some reason.

@Dean – progs.fr

quote from progs.fr:

Please can you try my work

http://book.nosarts.com

Dean

Hello Dean,
very good job !!!!!!!!
- Does your book preload all the page or page are load when you turn it?
- How have tou make the ‘zoom effect’?

Could you upload your source please?

Thanks

//Hello Dean,
//very good job !!!!!!!!

Thank ben but it’s nothing near of your work

//Does your book preload all the page or page are load when you turn it?

The book preload the page at the begining and stop everytime an event is called(like turn), and when the event is finish, the book continue to preload (Otherwise it’s bug…), it was very difficult to program this, at the begining you have to wait few second but when all the page are loaded the book work fast.

//How have tou make the ‘zoom effect’?
I create the zoom with actionscript
an the movement of the book after some calculation
this is the code for the zoom (I traduced some word for comprehension…sorry for my fautes…)

////////////////////////////////////////////////

//add to the mxml file

//bookAs.as

import mx.effects.Zoom;

private var screenWidth:int=Capabilities.screenResolutionX;
private var screenHeight:int=Capabilities.screenResolutionY;

private var posxBook:int;
private var posyBook:int;
private var bookWidth:int;
private var bookHeight:int;

private var posMaxFullScreenX:int;
private var posMaxFullScreenY:int;
private var zoomScale:Number =2;

private function init():void {
bookHeight= myBook.height;
bookWidth=myBook.width;

posxBook=(screenWidth – bookWidth)/2;
posyBook=(screenHeight – bookHeight)/2;

zoomer1 = new Zoom();
zoomer1.target=myBook;
posMaxFullScreenX = (bookWidth*zoomScale)-screenWidth +20;
posMaxFullScreenY = (bookHeight*zoomScale)-screenHeight +20;
zoomer1.zoomWidthFrom=1;
zoomer1.zoomWidthTo=zoomScale;
zoomer1.zoomHeightFrom=1;
zoomer1.zoomHeightTo=zoomScale;

myBook.addEventListener(MouseEvent.MOUSE_MOVE, moving);

}
private function zoomer (evt:Event=null):void{
if (myBook.scaleX==1){
zoomer1.play();
myBook.hover=false;
myBook.flipOnClick=false;
}else{
myBook.scaleX=1;
myBook.scaleY=1;
myBook.hover=true;
myBook.flipOnClick=true;
myBook.x=posxBook;
myBook.y=posyBook;
}
}
private function moving(evt:MouseEvent=null):void{

var xx:int;
var yy:int;
if(myBook.scaleX!=1){
xx=-(bookWidth-(screenWidth/2))-evt.stageX + (screenWidth/2);
yy=-(bookHeight-(screenHeight/2))-evt.stageY +(screenHeight/2);
if(xx>0) xx=0;
if(xx0) yy=0;
if(yy<-posMaxFullScreenY) yy=-posMaxFullScreenY;

myBook.x=xx;
myBook.y=yy;
}
}
/////////////////////////////////////
Could you upload your source please?

Yes I can i just have to clean my code because it’s not very beautiful…
99% of the code is in actionscript

++

I also stop the preload when the zoom effect is calling
Dean

http://book.nosarts.com
http://www.progs.fr
dean@progs.fr

quote from progs.fr:

I also stop the preload when the zoom effect is calling
Dean

http://book.nosarts.com
http://www.progs.fr
dean@progs.fr

Thanks a lot Dean

Download?

quote from BeN:

Thanks a lot Dean

Please wait, I have a problème with the resolution of the book, I need a better quality for the images before to send the source.

Dean

quote from progs.fr:

Please can you try my work

http://book.nosarts.com

Dean

Hello Dean. Your website works nicely. Did you have to change anything in the code to make the fullscreen work? I wasn’t able to fix the crashing here, so my application now goes semi-fullscreen by using some javascript… but that’s not nearly as nice as a real full screen mode.
Even when I download the standard book component example it crashes when I make it full screen (right click > fullscreen)… but yours does the job!

Hello esurior

quote from esurior:

Did you have to change anything in the code to make the fullscreen work?

A way to do a fullscreen function

Add this In your ms:Script
import flash.display.StageDisplayState;
import mx.managers.SystemManager;

[Bindable]
private var dispState:String;

private function init():void {
/* Set up full screen handler. */
systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
dispState = systemManager.stage.displayState;
}

private function fullScreenHandler(evt:FullScreenEvent):void {
dispState = systemManager.stage.displayState + ” (fullScreen=” + evt.fullScreen.toString() + “)”;
if (evt.fullScreen) {
/* Do something specific here if we switched to full screen mode. */
} else {
/* Do something specific here if we switched to normal mode. */
}
}

private function toggleFullScreen():void {
try {
switch (systemManager.stage.displayState) {
case StageDisplayState.FULL_SCREEN:
/* If already in full screen mode, switch to normal mode. */
systemManager.stage.displayState = StageDisplayState.NORMAL;
break;
default:
/* If not in full screen mode, switch to full screen mode. */
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
break;
}
} catch (err:SecurityError) {
// ignore
}
}

Add into your ms:Application applicationComplete=”init()”

mx:Label text=”width={Application.application.width}”
mx:Label text=”height={Application.application.height}”
mx:Label text=”displayState={dispState}”

mx:Button label=”Toggle fullscreen” click=”toggleFullScreen()”

If you want it to work, you have to modify your HTML file in bin-debug :
1. Add this : “allowFullScreen”, “true”
in AC_FL_RunContent

2. Add this : param name=”allowFullScreen” value=”true” (tagged)
into the tag OBJECT

3. allowFullScreen=”true” (tagged)
into the tag EMBED

Sorry for my poor english

BeN

source : http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/

@esurior

Hello esurior

“Did you have to change anything in the code to make the fullscreen work?”

A good way to do this :

source : http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/

Note :
To remove scrollbars when you use Dean’s ZoomFunction
>mx:Application … … horizontalScrollPolicy=”off” verticalScrollPolicy=”off” <

Sorry… sic

<mx:Application … … horizontalScrollPolicy=”off” verticalScrollPolicy=”off” >

)

Hi
this is a little code for the dynamic image load:

http://www.progs.fr/exemple/08101201/code/index.html
http://www.progs.fr/?q=node/124

//////////////////////////////////////////////

/////////////////////////////////////////
//dean.as

import com.rubenswieringa.book.*;
import mx.controls.Image;

[Bindable] private var myBook:Book;
[Bindable] private var im1:Image;

private function init():void{
var p:Page = new Page();
im1 = new Image();
im1.source=”im0.JPG”;
im1.addEventListener(Event.COMPLETE,suite);
p.addChild(im1);
}
private function suite(e:Event):void{

myBook = new Book();
myBook.useHandCursor=true;
myBook.buttonMode=true;
myBook.openAt=0;
myBook.autoFlipDuration=600;
myBook.easing=0,7;
myBook.regionSize=200;
myBook.sideFlip=true;//pour pouvoir tourner la page en vertical
myBook.hardCover=true;
myBook.snap=false;
myBook.flipOnClick=true;
myBook.scaleX=1;
myBook.scaleY=1;
myBook.width=(im1.contentWidth)*2;
myBook.height=im1.contentHeight;

for(var i:int=0;i<8;i++) creerPages(i);
addChild(myBook);

}
private function creerPages(i:int):void{
var p:Page = new Page();
var im:Image = new Image();

im.source=”im”+i+”.JPG”;
p.addChild(im);
myBook.addChild(p);
}

@ Dean
Salut Dean,
je travaille sur une version qui est gérée par un simple fichier XML qui sert de fichier de paramétrage pour créer le livre, les pages (et leur contenu), les boutons…

Si ça t’intéresse, je peux poster mes sources…

ben.tissot@neuf.fr

quote from BeN:

@ Dean
Salut Dean,
je travaille sur une version qui est gérée par un simple fichier XML qui sert de fichier de paramétrage pour créer le livre, les pages (et leur contenu), les boutons…

Si ça t’intéresse, je peux poster mes sources…

ben.tissot@neuf.fr

Salut

Un autre ben!, je suis aussi sur le xml…, mais pas pour la config du book, juste pour récupérer les infos des images à charger, c’est assez interessant pour cela (on évite les erreurs de nommage)
dean@progs.fr

someone interest to use this book with AIR ? (easy to adapt )

Bonjour Ben(s)

Je recherche une solution avec liste des pages à charger extérieure et le XML semble une bonne piste.
Ben pourrait-il publier le code de Ben sur son site ou Ruben sur le sien ?
Merci d’avance.

quote from Gwinru:

Bonjour Ben(s)

Je recherche une solution avec liste des pages à charger extérieure et le XML semble une bonne piste.
Ben pourrait-il publier le code de Ben sur son site ou Ruben sur le sien ?
Merci d’avance.

Salut, en fait il n’y a qu’un BeN… j’ai posté des message dans un anglais approximatif, puis d’autres dans la langue de Molière…

Pour ton pb : je vais publier les sources mais sur ce site cela me parait difficile car certains caractères ne passent pas… il faut tout encoder…

great app man!!!! i think this is the first demo that really works!!! chears:>

trying to get this to work, but i’m stuck! any help/documentation for a beginner to flex? i need to dynamically create pages based off of data from a DB…any help or direction would be greatly appreciated!

quote from mike:

i need to dynamically create pages based off of data from a DB…any help or direction would be greatly appreciated!

Mike, you need first to connect to your database (mysql?), the simpliest
is to use the URLRequest et URLLoader method.

Hello, how would I go about creating a dynamic flexbook? I have spent a lot of time and I still cant figure out how to have the pages load from an XML file.

I see where you said you needed to connect to the DB using a URL loader.

Are there any resources out there? Can pages be defined in the XML file?

Hee Rubens, helemaal geniaal joh. Wilde je even een compliment geven groetjes, Gideon

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?

Hi…
You all did a great job. this is the best flip you can find.
i have some questions… i tried to modify the gradient file
for adding transparent pages with different shapes.
i want to simulate an old book which has not so smoth edges…
is there a way to just add a filter to make the page darker (flip gradient)?

Someone can help me building this book in flash, I need it, actually i have an as2 version on http://www.elniuton.com.

I was thinking to migrate to as3.

if someone already do this… please share how to.

Hi I am having a performance problem when adding 100 pages to the book. The lag is incredible. I tested to make sure it was not the bulk of image data by adding blank pages. I found another flexbook with the same problem and some commercial ones that don’t. Is this a know problem or am I doing something wrong? Any help will be great, thanks.

I have a community magazine to be converted into an online flip book with clickable links and maps about 80 pages.

I have been working with the simple demo. Very nice page flip book.

Someone below asked if pages can be flipped to directly (from page 2 to page 18). I like the page flip animation, but I would like to speed it up. I have tried looking at autoFlipDuration, setting values at 600, 100, 10, and 1. It looks like it can only go so fast. Is there a way to speed it up using a setting in the mxml or do I have to look at a class?

Possible bug: (Setup: I gave each page an id=”Page#”…Front cover is Page1, Back cover is Page10, etc) I put a link on the front cover to the back cover of the book and a link on the back cover to the front cover of the book. The link on the front cover works in flipping through all the pages until it reaches the back cover. The link on the back cover flips back one page and stops. It doesn’t make it all the way to the front cover. I put a link on Page3 to flip to Page7 and a link on Page7 to flip to Page3. Both of those links work fine. So the possible bug might be that a link on the Back cover of the book to flip to the Front cover doesn’t work.

I am having the same problem as Simon. I guess this is a problem concerning the amount of Pages (Canvas) that each require a lot of performance while laying out their content. I read similar comments here, is there already a solution to this? I tried to exchange the Canvas for a Sprite or so, but stumbled over immense problems while doing so.

Hi !

first of all congratulations this is a really nice job !

I’m having an issue with videos, and was wondering if sometimes you would know something about it…?
When a video is playing and we roll over a corner page, the video stops playing (which is already strange), but not the sound.

any idea ?

have a nice day !

private function onCreationComplete() : void
{
xmlloader.addEventListener( ResultEvent.RESULT, initBook );
xmlloader.send();
}

protected function initBook( e : ResultEvent ) : void
{
var result : XML = XML( e.result );

introtext.text = result.config.introtext.toString();

var book : book = new Book();

book.useHandCursor=true;
book.buttonMode=true;
book.openAt=0;
book.autoFlipDuration=600;
book.easing=0,7;
book.regionSize=200;
book.sideFlip=true;
book.hardCover=false;
book.snap=false;
book.flipOnClick=true;
book.scaleX=1;
book.scaleY=1;
book.width=800;
book.height=530;

for each( var _image : XML in result.images.image )
{
var page : Page = new Page();
var image : Image = new Image();

image.source = _image.path;

page.addChild( image );
book.addChild( page );
}

addChild( book );
}

Can anybody please help regarding what are the codes to be placed and where the codes are to be placed regarding the autoflip of the ebook when it is left to idle, meaning that when the pages of the ebook finish flipping they reverse back to 1st page again in simple words i want a loop 1stpage to last page, then last page to 1st page and keeps on continuing. And when I start to flip the book, I will be allowed to do so. When the book is left to idle, it will flip automatically again.

Hi Simon,
do you have a performance imporvement? I want to use the component with more the 100 sites too and I want to know if it is what I am looking for.

Great job!
Have you a final version?
Sell it man!
You deserve make money!
Certainlly I’ll buy…

quote from Simon Ardrey:

Hi I am having a performance problem when adding 100 pages to the book. The lag is incredible. I tested to make sure it was not the bulk of image data by adding blank pages. I found another flexbook with the same problem and some commercial ones that don’t. Is this a know problem or am I doing something wrong? Any help will be great, thanks.

I have a community magazine to be converted into an online flip book with clickable links and maps about 80 pages.

Hey my email is coolcourt@gmail.com email me

Rotation seems to be an issue. I also am having some trouble with some nasty looking image smoothing. my pages only contain one image child, but anytime the page is static, its very jagged, not sure if this is just the image component, flexbook, or the combo just yet.

What is the best way to add / remove / change / update pages dynamically during run-time?

Hello, right now I am dynamically loading all my pages. The problem is my pages are loading all the left ones first and then it loads the right ones. Say I have 200 pages, and each page is 1mb. This will take a while for all the left pages to load before loading the right pages. Is there anyway to tell it to load the pages in order? I do not know if this is a flex thing or something hard coded into the script. Thanks for your help. Happy New Years!

HI:

I have just downloaded the flex book source and am attempting to adapt the simple demo source to add a few .sfw pages of mine.
I have been away from code for a number of years so please excuse my ignorance.

Here is the modified simple.mxml:

When I attempt to compile, I get:

G:\Lakes_Region_Spirit\TheMagazine\MarketingDemo\FLEX_SimpleDemo>mxmlc simple.mx
ml
Loading configuration file C:\Program Files\FLEXSDK\frameworks\flex-config.xml
G:\Lakes_Region_Spirit\TheMagazine\MarketingDemo\FLEX_SimpleDemo\simple.mxml(14)
: Error: Unable to create source simple__embed_mxml_assets_advertdemoleft_swf_18
4785095.

G:\Lakes_Region_Spirit\TheMagazine\MarketingDemo\FLEX_SimpleDemo\simple.mxml(17)
: Error: Unable to create source simple__embed_mxml_assets_advertdemoright_swf_1
037795143.

Help?

Sorry, here is the content of simple.mxml for the comment below…

OK. My previous posts were using SDK 3, I downloaded SDK2.0 and all of the demos compile and run OK. When I attempt to embed an SWF file of mine I still get the unable to create source error message from mxmlc.

Is there any help out there for this???

Nice work guys! Really well done.

I cant seem to get this working in flex 3. It tells me “Problem finding external stylesheet: assets/style/book.css”

Amazing demos! Thanks for publishing the source.

Hello,

we have had some problems with flash 10 player when having te pages to be swf pages instead of jpg pages. Would you please have a look at :
http://www.isiflip.com/ws_ebook/ISIFLIP/carte2voeux/flip/carte2voeux_flip.htm
that does not crash

and:
http://www.monyoga.com/tests_flip/
that does crash the browser

Thanks a lot,

Philippe

Hi,
I am a bit of a noob at flex and fro some reason I keep getting linking errors.
please if any one could help let me know what I need to do.

Severity and Description Path Resource Location Creation Time Id
A file found in a source-path must have the same package structure ”, as the definition’s package, ‘com.rubenswieringa.book’. rueben/src Book.as Unknown 1232553267711 161

So , it would be nice if you could add a “Zoom” feature , that zooms the content of the page if the information is small , unreadable or in need for more detail!!

Anyway , good job , i really like what you have done with this , the animation and everything!! Im working on my own as we speak…

Cheers
Stefan

Oh , and i forgot

Thx for making it open source , for us people to learn from it

Cheers
Stefan

Hi!

There is something wrong with source downloading page. Left frame is not showing…

Can somebody tell me what’s wrong?

Thanks,
Toni

Hi Ruben!
When will you fix problem with gradient of dynamically loaded pages?

Hey,

This is a very nice component. I am now trying to make a spellbook concept blog.

I am troubled with an issue i tried to read data’s about pages from XML and generated pages. Added them to book and i can see them. While i am flipping the page everything looks normal. How ever when flip ends, page looks somewhat brighter and there is no shading..

Hi,

My using this example i developed a sample example. Now i want to do advance like zooming flex book with sliders and page flip should be in curves is it possible to find any demo code.. please any one help me..

hi, it’s cool your component…

how can i get the book in vertical orientation like a calendar…?

Can you provide a link to download the demo?

Thanks! Looks cool

Has anyone successfully got the flex book printing. Can get our stuff in there, now we want to print it to PDF
Has anyone done this , how and was it good for you?
Thanks

Where can i download this component? I cudnt see any link.. let me know.. thnx

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

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..

how can book is zooming?

Hallo and thx for this book

i have two questions.

1. How can ich jump directly to a Page?
I use a book with 50 pages.
2. if i use prevPage(). There are Shadow Errors and i dont know why

thx a lot
david

Hi

Thanks for this great component.

All the best.

how if I want load a page from xml file ?

Hey rubens, Im really interested in the Flipbook you have created. I downloaded the source code but unfortunately I can’t get the whole thing to work.
What i get is an empty page.

I there any special procedure to do this?

quote from Rb:

I downloaded the source code but unfortunately I can’t get the whole thing to work.
What i get is an empty page.

hey, the problem you’re having is probably that the original source-code (as packaged in the zip) was made with flexbuilder 2, if you’re using flexbuilder 3 (or 4) the files in the zip need to be placed in the folder called ’src’ in your project-folder..

Thank you Ruben, finally I can see something in my browser.

I have downloaded the source of simple book demo.I need the code for normal pages which are not transparent.Can you please help me out in this?

Hi Ruben,

I got a project to do which is about creating a personal diary using flex.
I have some queries regarding this:

1.I want to enter the contents in the diary dynamically on the browser itself and while entering it should be in the editing mode and after finishing,the text should be in the transparent mode(for e.g.like a text component) .But, i am not getting this using components like textarea,textinput,text.

2.After opening a particular day’s page, it should show the events of that day.

I am using flex builder 3 to do this.But,i am not able to do this.can u please help me as quickly as possible…

Hi

I am using your flip book but the below code is not complete. Can yu post full code to flip big book.

Atul

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

Hi,

Is there a way we can change the width and height of the book, once it rendered. My requirement is to increase the size of the book in fullscreen mode.

Thanks,
Narayana. M

i am trying to resize and zoom|pan the ruben flipbook but not getting any success till yet can any body please help me in this regard

Hey Guys , Currently i am trying to use an image where its source is from a server , i.e. “http://localhost/….” however , the image cannot be displayed. I was wondering you have any ideas on this . Thank you for your time . Hope for an reply soon!

Excellent site, keep up the good work

hey great component works great, I’m trying to add a videoplayer to one of the pages but doesnt seem to like it. the video displays an plays but i can’t turn the page.

Hi! I am working on a project and trying to use your flexbook component. There seems to be a weird behaviour for the nextPage and gotoPage methods. They only seem to work if you have your mouse over the book. I have noticed this while trying to make the book switch to the second page upon initialization. Is it a bug? Or is it a feature? Is there anyway to have the book render open?

Hi i tried to use the simple demo in air application but it is not working

can u plzz help me!!!

when i placed the code in air application

i.e

the window opened is jus blank

Hey Guys,

@ Ruben, really great work. Respect !

I create all the pages dynamically.
When I use transparent pages I get a some kind of a black border around the book.

Any Ideas how to get rid of it?

Thanks guys.

How to assign an array of pages to display the page, pictures, wrapped in an array can be specified there Canvas do

Hi everyone,
How i can go quickly to page without flipping?

Hi there, first of all thanks for this amazing component, it’s saving my life!

I think I just need a little help tho.
I’ve been trying to load pages from an external XML (like many people have tried to do above), and I can’t figure out how to make it work.

What I’m doing is simply this:

// I load the xml

// assign the result to an xmllistcollection

//add the book and the dynamic pages

but I get a really odd error

RangeError: Error #2006: L’indice fornito è fuori intervallo.
at flash.display::DisplayObjectContainer/getChildAt()
at mx.core::Container/getChildAt()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\Container.as:2334]

saying that the index is out of interval. (That doesn’t happen if I load those pages in the asynchronous way).

Any ideas?

Hi Ruben, thanks for sharing this component. I modified it to act more like a flex list control for my uses. So now I can just instantiate an empty book. Then assign custom item-renderers for pages, and a source Array Collection and the book is dynamically created. You can change the Array Collection and the book will update too.

I think I fixed that RangeError too. If you’re interested in the code let me know. I figured I’d contribute back.

Thanks!
Eric

Hi Eric, is there any way that I could get your version? I’d really need that.. I’m trying to remove and add pages dynamically, but nothing works (I’m still new with flex, this would be my first real project).

if you can send me the source that’s my email a.marcone (at) dromedian.com , it would be much appreciated!!!

For the people using Flash Builder / Flex 4, you’re better off using THIS version of Ruben, then Ely’s version.

I wasted a lot of time trying to edit Ely’s version of the Flipbook component. Finally got it working, only to completely break again with the Beta 2 of Flash Builder… ARGH!!

But Ruben Wieringa’s version of Flipbook works with Flash Builder Beta 2 “out of the box!” Just some minor namespace-issues with CSS, that’s it!
And as far as I can tell, with smoother “paging” as well.

Thanks anyway Ely, I’ve had a lot of fun using your Flipbook. Hopefully you’ll find the joy & time to create an updated version of your FlipBook!

quote from Eric:

Hi Ruben, thanks for sharing this component.

I modified it to act more like a flex list control for my uses.

So now I can just instantiate an empty book.

Then assign custom item-renderers for pages, and a source Array Collection and the book is dynamically created.

You can change the Array Collection and the book will update too.

I think I fixed that RangeError too.

If you’re interested in the code let me know.

I figured I’d contribute back.

Thanks!
Eric

Ruben, sounds what I created with Ely’s Flipbook, but now got completely broke! Can you send me your adjustments to this FlipBook component?
oscar (at) axuz (dot) nl
Would be greatly appreciated!

Any plans for adding a zoom-in/out feature?

Hi,
I need to create my book dynamically, but i don’t. Can somebody help me? My code is this:

var book:Book = new Book();
book.x = 10;
book.y = 10;
book.width = 800;
book.height = 500;
book.openAt = 1;

addChild(book);

var page:Page = new Page();
var image:Image = new Image;
image.source = “swf/out0001.swf”;

page.addChild(image);
book.addChildAt(page,0);

The error messages:
RangeError: Error #2006: The supplied index is out of bounds.

TypeError: Error #1010: A term is undefined and has no properties.
at com.rubenswieringa.book::Book/isPageCornerHit()[C:\munka1Fl\pdf_converter\PDFConverter\src\com\rubenswieringa\book\Book.as:1271]
at com.rubenswieringa.book::Book/evaluateHover()[C:\munka1Fl\pdf_converter\PDFConverter\src\com\rubenswieringa\book\Book.as:847]

What’s wrong?

Please help me!

Hello, i would like play an loading swf in the book when the page appears but i dont know how to do this ;(

i have start with that :

myBook.addEventListener(BookEvent.PAGE_TURNED, onPageTurn);

private function onPageTurn (event:BookEvent):void {

if(myBook.currentPage == 1){

//i want do the current page gotoAndPlay(2);

}

Ty for responses

}

Ruben’s book doesn’t properly clean up it’s eventListeners!
In my case, I want to dynamically create & remove FlipBooks, but if you have debugging on, you can tell that if you’ve been ‘Flipping’ a book, and remove that book half-way, the evenListeners remain and you’re stuck in an error-loop where the evenlistener wants to flip a page that isn’t there when you move your mouse where that corner used to be.

ONE way to prevent that, is to set your FlipBook property [hover="false"]. This prevents the corner of a “soft page” to flip up. But kind’a kills the “Flipping” experience.

So this is how I’ve solved it:
In your book-component, add the following call in the “removedFromStage” event:
removedFromStage=”this.removePageFlipListener();”
This is how the beginning of your tag will look like:

Next, we’ll create the [removePageFlipListener]-function:

In [Book.as], add the following function (i added it under [public function book], at line 379.

public function removePageFlipListener():void{
trace(”removePageFlipListener called!”);
this.removeEventListener(MouseEvent.MOUSE_DOWN, this.startPageFlip);
this.removeEventListener(Event.ENTER_FRAME, this.dragPageCorner);
this.stage.removeEventListener(MouseEvent.MOUSE_UP, this.endPageFlip);
this.removeEventListener(Event.ENTER_FRAME, this.evaluateHover);
}

Voila!
As far as I know, all event-listeners are properly destroyed when you remove the book from stage.

Finally, has anyone managed to do the following?
– The book should be adapted to the window.
– A zoom button.
– Upload images from a xml.
– An index.

If anyone did, could you please help?
Thank you!

quote from Carlos:

I’ve found how to resize the book.
<mx:Application
resize="onResize()" …

scaleY?scaleY:scaleX);
}
]]>

quote from Carlos:

Finally, has anyone managed to do the following?
- The book should be adapted to the window.
- A zoom button.
- Upload images from a xml.
- An index.

If anyone did, could you please help?
Thank you!

I’ve found how to resize the book.

Dear Ruben,
Your task is mind blowing. its really awesome. I have just started doing some modifications in your code.. but stuck to understand how to get through it..

My requirement is.

I have one folder say – assets/img/sumeco (As per your code)

This folder has n number of files with name as 1.jpg,2.jpg and so on (Not known to me or anybody using this book)

I want to programmatically count the number of jpg’s in the folder and then ill iterate up to that value and add the pages respectively

Could you help me to get the number of jpg files in the directory..

Expecting for favourable reply

Regards
Zarrakh

Hey Ruben, amazing work here.

I was wondering if there’s a way to invoke the page dragging without using the mouse, like explicitly call it to flip to a certain target amount/point. I’m attempting to use other input methods than the mouse with this great package.

Super! I’ve got something I can use this with straight-off!

Hi,
first of all, great job. Really impressive.

Is that possible to do the same, but with only one page instead?

Thanks!
Henri

Really awesome…
I’m on waitung your next awesome project

Rubens

Thanks a lot for this really nice component.

I found a memory leak when you want to release the component while your app is running. I suggest adding the following:

StateManager:

public function unregister(item:UIComponent):void
{
var index:int = ArrayUtil.getItemIndex(item, this._items);

if (index == -1)
{
return;
}

this._items.splice( index, 1 );
this._states.splice( index, 1 );

item.removeEventListener(FlexEvent.CREATION_COMPLETE, this.updateState);
item.removeEventListener(FlexEvent.INITIALIZE, this.updateState);
item.removeEventListener(FlexEvent.PREINITIALIZE, this.updateState);
item.removeEventListener(FlexEvent.UPDATE_COMPLETE, this.updateState);
}

And PageManager:

public function release():void
{
StateManager.instance.unregister(this);
}

Latter might be more appropriate to actually add to the book.

Best
Stefan

Hello Ruben,
Greetings!

I am Amit from India. First of all I would really like to mention that I have become die hard fan of your work on flex book component. I liked the efforts done by you on the superb and effective work.

I have competed my graduation and thinking to start a small business in the interior designing field. To showcase my designs about the interior I would like to use this effect on my website. I am sure such impressive effects of flex would help me to build my profile and to attract customers towards my work.Please let me know if I can modify this code and use it for my website. Also let me know all the terms and conditions to use this work.

Thanks in advance,

With Regards,
Amit

Its great to have the BookEvents but for some reason when the book is initialized, and I flip the first time, the pageflipStarted Event doesn’t trigger. In fact, no events will trigger. It will do it once the book has been opened and closed again but not on the first time. Any ideas how to trigger the first flip? I have a movie on the 3rd page that I want to start playing once the page starts to flip the first time. As I said it works every time except the first.

Very very slick.

Is it possible to set the book and page height/width dimensions, perhaps to make the page wider than it is tall, as is not uncommon with children’s books? I didn’t see any public size property for the Book or Page objects.

There are standard “named” sizes:
http://en.wikipedia.org/wiki/Book_size#Table_of_formats_and_sizes

Hi! all ^^
I need your help.
What I’m going to do is loading pdf into page-flip.
I tried this by turning pdf into images, but then I can’t search.
Is there a solution??

thanks..^^

Ruben,

This is a great component. keep up the good work.

thanks

quote from goodsouls:

Hi! all ^^
I need your help.
What I’m going to do is loading pdf into page-flip.
I tried this by turning pdf into images, but then I can’t search.
Is there a solution??

thanks..^^

Use:http://www.swftools.org/
to convert PDF to SWF
and:than you can load swf and search trough it:
and TextSnapshot to read and search trugh the text

That’s a stunning app. Thanks.

Hola
estoy tratando de crear un libro con un número x de paginas.
necesito hacerlo desde el script.
El caso es que no me lo muestra. nose donde pueda estar mal. si alguien me puede ayudar.

mi codigo es el siguiente:

[Bindable]
private var myBook :Book = new Book();

private function onCreationComplete ():void {
var n:int;
n=1;
while(n<8)
{
var page : Page = new Page();
var image : Image = new Image();
image.source = "http://localhost/files/34387_16.jpg";
page.addChild( image );
myBook.addChild( page );
n=n+1;
}
}

Gracias de antemanoo!

Hi! Ruben
please! help me.

ejecuta pero en el browser no muestra nada sera por la version del Flex3. o algo mas me falta .

este es mi codigo :

.mystyle { BackgroundColor:#e2e9eb; }

<![CDATA[
import com.rubenswieringa.book.*;

import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;

[Bindable]
private var myids:ArrayCollection;
[Bindable]
private var myBook:Book = new Book();

private function onCreationComplete ():void {
var n:int;
n=1;
while(n

this is my code:

<![CDATA[
import com.rubenswieringa.book.*;
import mx.rpc.events.ResultEvent;
[Bindable]
private var myBook:Book = new Book();
private function onCreationComplete ():void {
var n:int; n=1;
while(n

Hi nice book!

I tried to put some video inside the book, and it works fine!

But I can’t figure out how to stop the video if you not are at the same place as the video!

Anyone who can help!?

Excellent work Ruben.

@Malte
Try to get the current page index with myBook.currentPage method. Compare the page indexes and you can control your video.

if (myBook.currentPage > yourVidPageIndex || myBook.currentPage < yourVidPageIndex)
{
netStream.pause();
// other tasks… blah blah blah;
}

hope it helps.

Hi,
I made 2 test flipbooks with 18 pages. One is with 18 jpgs, the other with 18 equivalent SWFs. They are all exports of the same Indesign doc. The one with the JPGs is running smoothly, but the one with SWFs is really slow. Is this a bug, or is this to be expected?
otherwise great work!
thanks
Ariel

Gostaria de saber como faço pra definir width e height dinâmico no Book, pois estou tentando usar as propriedades percentWidth e percentHeight e não esta dando certo, como faço e aonde inserir o código para tal funcionalidade?

Desde já agradeço

Hi! all
I need your help.
What I’m going to do is loading pdf into page-flip. Im unable to find out the solution.

Thanks

Hi! Ruben.
thanks! for your job! and help.
and your time.

how to export to pdf? please.
if between the libraries (api) have something inside.

Thanks for sharing this awesome work!

I wanted a `goStraightToPageWithoutFlipping(p:int)` feature (so that we can add a `Home` link in the last page that would take us directly to the front page for example). I got it working by adding the following code to PageManager.as – it seems to work fine for now; do you think it might lead to any issues later?

public function set currentPage(value:int):void {
if(this._currentPage == value)
return;
if(value % 2 == 0)
value–;
this._currentPage = value;
refreshViewStacks()
}

Thanks again.

quote from Scofie:

Excellent work Ruben.

@Malte
Try to get the current page index with myBook.currentPage method. Compare the page indexes and you can control your video.

if (myBook.currentPage > yourVidPageIndex || myBook.currentPage < yourVidPageIndex)
{
netStream.pause();
// other tasks… blah blah blah;
}

hope it helps.

I’m rather new with flex – mostly works with flash and Actionscript.
So the problem for me is I don’t really know where to put this line!
Have tried to put in under the “startPageFlip” function put down known how to connect it to my video (myVideo).

This is what I got for my video:

Hi Ruben, everbody,

I am wondering under what cirumstances one is allowed to use parts of the source code in a commercial project.

The Creative Commons licence says: “You must attribute the work in the manner specified by the author or licensor”.

Where can I find this specification? Will mentioning the name and link to contact details page (in this case http://www.rubenswieringa.com/blog/contact) be sufficient?

Please let me know. Thanks in advance

Kay

Hi Ruben, thanks for releasing this awesome application.

I’ve never used anyone else’s source code before and I’m not sure how to start with the class files. Am I supposed to make my own document class or do I like one of yours in with the fla I saved? Do you have any tips for a newbie like myself?

Thanks

Nicola

There is another one released here, not sure what the license is on that one: http://www.quietlyscheming.com/blog/components/flexbook/

Good work!

@suman: In order to embed pdf in your book page you need Flex-IFrame API available at http://code.google.com/p/flex-iframe/
In IFrame you can open any url that is pointing to your pdf file.

great job !

Thanks 4 sharing that work with evryone.

regards

Hi ruben,

Absolutely brilliant component. Hats off for you. Did u work on 100% width and height as u already mentioned ???

i want flexible width and height that adjusts itself with outer container but not able to do so. If any body has done it already can he please share????
I am in middle of project and that is a crucial requirement. Any help would be highly appreciated.

Hi Rubwn. nice work! but i have a problem, that i cant get through the docs. I shall appreciate any leads on it. You see, on every soft page, there is a fold, indicating that the page is turnable. Those fold have a white shine /reflection on them . It looks pretty bad. can i remove/reduce that some how ?

@Dirk,
can you post the code for showChildren() on a site like http://pastebin.ca/ or http://codepad.org/ and post the link here?

The reason is, part of the code gets stripped in comments on this blog.

Thanks in advance!

@Dean

I Love you…you solved my Problem..working like charm…

oh sorry!

I forgot…
Ruben… dude..you are awesome!!

Hi Ruben,

Thanks for the great component!

Could you email me any suggestion regarding how to set a book to flip vertically like a calendar?

Thank you in advance.

“any suggestion regarding how to set a book to flip vertically like a calendar?”

I will answer the question myself:

just apply rotation to the component.

Hi! all
I need your help.

I want flexible width and height that adjusts itself with outer container but not able to do so. If any body has done it already can he please share????

Have you an idea about how i can make a ‘pageZoom’ function or somethng like this?

And do you have a gotoPage code for to go to the page do you want.

Please let me know,

Monique

Hey Rube,

First of all, incredible work you did, this is definetly the best flex component out there!!

question,

* I noticed among the comments someone posted a code to make the book stable and faster when you have a lot of pages involved but it seems to be incomplete. How can i achieve this?

* how can I place the page number on every page??

Thousand thanks for your reply and once again, incredible component.

hi,
Really excellent work.
I want the page flipping horizontal means top to bottom. how can i change that.

Please let me know if anybody knows the solution
thanks
-veena

Sorry guys.

Actually i want vertical flipping.

-veena

Hi Ruben,

How can I use the Page compoment as an itemRenderer?

I have tried:

But nothing is displayed but the Flex loading bar.

Can you help?

Regards,
Adeola.

Hi Ruben,

How can I use the Page compoment as an itemRenderer?

I have tried:

[code]

[/code]

But nothing is displayed but the Flex loading bar.

Can you help?

Regards,
Adeola.

Ruben,
I’m getting owned by a bug in your Book component.

How to reproduce it:
1) call gotoPage(someFarPage);
2) while it is autoFlipping place mouse cursor over top corner of the book.

Pages start to “unflip/flipback”. I think the book should prevent mouse ‘hover’ corners and side of the book between pageflips.

I can’t seem to be able to correct it. =/

Sorry I couldn’t figure out how to post code here so I’m encoded the entitiies instead. Here’s my code (that doesn’t work) again.

<rs:Book id="flipBook" x="0" y="0" width="660" height="247"
openAt="0" autoFlipDuration="600" easing="0.7" regionSize="150"
sideFlip="true" hardCover="true" hover="true" snap="false" flipOnClick="true">
<mx:Repeater id="rp" dataProvider="{bookImages}">
<rs:Page><mx:Image source="{String(rp.currentItem)}"/></rs:Page>
</mx:Repeater>
</rs:Book>

Any help with this would be appreciated.

I managed to get image source binding to a variable to work using:

<mx:Image source=”{String(rp.currentItem)}”/>

Now the other problem I’m having is being able to set the width and height of the book component using ‘width=”{new_width}”‘.

Has anyone else got this working?

Hey Ruben,

Kudos for the wonderful component u made. I’ve added loads of things to it and wanted to share, it still has some random buggs, but it works pretty well.

Added Features:
- Dynamicly adding pages using an XML file
- Custom Preloader
- AutoFlip pages
- Remotely loading SWF by only adding embed code into a webpage

Check it out @ http://www.karazhan.nl/test.html

If you are curious for the source u can e-mail me,

Greetings Edgar

Simply Super..!

Hello,

I’m wondering if someone has already managed to use this component in Flex 4. I’m facing a problem because of the addElement vs addChild or removeElement vs removeChild changes in the Flex SDK.

This seems to be related to the fact that the Page extends Canvas while in Flex 4 one usually works with Group.

It would be awesome to see a Flex 4 compliant version of this component.

Regards,

Alex

@Edgar: Im curious and would investigate the source if it could be possible

quote from Edgar Petrauskas:

Hey Ruben,

Kudos for the wonderful component u made. I’ve added loads of things to it and wanted to share, it still has some random buggs, but it works pretty well.

Added Features:
- Dynamicly adding pages using an XML file
- Custom Preloader
- AutoFlip pages
- Remotely loading SWF by only adding embed code into a webpage

Check it out @ http://www.karazhan.nl/test.html

If you are curious for the source u can e-mail me,

Greetings Edgar

Cant find your email. Is it possible to share the code pls. Thanks

It’s really cool/ Great work!) Respect and Bless!

quote from Oleg:

quote from Edgar Petrauskas:

Hey Ruben,

Kudos for the wonderful component u made. I’ve added loads of things to it and wanted to share, it still has some random buggs, but it works pretty well.

Added Features:
- Dynamicly adding pages using an XML file
- Custom Preloader
- AutoFlip pages
- Remotely loading SWF by only adding embed code into a webpage

Check it out @ http://www.karazhan.nl/test.html

If you are curious for the source u can e-mail me,

Greetings Edgar

Cant find your email. Is it possible to share the code pls. Thanks

Yes I am looking to get the source as well… Thanks!

Thank you so much for sharing this component!

Unfortunately, I’m having a hard time to implement keyboard controls for page flipping: The nextPage/prevPage methods are not working correctly in case the mouse pointer is already over a page corner. If you try to flip in the opposite direction (e.g. mouse pointer is on right page corner and then call ‘prevPage’ ) the book advances one page towards the end and after that, it flips two pages backwards!

Could somebody help with this issue? Many thanks in advance!

Really luv it!
Awesome stuff!

Hi,

i have modified => running now under flex 4

pushed it to gitHub => http://github.com/FrancisVarga/flexBook

i hope that’s OK for you…

best regards
Francis

Hi
i am a computer science student and i like to explore your code if you mail me your demo code to my email id geoyogesh@gmail.com. it would be of great help for me. thank you.

quote from Edgar Petrauskas:

Hey Ruben,

Kudos for the wonderful component u made. I’ve added loads of things to it and wanted to share, it still has some random buggs, but it works pretty well.

Added Features:
- Dynamicly adding pages using an XML file
- Custom Preloader
- AutoFlip pages
- Remotely loading SWF by only adding embed code into a webpage

Check it out @ http://www.karazhan.nl/test.html

If you are curious for the source u can e-mail me,

Greetings Edgar

Sitting with the same problem …..Have you solved it?

quote from tomipont:

Hi,
I need to create my book dynamically, but i don’t. Can somebody help me? My code is this:

var book:Book = new Book();
book.x = 10;
book.y = 10;
book.width = 800;
book.height = 500;
book.openAt = 1;

addChild(book);

var page:Page = new Page();
var image:Image = new Image;
image.source = “swf/out0001.swf”;

page.addChild(image);
book.addChildAt(page,0);

The error messages:
RangeError: Error #2006: The supplied index is out of bounds.

TypeError: Error #1010: A term is undefined and has no properties.
at com.rubenswieringa.book::Book/isPageCornerHit()[C:\munka1Fl\pdf_converter\PDFConverter\src\com\rubenswieringa\book\Book.as:1271]
at com.rubenswieringa.book::Book/evaluateHover()[C:\munka1Fl\pdf_converter\PDFConverter\src\com\rubenswieringa\book\Book.as:847]

What’s wrong?

Please help me!

Very Nice I like the Style..

Can the Front and Baclk have a hard cover (old) Binder Look

be added to it easily ?

thanks…nice…

For those having the #2006 error, make sure you have added at least 2 pages to the book:

var book:Book = new Book();
var page1:Page = new Page();
var page2:Page = new Page();

book.addChild(page1);
book.addChild(page2);

addChild(book);

OR

Having none or just 1 page will cause trouble

Good work by flex-book-component-beta team.

i need a help.

When i click the goto page, kust want to show page directly instead of that page by page flickering.

Thanks.

Hey Ruben,

Kudos for the wonderful component u made. I’ve added loads of things to it and wanted to share, it still has some random buggs, but it works pretty well.

Added Features:
– Dynamicly adding pages using an XML file
– Custom Preloader
– AutoFlip pages
– Remotely loading SWF by only adding embed code into a webpage

Check it out @ http://www.karazhan.nl/test.html

If you are curious for the source u can e-mail me,

Greetings Edgar

I am working on some important with all above functionality needed can u pls mail me your code at vijay7002@gmail.com

Vijay

Hi

This is a very rich component. Thanks for sharing it.

Need help on:

I want to dispatch an event when page turning is half way. Like there are 2 events dispatched one turnStart: for page turn start and turnEnd: for page turn end. I am adding video player and audio player to the book. I want to remove these players when page turning is 50 % complete. Can anyone let me know how to dispatch this event and from where?

Thanks in advance