Need some help in using persistent symbol as site navigation

Symbols
1

Hi. I just upgraded to Hype 3 Pro and I’m thinking of creating a website that is entirely made with Hype. However, I have some questions about using a persistent symbol for the navigation buttons at the top of every page of my site.

I haven’t created the site or the navigation yet but I could use a little advice on accomplishing what I’m try to do.

I plan to create a few buttons for my navigation: in this case Home, Our Work, Our People, Contact— I might add a few others. I want them to appear together at the top of each scene.

I am thinking I’ll group all the buttons and turn the group into a persistent symbol.

The main reason I want to use a persistent symbol is that I also want to use scene transitions and I want the navigation to remain static during those transitions.

But I’m not sure how to change the color of each button when its corresponding page is viewed. To clarify:, if the “Home” scene is being viewed, I want it to be red and the other buttons to be black. When the “Our Work” scene is being viewed, I want the “Our Work” button to be red and the others buttons to be black etc.

So, what is the best strategy to accomplish this?

This what I’ve been thinking might work: I won’t use actual buttons. Each “button” will be a normal object and I will create two timelines for each “button”— one timeline for hovering (when the mouse is hovering over the “button”) and one timeline for when the “button” has been selected. So for instance, when the scene for “Our Work” is triggered, it will also run the selected timeline for the “Our Work” “button," which turns that “button” red.

Is that the right strategy or are there better/simpler ways to do it?

Thanks!

M

2

Hi M, you could use javascript to change the buttons background color to show the active scene.

var x = hypeDocument.currentSceneName()

if (x == “1”) {document.getElementById(“one”).style.backgroundColor = “red”, document.getElementById(“two”).style.backgroundColor = “#F0F0F0”}

if (x == “2”) {document.getElementById(“one”).style.backgroundColor = “#F0F0F0”, document.getElementById(“two”).style.backgroundColor = “red”}

Here’s a basic demo…
button_color-1.hype.zip (18.0 KB)

1 Like
3

Greg, thanks!

I also played around with the Africa Slideshow document that’s in the gallery. It looks like it is possible to change some of the properties of a persistent symbol that won’t change the initial instance. I had assumed if I changed any instances of a persistent symbol that those changes would occur in all instances, but apparently that’s not the case.

—-

I’ve added this after posting the above: I think your javascript will solve the problem. It is possible to change the instances persistent symbol but it’s trickier with buttons.

4

The javascript solution will work great. However, if you prefer not to use javascript you can use relative timelines.

The basic idea is to have a timeline for each state in your persistent symbol menu. Then in every scenes On Scene Load action handler you trigger a behavior which will start the corresponding timeline. Each timeline highlights the appropriate menu item and ‘unhighlights’ all other menu items.

The following example document demonstrates the technique:

persistentSymbolMenu.zip (25.3 KB)

3 Likes
5

Thanks for this Greg. I’d like to also include an 2 objects -one that moves to the previous scene and one that moves to the next scene. When I do this however, the background color of the buttons (in you example) do not change. Do you know what I might need to include in the javascript to make this happen?

thank you!
Matt

6

I got! (I need to include your javascript on the left right buttons also!)

1 Like