Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this chapter, we are going to be exploring interactive elements with Captivate. We are going to begin with buttons. I would like you to open the Chapter 7 file that's in your Projects folder inside of your Chapter 7 folder in your Exercises folder. I have opened it recently, so it's here on my Welcome screen. You may have to browse for it from the File menu or you can double-click it from your operating system. You may be presented with this window. It's warning us that there are a lot of unused items in the library. And that's okay because I've already included a number of images that we will be using from the library.
Let's click OK to continue. We are going to build a brief interactive tour of the Hansel and Petal flower shop. We are going to include a welcome page that you're looking at now, plus a details page for the store, for displays and for gifts. If I preview this project now, it's simply going to display all four of the slides, one after the other. There's no interactivity in it yet. And now is the time to add it. I would like to create some navigation buttons that will allow us to navigate to different portions of the presentation. You can see that I've included a store, displays, and gifts area on the left.
We are going to be replacing this with buttons. To begin, let's add a button. You can insert a button here under the Insert menu and that's a Standard Object. You may want to remember that keyboard shortcut of Command+Shift+B on a Macintosh or Ctrl+Shift+B on a Windows computer. When you create your new button, you may find you get the success, failure and hint captions already built. You can turn those off under the Properties panel, down under Options.
The button comes in as the default button style, as defined by our Object Style Manager. We are going to modify it right now. Let's take a look at the different types of buttons that we can create with Captivate. In the Properties panel, over on the top, you'll see Button Type. Now, if you don't have the Properties panel available to you, you can always switch to the Classic workspace and it will be there. There are 3 different button types that you can choose. There is a Text Button that allows you to enter some text that will display on the button. There is a Transparent Button that will not have any text on it but it will look like an area that you can click on.
And then, lastly an Image Button. Text buttons are a way for you to quickly build a button that's obviously a button and it will behave as such. People recognize these buttons and generally know what to do with them. We are going to use an Image Button in this case because I want it to match what's already on the stage. In order to do this effectively, you have got to build those button images in an external image editor. I happen to use Photoshop but you can choose your favorite editor for this task. I've already done that. So I am not going to spend any more time talking about that part.
When you switch to Image Button, you will see that there are a lot of buttons pre-built. If you scroll down, you can see that there's a number of buttons provided with Captivate. We are going to use our own right now. To import an image, click on the folder to the right of the drop-down. Browse to the Image folder that's in your Project folder in the Chapter 7 Exercise files folder and in it let's choose displays.png and click Open. Now, we have built this button. Let's move it on top of the word "displays" already in position.
Now we have to define what the button is going to do. Scroll down to Action to determine what going to happen. In this case, I want them to go to a specific slide. Click on the On Success drop down and choose Jump to slide. You can see that there's a lot of options available to you. You could build navigation that goes to the previous slide for instance or to next slide or perhaps even to the last slide that you have visited if someone's jumped around. In this case, we are going to go to specific slide. We could also open a URL or a file, we could go to another project, we could send an email.
We can repeat this process by copying and pasting the button two more times. You can copy under the Edit menu. Choose Copy and then paste the same way. Let's move it up on top of store. And then paste again. I'm using my keyboard this time, Command+B. And I will put it down here. Let's replace the images on these buttons. We'll start with this one here. I want to replace the image with my gifts image. So I will scroll up and I can see my image button.
Click on the folder. Browse to gifts, which is right there. Now it shows gifts and we will change the image on this one. This one should be store. There it is. So, now I have got a button that says displays, a buttons that says gifts, and a button that says store. Let's change our action on this button. This one is going to jump to the slide called Store. This one is jumping to Display and this one is going to jump to Gifts.
One last thing is to take a look at the Timeline. You'll notice that the button has two areas in the Timeline. It has the area where it's Active and the area where it's Inactive. There's also a big pause indicator right there in the middle. When you put a button onto your stage, the expectation is that you want the user to interact with that button. For this reason, Captivate automatically stops the flow of the project until the user interacts with the button. Let's preview the project and see what happens.
Now, it stops and let's go to the gifts button. And you saw that we skipped to the gifts page. Of course, we haven't built any buttons on the store, displays, or gift pages, so we can go do that now. Another thing that we have to do is to ensure that our cursor changes to a hand when we put it over the button. Let's scroll down in the Properties area and you'll see that there's a checkbox called Show Hand Cursor Over Hit Area. Let's enable that for all three buttons.
Next, let's select all three buttons and copy all three buttons. Let's paste them on to store, display, and gifts. Switch to Store and paste, Display and paste, and Gifts and paste. Let's view our master slide and we can get rid of those guides that I had placed earlier. Under Window, choose Master Slide, select this graphic and delete it. Yes, I'm sure I would like to delete it.
Let's go back to Home and preview. We will preview our project. Now it stops. Let's go to the Store page and we will go to the Gifts page and we will go to the Displays page, great. Let's close this and we will save it as Chapter 7_a.
Buttons make it possible for you to quickly add interactive elements to your projects. We are going to see other methods of adding additional interactivity later on in this chapter.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 81360 Viewers
80 Video lessons · 133259 Viewers
52 Video lessons · 66627 Viewers
59 Video lessons · 52442 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.