When you have ‘Show Loading indicator’ checked in the Document inspector, your visitors will see a notice when your document is loading. Below are a couple ways you can change this loading screen:
Show an image while your Tumult Hype document loads
This video by @darren_pearson is a good walkthrough of how to to this.
First of all, if your Tumult Hype document is loading slowly, this article gives tips on speeding it up. The quickest thing you can do is to open the Resource Library and uncheck ‘Preload’ for large images.
To set this up, you’ll need an HTML editor to accomplish this, but you won’t need to know any code whatsoever. We recommend using HyperEdit, [Sublime Text][3], or Atom to edit HTML.
First, we’ll make sure that the ‘loading’ image you’re going to use will appear:
-
In the ‘Document Inspector’ make sure ‘Make background transparent’ is checked.
-
Uncheck ‘Show Loading Indicator’
-
Export your Hype animation into a folder. Make sure you select ‘Also create html file’ in the export options. Edit the exported .html file in your HTML editor, and you’ll see a div that looks like this:
Next, create an image you’d like to show when that Tumult Hype document is loading. Ideally, this would be the same size as your Tumult Hype document’s scene size. (The size is shown above is width:600px;height:400px;). A small animated GIF might be perfect for your needs.
You’ll need to save this image in the folder where your DOCUMENTNAME.html file is located.
Next, we’ll add a reference to that image into the exported HTML code generated by Tumult Hype by modifying the code above. It will be placed within the div that centers our Tumult Hype document, which is also directly above the small code snippet above.
<div id="DOCUMENTNAME_hype_container" style="position:relative;overflow:hidden;width:800px;height:400px;"> <!-- inserted loader code: --> <div style="position:absolute;height:400px;top:0;left:0px;"> <img src="image.jpg"> <h3 style="color:gray;">Loading...</h3> </div> <!-- end inserted loader code --> <script type="text/javascript" charset="utf-8" src="DOCUMENTNAME.hyperesources/DOCUMENTNAME_hype_generated_script.js?69860"> </script> </div>This code (part of the above code) centers your loading image and references it:
<div style="position:absolute;height:400px;top:0;left:0px;"> <img src="image.jpg"> <h3 style="color:gray;">Loading...</h3> </div>Notice that the height of the div containing your image is the same as the height of your document. If your image is smaller than your Hype document, you’ll need adjust the ‘top:’ and ‘left:’ values to move your image to the center of the DIV that contains your Tumult Hype document.
That’s it – open your main .html file from your web server and you should see your loading image. If you open this HTML file from your computer, it will likely load so quickly that you won’t see your image (try it on a mobile device, or use Network Link Conditioner.
Please make sure that your loading image is a very low file size!
Spin.js - An image-free loading spinner
Spin.js is a customizable loading graphic that is pretty easy to integrate into a Hype document.
Two things need to be changed in your exported .html document to get this to work: First, open up the included .hype file at the bottom of this document. You’ll notice that spin.js is included in the resources library. (You can use the .hype document as a starting point). The other modification to this file is in the HEAD area of the document. You can edit the contents of the
<head>...</head>of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector. After exporting, you’ll need to add this code to your document:<div style="margin:150px auto;" id="spinnerarea"></div>The ‘margin’ value pushes the spinner down slightly, and centers it in the window.
Next, you’ll need to add the settings code at the bottom of your document before the body tag:
<!-- Use the options on http://fgnass.github.com/spin.js to set these properties --> <script type="text/javascript" charset="utf-8"> var opts = { lines: 13, // The number of lines to draw length: 7, // The length of each line width: 4, // The line thickness radius: 10, // The radius of the inner circle rotate: 0, // The rotation offset color: '#000', // #rgb or #rrggbb speed: 1, // Rounds per second trail: 60, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: 'auto', // Top position relative to parent in px left: 'auto' // Left position relative to parent in px }; var target = document.getElementById('spinnerarea'); var spinner = new Spinner(opts).spin(target); </script>That’s it! Please take a look at the attached .html document and .hype file for an example.
spinnerdemo.zip (6.2 MB)
