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

Here we are about 6 years later and my test just yesterday using a Hype Pro generated OAM widget in an InDesign2020 document then exported to epub3 Fixed Layout still does not work properly on the iPad. There is a blank screen where the widget is supposed to be.

I can’t believe Adobe hasn’t fixed this by now. 

With the demise of iBooks Author many of us are now looking for a replacement app to use for design and production of multi-touch e-books. InDesign is the obvious choice but currently is a non-starter because viewing InDesign exported epub3 documents on the iPad still does not display embedded OAM widgets that contain interactive and animated content. Interactivity is what makes these books unique and more saleable.

Currently the best and easiest marketplace to sell our books is through Apple’s Book store, but without iBooks / iPad compatible epub3 files we cannot sell our creations through that store. (Yes, I know for the present we can continue to use iBooks Author but that avenue is bound to close eventually.)

Adobe has a long tradition of building the tools we designers need to design with. I have used those tools for 30 years.

Now is the time for Adobe to step up and create the new tools we need for e-book design and production, whether it be a version of InDesign or something totally new.

Give us the e-book creation tools with output that will run seamlessly everywhere.

After a lot of trial and error I was able to create an animated picture book that was accepted at the iBookstore and plays correctly on all the versions of iPad I've tried. It also plays on the latest version of iBooks on the iPhone, though with one glitch I'll describe below. No coding was required to create this book.

The base art was rendered in Adobe Illustrator, sound effects processed in Adobe Audition and animations created with Adobe Flash. From Flash, the animations were output through "export movie" as a sequence of png's and the sound track output through "export video" to Adobe Media Encoder and saved as an mp3 sound file. The mp3 was then opened in Adobe Audition and exported as Apple MPEG-4 Audio, AAC. Even though Apple MPEG-4 Audio files can be saved in different modes, AAC was the only one that would play correctly in iBooks. The png sequence and audio were assembled in Adobe Edge and published as an HTML5 widget for iBooks.

One anomaly, that I believe is a problem having to do with ibooks, is that the Default.png (the static, starting image) renders at a higher gamma than the animation. This causes the art to appear to darken when you play the animation. This problem can be resolved by opening the widget (remove the .wdgt suffix and the file becomes a folder), find the Default.png, open it in Photoshop and lower the gamma (I created a curve layer input 134, output 117), then overwrite it as the Default.png. I also removed the poster.png which AdobeEdge unnecessarily includes in the" images" folder. One wishes to keep the file size down. Add the .wdgt suffix and it becomes an htmI5 widget again.

The book was assembled using iBooks Author. My book, "Balloon ABC,"  is vertically oriented with a full page animation that plays when each page is tapped. One full page widget is placed on each page. Because this is a picture book, the first page is the chapter head. Subsequent pages are pages within the chapter. To the user it appears that it is just 29 pages without chapters.

In iBooks Author, use the inspector to make adjustments to the widgets. I found it best to follow this order of adjustments. In the" layout" menu of the widget inspector - title, caption and background are turned off and the margin is set to zero. Then select the interaction menu option and set to "plays on page." Go back to the "layout" menu and turn off background and set margin to zero once again (is this a glitch in iBooks Author?).

Now go to the metrics inspector and set the size and position of the widget. A non-retina iBook full page is 768x1024. In the case of my vertically oriented book the widget was designed to be 768x884 pixels. This size was chosen to take into account the 20 pixel header at the top of the page and the 20 pixel band I added at the top of every page (defined in the page layout) with the word "index" added. If you make the widget at the full image area of a vertical page (768x1004) it is impossible to access the table of contents because the widget covers over the navigation and makes it inaccessible.

Pay close attention when you set the size and position of the page. You are setting the size and position of both the animation and the default image, though this may not be apparent the first time you use the metrics inspector. The first time the widget is selected you will see selection indicators at the top of the widget but the "file info" box will be empty. Be sure you don't select the widget again with the mouse because you are setting the position of the animation at this point. In my case, I set the size to 768 x 884 and position to 0x and 20y (moving the widget down to expose the index band). Viewers can now access the table of contents by tapping the index band.

If you select the widget with the mouse once again, the "file info" will show "Default.png" Now, you are setting the position of the default image (the static image when you first come to the page). I wanted the default image and the animation to be perfectly aligned so if the settings are the same as before 768x884 at 0x and 20y then all is well. If not, you will need to set those to match if you want the default image and the animation to be aligned. I have found if the widget does not play at the proper position and size, it's best to delete the widget and start over rather than try to fix it by re-entering values.

The enhanced iBook can be previewed in iBooks on a Mac although this is really intended for iPad and iPhone viewing so I think it's best to connect an iPad to the computer and preview it on the iPad. Once everything is working, you can submit it to the iBookstore. The latest iOS allows enhanced iBooks to be viewed on the iPhone. Unfortunately, at this moment, the "plays on page" interaction does not work properly and defaults to playing full screen. You can still view the book on an iPhone but the widget needs to be closed out on each page before you can move to the next page or access the table of contents. Apple is aware of this problem. Hopefully this will be fixed soon.

Even though my book was designed at the non-retina size, the graphics are acceptably sharp on a retina iPad and the file size doesn't get out of hand. One issue remaining - when the animation starts there is an annoying white flash. I believe a bit of code used to delay the animation until it's ready to play might resolve this issue but I'm not a programmer. If anyone has a solution for this flash problem I would love to hear about it. Apple mentions a bit of code to reduce the flash for Apple produced widgets but I was not able to get it to work with AdobeEdge widgets.

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.

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 ?

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.

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.

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.

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

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