Page Indicators (Scenes)

Share your Work
8

Ok, made simple since your scenes are numbers.

I have made the Arrows persistent symbols and on all scenes where needed.
(also fixed you layering of the indicators on the scenes, some were below the main rectangle and therefor not visible.)
The Arrow elements inside the symbols. Point to the same script as the indicator buttons.

The arrows have some Additional HTML attributes. data-groright, data-goleft.

When an arrow is click it will call the function which will re assign the element object to an indicator with either the next or prev scene name as its Additional HTML attributes action_ value.

The code will carry on as normal.

If an indicator is clicked The code will carry on as normal.

So now with buttons or arrows can be used .

Page Indicator mhv3_1.hype.zip (298.2 KB)

Small update (10-10-2023) to the optimise code lines 21 & 29 to use Template Literals.

	//== Get the current scene - scenes are MUST be numbers for this to work. 
	var currenScene =  Number(hypeDocument.currentSceneName()) 
	//== Get the Symbol  
	 thisSymbol =   hypeDocument.getSymbolInstanceById('nav')
	
	//== Get the Symbol  Element
	var thisSymbolElement = thisSymbol.element()
	
	
	//== Check if Arrow button called function.
	
	if (element.hasAttribute("data-goright")) {
   
   /* re assigned the element to an indicator with matching value of the current scene name
   and plus 1 the number So we can point to the next scene number.
   */
   		element = thisSymbolElement.querySelector(`[action_="${currenScene + 1}"]`);

    		console.log("go right")
     }
	//== Check if Arrow button called function.
	if (element.hasAttribute("data-goleft")) {
	 /* re assigned the element to an indicator with matching value of the current scene name
   and minus 1 the number So we can point to the previous scene number.
   */
		element = thisSymbolElement.querySelector(`[action_="${currenScene - 1}"]`);

			console.log("go go left")
	  }
 
	//== Run as  normal. The element will be either an original indictaor or a re assigned one
	var indicator_ =   thisSymbolElement.querySelector('.indicator') 
	 
	 //== Fade out and back in the nav indicator
	var navElement = thisSymbol.startTimelineNamed('fadinOut', hypeDocument.kDirectionForward)
	
	
	//== Get clicked Element's Timeline from its  attribute  action_
	 var navElement = element.getAttribute("action_")
	 
	//== We nav to the Scene here 
	 hypeDocument.showSceneNamed(navElement)
	
	 
	//== Get clicked Element's left position
  	
	var elementLeft = hypeDocument.getElementProperty(element, 'left')
	
	 
	//== Get Indicator Element 
	//== Set the Indicators Left
	
 	hypeDocument.setElementProperty(indicator_, 'left', elementLeft -5, 0.4, 'easeinout')
 
hypeDocument.setElementProperty(indicator_, 'opacity', 1)
indicator_.setAttribute("action_", navElement)
5 Likes