8 Replies Latest reply on Jan 31, 2015 7:10 AM by JoseBonner

    Import HTML animation for ePUB3

    Kaz Till Level 1

      I know I can import Edge animations and place them as folio overlays. I was wondering how to import them so they'd play on an ePUB3.

      Thanks!

        • 1. Re: Import HTML animation for ePUB3
          Steve Werner Adobe Community Professional & MVP

          You can in Fixed Layout EPUBs if you've upgraded to InDesign CC 2014. They may also work in Reflowable EPUB 3 files. There may be some variations, however, between EPUB readers.

          • 2. Re: Import HTML animation for ePUB3
            Kaz Till Level 1

            Yeah, sorry about the lack of details.

            I do have the new InDesign CC 2014 with the fixed EPUB 3 export option.

            I'm first trying to make it work on iBooks 3.2

            So what should I bring into InDesing for it to be able to export it into EPUB 3 for  iBooks 3.2?

            Thanks

            • 3. Re: Import HTML animation for ePUB3
              pooja2087 Adobe Employee

              Hi,

               

              Currently we support edge animation in EPUB 3/ Fixed Layout EPUB. It is basically a package (Animation deployment package which edge animate publishes) with extension .oam.

              There is a bug currently on iOS7 which will prevent animation from playing but you can always check on iBooks in Mac OS or Readium to see how it works.

               

              Regards,

              Pooja

              • 4. Re: Import HTML animation for ePUB3
                Kaz Till Level 1

                Thanks!

                So in theory, when this bug is fixed, I'll be able to Place the .oam package into InDesign and it'll work on an EPUB3.

                Any estimated time when the bug will be fixed?

                Is there a way to make the Web Publish from Edge work in InDesign, instead of the Animate Deployment Package?

                 

                edit: Is there documentation on this iOS 7 bug you are talking about? It's a big deal. Thanks

                • 5. Re: Import HTML animation for ePUB3
                  mykeclements Level 1

                  Is there any update on this? The fact that the animations don't play on iOS 7 devices basically makes this feature useless.

                  • 6. Re: Import HTML animation for ePUB3
                    Steve Werner Adobe Community Professional & MVP

                    You'll have to make your complaint to Apple. There's nothing the InDesign engineers can do about it.

                    • 7. Re: Import HTML animation for ePUB3
                      JoseBonner Level 1

                      pooja2087 wrote:

                       

                      Hi,

                       

                      Currently we support edge animation in EPUB 3/ Fixed Layout EPUB. It is basically a package (Animation deployment package which edge animate publishes) with extension .oam.

                      There is a bug currently on iOS7 which will prevent animation from playing but you can always check on iBooks in Mac OS or Readium to see how it works.

                       

                      Regards,

                      Pooja

                      What about animations produced in Flash and published via CreateJS in html5?  My animations frequently include images such as photomicrographs which must be stored somewhere.  The .js flies are also separate from the html file.  Do I need to go through Edge, or is there another option?

                      • 8. Re: Import HTML animation for ePUB3
                        JoseBonner Level 1

                        Well, I figured it out.  The following looks more convoluted than it really is, I think. 

                         

                        1. Create animation using FlashCC.*  It may be as complicated as you like.  Publish as html5, with the createjs libraries not hosted.  (They will need to be imported into the EPUB.)

                        2. Open the html file in a text editor (like TextWrangler).  The file will call for the easeljs, movieclipjs, tweenjs, and possibly preloadjs external scripts.  The file will also have its own script with the init() function.  Copy this script and save it as a separate .js file.  I have found it convenient to name the file [my animation name]Loader.js, since it loads the animation.

                        3. Note that the body of the html file merely calls the init() function onload, and sets up the canvas.  The <body onload"init();" ....  /> part will need to be put into the appropriate EPUB page, as will the <canvas ...   />.

                        4. In InDesignCC, where the animation needs to be, choose object/insert html.  Type in <object> <canvas ....  /> [from the html5 file] </object>.  ID will report that there is a javascript error, but this won't interfere.  Adjust the size of the frame and its contents to the size of the animation's canvas.  The EPUB will build the canvas to match the size of the contents of this frame.

                        5. When exporting the ID file as FXL EPUB, add all of the external javascript files: easeljs, tweenjs, movieclipjs, preloadjs, and the animation's .js file and the [animation]Loader.js file from step 2.  If you have several animations, on different pages, import their files too (although you can move them in later, see below.)

                        6. After the EPUB has been created, unzip it with something like ePub Zip/Unzip 2.0.1.  Navigate to the OEBPS folder, where you will see each page's xhtml file, as well as a script folder.  The script folder holds all of the javascript files.  You can add more to this folder if you didn't add them when exporting the EPUB.

                        7. For each page that should have an animation, open the xhtml file with a text editor.  Clean up the html -- ID will have put the <object> <canvas....  /></object> from #4 inside <div> tags and its own <object> tags.  One set of <object> tags is enough, and may not even be necessary at this point.

                        8. Check the <script> list at the top of the file.  We need all of the .js files for the animation.  For reasons known only to itself, easeljs needs to be first or the animation won't load, even though the canvas should.  (You can check this by changing the color of the canvas from ffffff to something like ffffcc; remember to change it back, though.)

                        9.  Check whether all of this has worked by opening the page's xhtml file with your browser.  If it works, you're good to go.  If it doesn't, then there's something more that I've missed here.

                        *FlashCC is important, since it publishes the html5 with the latest createjs libraries.  FlashCS6 uses older .js libraries, which didn't work for me.