Manually coding buttons

Using JavaScript with Hype
1

Im trying to using a javascript for set target to the buttons, in this case the target are scenes.

The buttons are inside a persisten symbol but Im trying to crea an “IF” situation.

Lets say “if” scene = home, the home button will stop working, in this way the user won’t be use the home button if he/she already is in the home scene.

In this way I also could use custom transitions for each button depending on which scene the user is.

But so far I have failed to use JS to assign the scene as targets.

js_escenas.hype.zip (31.8 KB)

2

It KINDA work now, but its really buggy, it seems it doesn’t respect the rules of each “if” statement:
js_escenas.hype.zip (33.6 KB)

The JS is running inside the persistent symbol.

3

Finally it is working!

Edited: Now with buttons also changes colors when new scene is loaded
js_escenas.hype.zip (37.9 KB)

It is a shame I doesn’t work with a single JS, but since its quite simple it should NOT impact on performance.

1 Like
4

Why not just name the scenes the same names as the buttons ID’s.

Then you use the Normal Mouse event Action On Mouse Click to run this code.

    var currentSceneName = hypeDocument.currentSceneName();
  var buttonID = element.id;
	
	if ( currentSceneName !== buttonID){
	 hypeDocument.showSceneNamed(buttonID , hypeDocument.kSceneTransitionPushRightToLeft, 0.5);
	
	}

js_escenas_ MHv1.zip (53.0 KB)

3 Likes
5

Im sure it is because I (still) sucks at understanding code, but I can’t find a way to dynamically change the transitions using the same button using your code.

Your code works great for block the button that matches the same scene name, but, I believe, I can’t assign diferente transitions for each button for each scene.

In my hype file example the transitions for each button changes depending of which scene you are.

6

Just do something like this

	var currentSceneName = hypeDocument.currentSceneName();
	var buttonID = element.id;
	
	soyone =  hypeDocument.kSceneTransitionPushBottomToTop
	soytwo =  hypeDocument.kSceneTransitionPushRightToLeft
 	soythree =  hypeDocument.kSceneTransitionCrossfade
 	soyfour = hypeDocument.kSceneTransitionPushLeftToRight
	 
	if ( currentSceneName !== buttonID){
	 hypeDocument.showSceneNamed(buttonID ,  window[buttonID] , 0.5);
	
	}
2 Likes