Add interactive buttons to Adobe Captivate projects and add states to the buttons.

Note:

To know more about Captivate (2017 release) and its features, download the training project, and experience an enhanced hands-on learning. 

Download the following projects:

Buttons are one of the most common ways of adding a standard object to your Captivate slides.

You can increase the interactivity of your Adobe Captivate projects by adding buttons. To add a button, use the default button style (a plain, white rectangle). You can also import custom button images. You can size and position buttons on a slide. You determine what happens after the user clicks the button.

Adding an interactive button

In Captivate, you can add interaction to a button and have any action when you click the button.

To add an interactive button:

  1. On the main menu, click Interactions > Button. On the slide, you will see that a button is inserted.

    Button menu
  2. With the button inserted in the slide, you can change the properties of the button from the Properties Inspector panel.

    Button properties

    You can change the style of the button (transparent or image) and change the button font.

  3. To add an action or interaction to the button, select the button, and click the Actions tab, as shown below:

    Button actions
  4. Display Success, Failure, and Hint captions, if required.

    Button sfh
    • Success: Select this check-box to include a caption to be displayed when the user clicks the button.
    • Failure: Select this check-box to include a caption to be displayed when the user clicks outside the button.
    • Hint: Select this check-box to specify a hint to be displayed to users. The hint is displayed when the user moves the mouse over the button.

    You can delete a button at any time by selecting it and pressing the Delete key. When you delete a button, all associated objects (such as success and failure captions) are also deleted.

  5. Preview and/or publish the project.

As example, create a project with an interactive button, which when clicked hides an object. When you click the button again, you can see the object.

Create a variable myVar and set its value to zero. On button success, in the Advanced Actions panel, choose a conditional action with an if statement.

The action checks that if the value of myVar is zero, then hide the object, and increment the value of myVar to one.

Demo - Interactive button

 

Adding a Smart Shape as button

Smart shapes include many categories of readily-available shapes such as arrows, buttons, or basic shapes. You can insert and modify such shapes quickly and easily in your Adobe Captivate projects.

You can convert a smart shape into a button and add interactivity to it.

  1. Open the slide to which you want to add a button.

  2. On the main menu, click Shapes > choose any Smart Shape.

  3. Choose the button and modify the button properties in the Property Inspector panel.

    Button Smart Shape properties
  4. Select the Use as Button check-box and define the action when the button is clicked.

    Button Smart Shape Use as Button
  5. Preview and/or publish the project.

In the demo below, insert a smart shape, convert it into a button, and assign properties to the button.

Then create an advanced action as a success action for the button trigger. In the advanced action, you check if the variable you had created is equal to the name "John". Based on the condition, the action accepts your input and prints the name in the second slide.

Demo - Smart Shape as button

 

Button properties reference

To view the properties of a button, select it on the slide. The Property inspector displays the properties of the button.When you change the properties, the changes are instantly applied to the selected instance of the button.

Interactive button properties

Interactive button properties
Id Description
1 Choose any of - Text, Transparent, or Image.
2 The button label.
3 Change the properties of the button label font.
4 Change the button label effects.
5 Change shadow and reflection properties of the button.
6 Choose to apply the properties to all objects of the same type.

Smart Shape as button properties

Property Label description

1. Change the smart shape.

2. Change the smart shape background color and opacity.

3. Modify the stroke properties of the button.

4. Change the button label font properties.

1. Insert symbol, user-defined variable, or hyperlink.

2. Modify button label color properties.

3. Modify button margins.

4. Modify button shadow properties.

  1. Choose the action to be executed when you click the button.
  2. Assign a shortcut key to the button
  3. Display Success/Failure/Hint caption upon clicking the button.
  4. Choose the type of cursor and enable/disable click sound.
  1. Choose an audio file/clip that plays when you click the button.
  2. Modify the size and position of the button.
  3. Change the angular position of the button. Maintains the height-to-width ratio of the button when you resize it.

Using interactive buttons in a Drag and Drop interaction project

Drag-and-drop interactions provide an interesting and engaging way of assessing your users’ knowledge. This interaction lets users answer questions by draging and dropping objects in the designated areas or objects.

A drag-and-drop interaction involves a drag source and a drop target. Users drag the drag sources and drop them onto drop targets.

  1. Create a drag and drop interaction project specifying the drag sources and drop targets, and the mappings, as shown below.

    For more information on creating s drag and drop interaction, see Drag and drop interactions in Adobe Captivate.

    Drag and Drop design
  2. Add appropriate success and failure captions.

  3. To add Undo and Reset buttons to the project, navigate to the Drag and Drop panel, and enable the options Undo and Reset.

    DnD Undo Reset 1
  4. To add states to the buttons, select a button, click the Properties Inspector, and add button properties for RollOver and Down states.

    DnD button states
  5. Preview and/or publish the project.

Demo - Interactive buttons in Drag and Drop project

 

Using interactive buttons in a Quiz project

In Captivate, you can add states to quiz buttons. You can add a RollOver state and/or a Down state to the buttons.

  1. Create a quiz project with the buttons, as shown below:

    Quiz buttons
  2. Add states to the following buttons:

    • Submit
    • Back
    • Skip
    • Review forward
    • Review back
    • Clear
  3. Preview and/or publish the project.

Demo - Button state changes in a quiz project

 

Using interactive buttons in a Master Slide in a responsive mode

You can add states to buttons in a Master Slide in responsive mode and use the Master Slide in your project.

  1. Create a responsive project (Ctrl+H) and insert a Master Slide (Insert > Content Master Slide) into the project.

  2. Add the title, sub-title, and content placeholders. Add three smart shapes into the project and convert them into buttons.

    Master Slide responsive layout
    Master Slide responsive layout

  3. Add states to the buttons. Choose a button and in the Properties Inspector panel, add the button properties for RollOver and Down states.

    Button states
    Button states

  4. Exit the Master Slide view. Insert a content slide, and choose the Master Slide you had created from the list of Master Slides. Insert a title, sub-title, and content to the slide.

    Preview/publish the project.

  5. To insert Fluid Boxes into the project, click Suggest Fluid Boxes in the Properties Inspector. The Fluid Box automatically creates containers according to the layout of the objects.

    Align the objects vertically or horizontally.

    For more information on Fluid Boxes, see Fluid Boxes in Captivate.

    Master Slide Fluid Box layout
    Master Slide Fluid Box layout

Automatically resize buttons

You can configure Adobe Captivate to automatically resize a button or caption according to the amount of text in the button. If you edit the text, the button changes size to accommodate the new text.

  1. In an open project, select Edit > Preferences (on Windows) or Adobe Captivate > Preferences (Mac OS).

  2. In the Preferences dialog box, select Defaults under the Global menu.

  3. Select Autosize Buttons in the General panel on the right.

Note:

Best practice is to resize buttons before resizing the project. Resizing a project does not resize the buttons automatically.

Modify buttons on question slides

You can modify some properties of buttons on question slides. The standard buttons are Clear, Back, Submit, and Skip.

  1. Select the question button that you want to modify.

  2. In the Quiz Properties panel, set the values for the various options.

Note:

Resize any buttons before resizing the project. Resizing a project does not resize the buttons automatically.

Download sample projects

To learn more about Captivate and how you can create engaging learning content, download the following projects:

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy