Page Indicators (Scenes)

Share your Work
1

Hi everyone!

I made this page indicator so feel free to use it too.
I'm wondering if there is a better way to do it.
If someone can show me a better way on doing this I will appreciate it.

Here's a sample:
Page Indicator.zip (160.2 KB)

and here's the Hype Template:
Page Indicator.zip (160.2 KB)

Thanks everyone!

2 Likes
2

Hello Anthony, you posted the zip file twice (exported Hype project, the template is not included).

1 Like
3

This is how I would do it.

Using my Nav symbol template as a basis.

I would adapt it to use like this.

Each of the page indicators/buttons in the symbol are given some Additional Attributes.
type= navbutton
action_ = its page name

Use JS to nav to each scene using the action_ attribute.
Get the Clicked buttons left property and move the Indicator to that position.
The Indicator will fade in and out using a single timeline in the symbol.
We make sure it’s fully faded back in at the end of the JS.
We also give the Indicator the page number.

All the nav buttons get their numbers at symbol load. Again using the action_ attribute.

It is all very simple to set up using the code etc setup of the Magic Indicator.

Obviously the numbering is up to you.

Here is yours done as above.

Page IndicatorMHv1.hypetemplate.zip (220.4 KB)

We can also do away with the code to give the buttons numbers and just use css to populate these. The advantage is you will see this live in the Editor.
We just add the css. Here I have put it inside a rect's innerHTML outside the viewport. Which imho makes it more convenient to edit.

We will then need to change the code line that update the nav indicator

indicator_.innerHTML = navElement
to
indicator_.setAttribute("action_", navElement)

Page IndicatorMHv2.hypetemplate.zip (41.0 KB)

2 Likes
4

Thanks guys sorry for the late reply.
I appreciate the input. I will try it as soon as I can and reply back. Thanks!

5

Page Indicator Hype File.zip (136.3 KB)

Sorry for that. I hope this is correct now.
Thanks.

6

Page Indicator v2.zip (151.0 KB)

Can you please enlighten me on this.
I've added an arrow for each page for next and previous page but the navigation bullet don't change. Should I run the script on the arrows also? or just make another custombehavior to trigger the animation of each bullet?

7

in your original, ou did not have arrows. You were clicking on the buttons.
Will look at converting/ adding arrow functions

1 Like
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
9

This so great! Thank you for your help!

1 Like