button stages

xhotdog shared this question 8 years ago
Answered

can I add button stages, i.e. default, hovered, clicked?

Best Answer
photo

You will need to create different events for this. Check out the options under 'Mouse' when you go to create a new event.

For the hover, create an "On Mouse Over" + " Change Style" event.

For the clicked, create an "On Click" + "Change Style" event.

Comments (12)

photo
1

Sure, you can use dynamic panels but you can also use events and the 'change style' action to define the hovered and clicked style.

photo
1

How do you make the button switch back to its original state if you click on it again?

photo
1

You need to use "on toggle" event instead of 'on click'

photo
1

That works. Thank you!

photo
1

The "on Toggle" event broke once I added an "on Mouse Over" event to the buttons to simulate a custom toll tip. Is this a bug in Prototyper Pro?

photo
1

Maybe, could you detail the events you created please?

photo
1

Please take a look at the example from this link:


https://www.justinmind.com/usernote/p...


I created three "Dynamic Panels" with two layers each and followed the same process to create each of their interactions:


1) I placed a background image (gray icon) in layer one


2) And a background image (blue version of icon) in layer two


3) I created an "on Toggle" interaction in layer one, to "set active panel" to layer two


4) Finally, I typed in a "Tooltip" text for each Dynamic Panel


eb84d6de21c8cb34b528c54d4b7b1af0

photo
1

As you can see in the live demo, the tooltip is not working and you can't click the icons back to the original gray color.

photo
1

Note, I tried reverting to the standard Tooltip instead of my original custom tooltip and it still didn't work.

photo
1

Ok, first the onToggle event can't restore the latest panel shown in a dynamic panel. Could be a great feature to have, though. But the thing is the onToggle just works with change style, hide/show, and others but not the 'set active panel' action.


Also, there seems to be a bug with the tooltips in panels. In all the other kind of widget work so we will take a look at it.


Said that, I think there is an easier way to prototype what you want without using panels. You can take a lot of advantage of the 'change style' action in events and use it to avoid having too many panels. For instance, you can have, let's say, a rectangle with the image in grey as its background image. You can create an onToggle event that changes the background image to the one in blue. Or you can use an image widget with the image in grey and create an onToggle event 'set value ' and change the value of the image (the image file) to the image in blue. That way your prototype should work.

photo
1

Thank you for your feedback, I will try your suggestions.

photo
1

You will need to create different events for this. Check out the options under 'Mouse' when you go to create a new event.

For the hover, create an "On Mouse Over" + " Change Style" event.

For the clicked, create an "On Click" + "Change Style" event.