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 formats, 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:

https://medium.com/inside-pubcoder/how-to-embed-hype-animations-and-html5-widgets-in-pubcoder-c2e883fc5b7

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

I'm currently testing out PubCoder, using a Hype html export. I've followed the tutorial to the T but I'm getting an error message. I haven't gotten any response from PubCoder but perhaps someone here in the Tumult family, they're run into this. When trying to export, I keep getting this error message:

0 Page Cover ▸ Smart Object 1 SmartObject source code is not XHTML compliant

On my page cover, I just have a button that when pushed, it transitions(fade) to the next scene. Thoughts?

What format are you exporting to? Does the hype animation appear in preview + export?

Viewers like iBooks that display content can show content that is not XHTML compliant, so it's more of a 'this violates the spec, but it is not a deal breaker' warning. Placing Hype content within an iframe encourages the viewer to do its best to show content, so as long as it displays correctly then you should be fine.

I've been trying to export an epub3 file (ibook) but I get this error:

What is the code? It may be that you have smart quotes when you should have normal quotes.

is invalid code, while ' is valid.

Scratching my head because I don't see any code. This time as a test, all I did was import a png into Hype and exported as html then into pubCoder. No buttons, no code.

But in Pubcoder, what do you have in the HTML view of the Smart Object?

It would look something like:

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

Screen Shot 2020-12-17 at 4.45.28 PM

These are smart quotes. Just retype them and make sure they are straight and not curly.

1 Like

Wow. humbled. Thanks Daniel. That was it. Appreciative for your help.

1 Like

“Smart quotes”

Should be renamed!
“Not so smart quotes” or “spanner quotes”

This might be interesting for everybody using this software… it is currently on sale for a lifetime deal on AppSumo.

2 Likes