1 2 Previous Next 41 Replies Latest reply on Jul 6, 2015 11:58 AM by tracysabin

    How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.

    Kaz Till Level 1

      From this post, I understand it's not currently possible to place .oam animations into InDesign.

      Edge has a Web Publish option, that outputs an html file, images folder, and some javascript files.

      How would I add these pages to my EPUB created in InDesign? I'm using the 2014 version, with the Fixed Layout export option.

      I imagine it's a matter or adding my elements to the manifest and renaming the html that Edge gives me... But I assume there are many more steps.

      My intent is to publish this on the iBooks Store.

      Thank you

        • 1. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
          Douglas.Waterfall Adobe Employee

          I think you have misunderstood the meaning of that other post.

           

          Placing OAM files from Edge Animate DOES work just fine - the limitation is currently on the devices/readers.

           

          iOS7 devices are not working correctly, iBooks on OSx DOES work, as does Kobo on iOS.

           

          Douglas Waterfall

          Architect, InDesign Engineering

          • 2. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
            Kaz Till Level 1

            Thanks for the replay. I haven't been able to find any documentation on this bug.

            The animated books (epubs) I have on my iBooks shelf work fine. So I was thinking it had something to do with how InDesign places the .oam files.

            So even if I code the animation on CSS or Java, it won't play?

            Can you share what you know about this bug?

            Thank you again.

            • 3. Re: Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
              whathehangojango Level 1

              Hi Kaz,

               

              I'm waiting for an update on this item too. I'm no expert but it appears that Apple have it in for Adobe (starting with the bold move to not support Flash ... which Adobe thought it could overcome with HTML5 animations, but now Apple has found a way to nip that one too - by not supporting anything made in Edge Animate). If you want to see the tone used in the Apple forum on this topic, check out the responses from 'K T' here: https://discussions.apple.com/message/19395276#24471966

               

              I don't work for an IT company. In fact, I'm a relative novice to the world of HTML etc. Like you, I thought there must be a way to overcome the problem by NOT inserting the OAM file but instead inserting HTML5 into InDesign (http://my.safaribooksonline.com/book/web-design-and-development/9780133480061/13dot-creati ng-an-interactive-document/ch13lev1sec21and then including the JS files when outputting the file to EPUB3.... Then once saved, opening the EPUB zip file and adding the extra media files, plus updating the manifest information (list of files), after copying this from the list output from Edge Animate if you choose to export for iBooks. Clearly there was some experimentation to be done (by one without much experience with this stuff!) but I stopped very early into it when I looked at the output files from Edge Animate. They all make reference to the name 'edge'. So copying those files into the EPUB folder probably wouldn't have overcome the Apple problem, as I can only suspect that iBooks is now coded to identify that word in scripting files and then ignore those files.

               

              What a pain!

               

              Meanwhile, if Adobe can't find a way around this, they shouldn't advertise or build an expectation that Edge Animate output can be used in iBooks. The silence on this topic is concerning. If Adobe don't make the next move in this horrid game with Apple, others will soon fill the void for interactive EPUB3 programs, such as PubCoder, BookCreator (redjumper.net) and Aquafadas.

               

              Adobe, any comments appreciated, even if they are to correct my assumptions.

               

              HangoJango.

              • 4. Re: Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                whathehangojango Level 1

                Other areas to experiment with (for adding interaction and animation to EPUB exported from InDesign):

                - The HTML and JS files exported from latest Flash program (using Canvas) seem normal (no reference to 'edge' or 'flash').

                - Perhaps the HTML and JS from Captivate can be used too (but animation limited).

                • 5. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                  Douglas.Waterfall Adobe Employee

                  Ha! You forget the power of engineering bugs and business realities which, IMHO, are often more powerful than evil intent.

                   

                  Ask yourself, is the InDesign team more or less annoyed than you are with Apple? We wrote all this code, we wanted it to work, it didn't work. Are we sad or are we happy?

                   

                  There really are a lot of moving parts which are only partially under the control of the InDesign team, the iBooks team and the Webkit team and everything has to fit together to work. That is just the way it is.

                   

                  When we pass through Edge Animate we stick it in an <iframe> and the implementation of which has its own sets of challenges. I have had conversations with folks we have created epub readers based on modern browsers and this is not a trivial thing. So the idea that there are bugs and issues does not surprise me in the least. We already have a wide range of behaviors and bugs with just EPUB2 readers, why would we not expect the same for EPUB3?

                   

                  It would be nice if Apple would be a bit more open about what is happening behind the scenes but they don't so we are left wondering. It is a problem.

                   

                  We have had better luck with  iBooks on Mavericks so we *think* we are doing the right thing and we *think* Edge is doing the right thing...but iOS/iBooks is having problems.

                   

                  Hopefully they will figure it out. If you have a sample that fails - post it in the forums, file a bug, help encourage them to take a look. Engineers are people too.

                   

                  And of course none of this works on Kindle. Please encourage them to support HTML5/EPUB3 too while you are at it.

                   

                  Douglas Waterfall

                  Architect, InDesign Engineering

                  • 6. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                    jeankapaptara Level 1

                    Hi Douglas –

                     

                    I totally hear your frustration.

                     

                    I got some words of advice from someone at Apple who works in iBooks Engineering a couple of years ago. I don’t know if this still applies, but it’s worth considering…

                     

                    iBooks is very dependent on WebKit. If you follow Apple Developer documentation for WebKit in addition to the documentation out there for iBooks (and I do mean EVERYTHING – look at old WWDC sessions about WebKit if you have access. If you don’t have access, GET access…), then you are likely to have a better experience working in iBooks than if you try to go it alone.

                     

                    The other thing I learned very early on about iBooks, FXL and interactive features was that Apple provides (albeit only to people who have iTunes Connect accounts) resources that include an iBooks specific JavaScript framework. Deviate from this framework at your own risk. The framework shows the best practices, and more importantly what actually works in iBooks.

                     

                    I can put you in touch with the person who provided me the bit of advice about WebKit if you like. It’s possible that you may already know this person though.

                     

                    Please send email to me off list and we can continue the conversation to see if I can’t at least help you find people you should be talking to.

                     

                    As for Amazon? That is a wall of silence that even the biggest publishers carefully negotiate. I know a lot of people are giving you guys flack about not supporting KF8 out of the gate, but I totally understand why you guys chose the iBooks and Readium first approach.

                     

                    Best regards,

                     

                    Jean Kaplansky

                    Senior Director, Solutions Architecture

                     

                    o: +1.518.496.2967

                    twitter: @JeanKaplansky

                     

                    See our new website<http://www.aptaracorp.com/>

                    • 7. Re: Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                      whathehangojango Level 1

                      I can only imagine how miffed Adobe's technical team must be and I don't want to add unnecessarily to any stress. For what it's worth, I really liked working with the Edge Animate interface and want things to work out because it would be my first preference - but of course not if I have to recreate content elsewhere for the iPad.

                       

                      Whether iOS7 has a bug or otherwise, I wonder if there are any simple workarounds. For example, there is an extension that outputs HTML5 from InDesign, including media overlays:

                      http://ajarproductions.com/pages/products/in5/#showMoreFeatures
                      https://www.youtube.com/watch?v=ku4Ql8GE1m8


                      Perhaps Adobe can create an updated step-by-step guide for inserting Flash canvas animations and Captivate HTML5 using this extension. Then maybe even show how to wrap the final content as EPUB3. This would be in lieu of this demo: https://blogs.adobe.com/captivate/2013/08/a-step-by-step-guide-to-create-an-interactive-eb ook.html. For people like me who use Adobe's products because of their front-end niceties (i.e. we don't want to dig too much into code), it would help resolve many issues here. DPS not an option - would rather go with PubCoder in that case.

                       

                      Good luck anyway!

                      • 8. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                        whathehangojango Level 1

                        BTW, there is a free EPUB3 (fixed and reflowable) reader app for both iOS and Android. ...GitDen Reader. Maybe we can convince everyone to just have that and Readium! 

                        • 9. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                          Kaz Till Level 1

                          Thank you all for the informative thread.

                          It's a frustrating situation, with poor communication from both parts. I'm happy I finally heard from Adobe. Saying that it's an issue around <iframe>, or how Edge passes the info to html, css or js.

                          I'm working directly into the code, which has been way harder but has made me learn a lot

                          I'll keep posting my questions in the forum around the issue.

                          Thanks a lot to all again.

                          • 10. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                            ebook solution consultant

                            Lektz reader apps support different type and standard of ebooks such as PDF, ePUB2 and ePUB3. Its rich support for HTML5, CSS3 and JavaScript makes it an ideal reader for reading not just Text-Only ebooks but also for accessing educational and children’s ebooks with rich media, interactivity and animations. It also has support for wide-range of languages such as LTR (Left-To-Right), RTL (Right-To-Left) and TTB (Top-To-Bottom) languages.

                             

                            The Lektz Reader apps are available for iOS, Android, Web, Windows PC and Mac systems, and all these reader apps share a common user interface providing better user experience across different devices.

                             

                            You can download Lektz eBook Reader app for free:

                             

                            Google Play: https://play.google.com/store/apps/details?id=aeldata.lektz&hl=en

                             

                            Apple iTunes: https://itunes.apple.com/us/app/lektz-ebook-reader/id542337422?mt=8

                            • 11. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                              ricksecc Level 1

                              Hello everyone,

                              Has there been any updates to this issue regarding edge animations imported into indesign for export to epub 3?

                              I'm also wanting a solution for this and any help would be very much appreciated.

                               

                               

                              • 12. Re: Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                DaveLEWIS73

                                HI,

                                 

                                I have been producing ePub Fixed layout for iOS since 2011.

                                 

                                Personnaly, I have found the best way to keep up with Apple is to hand code everything

                                in Dreamweaver and avoid Indesign and Edge Animate all together.

                                 

                                Once you know your way around the structure of an ePub, it is much easier

                                to do everything in Dreamweaver or Edge code, or even Brackets.

                                 

                                Custom interactivity can be handled with Javascript and / or Jquery.

                                 

                                Animatiin can be handled with HTML5 3D Transforms etc.

                                 

                                Maybe learning the languages and structure of an ePub would

                                be much more productive than fighting against automated software

                                which is in turn fighting against Apple.

                                 

                                Hope this helps

                                 

                                DaveLEWIS

                                • 13. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                  Kaz Till Level 1

                                  Oh, definitely! I'd have been fired three times if I had just been waiting.
                                  I've learned quite a lot these last few months.

                                  • 14. Re: Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                    flyingfox

                                    Hi there, to create an interactive ebook in a good time needs automated software. The problem is, and this is my experience, that adobe does not follow the html5 rules. E.G. Adobe said to me that mp3 autoplay is not supported by apple ibooks. The truth is that adobe uses a script to handle audio playback. If they would place the tag "autoplay="" instead of their script it would work. The script is good for timebased playing of sound but to play from the beginning autoplay works great.

                                     

                                    I tried now 20 different animations in edge to run as an oam file in ibooks and no animation is working like I need. And I am getting no answer how to use an animation in indesign as an oam and run it in ibooks. Adobe uses iFrame instead of Source. If you are using hype instead of .oam and places later the animations with "source" than it works.

                                    The EPUB3 is not working propper, only if you have the latest iOS installed ios 8.1.1 on any device. Otherwise a lot of things will not work. But .oam is still not working. E.G. on iPad Air with sound, on iPad2 no sound but there are tons of epub3 books which are working on ipad2.

                                    My suggestion: build your standard in indesign, export to epub, open the epub, build animations in hype, implement the animations like hype is telling you. This workaround is much saver.

                                    • 15. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                      Iain__Anderson Level 1

                                      I think I have a solution, though at the moment it's only working for animations created in Hype, and not for those made in Edge Animate. If the solution could be extended to Edge, that would be great, but for now, feedback on this solution would be appreciated:

                                       

                                      - Use the Hype OAM export plug-in to create an OAM

                                      - Place the OAM in InDesign

                                      - Export to EPUB FXL

                                      - Manually edit the HTML produced, where the animation is embedded, to delete the iframe InDesign places there

                                      - Replace it with another div, the chunk of HTML code that Hype uses to insert its animation, but change the path to match the new local path ("html/" is added to src):

                                       

                                      e.g.                 <div id="PROJECTNAME_hype_container" style="position:relative;overflow:hidden;width:500px;height:500px;">

                                        <script type="text/javascript" charset="utf-8" src="html/PROJECTNAME/Assets/PROJECTNAME.hyperesources/PROJECTNAME_hype_generated_script. js?35378"></script>

                                        </div>

                                       

                                      For me at least, this is working. I haven't tried to submit anything to the iBook Store yet, but it's working on my iPad.

                                       

                                      Hype uses a different folder structure to Edge for its OAM and exported HTML files, and this is likely why my attempts to do the same trick for Edge files haven't worked so far. The sticking point seems to be that iBooks on iPad doesn't like <iframe> but is OK with a <div> that's manipulated by a script.

                                      • 16. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                        flyingfox Level 1

                                        Hi lain__Anderson,

                                        interesting, where do I get the hype to oam export plug-in?

                                        I know this workaround thanks. This means I have to open my exportet epub and work again in the code. A lot of people who are programming epub3 ebooks told me never to use iframe also the details on idpf.org sounds to me that it is risky to use iframe or framesets. At least the ipad is the one and only really working market place for epub3 so it would be great if adobe let me decide how to insert my content from edge. I hope adobe will follow more the standard and keep in mind to help creative people to use indesign to create amazing epub3's which will work in ibooks.

                                         

                                        I think apple will distribute the ebook because it is working on ipad and tumult from hype told me that this is working for epubs.

                                         

                                        The export plug-in would be helpful. Thanks a lot

                                        • 17. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                          Iain__Anderson Level 1

                                          Ah, sorry, I had thought that OAM export was public now. Ask the nice support people at Tumult and they might be able to send it to you.

                                          • 18. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                            ON2 Interactive Level 1

                                            Hi Iain

                                             

                                            How do you manually open and edit the iFrame in InDesign?

                                            • 19. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                              Iain__Anderson Level 1

                                              It's going to be tricky until the Hype 3 Pro Beta becomes public, and long term it will need an Adobe fix. I'll post more publicly when it's possible for others to do it. Apologies.

                                               

                                              Best wishes, Iain. 

                                              • 20. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                lewkeo Level 1

                                                Hi Iain,

                                                 

                                                Thanks for the info so far. I've managed to find the iframe within the html, but unsure as to how I would edit this for my OAM file exported from edge.

                                                 

                                                This is what I'm seeing in the top level xhtml file..

                                                 

                                                <div id="_idContainer003">

                                                       <div class="_idGenObjectAttribute-4">

                                                       <iframe class="_idGeneratedPreventDefault" id="_idHTMLPageItem000" src="html/cover-test/Assets/cover-test.html">

                                                       </iframe>

                                                  </div>

                                                </div>

                                                 

                                                Or am I on the wrong path with this?

                                                 

                                                Thanks

                                                • 21. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                  Iain__Anderson Level 1

                                                  I haven't been able to make the output from Edge work as yet. Hype's output is in a slightly different format (the script is linked in the body of the document and not the head) but that may or may not be the problem. Each program uses different scripting to perform its work, but as they are obfuscated I can't easily find out why Edge doesn't work.

                                                   

                                                  Either way, this really needs to be fixed at Adobe's end, and likely by changing both Edge Animate's output format and InDesign's insertion method. Right now, I can hack Hype 3 Pro's output (still in beta, sorry) to work but not Edge Animate's.

                                                  • 22. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                    lewkeo Level 1

                                                    Thanks for the info Iain, If I get a breakthrough I'll let you know.

                                                     

                                                    Cheers

                                                    • 23. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                      BobLevine MVP & Adobe Community Professional

                                                      There's a problem with that that theory, Iain.

                                                       

                                                      If the bug is in iBooks and Adobe works around it, what happens when/if Apple fixes it and breaks every EPUB created with InDesign?

                                                      • 24. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                        Iain__Anderson Level 1

                                                        I very much doubt it's a "bug" in iBooks for iPad; at this point it looks like a deliberate decision to exclude iframe. Besides, if Adobe work around the problem by switching to div instead, it would continue to work if Apple do allow iframe at some point in the future.

                                                         

                                                        As a point of comparison, Apple did make a change in the last version of iBooks Author to allow full-screen auto-playing HTML widgets, so they're not against the concept of animated books, but they *do* block network access for widgets that play automatically. Widgets that you tap to activate can go online without any problems. This could be to block auto-tracking by ad networks, spammers, and others, but could just be for security reasons.

                                                        • 25. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                          JoseBonner Level 1

                                                          Interesting discussion.  Much of it is beyond my level of expertise, but I'm learning...

                                                           

                                                          I have the same basic question, but with respect to animations produced in Flash and exported to html5 via CreateJS.  InDesign's method is to put these into the HTML Resources folder, and display them as web-content overlays.  Apparently, that would be in iframes, which doesn't seem to work in iBooks.  Is there a way to insert these into the FXL epub? 

                                                           

                                                          I'm working on a biology textbook, for which it would be really helpful to have animations of the many dynamic processes that happen inside of us.  But how to get those animations to play in the epub?

                                                          • 26. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                            BobLevine MVP & Adobe Community Professional

                                                            Overlays are for DPS only. A lot of this is unnecessary for EPUB since native animations are supported.

                                                            • 27. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                              lewkeo Level 1

                                                              Not sure it's unnecessary to want to be creative. Native animations are currently pretty limited.

                                                               

                                                              I think it boils down to the fact some of us were spoilt by the DPS single license and people are trying to be resourceful.

                                                              • 29. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                JoseBonner Level 1

                                                                Thanks, Bob.  I understand that overlays are the method used for DPS.  So, logically, there must be a different method to put the animations into the EPUB.  Is there a straightforward way to do this using InDesign CC2014?  Or, perhaps, in the next update?  A couple of the animations can be found here: Science Outreach.  Most of the others are on different pages of the same site.  These are the kinds of things I'm interested in.

                                                                • 30. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                  David_Tardiveau

                                                                  OAM is out of work in a ePub 3 generated by InDesign for many months now, DPS gonna be out of work in a single edition, does Adobe is trying to explain to the individuals customers they should have a look to others solutions ?

                                                                  • 31. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                    Kat Gaddis 1256

                                                                    I guess Adobe should not be advertising that their products can do something when in fact they can't.

                                                                    • 32. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                      Frans van der Geest (ACP) Adobe Community Professional

                                                                      At this moment, placed OAM animations work fine in iBooks on my Mac when placed in InDesign and exported as FXL ePub. And, no, on my iPad they do not.

                                                                      Now: Digital Editions 4... on my Mac: working fine!

                                                                      ADE4oOn Windows... blank pages!

                                                                      And ADE4 on on iPad: no blank page, we see the poster frame... but nothing works (if it didn't already crash ADE4) if there is any interaction for the reader (like tapping etc). Just plain 'animations' play, that is more than we can say for iBooks!

                                                                      Then again: scrollable frames (with the CSS) that work fine in ADE4 on desktop crash on iPad.

                                                                      • 33. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                        yan tan

                                                                        HI,

                                                                        Is there a way to use oam file in  Other software or another program that will work on the iPad?

                                                                         

                                                                        What to do? Want a book with animation.

                                                                         

                                                                        When will update InDesign?


                                                                        Thank you

                                                                        • 34. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                          BobLevine MVP & Adobe Community Professional

                                                                          FXL EPUB supports almost all native InDesign animations.

                                                                          • 35. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                            yan tan Level 1

                                                                            HI

                                                                            But I want to use oam files

                                                                            Games and puzzles that I built in Edge

                                                                            When will be able to use it in fxl book

                                                                             

                                                                            Thank you!

                                                                            • 36. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                              BobLevine MVP & Adobe Community Professional

                                                                              Depending on the device or reader app they should work now.

                                                                              • 37. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                                Frans van der Geest (ACP) Adobe Community Professional

                                                                                Nope, not on tablets. IBooks on iPad will give you a blank page (and sometimes simply hangs after that); ADE4 on iPad will play animations but won't allow any interaction (tapping etc).

                                                                                Azardi under Windows will hang. ADE4 Windows will work about 95% depending on the OAM.

                                                                                What will work is Readium plu-in for Chrome browser, Windows (and Mac).

                                                                                Speaking from expierence here, latest versions last week...

                                                                                • 38. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                                  Peter Villevoye Adobe Community Professional

                                                                                  Some of the trouble with this reasoning (HTML animation from Adobe Edge Animate OAM to Adobe InDesign in a DPS works, so should ePub work as well) might be caused by the fact that an ePub should contain ALL content within the file itself. Only explicite hyperlinks are allowed to call for online activity. That's also why it's difficult to use streaming video like YouTube and online components like Google Maps in an ePub; they totally rely on online resources. Apple is very protective and prevents undesired or unexpected online data usage from the user's standpoint. That's also why you need to be reluctant or at least very careful and clear in accessing online resources in DPS files after the initial download of the folio.

                                                                                   

                                                                                  The second part in the final post in this thread: Tumult Hype | Hype and full bleed, fixed layout ePub 3... (Nov 24th 2014) gives you an inkling of this "online iframe vs. local addressing" phenomena. I'm not a coding wizard, but I do belief there's something to be dealt with from Adobe's side to make Edge Animate's output of animated offline components (or InDesign's input and output of the OAM) accommodate for ePub 3 FXL.

                                                                                   

                                                                                  One of the other and more obvious culprits, is the use of those CDN options (for required jQuery scripts), in stead of keeping the scripts embedded in the OAM file or present in the Web output from Edge Animate.

                                                                                  • 39. Re: How to add Edge Animate Web Publish to FL EPUB 3 for iBooks.
                                                                                    Iain__Anderson Level 1

                                                                                    OK, I have a complete solution that I've used to get HTML animation working on iBooks on iPad and accepted into the iBooks Store. Here's a draft article which will hopefully be published soon, but I'd like to verify it first. I would really appreciate it if someone here could test my method and report back? You'll need Hype 3 Pro as this method doesn't work with Edge Animate, nor with any text elements in the animation.

                                                                                     

                                                                                    ### How to make HTML animation work in ePub

                                                                                     

                                                                                    Hoping for ePub to be a replacement for the Digital Publishing Suite? I know I was. Unfortunately there are some bugs which stop HTML animations from being displayed on the iPad’s version of iBooks, and stop links working even on the OS X version of iBooks. However, there is a solution, if you have access to Hype 3 Professional.

                                                                                     

                                                                                    Currently, InDesign prefers OAM files for placed HTML animation files, and until recently, only Edge Animate could create them. The latest release of Hype 3 Professional adds OAM export, and it turns out to be the only way forward, at least for now. Why? The explanation is a bit convoluted, so stay with me.

                                                                                     

                                                                                    InDesign embeds HTML animations into ePub using the iframe tag, inserting the HTML file that lives within the OAM package. Unfortunately, iframe doesn’t work on iPad — by design or otherwise — and you must avoid it. Peeking through Hype’s regular output reveals that it loads itself into a div tag with some Javascript, and as luck would have it, if you replace the iframe with the same chunk of div code that Hype uses, you can make the animation work on iPad, and the links work everywhere.

                                                                                     

                                                                                    Edge Animate uses a different structure internally for its animations, and sadly the same strategy doesn’t work for Edge Animate output. If you can make it work, please share, but for now, it’s Hype 3 Pro all the way.

                                                                                     

                                                                                    Important note: don’t use any text in your HTML animations. Use images only, at least for now, and PNG files are best if you want transparency. This solution is a workaround, and something about it doesn’t work well with live text.

                                                                                     

                                                                                    Step by step, then:

                                                                                     

                                                                                    Place the OAM files into your InDesign layouts, and export to ePub (Fixed Layout) as you would normally. If you test in iBooks for OS X, you’ll find that links don’t work, and if you push it to your iPad, animations won’t play at all.

                                                                                     

                                                                                    Decompress the ePub to its component folders. I’ve been using “ePub Zip-Unzip 2.0.1” but later versions exist and should also work.

                                                                                     

                                                                                    Dig into the OEBPS folder, and look through the page-based HTML files (one per page) to find each page where you used an animation. Look for the <iframe> tag that you want to replace and note what the name of the embedded file is.

                                                                                     

                                                                                    Next to all the pages, there’s an “html” folder which contains a subfolder for each OAM file. Find the folder you just noted down.

                                                                                     

                                                                                    Within the enclosed Assets folder, there’s an HTML file with the same name and the “.html” extension. Open that in a text editor and look for the code after the comment “copy these lines to your document”. Don’t copy everything, though — just the entire <script> line inside the <div> tag.

                                                                                     

                                                                                    Return to the page-based HTML file where the <iframe> is, then replace the entire <iframe> tag (including the closing </iframe>) with the code you just copied.

                                                                                     

                                                                                    OK. One important change. The file this code points to is in a different relative location. To update the URL in the src parameter, add “html/FILENAME/Assets/” at the start.

                                                                                     

                                                                                    Another important change. While the div ID in our code should stay the same, we need to change the Hype-generated script file to point to the same ID. First, copy the ID name from the div tag that encloses the <script> line. Next, open up the script file that you’re referencing (something like “FILENAME_hype_generated_script.js”) which will be a couple of levels deeper in the .hyperesources folder. In the first line, you’ll see a parameter “c” with a value matching the old Hype-made ID name, like “FILENAME_hype_container”. Replace that name with the ID you copied, so it reads something like:

                                                                                      c=“_idContainer795”.

                                                                                     

                                                                                    Save the file and close it. Open up all the other page files you’ve placed animations on, repeating these steps until all iframes have been replaced.

                                                                                     

                                                                                    It’s a really good idea to keep a copy of these newly updated HTML files, just in case, but if you have any problems (or re-export any animations) you may need to start again from scratch.

                                                                                     

                                                                                    One last thing you may need to handle is that some of the HTML files produced directly by Hype don’t have the correct XML name space to be accepted by Apple for distribution in the iBooks store. The easiest fix, even though these files aren’t directly referenced, is to add the correct code to the top of those pages. Which pages exactly? The one named “file.html” inside each Assets folder that you copied code from earlier. Replacing the lines leading up to and including <html> with:

                                                                                     

                                                                                    <?xml version=“1.0” encoding=“UTF-8” standalone=“no”?>

                                                                                    <!DOCTYPE html>

                                                                                    <html xmlns=“http://www.w3.org/1999/xhtml” xmlns:epub=“http://www.idpf.org/2007/ops”

                                                                                     

                                                                                    You can now re-zip the EPUB with ePub Zip-Unzip, and it should work. Animations play everywhere, and the book should also be suitable for submission to the iBooks Store. They took this one, which has several embedded animations: iTunes - Books - Queensland Caravan Parks Directory 2015 by Caravan Parks Association Queensland

                                                                                     

                                                                                    OK, that’s it! Preview and test. Hopefully in the future this will be unnecessary.

                                                                                    1 2 Previous Next