Pressed state of a button staying in pressed state ... how?


(Eric Brace) #1

Hi Hype community,

Apologies in advance for a question that likely has a simple answer.

I have created a button in hype with a “pressed state”. When a user presses the button, I want the button to stay in the pressed state.

For instance, I have a button that has a black border in its normal state and it has a thick green border in its pressed state.

Unfortunately, the button will quickly enter its pressed state when pressed but then quickly revert to the normal state.

I want the button to stay in its pressed state once it has been pressed.

Let me know if that makes sense or if you need more details.

Thanks,

@theliteracybug


#2

Hi Eric,

Here’s a way to do this with Timelines, where a click on an object plays a timeline: Toggle button pressed state w/o JavaScript

In that timeline (Checkbox1 if you’re looking at the first button), the background color changes and an X is added to the inner HTML of the rectangle. But you could for your purposes just change the color of the button. And then, you could reset the timeline by reversing the same timeline:

39%20AM

There’s several ways to do this, but this is just one.


(Eric Brace) #3

Thanks, Daniel.

That solved my issue.

Cheers

Eric


(Brooke ) #4

What if that click-on object is part of a Symbol? should it not be in symbol form to make this work? I am trying to get a really complex page with multiple scenes and timelines to have different buttons appear in active state in different scenes. I had made the button groups into symbols and when I did I had to basically fake an active state button on top -which is fine until you trigger a timeline within that symbol than the fake active button states end up on top of what the timeline triggers.


(Jonathan Deutsch) #5

For your case, my general recommendation is to use a Persistent Symbol for the buttons. You can then use relative timelines to make managing the state even easier. The flow would basically be:

  • Have a relative timeline for each button within the symbol that puts it into the active state
  • Have a single “reset” relative timeline that has a start keyframe and then an end keyframe that has it back to the inactive state
  • On each button click, have it jump to a scene, start the reset timeline, and then start the button-specific timeline. (the reset must happen before the other timeline for this to work)
  • (optional) Have an On Symbol Load action that sets up the initial state by using Go To Time in Timeline on the first button’s timeline to make it look active from the start

Here’s an example that demonstrates the technique:

SceneButtons.hype.zip (41.8 KB)


(Brooke ) #6

Thank you soooo much I think I figured out some of that but def not the persistent symbol - I had just a regular symbol


(Brooke ) #7

Jonathan -sorry for the slow reply, I was on holiday. I am looking at your example -and I notice that there is a “reset” timeline -but I cannot find that in the dashboard. Where is that?


(Mark Hunte) #8

You are looking at it?


(Brooke ) #9

Yes - it was clearly my first day back from vacation!! I wasn’t seeing what was in front of my face. Thanks.


(Jonathan Deutsch) #10

Looks like you got it, but to clarify for anyone else joining the thread –

“reset” refers to the name of timeline that is within the symbol. Like scenes, symbols themselves can have multiple timelines that can run simultaneously/in parallel. “reset” is just what I named mine that animates in a manner that resets the symbol.