Scene Animation control for non linear navigation

Scenes
1

[ solved ]

Hello,

I’m working with Hype on some microsite prototypes and one of the primary issues I’m having is Scene transitions. All of my scenes contain some enter and exit animations. This results in nice fluid transitions when you put a instant scene change at the last frame.

My issue is, there are a number of UI components on the stage that will take you to other scenes – clicking on them needs to play the ‘out’ animation, and on the last frame take you to the specified scene determined by what symbol you clicked on.

For instance my menu symbol onClick event should:

  • set a ‘global’ variable such as 'sceneQueue' to 'SceneMenu'
  • get current active scene and play the out-timeline.
  • at the last frame switch scenes to the value of ’sceneQueue'

Any help here would be greatly appreciated. I’d like to do this in a way that leverages the behaviors or actions panel if possible, so I’m not having to somehow hard-code in a bunch of scenes and timelines.

Cheers,

Michael

Update

I’ve pretty much solved this, though it’s not terribly elegant. I created a global variable ‘SceneQueue’, and created a new function for each possible scene with a single line in it setting the variable to a scene name. It works perfectly, just very tedious to have make a new JS file for each function. In the future it would be great if creating variables in scripts would allow you to set those properties in the editor. Unity has a great pattern of how they handle this.

2

hi, your description wasn’t 100% to clarify your aim. if you’d like to share your solution though i can have a look to improve the js-workflow

1 Like
3

Hi,
It does sound like you may have over complicated things there.
From what I am reading you should only need one to set the global Va and one function total to switch to the correct scene using the global var. ?.

4

That is correct @MarkHunte – however, there are numerous UI components, each needing a JS resource that sets the global variable sceneQueue to the intended scene. Overall the solution is simple and works well, just tedious and inefficient, especially as the project will get considerably more complex with many more scenes.

Screenshot 2015-11-08 13.50.00.png2234×1396 582 KB

You can see here my Click handler uses a script called setSceneQueueAtlantic. This has one line of code in it, window.sceneQueue = "Atlantic";

Beneath this, a script plays the Out timeline of the current scene. At the end of the Out timeline, there’s a script to switch scenes to whatever has ben assigned to sceneQueue.

My caveat is having to create a JS resource for every scene. It would seem being able to pass an argument from the actions panel would be more DRY friendly, as well as less tedious and risky as the project scales up to more and more scenes and complex interactions.

5

Are you able to post the Project so we can have a look and see if we can help

6

Also. We normally use the element id or class as an argument.

7

Here is an example of what I am talking about above.

Each menu item has an ID that reflects the scene name it will go to. This is used in the first script.
The OUT timeline is run and at the end a Timeline Action will do the transition to the correct scene using that.

As shown Two scripts is all that is needed.

BeatsExample.hype.zip (386.7 KB)

3 Likes
8

@MarkHunte Thanks so much for taking the time to build a little demo for me. I hadn’t even thought of using ID’s as a way to pass information. Your solution is way more clever and easy to manage than mine! :smile:

Cheers,

Michael

2 Likes
9

I have an updated method for this using classes, if anyone is interested. I’m using the classes with a prefix to determine the type of ‘variable’ and then stripping out the 'prefix-'. This is nice because you can have multiple items with the same data, and items can have multiple classes. A big advantage over using ID’s

e.g

$(element).attr('class').split(' ').map(function(e,i) { 
	if (e.indexOf('scene-') !== -1) 
	window.sceneQueue = e.slice('scene-'.length);
	return e;
});
1 Like