Jump into a scene calling a variable

Using JavaScript with Hype Function Library
1

Hello everyone, who can help me to jump into a scene calling a variable I made this example and all is running well until I try to call the variable (escena) and it can't go to the desired scene.

Thanks.


if(window.theNumber1 == 1 && window.theNumber2 == 1 && window.theNumber3 == 1 && window.theNumber4 == 1){
    var symbolInstance = hypeDocument.getSymbolInstanceById('cnt2x');
	symbolInstance.continueTimelineNamed('timelineName', hypeDocument.kDirectionForward, false)


var escena = hypeDocument.sceneNames();
	hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)
2

It might be useful to see a zip of the .hype document; it isn't clear exactly what you're trying to do.

I'd say these are things that look suspicious to me:

  • Your continueTimelineNamed call uses 'timelineName' which I'm guessing isn't the actual name of any timeline

  • continueTimelineNamed runs asynchronously -- the code doesn't stop here until the timeline is complete so you are running a timeline but then immediately jumping scenes. So you likely won't see it play; the exception would be if it is in a persistent symbol.

  • You are not doing anything with escena. It is likely you want to use it in the showSceneNamed API instead of showNextScene since that API... shows the next one only :slight_smile:.

    hypeDocument.showSceneNamed(escena[1], hypeDocument.kSceneTransitionCrossfade, 1.1);

  • It isn't clear what you want to do with the array of scene names list vs. specifying the name of the scene

3

Thank you so much for your response, to be clear here I attached the file.
Escena.zip (41.6 KB)
Thanks again.

4

Thanks for sending that over.

It looks like you want to play a timeline, and when that timeline is complete, jump to a specific scene.

Typically, code is not required to do this. You could make a secondary timeline that plays the animation, and then that has a timeline action at the end of the timeline to jump to the scene.

If you do need code for more elaborate versions of your document, then I think the previous answer/explanation still basically holds. Because continueTimelineNamed does not pause the execution of javascript, you will need to add your own time deferred call to showSceneNamed so it changes scenes at the right time when the animation is complete. For this, you can use the window.setTimeout call, like so:

var delay = 1.0; // time in seconds 
window.setTimeout(function() {
    var escena = hypeDocument.sceneNames();
    hypeDocument.showSceneNamed(escena[1], hypeDocument.kSceneTransitionCrossfade, 1.1);
}, (delay * 1000));

However, hard coding may mean that if you change the animation, this code will be stale and use the wrong time. You could instead use the Hype API to get the symbol timeline's duration and current time to figure out the appropriate point for the transition. (of course, this only works for simple timelines that don't have any pauses or playhead position changes)

The delay line would look something like:

var delay = symbolInstance.durationForTimelineNamed('timelineName') - symbolInstance.currentTimeInTimelineNamed('timelineName');

Further, right now we're using the scene names list to get the scene, but the index is being hard coded. If you were to change the scene ordering then you'd need to go back in code. Usually the scene name itself is a little more stable, so you can pass that in as the first argument as a string instead:

hypeDocument.showSceneNamed("2", hypeDocument.kSceneTransitionCrossfade, 1.1);

(it is "2" because you literally named your second scene "2")

I hope that helps clarify it. I don't know where you're going with the project but my recommendation here would actually to be to avoid any of this code if you can still and just use timelines and timeline actions to achieve the desired effect.

2 Likes
5

Jonathan thank you very much for the explanation this will help me a lot.
I will try your advice.

1 Like