Tumult Hype is a great tool to design timeline-based HTML5 animations.

Tumult Hype

Hype allows for basic interactivity by adding predefined behaviors, and by transitioning between scenes.

Hype’s timeline editor

But what if you want to create a game using Hype? Maybe you need to keep track of a value, or need some randomness in your animations? You’ll need to code some custom javascript!

Attaching a script to a timeline or button

Use the inspector to display your scene or your visual element (an image or shape). Select “add javascript” as the action. Then add a new javascript function to the selected scene / element. Hype will create a new javascript file for you. You can also add javascript to a timeline.

Adding scripts to the timeline or to an element

Adding a global variable

If you need a variable that is available across all of your scenes and elements, you can make it global. You need to define global variables when the main timeline starts, so add a script to the main timeline of your first scene. Inside the script you can define your variables. You can put your variables straight into HTML’s document window. If you want to keep your variables safe from other scripts (page scripts that may be running outside of your own animation), you can add a namespace object and store your values inside that object:

Let’s say we want a transition to the next scene to happen only after a certain number of items has been clicked, or a certain score has been reached. To achieve this, we’ll start by adding a script to a button that we have on stage. Check the screenshot at the top of this tutorial to see how to add a script to a button. Name the script “checkValues”.

This code will get a random image from your documents folder and place this on stage. To achieve this, we’ll start by adding an empty container to the stage and giving this an id:

An empty element with an id

Next we will add the images that we want to use in our empty container element. We need to add them manually because they are not visible on the stage when we export our project. Click the + sign in the resource library to add media.

Adding an item to the resource library

All we have to do now is place the image in our empty container using code! The advantage of this is that you can have random images, or different images depending on the user’s progress. You could also use this to replace one image when another image has been clicked.

function initScene(hypeDocument, element, event){
// get the empty container that we created above:
var empty_element = hypeDocument.getElementById("emptyContainer5");
// the image that we want to load
var image = "myfile.png";
// we need to include the Hype project folder
var url = hypeDocument.resourcesFolderURL() + "/" + image;
// now we can replace the inner HTML of the empty container:
empty_element.innerHTML = '';
}