Ruben’s blog

Hey man!

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

Keep it up dood!

- Spinz

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

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

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

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

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

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

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

Nice Donovan, keep it up!

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

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

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

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

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

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

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

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

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

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

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

Thanks man

quote from Chris:

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

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

Hi Ruben,

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

Hi,

Great job you’ve done here.

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

The fix is :

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

instead of

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

I hope that will help some of you

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

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

thanks
ander

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

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

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

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

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

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

Hey ,

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

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

Thank you so much

Hey Randa,

quote from Randa:

…but the book script overrides any script added latter.

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

Hi Rubens -amazing work -

but i have some problems when using transparent pages – i have some postits at the edge of the sides so the y will look out of the book it self – no problem – but the transparent parts pf the pages make a shadow when they will be flipped – do you have any ideas to solve that problem

Just curious if this component is still in dev? It seems to be more than a year since it was updated.

Hello, i’m doing wall calendars as you can see on our site. My urgent question is: Do you have a page flip version which flips the page over the top and disappears on the backside?

Thanks for your reply

Gunther

Thanks for this, it looks excellent.

Did you fix the RangeError bug you mentioned in a previous post?

Hi Ruben,

I’m new to Flex. After I unzipped the files into “src” folder in Flex 3 Builder’s project. When I compile the demo.mxml the following error occurs:

1046: Type was not found or was not a compile-time constant: Book.
BookEvent.as
line 155

Hi, some time ago I made a small project which used your wonderful book component, it didn’t give me any headaches, at the time.

Now, I decided to break the main SWF file into several smaller ones, and load them on demand using SWFLoader.

And I hit a bug, whenever I load the SWF that contains the book, it gives an exception at “autoFlipSpeed” , saying that “stage” is null.

I’ve read about the issue, and the problem appears to be that, the main SWF indeed has a “stage” available from the beginning, but loaded SWFs don’t have a stage until they’re added to the parent’s stage. In other words, you should avoid accessing the stage object until you receive the “addedToStage” event.

hope it can be fixed soon… anyway, thanks a lot for your great components!

REPLY to cypress:

Hi I had the same problem. solved by …
In project tree do right click on the most top node a select properties > Flex Build Path > on the bottom find a field called “Main Source Folder” and delete “src”.

Than it should work for this samples.

Tomas

Hi Ruben,
Thank´s for this masterpiece of work.

I´ve got a problem that it seems like a bug.
By using PageFlip.drawBitmapSheet(…), you draw a bitmap per frame for pageFlipping action, if the book is resized i founded that texts and images are rendered correctly only when pageflipping is started.

I was wondering… is there a way to correct this?

THank´s again for your work… is really good

Hi Ruben,
Have you found the solution for percentWidth and percentHeight.

I want to make the book scalable

when i popUP the book ,then i removePop.wait 2sec get error
TypeError: Error #1009: ????????????????
at com.rubenswieringa.book::Book/startPageFlip()[D:\flex\test\flex\src\com\rubenswieringa\book\Book.as:562]
at com.rubenswieringa.book::Book/evaluateHover()[D:\flex\test\flex\src\com\rubenswieringa\book\Book.as:860]
TypeError: Error #1009: ????????????????
at com.rubenswieringa.book::Book/endPageFlip()[D:\flex\test\flex\src\com\rubenswieringa\book\Book.as:674]
at com.rubenswieringa.book::Book/evaluateHover()[D:\flex\test\flex\src\com\rubenswieringa\book\Book.as:864]
TypeError: Error #1009: ????????????????
at com.rubenswieringa.book::Book/endPageFlip()[D:\flex\test\flex\src\com\rubenswieringa\book\Book.as:674]
at com.rubenswieringa.book::Book/evaluateHover()[D:\flex\test\flex\src\com\rubenswieringa\book\Book.as:864]

@Durrab

just put the book in a Canvas and scale the Canvas

Ruben:
Nice work!, actually it looks and feels very nice.
Having some trouble tough when trying to programatically add new pages, but I will try to find a solution

Very nice work!
Cheers!

@ bbrosg

i tried putting the book in canvas and scaling the canvas but that didnt work,

can anybody help me out with this … i need the book to be scaleable..

Cheers!

@umsood

I don’t know what to say … I am doing like so and it’s working.
Hope you’ll find a better solution.

Cheers!

The dinamic resizeing problem is intresting. I cant figure out on the easy way. I use this class in pure classes not in mxml. Everythings fine.. after its resizeing just dont refresh the pages… try to figure it out.

Ruben brother i have to submit a project called “my diary” in my college by next monday,where i have to show the flip effect….i downloaded your simple source code and i imported the code to flex builder 3.0 but i just get a big red cross across a box in the design mode.i am new to flex but i have a deadline i.e next monday.so plz help me! tell me what should i change in the source code so i can view in the design mode! can you mail me the m odifeid code to leelaprasadg@gmail.com

