How to Create Custom Buttons in Captivate

by Jonathan Shoaf

Consistency is important when delivering eLearning. This is why most eLearning professionals develop a standard look and feel for all their courses. Learners need to be focused on learning the topic, not on finding out how to get to the next page or which button to click next. Buttons are a part of a standard look and feel and they need to be consistent through all of your courses.

Problem

Buttons are an important part of your organization's standard look and feel and you want to use your design in Captivate.

Solution

Create custom versions of your button for each Captivate button state and import them using the Button object. (Note: these directions are written for Captivate 4 but may work in previous versions as well)

You can reuse button graphics you have created in other programs in Captivate.

Helpful tip: If you don't have original graphic files you can use a screen capture program to take snapshots of the buttons in your existing eLearning and save them as graphics to be used in Captivate.

Before we get into the details, it is important to understand button states. Buttons states are used to give feedback to a learner and they are associated with the action they are about to take. Captivate has three button states you need to understand: up, over, and down.

• up is the default state of the button. This is what the button looks like when it is not being used.
• over is the state of the button when the learner is hovering over it with the mouse.
• down is the state of the button when you click the mouse on it but before you release the mouse button.

1. Create a version of your button for each state

I've created three versions, one for each state, of a button I want to use in Captivate.



Captivate will expect the buttons to follow a standard naming convention. So pick out a button name, for example "myButton", and put a suffix on it according to the button state the graphic is designed for. For example:

• myButton_up.png
• myButton_over.png
• myButton_down.png

Helpful tip: If you do not want a different button version for each state, just use the same default image for all states by copying it and renaming it.

2. Create a button in Captivate

Use the Button icon on the toolbar or use the menu Insert > Standard Objects... > Button.

As shown, make sure Image Button is selected for Button Type.



Now browse to the button you have created. It doesn't matter which button state you select (up, over, or down). As long as you followed the standard naming convention and all buttons are in the same folder, Captivate will automatically assign the appropriate graphic to the appropriate state.

Click Ok to accept the button and you will see your button in your project. Preview the project to see your custom button in action. Later, of course, you will want to go back and assign an action to it.