How would I deactivate a current scene menu button?

Scenes
1

Guys sorry, I’ve searched for this but don’t seem to be using the right keywords if the query has already been solved. Happy to just be pointed in the right direction if so…

I’ve created a dropdown menu as a symbol used on multiple scenes that allows the user to jump between scenes using the ‘Jump to Scene’ action, but I want to deactivate the button for whichever scene the user is currently on so that it is un-clickable and doesn’t just keep jumping back to itself. How would I do this please (I’m guessing via javascript)? – hope that makes sense!

Many thanks in advance
R

2

Hi Rich!

One could achieve your goal in different ways - however, an example of your Hype project would be useful to create a tailor made solution for You - instead of a generic suggestion(s).

3

Hey JimScott, I’ve created a simpler version because my project is super complex and client sensitive. Hopefully this version is enough for a solution, the menu symbol structure is similar. scene_jump_menu.zip (21.8 KB)

When on ‘scene 1’, I would like ‘btn 1’ in the menu symbol to be deactivated, and likewise for scene and btn 2. I’m guessing I should use javascript for the scene jump (instead of the Hype ‘Jump to Scene’ action) which could detect which scene you are on and disallow the scene jump if you click on the current scene’s button… or something like that!

Thank you!

4

Here is a solution … I went for the least effort one although there are many roads to Rome.
Only convention add a class to each button called like the scene. As classes aren’t allowed to have whitespaces I fix the class name with underscores if necessary so “hello scene” would be as a “hello_scene”. There is a function running on symbol load… works only with non persistent symbols this way as they are refreshed on each scene and rerun the action. That’s it…

scene_jump_menu_Max1.hype.zip (28,8 KB)

2 Likes
5

Hi Rich!

Here is another approach - though I like Max’s solution the best (fewest moving parts).

We will use a bit of code (“disableMenuBtn” function) & a bit of timeline (please see Fig.1 below)…

The “Btn Cover” is a translucent element that blocks interaction with the button it is over.

scene_jump_menu_JHSv1.hype.zip (22.0 KB)

"disableMenuBtn" function - used by “On Symbol Load” handler

 // get the last character of the Scene name e.g. "1"
    whatScene = hypeDocument.currentSceneName().slice(-1);

    var disableBtn = hypeDocument.getSymbolInstancesByName('menu')[0];

    disableBtn.goToTimeInTimelineNamed(whatScene, 'Main Timeline');
  // if whatScene was "2" then we go to 2 seconds in the timeline

Fig.1
The “Btn Cover” is moved over the corresponding button at the selected time:
• 1 second on the timeline (i.e. “Scene 1” is active) would place the cover over “Button 1”
• 2 seconds on the timeline (i.e. “Scene 2” is active) would place the cover over “Button 2”

Symbol%20Timeline

3 Likes
6

Ah you guys are the best, thank you muchly! I’ll give both options a whirl…

Cheers!

1 Like
7

If my approach of deleting interaction is to radical the version from Jim is good. One could simplify it in the sense of removing the timeline and just bringing the transparent click stopper to the front through setElementProperty on z-Index. Initially it would be the bottom layer. Should have thought of that. I specially like that Jim is using the getSymbolByName instead of needing classes…

2 Likes
8

A slighty different approach to @MaxZieb’s,

Using a persistant symbol for the menu which I think would be more common.

The buttons are elements with their pointer events ignored using the Actions inspector for each element. i.e the Text and Ellipses.

Then group each Text and Ellipse as a button group.

Each button group gets two class names.
button 1 for example would get

scene scene1

button two

scene scene2

Add on mouse actions on each button group.
1, Go to scene…
2, Run javascript…

The javascript.

 console.log('click')

	 //-- all scene class groups
	 var buttonClass = document.querySelectorAll('.scene');
	
	 //-- get scene name
	var buttonElm = hypeDocument.currentSceneName();
			
			
			var i;
 			for (i = 0; i < buttonClass.length; i++) { 
 
	//-- is this the current click button group, matched to current scene
      if (buttonClass[i].classList.contains(buttonElm) ) {
      
      	hypeDocument.setElementProperty(buttonClass[i], 'opacity', 0.5, 0, 'easeinout')
      	
      	buttonClass[i].style.pointerEvents = "none" 
   
    			} else {
    			//-- reset
     		hypeDocument.setElementProperty(buttonClass[i], 'opacity', 1, 0, 'easeinout')
     		buttonClass[i].style.pointerEvents = "auto" 
    }
}

scene_jump_menu_mh1.hype.zip (24.2 KB)

2 Likes
9

Thanks for this 3rd option MarkHunte! Really appreciate all these suggestions.

I went with MaxZieb’s approach this time as it was very quick to implement and I’m a little short on time with this project. All seems to work well so far.

I’ll experiment with the other options in my next project so I can weigh up which approach suits my workflow. This kind of menu is something I’ll be using regularly in future.

Love this forum, speedy replies and quality help. Great stuff, thanks everyone!

3 Likes