Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

FlipBook component

Hello everyone,

I'm creating a FlipBook component for Titanium mobile for the iPad.

See this in action

Is in its first version, and all who wish to use it, have questions or can help me, leave a message here.

You can take the component with an example:


https://github.com/adrianopaladini/FlipBook-Titanium
— asked December 22nd 2010 by Adriano Paladini
  • book
  • flip
  • flipbook
  • ipad
4 Comments

  • This is really cool.

    — commented December 27th 2010 by Antonio Silveira

  • This is a great component. I've been playing with it using the simulator and it works really well even with a 132 page catalogue! However, running it on an actual iPad becomes problematic as when you hit next page it appears to flip the page twice. Running with 5 pages doesn't have any problems. I've also extended it to have 'first page' and 'last page' buttons and am going to add a 'goto page' but see in you todo list you're planning to include that. I'd love to contribute to this, either just testing or with coding too, where would you like any comments? Here on the appcelerator forum or on github? Thanks, Lee

    — commented January 13th 2011 by Lee Khan-Bourne

  • Thanks for your great component. To make the app more meaningful for emagazine purpose, just wonder if it's possible to allow user to zoom in the page with multi touch gesture? and, to keep the text quality, how about displaying each page with pdf format instead of jpg? thx

    — commented March 18th 2011 by Richard Lai

  • I tried with a 60 pages document, it runs fine in the simulator, but it's very unstable on the real device.. like the drag and drop doesn't work, and it takes quite a while to change the pages if you press the next button. I was quite excited tho.

    — commented May 9th 2011 by Alberto Marcone

9 Answers

  • Very nice. ;)

    With a combination of toImage() and the imageAsCropped() code I added to my SDK, it would be cool to actually to do this on the fly to 'flip' the native UI of an app too.

    cheers,
    kosso

    — answered December 22nd 2010 by Kosso
    permalink
    1 Comment

    • That would be amazing…

      — commented December 23rd 2010 by Daniel Ander

  • Holy….damn dude this is a sick container!

    I'm looking at it now it's really clean.

    I'm trying to add functions to it myself too, but will look at youre updates.
    By the way some minor question, i'm looking throught the code and have a test label which constantly shows me the available memory.

    But how is memory handled?

    — answered December 23rd 2010 by Patrick van Zadel
    permalink
    2 Comments

    • To add a avaliable memory, add a label and use:

      
