Losing Place in Timeline While Changing Layouts


(Arjun Mahesh) #1

Hi Guys,

Let’s say I’m 10 seconds into the Timeline of a scene, and I change the window size from desktop to iPad layout. Everything adjusts, but I am now at the start (0 seconds in) of the iPad layout timeline. When I change window sizes, I want to enter the new layout at the same time I left the desktop timeline - which was 10 seconds in. Is there any way to do this?


Keeping position of animation in layout when swapping orientation
#2

Hi Arjun!

The following is a general concept since You have not uploaded your project file…

In the project file I have uploaded: LayoutSync_JHS-v1.hype.zip (22.0 KB) - Demo here - the timelines among the layouts are synchronized with the following code:

When the Hype file opens, a global variable (“layoutSync”) is set to “0” in the “Head HTML”:

<script>
	window.layoutSync = 0;
</script>

You can of course set this number to something other than zero. e.g. if You had a 20 second timeline and wanted to start the Scene at 10 seconds You would set “layoutSync” to 10.


The “On Layout Load” handler then uses the following JavaScript:

function layoutTimeLoad(hypeDocument, element, event) {
   hypeDocument.goToTimeInTimelineNamed(layoutSync, 'Main Timeline');
   hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, true);
}

If we have just opened the Scene “layoutSync” will be “0”.


When the layout changes (“On Layout Unload” handler) the following function records that instant of the timeline:

function layoutTimeUnLoad(hypeDocument, element, event) {
   layoutSync = hypeDocument.currentTimeInTimelineNamed('Main Timeline');
}

When the next layout in the Scene loads, the _"layoutTimeLoad"_ function runs again using the time recorded by the _layoutSync_ global variable when the last layout unloaded.

(Arjun Mahesh) #3

Jim, this is fantastic! I will give this a try on my own hype project and get back to you. I really appreciate your help, and will definitely share my hype document when it’s ready. This definitely made my morning.


(Arjun Mahesh) #4

Gave it a shot, it worked perfectly! Thanks again Jim


#5

You’re Welcome & glad it worked well for You! I learned something new too - I’d never used layouts before and didn’t realize You couldn’t automatically sync them.


(Arjun Mahesh) #6

www.winona.arjunmahesh.com is what I’ve built with Hype and your help!


(Jonathan Deutsch) #7

Just checked this out - that is a very cool document! I love the usage of flexible layout so it takes over the whole browser window, which really works with the day/night coloring, and the animation still runs very smooth.


(Craig) #8

Is there a way you can do this with a background video? The issue I’m having is the video starting from the beginning on changing layout - see example

http://www.filamentpd.com/holding2017/test.html


(Jonathan Deutsch) #9

In theory the same technique could be used to control video. The basic technique would be setting a unique element ID on the videos, and then on layout unload getting the currentTime value and storing it in a global. Then on layout load, you could set this property on the video.

But in practice my experiments showed this didn’t work too well in how videos are loaded when they come in/out of scenes/layouts. It appears currentTime doesn’t take very well if the video is loading or hasn’t downloaded up to that point. I was able to get this working in my tests by waiting for the video to fire its oncanplaythrough event.

The first step is to give the video on each layout a unique ID (they must all be different). Then each layout itself must have separate On Layout Load and On Layout Unload javascript function. They would look like this:

On Layout Load:

if(window.currentTime == null) {
	window.currentTime = 0;
}

// replace myvid1 with the unique ID of the video for this layout
var vidElement = document.getElementById("myvid1");

vidElement.pause();
vidElement.oncanplaythrough = (function () {
	vidElement.currentTime = window.currentTime;
	vidElement.play();
});

On Layout Unload:

// replace myvid1 with the unique ID of the video for this layout
var vidElement = document.getElementById("myvid1");

window.currentTime = vidElement.currentTime;

As the comment indicates, you’ll need to replace the unique element id “myvid1” in the example with your unique element id for each scene.

There’s a little bit of a pause and I haven’t tested on slower servers or with long time values, but it might work.


(Craig) #10

Cheers, Will have a play around!