It’s pretty quick to get your Tumult Hype document placed in your Freeway site. If you have experience with Freeway actions, you may be interested in the Hype + Freeway action created by Paul Dunning here.
For this example, our Tumult Hype document is called ‘hypedocument’. This article also assumes that you’ve already exported your Freeway Pro document to a folder on your computer. If you haven’t done so, please export your Freeway site to a folder by clicking on the ‘File’ menu, then click ‘Upload’. Select ‘File Copy’ and then click ‘OK’.
1) Once you’ve finished creating your Tumult Hype animation, export it to the same folder where you exported your Freeway site. When exporting from Hype, uncheck the ‘Also create enclosing folder’ option. You should have a folder called ‘hypedocument.hyperesources’ and ‘hypedocument.html’ in the folder of your Freeway project.
2) In this step, we’ll include your Tumult Hype document in your Freeway Pro site. In Freeway, add a ‘Markup Item’ by clicking on the ‘Insert’ menu and clicking ‘Markup Item’. This creates a box where your Tumult Hype document will be shown. Its size should match the size of your Tumult Hype ‘Document Size’, which can be found in the ‘Document Inspector’. In the HTML Markup window, add this code:
<div id="hypedocument_hype_container" style="position:relative;overflow:hidden;width:380px;height:380px;">
<script type="text/javascript" charset="utf-8" src="hypedocument.hyperesources/hypedocument_hype_generated_script.js?65120"></script>
</div>
Since our document was named ‘hypedocument’, you’ll see that the the div id, script folder, and script name all reference that document name. These names should be changed to match your document’s name. This div is also contained in the DOCUMENTNAME.html file which Tumult Hype exports if you select ‘Also save HTML file’ during the export process. You can also copy this div code by opening that .html file with a text editor.
3) Now that you’ve added the markup containing the div, all that is left is to re-export your Freeway site to that folder once more by clicking ‘File’ > ‘Upload’ and again making sure that ‘File Copy’ is selected. If you run ‘index.html’ (or whichever page you’ve placed the Tumult Hype animation on) you should see everything work. To make this site live on the web, upload all of the files contained in the folder where you exported your site.
That’s it! To download an example file containing all of the code and files explained in this article, download this zip file:
FreewayExample.zip (46.4 KB)
Using an iframe
If you already have your Tumult Hype document uploaded to your site, the process is a little easier. If you have your document uploaded to http://site.com/document.html, simple embed an iframe as a code snippet:
<iframe src="http://site.com/document.html" height="250" width="250" style="border:none;" frameborder="0" scrolling="no" seamless></iframe>
Using a Freeway Action
Paul Dunning of Actionsworld has created a handy Freeway Action to simplify this process. You can download his action from here.
If you are seeing issues with flexible documents, please see this thread on the Freeway forums: “A method to get Hype animations to load in flexible height”.
Note: Do not name your Tumult Hype document ‘index’ – this will cause problems.