setInterval(function(){
    myLabel.text = parseInt(Ti.Platform.availableMemory,10);
},1000);

      the "setInterval" will be update in 1 sec.

      — commented December 23rd 2010 by Adriano Paladini

    • Yes that's what I did, memory seems to work nicely.

      I'm currently adding a way to add "text" (labels) to each page, so that every page can has its "story"
      starting to get there.

      I was gonna try and help you with the 3D flip but my knowledge stays at the math point, but how to actually output that to Titanium is a mystery to me.

      All in all this is an awesome component and should definitly be supported, I've been playing with it for a while now, mainly adding functions (story text, audio, extra functionalities I personally need for a project), after that I will share all these functions ofcourse..

      — commented December 23rd 2010 by Patrick van Zadel

  • I've extended the flipbook component to be able to use pdfs annotated with hyperlinks. If you go to http://www.quru.com/appcelerator you'll find some instructions on where to download the code from and how to use it.

    — answered January 24th 2011 by Lee Khan-Bourne
    permalink
    3 Comments

    • Lee, the link to your version of flipbook is broken! Could you please, provides another one? :-)
      Thank you very much for sharing!

      — commented May 17th 2013 by Douglas Alves

    • pspdfkit module can be used as a flipbook.

      — commented May 17th 2013 by Alberto Marcone

    • Sorry, try http://www.quru.co.uk/appcelerator/ instead

      — commented May 17th 2013 by Lee Khan-Bourne

  • hi!

    great component, works fine on iOs!!. But, has somebody tried to use on android? It only does not work, but the app crashes without any error message.

    I can't figure out where is the problem, there's no iphone/ipad exclusive APIs, so it should work on android without any major change, isn't it?

    Tested on titanium 1.5.1 and 1.6.0, android emulator and android device (samsung galaxy tab) on mac platform.

    thanks!
    javier

    — answered March 12th 2011 by Javier Rayon
    permalink
    0 Comments

  • Hey Adriano!

    Did you ever figure out why the flipbook doesn't load sometimes?
    The strange thing is this problem occurs for me only on the simulator, it never did on the iPad 1..
    But now with the iPad 2 it also sometimes hangs on trying to load the flipbook.

    I'm trying to figure out why it happens too, but maybe you already know

    thanks in advance!

    — answered May 9th 2011 by Patrick van Zadel
    permalink
    0 Comments

  • Hello, I simple question. Has anyone tested the app in the Iphone? I've try it and it doesn't work correctly. Works fine in the simulator but when I load the app in the Iphone it just doesnt work. It loads very, very slow and it doesn't turn pages. Is it the code only for Ipad?

    — answered June 8th 2011 by Miguel Casas
    permalink
    3 Comments

    • I got it working fine on an iPhone. However, you'd need to make it support zooming for it to be practical. Try resizing your images to fit the iPhone screen exactly and turn off pagination and you should fine it is much faster.

      — commented June 8th 2011 by Lee Khan-Bourne

    • Thanks for you answer, Lee. I've been working with you code from github (https://github.com/leebourne/FlipBook-Titanium). I've resized all the images to 320x480. The shadow pages too. I've changed the flipbook.js and resized the pgShadow and pgBright image views to 480, also. But it doesn't work on my Iphone 3G. I've compiled the code with Titanium SDK 1.6 and 1.7 RC1. My Iphone has iOS 3.1.3. Would you be so kind to share you Iphone code? Thank you.

      — commented June 9th 2011 by Miguel Casas

    • Hello. I figured out what was the problem. It does not work properly with the iOS 3.1. It works fine with iOS4.0. Regards.

      — commented June 10th 2011 by Miguel Casas

  • Got a question, I've been working on a story function (like I said earlier) but somehow It never changes the text on the first flip, but starts changing it on the 2nd flip.

    I think i'm getting a little confused with the use of flipbook_actualPage

    EDIT: The bug you have with loading pages does not occur on the device itself atleast I tried replicating it numerous times but it loads fine

    EDIT 2:

    I've added some stuff but have no idea how Github works so that sucks.

    My 'add story' functions fails atm, because the string errors out which I don't know why
    But I added the option to show and hide a info button in the top right corner.
    and the function to play a sound and/or voiceOver

    it creates a player, and if a page is flipped it first stops and release the current player before creating it again, it also release the player when the sound is complete.

    the backgroundsound has a setLooping: true/false option too.

    — answered December 27th 2010 by Patrick van Zadel
    permalink
    0 Comments

  • Really nice!

    What would you do if, instead of the images, I wanted to use webview.js pages? AND, when loaded, I wanted those to Scroll up and down? SO, like the wired or esquire apps on iTunes App store, you can scroll BETWEEN stories and then to read a story you scroll up and down. Thanks

    — answered December 27th 2010 by Mark Smillie
    permalink
    0 Comments

  • Thanks for this, it's a great bit of code.

    I've extended it by writing a script to take a multi-page pdf and split it into separate pages, convert them to jpegs and parse every page for url or email links. I've also modified the code to add hotspots onto the pages so you can navigate to the urls by launching Safari or send an email by clicking on the links in the pages. I've also added first and last page buttons.

    Has anyone worked on the ability to zoom or landscape mode?

    — answered January 18th 2011 by Lee Khan-Bourne
    permalink
    4 Comments

    • Do you share your code?

      — commented January 19th 2011 by Marc Bender

    • Quite happy to share the code. I wasn't sure whether to put it into git or not. a) I haven't used git before and b) as I've added quite a bit I didn't want to affect everyone else too much who may not want my changes. I'll post it somewhere and then put up a link later today.

      — commented January 19th 2011 by Lee Khan-Bourne

    • great! :-)

      — commented January 20th 2011 by Marc Bender

    • Hi Lee, do you post a link with your code? thx…

      — commented January 21st 2011 by Ursin Cola
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.