Retain state of scene when moving to next, then returning

QUESTION: Is there a way to get the scenes to retain their state when moving from one scene to another and returning to them?

Let’s say i have 2 scenes.

On scene 1 i click the word RED from a series of buttons with text and the word RED appears over the underline.

Blue and ______ create purple.

buttons: -red- -purple- -green-

Now i move to scene 2 and answer another similar question. When i go back to scene 1, it’s reset to it’s starting state so the word RED is no longer over the underline.

Is there a way to get the scenes to retain their state when moving from one scene to another and returning to them?

Thanks.

@monkygrl

Hi Colette!

The following is intended to show You a simple method for accomplishing your request (it is not a bomb proof solution) which You will need to adapt to your situation. This method uses Hype’s timelines & a wee bit of JavaScript. (There is a one line script in the “Head HTML”, plus two JavaScript functions - “loadSceneGoToTime” & “unloadSceneCurrentTime” - each consisting of one line.)

Hype Project Demo: ButtonChoiceTimeline_JHSv1.hype.zip (24.3 KB)


In the “Head HTML” we initialize the variable: sceneOneTime = “0”;
This will be used to set the initial value of the variable “sceneOneTime” for the timeline “Scene 1” (i.e. the first time the viewer views “Scene 1”) at zero (seconds).

If You want to work with more scenes initialize them too in a similar manner - with each scene having its own timeline and variable name… e.g. a timeline named “Scene 2” with a corresponding variable named “sceneTwoTime”. These names are made up - use what works for your style.


Click a button (“Red”, Purple", “Green”) in “Scene 1” to fill in the name for that choice. What we are doing here is going to a particular time in the “Scene 1” timeline. 1 second on the timeline shows “Red”, 2 seconds “Purple”, 3 seconds “Green”.

Click the “Go to Scene 2” button.


The “On Scene Unload” handler for Scene 1 (running the function “unloadSceneCurrentTime”) stores the current time in the “Scene 1” timeline (e.g. “3” seconds) in the variable “sceneOneTime”:

sceneOneTime = hypeDocument.currentTimeInTimelineNamed('Scene 1');

And then we go to “Scene 2”.


When the viewer returns to Scene 1 (“On Scene Load”) the value in the variable “sceneOneTime” is used by the function “loadSceneGoToTime” to set the “Scene 1” timeline to that value. For example a value of “3” sets this timeline to 3 seconds which equals the “green” choice being displayed in the sentence:
Blue and _________ create purple .”

The answer from @JimScott should suffice. In his example he saves the “State” in a variable named sceneOneTime. If you need to maintain the “State” between visits there is also localStorage. This allows you to retain the state between visits.

That would involve renaming sceneOnTime to localStorage.sceneOnTime everywhere. If you need this you can read more about it here: https://www.w3schools.com/html/html5_webstorage.asp

Thank you, that worked :slight_smile:
I appreciate the quick help.

1 Like

I used this solution as well, solved a problem very effectively, thanks a lot!

1 Like

Jim, thanks for your helpfulness in the forums. Between you, @Daniel and @MaxZieb I’m learning tons.

I’m having a hard time getting this to work, and I suspect it’s because I’m also using a “scroll to move the play head” script. But that may not be the issue. Chapters_Demo.zip (930.2 KB) .

The first scene (Home) is a table of contents, with a graphic for the other scenes. As the user scrolls through the Home scene, the graphics go by and the user can click a graphic to go to a specific scene (Chapter One, Chapter Two, etc.). I’m using a “Back arrow” graphic in those Chapter scenes to bring users back to the Home scene, and would like them to pick up where they left off. Right now it’s returning to the Home scene and restarting the timeline from the beginning.

I’ve tried a few of the built-in Actions… “jump to scene” paired with “go to time in timeline,” but that didn’t work. So I’ve been trying scripting options. I have little confidence in javascript but have been able to put together a few things based on what I’m learning here. Any help would be greatly appreciated.

Hype is awesome.

1 Like

@drudesign

By serendipitous circumstances I answered a question very similar to this recently to which I will refer You for a detailed look at how the mechanism I am going to propose works:

I believe this is very close to what You are requesting.

The main concept is we need an alternate (new) timeline NOT the "Main Timeline" to be able to jump to a given point in the scene.

I did quick adjustment to the Hype doc You provided. This adjustment only covers a precise set of circumstances but it should to point the way to adjust the rest your project (assuming it is what You actually need of course!): chapters demo_JHSv1.hype.zip (525.6 KB)


Overview

I focused on working with the "Chapter Two" scene as our target chapter - so on the "Home" scene we will click the "Collective Impact by the Numbers" graphic which takes us to "Chapter Two". Clicking on the "Back" button returns us to the same spot in the timeline scroll in the "Home" scene.


Details

The following assumes You have read the post I linked to above.

All the "Main Timeline" references in your functions are changed to a new timeline "Home Timeline". All properties on the Home Scene's "Main Timeline" are removed and transferred to this new "Home Timeline". The only function in the "Scene Load" action for the "Home" scene is "TimelineScroll". There are no "Scene UnLoad" actions.

The "Mouse Click" on the "Collective Impact by the Numbers" graphic now only has the "Jump to Scene" action (to "Chapter Two").

There is a Custom Behavior added to the "Home" scene ("Scene Inspector") called "returnTimeChap2"... it goes to the 4 second mark in the "HomeTimeline" when called. You can of course adjust this time as needed.


"Chapter 2" scene

The "Back" button "Mouse Click" triggers the "Jump to Scene" ("Home" scene) AND the "Custom Behavior" "returnTimeChap2" which takes us to the 4 second mark of the "Home Timeline".

4 Likes

Genius. Thank you so much for the thorough explanation. I had fiddled with a “non-Main-Timeline” timeline, and also wondered if a custom behavior would do the trick… but there’s no way I would have figured this out. You connected the dots for me - GREAT solution. Working like a charm.

1 Like