Smart Shapes and button states

Since version 6,  Adobe Captivate has allowed you to create custom shapes using the Smart Shape tools.  The  Smart Shapes could then be converted into buttons. This was a great way of being able to create interactive buttons/hotspots that are the same shape as irregular shaped objects such different countries in a map. With Captivate 8, Adobe have introduced States with Smart Shapes. States allow you to control the visual appearance of the button, depending upon how the user interacts with the button.


The Normal state (red image above), is the visual appearance of the button when the mouse cursor is away from the button

The Down state (green image above), is the visual appearance of the button when the button is clicked on

The Rollover state (orange image above), is the visual appearance of the button when the cursor is over the button, but hasn’t been clicked on

Creating a button


Click on the Shapes button and select a shape. I chose the Rounded Rectangle shape (highlighted in red above). Then I click and drag the shape to the size you require on the slide.


Double-clicking on the shape will allow you to type text into the shape. I typed in next.


The colours of the shape and typeface can be changed in the Properties panel. For the shape, I changed the Fill to be a Solid, the fill colour to red, Opacity to 100%, the stroke Width to 0 and the text colour to white.


In the Properties panel the shape can be converted into a button, by checking the option: Use as Button. Once this option is turned on, states are then available.


Next, I changed the state to Down. I changed the fill colour to green and set the stroke Width to 0 (see image above).


Finally, I changed the state to Rollover. I changed the fill colour to orange and set the stroke Width to 0 (see image above).

Making it work


The states for the button is now complete. To make the button work and perform a task I went to the Actions section of the Properties panel. Using the On Success, allows you to control what action the button performs. I left it on the default, which is Go to the next slide. In the Others section I checked Hand Cursor, so the cursor pointer would change to a hand when the mouse cursor went over the button.

The button is now complete. Images can also be used for the different button states, so be creative and create your own custom buttons.