Button Interactivity

Animation
1

Hello,

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.

Thanks!

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.

54

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

custom_behavior-multibttn.hype.zip (20.7 KB)

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).

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!

5

This file from the documentation shows the basics of relative timelines:
https://tumult.com/hype/documentation/3.0/documents/Timelines-Relative-Timelines.hype.zip

This document has a resetting technique on the last “route 1” scene:
https://tumult.com/hype/gallery/WooGrit2/WooGrit2.hype.zip

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.

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

Thanks,
Doug Wells
Wells Media
dwells@wells-media.com
408.464.2224

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.

15%20PM

This is the modified WooGrit example using the technique:

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

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?

Thanks,
Doug Wells
Wells Media
dwells@wells-media.com
408.464.2224

1 Like
9

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

1 Like
10

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:

11

Jonathan,

Hope you can help on this one, my client wants a Pause button, that of course pauses the timeline - easy enough, but also wants the voice track and background music to pause as well - I am afraid I made a mess of it, It seemed so to be so simple to enact.

Thanks in advance
The file is here

Eltee

12

Ok, not sure what half of that is about. I think you have some miss understandings going on about where code should go intended for the head file.

Code for the head file does not go where you put it and huh hmm the syntax you had would not have worked either.

But lets ignore the head stuff for now. Not sure you need it any way.

We are concentrating on your layout Untitled Layout and scene 1

On the main timeline we have a Timeline Action which is a 0s. with run javascript action for a function named sbaIntroGplayPause()

you have in the layout the pause button. (symbol).
When clicked this will call the same javascript function named sbaIntroGplayPause()

39
Screenshot 2018-12-13 at 19.22.39.jpg2230×1308 193 KB

The javascript.

	 if(typeof window.SPBAIntroG == "undefined") { //- only creat new audio if it does now exist
	window.SPBAIntroG =  new Audio("${resourcesFolderName}/SPBA - Intro G.mp3");
	console.log('created audio SPBAIntroG')
	}
	
	 if(typeof window.benUkulele  == "undefined") {
	window.benUkulele = new Audio("${resourcesFolderName}/BenUkulele.mp3");
	console.log('created audio benUkulele')
	}
	
	
	
	if (window.SPBAIntroG.paused) { 
	
  window.SPBAIntroG.play(); 
  window.benUkulele.play(); 
 hypeDocument.continueTimelineNamed('Main Timeline')
	
	} else { 
 
 window.SPBAIntroG.pause();
 window.benUkulele.pause();
 hypeDocument.pauseTimelineNamed('Main Timeline')
	}

Now the setup may not be exactly right but this may give you an idea of doing what you want.

Also I removed all your code stuff and actions.

13

Mark,

Well that worked. Bigly Huge thanks.
This is part of a Ten Scene animation and each scene has it’s own voiceover.

I assume that a long list of “if” and “else” statements in my future.

Also if you stick around for the credits scene I have given Tumult credit for the tool. In fact, could you take a look (at the very end of the credits) at the Tumult bit, I would be happy to place any graphic or copy you like. Something to think about as Hype keeps on moving forward.

LT

14

Not really there are ways to use a single routine and many examples on the forum of condensing/refactoring code.

I would first concentrate on function so you get a better picture of how things should work and then maybe look at refactoring later but keep in mind that intent as you progress. Doing so may help you setup better for code changes. One tip read up on javascript Associative Arrays.

That would be more for @jonathan & @Daniel

15

Mark

I was unable to get the Pause/Play button to work as needed.
The main issues was getting the pause/play to stop in each and every scene. I was getting audio tracks from the previous scenes still playing.

I know that this is operator error on my part - but I am a bit lost on the matter and could use a little help.

LT

https://www.dropbox.com/preview/SPBA%20Animation%2015%20Jan.zip?role=personal

16

That file is coming up as not existing