Howto: Synchronize timelines across layouts

Responsive Responsive Layouts
1

If you wanted to synchronize timelines across layouts, you could use this code on layout load:

	var timelineNames = ["Main Timeline"];
	for(var i = 0; i < timelineNames.length; i++) {
		var timelineName = timelineNames[i];
		var timelineKey = "timeline_" + hypeDocument.currentSceneName() + "_" + timelineName;
		var timelineInfo = window[timelineKey];
		
		if(timelineInfo != null) {
			hypeDocument.goToTimeInTimelineNamed(timelineInfo["time"], timelineName);
		
			if(timelineInfo["state"] == true) {
				hypeDocument.continueTimelineNamed(timelineName, timelineInfo["direction"]);
			} else {
				hypeDocument.pauseTimelineNamed(timelineName);
			}
		
		}
	}

And then this code on layout unload:

	var timelineNames = ["Main Timeline"];
	for(var i = 0; i < timelineNames.length; i++) {
		var timelineName = timelineNames[i];
		var timelineKey = "timeline_" + hypeDocument.currentSceneName() + "_" + timelineName;
		var timelineInfo = {};
		timelineInfo["time"] = hypeDocument.currentTimeInTimelineNamed(timelineName);
		timelineInfo["direction"] = hypeDocument.currentDirectionForTimelineNamed(timelineName);
		timelineInfo["state"] = hypeDocument.isPlayingTimelineNamed(timelineName);

		window[timelineKey] = timelineInfo;
	}

You’d need to have it on each of your layouts to work.

6 Likes
2

You sir, are the man. That worked perfectly. Thanks!

1 Like
3

I can synchronize audio? How?

4

A simple way:

In your Head HTML add a global variable for your audio source: (this saves adding it to all layouts in a scene load function)

<script>
window.audio = new Audio ("${resourcesFolderName}/NAME_OF_YOUR_AUDIO_FILE";
</script>

Then on Layout Unload you can update the currentTime property by using this function:

window.currentTime = audio.currentTime;

Note You have to Play and Stop the audio using Javacsript functions with this (not by dragging the resource in or using “Play Sound” and “Stop Sound”)

You can do this by creating functions with the following and calling them on mouse click

for play:

audio.play();

stop:

audio.pause();
3 Likes
5

I was trying to use permanent symbols instead of coding and that was causing the app to crash all the time, but your method worked perfectly! Thank you so much, Jonathan! :grinning:

1 Like
6

Also have a look at the Sound Extensions to manage more then one sound across scenes (loadSound etc.)

7

ok long time ago thread but just encountered…would be cool for a ‘persistent’ checkbox in the timelines inspector in addition to ‘relative’. Maybe a feature request? I find myself customizing & changing layouts after building a ‘master’ and looking for tools like persistent symbols to keep things connected, would be great for timelines too…not sure if even possible in the quantum world of …{-.-}PersistentTimelines

1 Like
8

Thanks for the request!

In a lot of cases it is easier to use a Persistent Symbol as your Master, which will keep the timeline running across different scenes/layouts.

9

psssshhhh. I shoulda tried that, thanks!

1 Like