Exporting to Tumblr as an Image or Video Post

Exporting & Previewing
1

Using Dropbox

Since Tumblr doesn’t allow the full embedding of Hype content (They don’t support full iframes or JavaScript), the next best thing is posting an image (or video – see below) to link to your document. When project is complete, the quickest way to get it on the web is to export it to your Public folder on Dropbox. If you don’t have a Dropbox account, signup here. It’s a pretty quick process in Hype. Select File > Export as HTML5 > Dropbox…

This Public Dropbox URL is the quickest way to share your document, but you may find better performance if you host it on your own Webhost. Here are a few hosting providers we recommend.

You may also want to use an image to link to your hosted document. Here’s how to capture an image of your document, which can be used to create a ‘Photo’ post:

  1. First, take a screenshot of your document. Go to your first scene and find a good point in your animation. Press command + shift + 4. This gives you a crosshair you can click and drag over your animation. When you’re finished, a PNG image will be saved to your desktop called something like ‘Screen Shot 2013-02-21 at 12.28.00 PM.png’.
  2. Upload this file as a Photo post to Tumblr.
    3 Click the ‘Click-through Link’ button, and paste your Dropbox URL. This will essentially make the image link to your Tumult Hype document. (shown below)

That’s it!

Creating an animated GIF or Video from your document

To export as an animated GIF, select File > Export as Movie > Animated GIF.

To export as a video, select File > Export as Movie > Video

Embedding your Tumult Hype document within your Tumblr Theme

To embed your Tumult Hype document within your theme, you’ll need to upload your exported folder to a web host first.

Copy your DIV embed code from your exported .html page. It should look something like this:

<div id="mydocument_hype_container" style="position:relative;overflow:hidden;width:600px;height:400px;">
<script type="text/javascript" charset="utf-8" src="mydocument.hyperesources/mydocument_hype_generated_script.js?27811"></script>
</div>

This by itself won’t work, since the src value needs to contain the absolute URL of your .js file. To fix this, find where you uploaded the .js file on your web server. It would be accessible from a URL like this:

http://site.com/mydocument.hyperesources/mydocument_hype_generated_script.js

Once you can load the .js file in a browser, use that URL in place of the <div… code above. You should have code that looks similar to this:

<div id="mydocument_hype_container" style="position:relative;overflow:hidden;width:600px;height:400px;">
<script type="text/javascript" charset="utf-8" src="http://site.com/mydocument.hyperesources/mydocument_hype_generated_script.js?27811"></script>
</div>

Make sure the width and height match the dimensions of your own document. Once you have the correct snippet of code, click ‘Customize’ for your Tumblr theme. Then click ‘Edit HTML’ and paste this code where you would like it to appear in your theme.