Resume a scene from its last played time

Tumult Hype exposes a number of powerful JavaScript API functions that make it easy to remember the current state of your animation. The demo below shows how to return to the last played state of a scene. In other words, if we had a 10 second scene, but we only saw 5 seconds of the animation, we can easily return to that scene and pick up where we left off.

By default, scenes start from the beginning whenever they are loaded, but this technique makes it possible to load a scene from its last position: 5 seconds into the timeline, 10 seconds, or at whatever point the user last viewed (even 3.445 seconds).

The first thing to do is to create a variable that remembers the current time when you leave a scene. To do this, create a ‘On scene unload’ JavaScript function that runs this script:

	window.currentTimeForScene1 = hypeDocument.currentTimeInTimelineNamed('Main Timeline');

In our example, this will record the current state of scene 1 when we exit it and switch to scene 2. Now, we can use the ‘currentTscene1’ variable wherever we want the exact value in seconds of the ‘played time’ for that scene. When we return to that scene, we’ll be using this variable to jump back to that moment. But we only want to jump back to that moment if we’ve visited that scene (and viewed more than 0 seconds of the timeline). We’ll run this JavaScript function as an ‘On Scene Load’ function when viewing the first scene:

	if (window.currentTimeForScene1 != null) {
		hypeDocument.goToTimeInTimelineNamed(window.currentTimeForScene1, 'Main Timeline');
		hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
	} else { 
		// use this space for something if the timeline has not been played. 
	}

To set this up for multiple scenes, you’ll need to use different variables (such as currentTimeScene2) to record and jump to different points in time.

The Tumult Hype document attached here demonstrates this technique:

Return to last position.hype.zip (25.5 KB)

6 Likes

Fantastic tutorial Daniel. I've been wanting to learn how to use "hypeDocument.currentTimeInTimelineNamed()" and this post, along with the demo, has helped me immensely. Many Thanks!

1 Like

Hi Daniel!

Is there anyway save this in local storage? I’m making an iOS app and would love it if the app picked up where the user left off when they return to the app at a later date.

Thanks!

Definitely – this library will help you store and request local storage data: https://github.com/julien-maurel/jQuery-Storage-API

Here’s an example in the wild: http://jsfiddle.net/s89wt/118/

Thanks for the quick reply!

I’m a novice in HTML and Javascript, but would you happen to have an example of how to store the last scene viewed into local storage I could see and play around with?

Thanks again!!

Thanks for this solution. I adapted it to add a “back 5 seconds button” to my Hype. The only thing I would add to this is that if you are doing something like this, please note that the seconds are actual seconds, not milliseconds like most Javascript scripts. So, 5 seconds is “5” not “5000”.