Importing Hype OAM files to Adobe InDesign (Animated HTML for Epubs or Export to the Web)

[Daniel]

The process to get an OAM file into an Indesign has changed slightly since I last tried it, so I thought I would make a quick post to show the new workflow.

InDesign supports Epub export, and you can leverage plugins like the in5 plugin to get your InDesign project on the web.

1. In Hype, export your document as an OAM file. You'll want to match the width of a column in your Indesign file.
2. Drag + Drop it into Indesign (This will work on either Mac or Windows)
3. This changes your cursor to a thumbnail of your Hype document. Click to place the object.
4. This will place the OAM element over your text. You can now adjust placement using placement tools, and do things like setting your 'text wrap' settings. This is important if you plan on exporting as an EPUB:
5. Next, you may want to Embed this OAM file within your InDesign file, since you are loading this link from a folder on your computer. To do this, go to the 'links' tab and right click on your OAM file and select: 'Embed Link'
   
6. At this point, you can export to any format that supports HTML embeds, which includes those listed with the green checkbox:
   

Publish Online:

Using the in5 InDesign plugin, to get the full HTML export from your InDesign project and any embedded Hype content.

Or via Adobe's publishing workflow. Here's an example Hype document embedded within a fixed layout EPUB template:
https://indd.adobe.com/view/b2a8e50e-11bb-46a3-a002-a8baf6c5acfc

Epub:

Here's an EPUB file loaded into iBooks:

test.epub.zip (992.3 KB)

Things to know

If you hit validation issues, please read: ePub with Hype .oam upload error on Apple Books - #8 by ehutson

You may need to adjust the 'target' for links if you have any in your Hype document: Howto: Create Links within HTML Widgets (iframes) that open webpages in the same window

Embed any custom fonts you use (Google Fonts may not be allowed to access the font server), or stick to built in web-safe fonts.

There's likely a file size limit for videos, so make sure you keep your file sizes as optimized as possible. If your oam widget is being shown at 400px x 400px, export your video to those dimensions.

[tomhughes]

I am not sure you are aware of this.
Using InDesign2020 Digital Publishing your info was very helpful. However the results don't seem to work in the iPad version of Apple Books.

1- I created a test InDesign document that includes several OAM widgets created in Hype Pro.

2- I Exported to ePub3 fixed layout

3- I Tested the resulting ePub3 as follows…

• Opened the ePub3 in Apple Books app on two different iMacs - All items work as expected
• Opened the ePub in Apple Books app on two different iPads - All OAM widgets have Disappeared
  A white, empty area is on the page where the OAM widget was originally placed.
  The empty area does not respond to touch events.

I don't know if this can be fixed from your end but as of now this workflow thru InDesign is a non starter. This is too bad because the workflow works so well on the iMac and is the closest I have seen to the simplicity of iBooks Author

[tomhughes]

And yes, the OAM files were all embedded into the InDesign document

Thanks

[Daniel]

Update, Oct 28, 2021: An OAM dropped into Indesign now works correctly on iOS. The workaround below was valid in Aug 2020 but is no longer needed

My apologies, Tom, I really should have tested this on an iPad. I can confirm it doesn't work.

When dragging an OAM file into InDesign, an iframe is generated that points to that OAM's content.
For some weird reason, this works fine everywhere except for iBooks as you discovered. I see lots of discussion about iframes pointing to external content not working, but nothing about local iframed content. I did find a way to get this to work though, but it's a long post.

InDesign generates this code for an OAM dropped in, assuming your export name is moto_animation. For simplicity, I recommend exporting with lowercase filenames:

<div id="_idContainer017">
		<div class="_idGenObjectAttribute-3">
				<iframe class="_idGeneratedPreventDefault" id="_idHTMLPageItem000" src="html/moto_animation/Assets/index.html">
			</iframe>  
		</div>
</div>

iBooks doesn't like this, but it does work if we break open the epub and load the JavaScript directly for that Hype content:

	<div id="_idContainer017">
		<div class="_idGenObjectAttribute-3">
			<div id="motoanimation_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
				<script type="text/javascript" charset="utf-8" src="html/moto_animation/Assets/moto_animation.hyperesources/motoanimation_hype_generated_script.js?62715"></script> 
			</div>
		</div>
	</div>

So the annoying part here is that to get the above code and file path, I had to unzip the epub, find the embed code, replacing the iframe, save that XHTML file, then rezip the folder, and renaming the .zip file as .epub. I found a way to speed this up by only working in Indesign.

First export your file as an regular HTML file to your desktop. Use the same export name that you will use when exporting as OAM.

You can then open the .html file and retrieve this code, the three lines that load a Hype document:

<div id="motoanimation_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
				<script type="text/javascript" charset="utf-8" src="Moto_animation.hyperesources/motoanimation_hype_generated_script.js?62715"></script> 
			</div>

So the only thing you would need to add to this code for it work within InDesign, is: html/Moto_animation/Assets/ in front of Moto_animation.hyperesources/motoanimation_hype_generated_script.js?62715 because InDesign places OAM content in that structure.

So your complete code to use in InDesign assuming your export name was Moto_animation would be:

<div id="motoanimation_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
				<script type="text/javascript" charset="utf-8" src="html/Moto_animation/Assets/Moto_animation.hyperesources/motoanimation_hype_generated_script.js?62715"></script> 
			</div>

'Links' like images and OAM files leave the links panel if they don't exist in the document. So to workaround this, I recommend placing your oam file somewhere on your page that has no other animations, and just setting its opacity to zero and making it 0x0 dimensions. There might be a better way to handle this, but I don't see how. Once you do that, you can add the object (using the direct JS reference).

So now that the OAM is in InDesign and you know what code you can use, select Object > Insert HTML... and paste that final motoanimation_hype_container code.

Here's a guide to generating that embed code (replace with your width and height):

 <div id="oamfilename_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
   <script type="text/javascript" charset="utf-8" src="html/oamfilename/Assets/oamfilename.hyperesources/oamfilename_hype_generated_script.js" </script></div>

Below is my InDesign document and exported Epub for testing:

iBooks-InDesign Hype Example.zip (2.2 MB)

This is the same as this recommended workflow from 2015: Howto: Get Hype output into a Fixed-Layout EPUB on an iPad

• Readium (Chrome Extension Epub reader)
• Books.app for Mac + iBooks for iOS

[tomhughes]

Thanks, Daniel.
I and many others appreciate your taking the time to both find a solution and carefully explain it to us.
Much appreciated.

Tom Hughes

[Daniel]

Thanks to @tomhughes for letting us know that OAM's dropped in InDesign 16.4.0.54+ work as expected on iPads. No workaround needed...

[habo (Hakan Borgstrom)]

[quote="Daniel, post:1, topic:18731"]
in5 plugin
[/quote

I’m kind of new to this but when I export an epub from indesign – with an oam from hype (with imbedded link) the epub-checker complains about missing fallback. I can´t find any solution to this since there seems to be no way to provide an iframe with fallback. I ony find “onerror” but that’s for images. Or is there a simple solution to this?

[jonathan (Jonathan Deutsch)]

Would it be possible to post (or email support@tumult.com):

• a zip of your .hype document
• a zip of your indesign file
• a zip of your exported epub file
• instructions on how to use epub-checker to get the same output? (I'm not familiar with this tool).

Thanks!