Join Jake Ströh for an in-depth discussion in this video Creating buttons and working with mouse actions, part of Up and Running with Hype.
Buttons are of course, an essential tool for prompting interactivity from a user. We're going to explore how to create a simple button and then add actions to the button to make the timeline stop. We're also going to need an additional button for resuming the timeline. And lastly, we'll learn the importance of putting actions on the timeline itself. Let's begin by opening the button start document, and previewing it in a browser. What we have here is the simple animation of the motorbike going from left to right through our scene. Now we'll go to the Insert Elements button and click on that, and insert a button.
And I'll title it Stop. Every button has a normal, hover and pressed state. I'll select the hover state and then double click on my text, go to the Text Inspector and make the style of the text bold. With the button selected, let's go over to the Actions Inspector, you can also get there by hitting Cmd+6. And on mouse click, we'll hit the plus button and add an action for pause timeline on the main timeline. And later when we start working with multiple timelines, we'll have more options to choose from in this pull-down menu.
Let's preview in a browser, and then hit Stop. So it works. We were able to stop our main timeline. Now we want to be able to resume the timeline. So we'll go to our Insert Elements and insert a second button, click off of it and re-select it to move. Place it up above and title it Play, and I'll make the hover state of the text bold. With the button selected I'll go the Actions Inspector, and on mouse click I'll hit Plus, and we'll select continue timeline. Let's preview in a browser.
It works. Suppose that we didn't want the timeline to automatically play upon launching our document. To do that, we'll go down to the main timeline and there's a drop down menu, and we'll Show timeline actions. What you get here, is a time line action with a Insert keyframe button. Which jumps to the beginning of our scene, and then click the Insert Action button and we'll choose Pause Timeline for the main time line. Let's preview in a browser and then select the Play button.
And then stop. We can resume and stop the timeline at any point. Next, let's open up the other buttons, start document. Let's preview this document in a browser, similar. This time let's go to our Insert Elements in insert a textured button. Place it right underneath the logo. So what is a textured button? Essentially a rounded rectangle with a background gradient in it. Double Click on it and label our button Stop. And on hover I'm going to go over to the Element Inspector and I'll change the color of the background gradient slightly.
Next, I'll select the button and go to the Actions Inspector. And then Mouse Click, we'll Pause the timeline and this time we're actually going to put an action on the logo to resume the timeline. So select the logo. We're already in the Actions Inspector and select Continue Timeline. Let's now preview in a browser. We can stop, and then click on the logo to continue the timeline. This is just the beginning to interactivity between buttons, a timeline, and the actions that we can utilize for both. By keeping in mind the steps to create the button type you want, whether it's a standard button, textured or image.
And then applying the actions that you desire, you can create compelling animations that do more than just start and stop at timeline. But also to send an e-mail or call up a web address in your browser.
- Creating your first Hype animation
- Understanding the main timeline
- Animating with keyframes
- Modifying keyframes and retiming
- Working with the Capo tool
- Reusing animations
- Masking and cropping
- Animating CSS filters
- Creating buttons and working with mouse actions
- Chaining actions together
- Developing a slideshow
- Creating and managing scenes
- Exporting and embedding Hype documents