Creating a Cookie for Hype

One issue with Hype can be that when you leave the page (for instance to view a work page built in Muse) Hype doesn’t remember where in the timeline the user was. So, every time the page is reloaded it starts back from the beginning.
But it doesn’t have to be like that. We can create a JavaScript Cookie which saves the current time (or any other value) to the browser. And that Cookie will remain until the browser (not just the window) is closed.

Setting and especially getting cookies requires a bit more code than you might think, so I have written a little script to simplify the process.

This is the .js file that you will need:
anyCookie v1.0

Each of the videos below explain different uses of cookies, and with each video it gets more complicated.
So I advice you to start with the first, work your way through to the last, so that you understand what is going on, because a little bit of coding is needed here.
As always, if something doesn’t work out, you know how to reach me!


Part 1 – Basics:

Here I just explain what Cookies are and how they are used in a very simple example.

	setCookie({
		cookieName : "John",
		value : "Hi, I am a cookie called John"
	});
	getCookie("John");



Part 2 – Remembering last scene:

In this video I explain how a cookie can be used, so that Hype remembers the last scene it was on.

	setCookie({
		cookieName : "lastScene",
		value : hypeDocument.currentSceneName()
	});
	var last = getCookie("lastScene");
	hypeDocument.showSceneNamed(last, hypeDocument.kSceneTransitionInstant);



Part 3 – Skipping intro:

Let’s now take a look at how we could skip an intro page, once the user has already seen it.

	setCookie({
		cookieName : "time",
		value : true
	});
	var visited = getCookie("visited");
	
	if(visited){
		hypeDocument.goToTimeInTimelineNamed(4, 'Main Timeline');
	}
	var visited = getCookie("visited");
	
	if(visited){
		hypeDocument.showSceneNamed('scene 2', hypeDocument.kSceneTransitionInstant)
	}



Part 4 – Remembering time:

Last but not least I show you how you can save the current time of a timeline, so that you can go back to that exact moment.

	setCookie({
		cookieName : "time",
		value : hypeDocument.currentTimeInTimelineNamed('Main Timeline')
	});
	var time = getCookie("time");
	var duration = hypeDocument.durationForTimelineNamed('Main Timeline');
	
	if(time == duration){
		time = 0;
	};
	
	if(time){
		hypeDocument.goToTimeInTimelineNamed(time, 'Main Timeline');
		hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
	}