thanks a ton brother your suggestion worked…..and could you plz tell me how can i enter text or add images in to the book with out having to tweak the source code,by just using drag drop method in design mode….i am doing a project on my diary remember….i tired to darg drop a label for example but when i save and run it just shows me a blank page with black background! also if i have to tweak the source give me an example source code on how to add lables,images….cheers thnx for helping! plz mail me agn if possible

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!

quote from Jeffrey:

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!

firebug it!! make sure it’s looking where it’s supposed to (use the net tab on firebug you’ll hopefully(?) find a 404 when it’s looking for the image, as it’s just in the wrong spot like http://localhost/yourfolder/image.jpg instead of http://localhost/image.jpg

also to Ruben, I love you!!

I needed your code to work with an xml (so the content can be modified with a cms), so i added this!

with the xml in the form:

going to work on adding a box for commentary from the CMS as well

thanks so much for the awesome release man!

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

I had the same problem. Solution is to scale add book to canvas and scale canvas.

Ruben, are you still supporting this? I’m going to production with your great component, but there is a problem holding me back. Any light-colored container shows the shadow of an angular flip on the left side that extends hundreds of pixels page the edge of the book. Is that why your demos are on a dark background? Is there any way you can either correct, or tell me where I can correct it? I’d really appreciate it and get my boss off my butt for choosing this component – which I think is superior in a number aspects than some of the others out there. Please, please respond if you can.

Hello,
Is there a way to made a Page double sided ??

Any chance that flipping multiple sheets at once will be supported soon? (Whether it’s an auto skip, or seeing the animation of a bunch of pages fly by together?)

Yo ruben,first of all nice work kerel , would be great if there was a way to apply a dataprovider though.. ofcource i can do this manually but love the simple straight forward events…
Keep it up man ……2 duimen omhoog :

Yo Ruben… just wanted to add this to my previous comment.. been looking through all the responces and comments above, guess what i want to achieve is dummy pages that hold a arrayCollection, i could use repeaters but they really suck big time cpu ussage… please check this post on http://www.tink.ws/blog/datastack/
2 containers that just swap , i saw a post from a long time ago with someone who said use 6 pages, this i think would be it if the book is on 3-4 build dynamicly 1-2 and 5-6 and shift by flipping back and forward , this way the book could have dynamic content and still be quick, been playing it for a while now, kind of drives me nuts, i builded a guestbook its okay for now, just 20 pages added dynamicly but it also means 20 instances of tha f**cker
i also managed to do a hide thingie and use only 4 static pages, hide on before flip , when flip done fade the content in with the binding.. but this is just not realistic , i really want to get the idea that the book has all the messages..
let me know what u think….
greets peter…. btw AGAIN great work!!!!!!

I’m trying to programmatically instantiate (and consequently destroy/re-render) instances of Book and Page in Actionscript a la:

private function onCreationComplete ():void
{
var myBook:Book = new Book();
myBook.x = Math.round(Application.application.width/2-400);
myBook.y = 50;
myBook.width = 800;
myBook.height = 530;

var page1:Page=new Page();
myBook.addChild(page1);
var page2:Page=new Page();
myBook.addChild(page2);
var page3:Page=new Page();
myBook.addChild(page3);

FlexGlobals.topLevelApplication.addChild(myBook);
}

I’m having a bit of trouble getting anything to render. If anybody has done this before I’d appreciate some pointers.

hey ruben, /m\…

And hey, how to add pages to the existing pages or remove one ..

i want to cut down on the number of pages and being a newbie to flex am finding it hard to do..could u help?

Just like to say fantastic project very impressive…

I have a question it’s relating to the max number of pages that can be practically added to the book. After doing some simple testing: approx 50 pages produces slow rendering and 100 is basically unusable (each page contains no children). Can you point me in the right direction to improve performance or maybe there’s a simple solution?

Sir this is gr888..bt i have one problem, how to drag and drop videos in flex book,well its working perfectly for images but not supprt audio,video files..As i tried a lot the above coding and still showing the problem,the videos not loading and displaying the output..Waitin for a QUICK AND POSITIVE REPLY…Please send me some sample coding

Hi has anyone had any luck with creating pages dynamically inside Repeater. I can’t seem to get it to render anything.

I also noticed that not using @Embed for the Image makes the page un-turnable so:

<mx:Image source=”@Embed(’assets/img/sumeco/backstabber.jpg’)” />

works but:

<mx:Image source=”assets/img/sumeco/backstabber.jpg” />

fails. which also makes it impossible to do:

<mx:Image source=”{image_src}” />

Any help would be appreciated. Thanks!

Hi,

Thanks for this book but pls help me to how do I get current page number when fliping page, i mean which variable carry current page number

Thanks