6 Replies Latest reply on Feb 26, 2014 9:18 AM by sundvold

    Flip book

    Zoze Level 1

      Hey all,

       

      I am trying to make inside the composition a symbol that will open jpg images as flip book.

       

      I added the  scripts imBookFlip.js and Turn.js from the the script panel

      but now what?

      How can I make them to work? HOw to read the folder with the images and show it as flip book?

       

      I tried to make the imBookFlip to work but I can't.

       

      Inside of my symbol I create a rectange and gave it a class imBookPage, then in Creation Complete add:

       

               function init() {

                   sym.$("imBookPage").imBookFlip({

                         page_class: 'imBookPage',

                         pages: {base_url: '/images/book/'}

                   });

                   }

       

      but nothing happened.

       

       

       

      Please can someone guide me with either imbookflip or turn.js?

       

       

      Thanks in advanced!

        • 1. Re: Flip book
          resdesign Adobe Community Professional & MVP

          There are several issues with any of the flip page types libraries because sometimes they act weird. Anyway, here is how to use turn.js

           

          Add all your pages then group them by selecting them all in the elements panel, right clicking and selecting 'Group elements in DIV'. Name this group div flipbook or anything else.

           

          Add the following code in stage/compositionReady:

           

          sym.$("flipbook").turn({

                              width: 1152,

                              height: 752,

                              autoCenter: false,

                                                  });

          1 person found this helpful
          • 2. Re: Flip book
            Zoze Level 1

            Unfortunatelly,

             

            It didn't work. It has a strange result.

             

            Do you have any other option or opinion?

             

             

             

             

            Thanks

            • 3. Re: Flip book
              resdesign Adobe Community Professional & MVP

              I forgot to tell you the group div needs to be doube the size of your pages. You also have to put your own dimensions.

              So you can resize the container and move your pages back to the right.

              Here is a sample but as I mentioned it is a little glitchy in Chrome.

              https://app.box.com/s/4z398ks1v3i0ff1l9dr0

              1 person found this helpful
              • 4. Re: Flip book
                resdesign Adobe Community Professional & MVP

                I have another example with flippage.js that seems to work better.

                https://app.box.com/s/neg49phx6x2tcvkyyvxm

                1 person found this helpful
                • 5. Re: Flip book
                  Zoze Level 1

                  Excellent resdesign!!!!

                   

                  Thank you very much!!!

                   

                  Now I am testing them and try to integrate on the composition.

                   

                   

                  Do you know if I can integrate a zoom function on turn.js or flippage.js and how?

                   

                   

                  Thank you again!!!

                  • 6. Re: Flip book
                    sundvold

                    it's OK in firefox and IE, but glitchy in chrome, safari, opera. All three using webkit