Switching between flexible layouts keep same place in timeline

(Ollie) #1

Hi there,

I have a few flexible layouts for various sized devices, for example iPad Portrait / iPad Landscape.

My question is when switching between layouts turning the iPad from portrait to landscape is there a way to keep the same position in the timeline. I have a slideshow of images so switching between layouts means the slideshow is reset back to the starting image rather than remaining where the user left off.

The timeline is the exact same on both layouts so I wondered if this would be possible.

Thanks for any suggestions.

How to retain the state of a scene in Hype

Use a persistent Symbol. They prevail across scenes, layouts and breakpoints.
Hope this helps.

(Ollie) #3

Thanks @MaxZieb … Looking into this now and think its going to work perfectly!

(Ollie) #4

I have got it to work just great, however and I don’t know how possible my next question will be as I understand with persistent Symbol’s they cannot be different from one another.

But is there anyway to have the landscape version images landscape and the portrait images portrait.

So changing within the symbol the image depending on the flexible layout orientation.

Thanks again.

White flash when switching between flexible layouts

Well if your resources differ so much from layout to layout and your timelines are exactly the same you can do the following:

timelines.hype.zip (21,0 KB)

There are two functions called on scene information. Add more named timelines if needed or just work with persistent symbols inside the layouts.

(Ollie) #6

Max, thanks so much for this!

Having a play around with this now… Looks like you have hit the nail right on the head here!

Thanks again!

(Ollie) #7

Hi Max,

Thanks again for sharing a template document.

A quick question I now have is, can I use and access timelines within symbols, instead of using the ‘Main Timeline’?

My project is one long webpage where a small section of it has an image slideshow. I have this slideshow within a symbol, which has a timeline that controls it.

The reason I created it this way was I wanted to use the swipe gestures for the iPad versions which when swiping left or right would only control the symbol (slideshow) and no where else on the page.

Will it be possible to have the same result as the example you sent but using timelines within symbols instead?

Thanks again for all your help.


Try this

timelines symbol.hype.zip (21,7 KB)

(Ollie) #9

Oh Yes!! Max you have done it!

I shall now apply this into my existing project…

Thank you so much.


Your welcome … here is a version that is more generic. It still only the “Main Timeline” but now direction, isPlaying and time is restored but it requires that the symbols that need to be synced have the same classname. This way the functions can handle more then one timeline.

timelines-symbol-generic-2.hype.zip (62,5 KB)

PS: if you add “autostart” to a symbol (remember on both ends) it will autoplay. The square in the example has it’s own timeline and starts on click.

(Ollie) #11

Thanks again for your help on this Max and for creating the latest more advanced example.

I have worked the example you linked into my original project and everything is working brilliantly!