Free Template Tuesday #31 – Tumult Hype “Navigating”

Photics.com is not a Tumult fansite. Sure, I like Hype, but I tell it to you straight. The software has its strengths and weaknesses. One of those weaknesses is scene management. The app becomes quite cumbersome to work with when you have more than a few scenes. While some changes can be made globally, modifying multiple scenes generally turns into a clickfest. To mitigate that problem, I’m pleased to present the “Navigating” template.

This week’s Free Hype template combines the use of “Symbols” and “JavaScript” to dynamically manage the switching of scenes. Traditionally, managing an “Action” that changes a scene would look like this…

Take a good look at that picture. There are five settings to manage. First, you have to add the “On Mouse Click (Tap)” action to an element. Next, you have to choose the action taken. In this example, it’s the “Jump to Scene” action. When that option is selected, the “Scene” needs to be chosen. In this example, “Next Scene” is the option. Since there are many different scene changing effects, the “Transition” method needs to be selected. Depending on the type of transition, a “Duration” value is necessary.

If your project has 12 scenes, each with two navigation buttons, that’s 120 settings to set. Instead, you can leverage the Hype API.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var duration = 0.5;
var scenes = hypeDocument.sceneNames().length;
var current = hypeDocument.currentSceneName();
 
if (element == forward) {
    if (current < scenes) {
        hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushRightToLeft, duration);
    } else {
        hypeDocument.showSceneNamed('1', hypeDocument.kSceneTransitionPushRightToLeft, duration);
    }
} else if (element == back) {
    if (current > 1) {
        hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushLeftToRight, duration);
    } else {
        hypeDocument.showSceneNamed("" + scenes + "", hypeDocument.kSceneTransitionPushLeftToRight, duration);
    }
}

The following code is added to the left and right buttons of a persistent symbol. Instead of having to edit 24 elements — with five settings each — only two buttons need to be edited. And if you want to change the duration, it’s a matter of changing a single value — which can even be done while the Hype project is running.

Expand View

The example shown here uses the “hypeDocument.sceneNames()” array. That makes the project even more dynamic. The template contains two blocks of JavaScript code. The first is the “Navigating Version”. (That’s the code listed on this page.) The second is the “Arraying Version”. That latter is more preferable, as you don’t have to manually number your scenes. That makes it much easier to reorder your scenes.

See the “Navigating” chapter in A Book About Hype for more details. You can also download the Navigating Template to see how it works.