Embedding a HTML5 Animation made with Tumult Hype in PubCoder

This is a tutorial for placing a Tumult Hype document into a PubCoder project. PubCoder can export to several format, the most cross-platform format being the Epub3 format. At the top of the PubCoder app, select this option:

Screenshot 2020-07-01 at 1.31.41 PM

Sizing :triangular_ruler:

If you're hoping to create a full size document in your book, create a document at the size: 1024x768.
Hype will handle generating 2x images for you so you get sharp images on all devices.

Embedding in PubCoder

Export your Tumult Hype document by selecting File > Export as HTML5 > Folder and check 'Create Enclosing Folder'.

You'll end up with a folder (with the name of your document) containing two things:

  1. documentname.html
  2. a documentname.hyperesources folder

We're going to want to get this top level folder into PubCoder so we can load the .html document as an iframe.

In PubCoder, go to the page where you want to place your Hype document, look in the Objects Pane down towards the Controllers section and drag in a new 'Smart Object' into your page:

Screenshot 2020-07-10 at 2.12.16 PM

Resize your Smart Object to be the same size as your Hype scene, then double click on it to edit. Switch to the Assets tab and drag in your top-level folder. Next, ctrl + click (or select the down arrow on the new folder) and select 'Attach Asset'. This will ensure it is exported during an export from PubCoder.

PubCoder organizes folders like this into the 'folders' folder, so to access the .html page within this system, the path will be: ../folders/Lightpad/Lightpad.html

In the HTML area, the iframe code for a document named 'Lightpad' would look like this:

<iframe id="hypeframe" src="../folders/Lightpad/Lightpad.html" height="768" width="1024" style="border:none;"></iframe>

Image below:

Quick video showing this entire process:

Note that a width or height of 100% will trigger an error when checking Epub status at the end of the exporting process

Once you have this all setup, you can export to any of the format supported by PubCoder with your Hype project.

For a downloadable example project, visit this post by our friends at PubCoder:

3 Likes

Just for context I am adding the link here for the software used in this great tutorial:

Good to see possibilities in a post iBooks Author world.

14 posts were split to a new topic: Reloading a Hype document when viewing a Pubcoder page