Click-to-reveal interaction - Captivate Tutorial

- [Instructor] In this chapter, we will learn how to create custom interactions using simple actions in Captivate. Let's start with creating a Click to Reveal interaction. You can use this interaction for displaying more information about the objects clicked. I have simple interactions start file open. You can open it from the exercise files folder, chapter three folder. In this file, go to slide two. In this interaction, on clicking each icon, we will display the benefits of meditation corresponding to that icon. To show these captions on click of the icons, we need to first hide them. For that, select one of the captions and then press and hold the shift key on your keyboard and then select rest of the captions on the slide. Then, open the Properties Inspector, by clicking the Properties button on the top right corner. Here, click this eye icon so that these captions are not visible in output. To confirm that all the captions are hidden, let's preview the slide. For that, go to the toolbar, click preview and select next five slides. In the preview, notice that none of those captions are available. With this confirmation, close the preview dialogue. Now click anywhere in the scrap area to deselect the captions. The icons you see on the slide are a part of a single image and not as separate objects. To make the icon area clickable, and associate an action to it, let's add a circle shape on top of these icons. For that, let's go to the toolbar and click shapes. Here, select the oval shape. Then, press and hold the shift key on your keyboard and draw a circle on the stage. Pressing and holding the shift key will give you a perfect circle. Now, resize and reposition the circle so that it covers the icon completely. Then, go to the Properties Inspector and change the fill opacity to 0%. To convert the shape into a button, we will select use as button option in the Properties Inspector. And with the creation of button there will be roll over and down states added to this object. So let's delete them as we don't require a hover or down state for a transparent button. Let's select RollOver and then click the delete icon next to it. Click okay to confirm. Now, with the down state selected, click the delete button again and click okay. Now let's associate an action with this button. For that, switch to the Actions tab. Here, for on success action, open the drop down and select Show. In the next drop down, select CTR1. This is the naming I have used for the first caption on this screen. Then, uncheck continue playing the project, so that the learners get a chance to click the other buttons on the slide. Now scroll down, and select Hand Cursor to show a hand cursor when the learner hovers on this area and disable the click sound if you don't like it. Now let's duplicate this shape button and place it on the other icons. For that, press and hold the command key if you're on a Mac, or control key if you are on Windows, and drag the shape button to the next icon. That will create a copy of the shape button for you. Now repeat these steps for the rest of the shape buttons. Now select the second shape button on the screen and then go to the Actions tab, scroll up if required, and change show CTR1 to CTR2. Similarly, select the third shape button and change the show action to CTR3. Similarly, change the actions for the other icons on the screen. Now let's preview this interaction. For that, go to Preview and select next five slides. Notice that none of the captions are showing up as soon as the screen loads. But when you click the icons in any order on the screen, the related caption shows up on the screen.