Button Interactivity

(Doug Wells) #1


I am new to Hype and was hoping for some help creating an Infographic. I want to have an image with buttons, when you mouse over the button, text will appear with a title and when you exit the text will go away. When you click the button, an html widget will appear to give information. I have all of that working, but the issue I have is if the html widget is open and the user selects another button, I want the current html widget to close and the new one to open. I am not sure how to do this because I do not know which button the user will select next. For example, if button 1 is pressed and info 1 is displayed, then the user selects button 4, I’m not sure how to make info 1 close before info 4 opens. I assume I will use javascript to have the current timeline run backwards. I hope this makes sense and and is easy to fix.


(Rick) #2

Well I’m not a javascript guy, and without an example how you setup shop it’s hard to properly help but a way to do this could be by using custom behaviors.


For example this way though there may be better ways around this with js.

custom_behavior-multibttn.hype.zip (20.7 KB)

(Jonathan Deutsch) #3

Another method to do this is via Relative Timelines. This allows animating from whatever the value happens to be to a specified value. You could take an approach that the timelines that show item A will hide B and C. You could also have a single timeline that hides A, B, and C which is run first and then run the timeline that shows A (and it will take over controlling the properties so the hiding won’t be applied to this one).

(Doug Wells) #4

I had tried Rick’s method and it worked great. I am interested in Jonathan’s idea. I will read the documentation. Do you have a sample?

Thank you!

(Jonathan Deutsch) #5

This file from the documentation shows the basics of relative timelines:

This document has a resetting technique on the last “route 1” scene:

This example was made before action chaining; nowadays you could have a single “reset” relative timeline that basically resets everything and then after that chain the action that sets the properties to the on state. This would take the place of each timeline needing to set each property back to its initial state.

(Doug Wells) #6

Hi Jonathan,

The route 1 sample last scene is exactly what I am looking for! I looked at the file but I cannot figure out how to set the “reset”. How is that done?

Doug Wells
Wells Media

(Jonathan Deutsch) #7

The way to do this is to create a “Reset” relative timeline for, and create keyframes for every property on every element that has been animated. The keyframes for each property should be a pair at the 0 time and the time that you want them to return to their position. You’ll still have timelines for each specific “in” function.

After doing this, you will need to have an action start the reset timeline, and then start the timeline that does the “in” functionality.


This is the modified WooGrit example using the technique:

WooGrit2-reset-timeline-technique.hype.zip (2.7 MB)

(Doug Wells) #8

Wow - that was so easy! I’m looking forward to learning more about the product. I was going to get “The Book About Hype”, but it looks like it is no longer available, waiting for the new release of the product. Any idea when Hype 4 will be out?

Doug Wells
Wells Media

(Jonathan Deutsch) #9

I can’t promise a date, but we’re wrapping up!


I probably should make a new thread about this soon. But basically, I’ll start working on the Hype 4… book… app… thing… once I’m done with Intensifies and Hype 4 is launched. The plan for this project is pretty lofty, so hopefully it’s good. The reason the current version of the book is no longer available is to make it fair to those that previously bought a copy. If all goes according to plan, you’re not going to want the regular Hype 3.5 book when the Hype 4 book is available.

I’m also waiting for macOS 10.14, as this may affect the look of the screenshots and… videos?! :blush: