Join Aaron Quigley for an in-depth discussion in this video Creating hyperlink buttons, part of Learning Captivate 8.
So at this point, when our message from our President comes up, it's going to automatically pause. We set that in the Action setting under the Properties for the slide. So On Enter, this slide's going to pause. What this means now, is we need to give our learners a way that they can advance to the next slide once they've read this message. To do this, we're going to create a hyperlink in the form of a button. The fastest way to enter a button, is to click Interactions in the top menu, and then select Button. Right away a Button's going to be added to the center of the page. I'm just going to click on this Button and drag it down to the bottom right-hand corner, and then make it a little bit bigger by grabbing one of the anchor points and dragging it out.
Now this is where we'd like this particular button to live. Now as we take a look at the Properties panel with the Button selected, there's a few things that we can change. The first thing we can change is the Button Type. Currently it's set to a Transparent Button. If I click in this drop-down menu, there's three options that I have here. I can select a Text Button, which will actually look like a gray button that changes as I hover over it when I'm playing the presentation. Or I can select an Image Button, and select from a variety of images that have actions already associated with them. For example, if I just selected Continue, I'm going to get a Button that says exactly what I want it to say.
It says Continue and it already has the action associated with it, meaning that when I click this Button, it's going to automatically move to the next slide. Now the reason I'm choosing not to do this, is when I look at this Continue button, there's a couple things I don't like about it. It has kind of this gradient background and it has these borders to it, and it doesn't really match the flat appearance that we're creating with this presentation. If I select the Button again and then change it back to a Transparent Button, and click away from it, this Button seems to fit really well with what it is that we've been designing. I'm going to go and select the Button again, and take a look at what exactly is happening with this Transparent Button.
On the Fill section on the right-hand side in Properties, I can see it's actually a black colored button that has the Opacity set at 50%. That means it's 50% transparent, and so the gray color that resolves with the blue behind it is giving me this bluish gray that the button is. Now that seems great, we may say, you know what, that's a perfect color for this presentation. However, if I came back to the starting page and went to Interactions and added the exact same Button, here because the background is white, it's actually showing up as gray. But there's a little trick that you can do if you have a Transparent Button, and you really like the way that it looks overlapping a single color.
You can actually make the Button that entire color, no matter what the background color is. To do this, I'm going to grab this 50% opaque black button, and drag it up on top of the blue. Here I can see the color that we want the Button to be. It's kind of this bluish gray. I'm going to come down to the Fill section, I'm going to grab the EyeDropper, and I'm just going to sample that color from the button. Now the button actually looks lighter even though I just took its exact color, because it's still at 50% Opacity. Let's go and change this to 100%, and now we have that Button looking the way that it did before.
It's the right bluish gray color. In addition to that, if I grab this button and drag it off of the blue, onto the white background, its color now stays the same. I'm just going to delete this button by selecting it, and then hitting the Delete key on the keyboard. As I come back to our other slide where we'd like to have the Continue button, I'm going to make sure this Button has the exact same color properties of what we just created. Because I've already sampled that color, all I have to do is select the Button, come to my Fill section and that color we just created, is going to be the most recent square in the bottom colors. If I select it and then change its Opacity to 100%, I now have the Button that's perfect and can be placed anywhere on my slide, and it's going to look the exact same. This way as we create additional Button throughout this presentation, we can make sure they all have a uniformed look. Okay now that we've got the color figured out, and we've got the placement figured out, let's go ahead and add a caption. With the Buttons selected in the Properties menu on the right-hand side, I'm just going to type the Caption of Continue. The next step is to select the Actions menu on the right-hand side, and to tell this button what it is that we'd like it to do. So here, On Success, or on click, is a way you can think of this since we only have one button. There's a drop-down menu of a variety of things that we can choose from. I can have it go to the next slide or the last slide, I can have it even open up an external URL or a file, or even send an e-mail. What we'd like this button to do is to go to the next slide. So I'll make sure that's selected, I'll click away from it. And at this point, when this slide comes up it'll automatically pause, allowing our learners to read the message. When the learner's ready to continue on, they can click the Continue button and continue moving through our e-learning.
- Choosing a project layout
- Applying and changing themes
- Adding text, media, and shapes
- Inserting interactive elements and widgets
- Adding audio and video
- Adding closed captions to video
- Using responsive templates, text, and images
- Accessing elearning
- Creating software simulations
- Publishing a Captivate project