• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
3

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

Participant ,
Jul 03, 2014 Jul 03, 2014

Copy link to clipboard

Copied

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

TOPICS
EPUB

Views

16.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Jul 15, 2014 Jul 15, 2014

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

...

Votes

Translate

Translate
Adobe Employee ,
Jul 07, 2014 Jul 07, 2014

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 07, 2014 Jul 07, 2014

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 14, 2014 Jul 14, 2014

Copy link to clipboard

Copied

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-creating-an-inte...and 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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 14, 2014 Jul 14, 2014

Copy link to clipboard

Copied

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).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 15, 2014 Jul 15, 2014

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 15, 2014 Jul 15, 2014

Copy link to clipboard

Copied

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/>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 16, 2014 Jul 16, 2014

Copy link to clipboard

Copied

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-ebook.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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 16, 2014 Jul 16, 2014

Copy link to clipboard

Copied

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! 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 19, 2014 Jul 19, 2014

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jul 31, 2014 Jul 31, 2014

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 01, 2014 Aug 01, 2014

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 09, 2014 Nov 09, 2014

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 12, 2014 Nov 12, 2014

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 19, 2014 Nov 19, 2014

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 24, 2014 Nov 24, 2014

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 24, 2014 Nov 24, 2014

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 24, 2014 Nov 24, 2014

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 29, 2014 Dec 29, 2014

Copy link to clipboard

Copied

Hi Iain

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 08, 2015 Jan 08, 2015

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 11, 2015 Jan 11, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 11, 2015 Jan 11, 2015

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 12, 2015 Jan 12, 2015

Copy link to clipboard

Copied

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

Cheers

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 14, 2015 Jan 14, 2015

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 14, 2015 Jan 14, 2015

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines