Embedding Tumult Hype exports in CircularFLO [Tutorial]

Screen Shot 2022-06-10 at 4.27.16 PM

CircularFLO is a powerful tool to build fixed and reflowable EPUB files. To include your Tumult Hype document in CircularFLO, follow these steps:

  1. Set up your Hype document's scene size to match the pixel size you're building your ePub. Typically, you would build for either a Portrait or Landscape iPad if you wanted your image resolution to be retina-scale and your widget dimensions were targeted for full screen. This would equate to a scene size of 1024x768 or the reverse. Note that Hype optimizes images automatically.
  2. Make sure you're not using any external URLs: that means no Google Fonts or embedded videos / external JS.
  3. Export your Tumult Hype document to its own folder as HTML5. (File > Export as HTML5 > Folder). Don't use the Hype CDN, and we recommend avoid using Google Fonts which also require network connections.
  4. With your InDesign document open, click on CircularFLO's icon, and click Tools > Code and Widget tools
  5. Select the exported documentname.html file.
  6. To resize the resulting box, hold ⌘ + shift and drag a corner to get the box the same size as your scene size.

Note: Any re-exports you make from your Tumult Hype document should be done in the same folder you originally exported to. CircularFLO will pick up any changes during the export process.

To read CircularFLO's documentation for this workflow, please visit: Web code and interactive widgets.

Video Demo

(Featuring work by the great @michelangelo)

Besides getting your document ready for sale in the iBooks store, you can also share your content on Circular Software's 'Masterplan' tool, free for up to 3 publications:

A few preflight tips:

  • To get your text layers ready for export, click 'Lift live text from base artwork'
  • You won't be able to export to Amazon book formats since they don't support HTML, so click 'Add Preferences Panel' within CircularFLO's document tools (shown above) and set 'Export amazon ready file' to 'No'
2 Likes