Create a 'Back' button to transition to the last-visited scene

Tips & Tricks
1

Below is a technique to create a ‘Back’ button within your Tumult Hype document which will take your users to the last visited scene. This does not override the Browser back button.

First, on all scenes where you want to remember visits, add this JS function to run ‘On Scene Unload’:

window.lastHypeSceneName = hypeDocument.currentSceneName();

To create your back button which will look at the last ‘Unloaded’ scene, run this function when the button is clicked:

if (window.lastHypeSceneName == undefined)
{
// do nothing.
}
else{
hypeDocument.showSceneNamed(window.lastHypeSceneName, hypeDocument.kSceneTransitionCrossfade);
}

The first ‘if’ ensures that there isn’t a Javascript error if no scene has been visited yet.

Other scene transitions can be found here: http://tumult.com/hype/documentation/3.0/#api-constants

Here’s a downloadable example:

backtopreviousscene.hype.zip (14.1 KB)

12 Likes
2

Very cool and useful, Thanks Dan!

1 Like
3

Hello Daniel, I really wanna use this trick.
Can you explain me how to use JS functions? I mean, how to run On Scene Unload ?
How Do I create a JS from zero?

Thanks a lot.

4

If you open the attached .hype file above, you’ll see that in the Scene Inspector, there’s a ‘On Scene Unload’ action. More info can be found here under the ‘Actions’ chapter: http://tumult.com/hype/documentation/

There’s also more info on JavaScript functions and how to create them in the JavaScript chapter.

6

This works brilliantly - makes it really easy to navigate any which way between scenes.

Alastair

7

This is extremely helpful. Thanks to all who contributed. Another question: Any way to fine-tune the transition on the back button to crossfade for 0.5 second duration?
Thanks!

8

You would change this line in backbutton() from:

hypeDocument.showSceneNamed(window.lastHypeSceneName);

to:

hypeDocument.showSceneNamed(window.lastHypeSceneName, hypeDocument.kSceneTransitionCrossfade, 0.5);
9

Thank you thank you thank you thank you thank you.

1 Like
10

Is there any way to get this to go back more than one step? I run into a loop if it goes forward two steps.

For example:

Scene 1 > Scene 2 > Scene 3

If I go to Scene 2 from Scene 1, no problem to back out from that.

But if I have a back button that goes from Scene 3 to Scene 2, I can’t go from Scene 1 to 2 to 3 and eventually back down to Scene 1 from 3 because it always wants to go back from Scene 2 to Scene 3 in a loop after you hit 3.

Not sure if I explained that well. How the progression winds up looping, shown in a breadcrumb format below would be:

Scene 1 > Scene 2 > Scene 3 > Scene 2 > Scene 3 > Scene 2 > Scene 3, etc.

So if there is any way to get this to remember 2 steps, it would be great to see that listed here.

My thanks in advance if this is possible!

11

You probably can do this in JS. But I do not see any point in doing that. Unless you are using a symbol.

Since you want the buttons to always go to a particular scene you should just point each back button to the particular scene.

12

As it happens, the back buttons point to one of two scenes to start with, depending on which one of the two they started at. The subsequent 3rd scene can also be drawn from another starting point. So I actually do need some kind of capability in this regard.

13

Can you post a project example of what you. This will hopefully make it clear to me what is going on… ta

14

I am afraid the description of what I am looking for is the best I can do. I am under a time crunch, and was hoping someone would be able to understand the description well enough to help.

I didn’t realize the problem I am having was going to be one until just prior to putting in my initial request here.

I started to put together a sample file, but quit when I realized the time spent completing it would cost me too much on the actual project.

Crossing my fingers someone can understand what I need - just to be able to go back 2 individual steps using a back button, to take you back the exact way you arrived from an original 2 step (or scene) path.

15

I first assumed you just had a next and back buttons. But understand you have navigation buttons also.

I am sure I wrote something a while back to do this but at home… If I have a mo I will see if I can reinvent the wheeel…

16

Yes - in addition to buttons there is a kind of menu system. There is a set of content pages that can be navigated to from two different locations. From each content page you can access a sort of case study and a few video pages.

If I were only going to the content pages everything would be fine, but accessing the case study and video pages from the content pages is what is causing the problem I am having.

By pages, I mean scenes, btw.

My thanks for any help!

17

Thought I would check in here again to see if anyone had any further advice or code to offer…

18

This method uses hashes for scene names, so each scene visit adds something to your history: Linking to a specific scene from inside and outside of a Tumult Hype document

Otherwise, I would create your own Javascript array which contains your history then add hypeDocument.currentSceneName() to that array On each Scene Load. Here’s a good cheatsheet for working with arrays.

2 Likes
19

Thank you, I will check that out!

20

This makes sense.

But also here is an example of what I think you can do with your own history back button.

The idea is each scene on unload adds it's name to an array.

We place a global var that gets the word 'back' set to it when the back button is clicked.

We use that in an if clause so if the back button is clicked then the array is not populated.

When the back button is clicked the array will remove the last entry. And the scene will go to the last entry in the array

Nav_back_v2.hype.zip (53.4 KB)

1 Like
21

How exactly is this done?

“We place a global var that gets the word ‘back’ set to it when the back button is clicked.”

I don’t see any Action associated with the Back buttons …