Howto: Get Hype output into a Fixed-Layout EPUB on an iPad

How to get Hype output into a Fixed-Layout EPUB on an iPad

Note: This is a preliminary guide which may become an article for epubsecrets.com. If anyone out there can follow and verify this process, please let me know?

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: https://itunes.apple.com/us/book/queensland-caravan-parks-directory/id984366696?ls=1&mt=11

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

For those of you working with flexible-layout EPUBs who wish to embed Hype animations, iBooks author now exports ePub documents. It provides the following templates which are compatible with iPhone & iPad:

Once you start an ePub template, you can drop Hype animations in by export as a .wdgt file from File > Export as HTML5 > Dashboard/iBooks Widget.

Here’s more information about compatibility.

I’m interested in this.
So with iBooks Author and Hype it is possible to create ePubs that can be read on any device (that can read ePubs)?
Does Android have a kind of standard app like iBooks to read ePubs, or do users have to download a third Party app?

I’m actually looking for a way to distibute an interactive magazine that can be read on all platforms. Maybe an online version is still the best way?

Thanks!

Just regarding Android support for fixed-layout ePub: it’s bad. Google Play Books doesn’t even support hyperlinks. If your user base can go for a third party reader, we found Publiwide Reader was OK. Hype-built animations played in the same file that the iBooks Store accepted.

All that aside, it seems that iBooks Author supports non-fixed layouts. InDesign may still be the tool of choice for you.

This tutorial is really great!!!

Does anyone have an idea how to use fonts in hype with this method.
Is there no solution, hack?

Martin

Thanks @iain i will dive a little deeper into this soon. Thanks for the tutorial and input…

Has anyone had success reproducing Iain’s steps?

Thanks,
Carolyn

Hi, Is there still no way to use live text with this method?

Not sure what you mean by this.

You should be able to use local fonts. It appears that most epub readers support the 'otf' or 'woff' file based on this article:

Here's our font documentation for custom fonts.

this method says “don’t use any text in your HTML animations. Use images only”. It works great but I need live text to keep my file size down, make changes and the option to select the text in ibooks on the ipad

I haven’t seen issues with text – can you give it a shot and let us know if you run into any problems?

So I used a custom font via css. One problem, the font won’t show up in my ePub on ibooks using this method, it seems to just default to whatever the standard font is (times new roman?)

It’s been a while since I last looked at this, but back then, if there was any text in a project, I just saw a white box in the ePub, like something crashed. Since the project didn’t need text, I let it go. As far as I know it still doesn’t work, but if there’s a way to make it work I’ll happily document it.

ok, is there any way to make live text a resource in hype pro?

so there is no way possible for this to work. I’ve tried 17 ways to do this and nothing. I’m gonna see if there’s any other software that can do this better.

Well, I have searched and searched for the page-based HTML files and I can’t find them. I have XHTML files for all the pages and I have the Assets .html files but cannot find mention of <iframe> anywhere.

Help please!!

I think you got cut off… how can we help?

Hi Daniel,
I think I have figured out where the iframe is - on the xhtml page - so I am trying to follow along to get the animation to work in iBooks.
On the tutorial it says that in the first line of the .js file there is a c param but i don’t have that, may page top looks like this:

// HYPE.documents[“08_August”]

(function(){(function k(){function l(a,b,d){var c=!1;null==window[a]&&(null==window[b]?(window[b]=[],window[b].push(k),a=document.getElementsByTagName(“head”)[0],b=document.createElement(“script”),c=h,false==!0&&(c=""),b.type=“text/javascript”,b.src=c+"/"+d,a.appendChild(b)):window[b].push(k),c=!0);return c}var h=“08_August.hyperesources”,c=“08_August_hype_container”,e=“08august_hype_container”;if(false==!1)try{for(var f=document.getElementsByTagName(“script”),

The only match I can find for c= does actually point to the div id for the script that I copy.

Feeling a bit lost.

ian

That’s the right line of code, and there is a “c” parameter there, followed by an “e” parameter:

c=“08_August_hype_container”,e=“08august_hype_container”

Something actually changed from the last release, and the “e” is now the one that should match the name of the ID, and the one to change. Here’s an example from an upcoming video tutorial:

If you want to verify that it works, here’s the (new, free) iBooks release with animated ads built in Hype:

https://itunes.apple.com/us/book/id1089076180

Thank you