How to change the background of a scene before it is loaded?

[emanaku]

Hi,
At Scene 1 I want to give the user a choice (a preference - choose one out of 3 different backgrounds), which background to use in Scene 2.
But because Scene 2 is not loaded yet, I cannot change the background immediately.
If found this link with a similar topic:

Can we get the properties of an element of a different scene from the current scene?

Hi all, I’m doing a few experiments within Hype and amazed at the possibility that it has. I was wondering if one could get the style properties of an element of a different scene in the context of writing a JS function in the current scene? To elaborate, I have an object defined with a class called, ‘box’ in the current scene (let’s call it Scene-1)… I’ve duplicated the scene, but have changed the style properties of this ‘box’ class in this (Scene-2). Now, in Scene-1… I want to run a JS fu…

but the second last answer (loading Scene 2 with JavaScript, put it to invisible and then go back to Scene 1) seems a bit "strange" - also the answer is from 2015, and I hope, there is a better solution now??

Another thing I tried is, that the choice in the preferences on Scene 1 per JavaScript sets a variable in the window indicating the preferred background.
When Scene 2 loads, there is an action choosing the right background image in that moment according to this variable.
But: there is a timespan, where the original background of Scene 2 is shown, and then the preferred background "kicks in". Maybe I can delay somehow Scene 2 until the background has changed?
Thanks for all hints!

[h_classen (Hans-Gerd Claßen)]

if you’d use a persistant symbol as background across scenes you should be able to achieve such without scripting … sry no does not seem to work properly

[h_classen (Hans-Gerd Claßen)]

so script it
switcheriduu.hype.zip (16.8 KB)

[emanaku]

Thank you, Hans-Gerd!
I followed the idea with the persistent symbol.
See the attached file. This is without scripting.
Drawback: the transition to the other scene (I want a horizontal push) is basically not visible.
Also for now this would solve my problem good enough, I am grateful for hints how to get the transition working…

I used pictures for the background, because this is what I want to have in the real application (then the backgrounds are different kinds of cloth).

Also I tried to have the persistent background symbol in the second scene only (and not in the first scene), but that does not seem to work, because it is not loaded yet while choosing the color in the first scene.

Test-Pref-Background-Persistent-Symbol.hype.zip (75.3 KB)

[h_classen (Hans-Gerd Claßen)]

transition is the problem, that’s why i switched to scripting … switch of backgroundImage is also possible

[h_classen (Hans-Gerd Claßen)]

uh i downloaded your file … the effect is not at all good / expected …or¿

[JimScott]

@h_classen

transition is the problem, that's why i switched to scripting ... switch of backgroundImage is also possible

Hi Hans!

I tried setting the background image by adjusting your code for "color" - without effect:

 // targetSceneElement.style.backgroundColor = newColour;
	
	var whichImage = "${resourcesFolderName}/myImage.jpg";
	targetSceneElement.style.backgroundImage = whichImage;

Some guidance please - Thank You!

[emanaku]

Hi Jim,

this worked for me:

var whichImage = hypeDocument.resourcesFolderURL() + "/myImage.jpg";
targetSceneElement.style.backgroundImage = "url('" + whichImage + "')";

You need the url(…) as part of the value for the backgroundImage. Make sure you get all the apostrophes right

Hi Hans, thank you - the transition works beautifully with this method.

[h_classen (Hans-Gerd Claßen)]

consider preloading when switching imgs …

[JimScott]

@emanaku

var whichImage = hypeDocument.resourcesFolderURL() + "/myImage.jpg";
targetSceneElement.style.backgroundImage = "url('" + whichImage + "')";

Hi emanaku,

Worked beautifully - Thank You!