User Guide Cancel

Add interactive buttons to your Captivate Classic projects

  1. Captivate Classic User Guide
  2. Introduction to Captivate
    1. What's New in Adobe Captivate
    2. Adobe Captivate System Requirements
    3. Responsive Project Design with Adobe Captivate
  3. Captivate Classic Release Notes
    1.  Adobe Captivate Classic 11.8.3 Release Notes
    2. Adobe Captivate Classic 11.8.2 Release Notes
    3. Adobe Captivate 11.8.1 Release Notes
    4. Adobe Captivate 11.8 Release Notes
    5. What's New in Adobe Captivate (2019 release) Update 5
    6. What's New in Adobe Captivate (2019 release) Update 2
    7. Adobe Captivate Release Notes
  4. Create Projects
    1. Create different types of projects in Adobe Captivate
    2. Customize the size of an Adobe Captivate project
    3. Responsive Project Design with Adobe Captivate
    4. Create Virtual Reality (VR) projects
    5. Work with responsive text in Adobe Captivate
    6. Work with themes in Adobe Captivate
    7. How to apply view specific properties in responsive projects
    8. How to create backup files for Adobe Captivate projects
    9. Asset panel
    10. Create branching and forced navigation in Captivate
    11. Replace image on the stage
  5. Add and Manage Objects
    1. Work with multi-state objects in Adobe Captivate
    2. Object effects
    3. Insert web objects in Adobe Captivate projects
    4. Work with object styles in Adobe Captivate
    5. How to rotate objects in Adobe Captivate
    6. How to manage objects with the Main Options toolbar
    7. How to merge objects in a slide
    8. How to manage objects in the library
    9. How to group objects in Adobe Captivate
    10. Edit object information using the Advanced Interaction panel
    11. How to copy, paste, and duplicate objects in Adobe Captivate
    12. Control the visibility of objects
    13. How to change the display order of objects in Adobe Captivate
    14. Apply shadows to objects
    15. How to align objects in Adobe Captivate
    16. How to add reflection to objects in Adobe Captivate
    17. Import assets into a Captivate project
  6. Slides
    1. Add slides to an Adobe Captivate project
    2. Editing slides in an Adobe Captivate project
    3. Delete Adobe Captivate project slides
    4. Change slide order in Adobe Captivate
    5. Set slide properties in Adobe Captivate
    6. Add and convert slide notes to audio files with Adobe Captivate
    7. Set up knowledge check slides in Adobe Captivate
    8. How to add slide transitions in Adobe Captivate
    9. How to work with master slides in Adobe Captivate
    10. How to lock Adobe Captivate slides
    11. How to hide or exclude slides in an Adobe Captivate project
    12. How to group and ungroup slides in Adobe Captivate
  7. Timeline and grids
    1. Use rulers and guides
    2. Work with grids in Adobe Captivate
    3. Work with the timeline
    4. Shortcut keys in Adobe Captivate
    5. Working with the filmstrip
    6. How to customize the Adobe Captivate workspace
    7. How to use the Adobe Captivate Library
    8. How to use the Branching panel in Adobe Captivate
  8. Create Quizzes
    1. Insert question slides in Adobe Captivate projects
    2. Set quiz preferences for Adobe Captivate
    3. How to enable learners to submit all quiz responses simultaneously
    4. How to set up question slides with Adobe Captivate
    5. Using random question slides in Adobe Captivate
    6. How to allow users to return to quiz
    7. Import questions from CSV format files
    8. Import questions from GIFT format files
    9. How to insert pretests in Adobe Captivate
  9. Audio
    1. How to insert audio into an Adobe Captivate project
    2. How to preview audio in Adobe Captivate
    3. How to edit audio files with Adobe Captivate
    4. View audio details in Adobe Captivate
    5. Set audio recording preferences and recording audio
    6. How to export audio from Adobe Captivate
  10. Video
    1. Slide videos
    2. Work with event videos in Adobe Captivate
    3. Differences between events and synchronized videos in Adobe Captivate
  11. Interactive Objects
    1. Add interactive buttons to your Captivate projects
    2. Create click boxes in Adobe Captivate
    3. Add text entry boxes with Adobe Captivate
    4. How to add audio to boxes and buttons
    5. How to add JavaScript to boxes and buttons in Adobe Captivate
  12. Interactions
    1. Create drag-and-drop interactions in Adobe Captivate
    2. Use Adobe Captivate variables in widgets
    3. Set the properties of widgets with Adobe Captivate
    4. How to create static, interactive, and question widgets in Adobe Captivate
    5. How to add widgets to your Adobe Captivate project
  13. Non-interactive objects
    1. Create and edit smart shapes
    2. Edit and create text captions with Captivate
    3. How to use images and rollover images with Captivate
    4. How to customize smart shapes in Adobe Captivate
    5. How to create zoom areas in Adobe Captivate
    6. How to set audio for noninteractive objects
    7. How to create rollover slidelets in Adobe Captivate
    8. How to create rollover captions in Adobe Captivate
    9. Change mouse properties in Adobe Captivate
    10. Use highlight boxes in Captivate
    11. Work with swatches in Adobe Captivate
    12. Fix size and position of non-interactive objects
    13. Add animations to a Adobe Captivate project
  14. Advanced Editing and Project Reviews
    1. How to link Adobe Captivate projects
    2. Import, export, and delete content
    3. Skins
    4. Create accessible projects in Adobe Captivate
    5. Create a table of contents (TOC) with Adobe Captivate
    6. Resize Adobe Captivate projects
    7. Projects and project preferences
    8. How to preview projects in Adobe Captivate
  15. Variables and Advanced Actions
    1. Adobe Captivate variables
    2. How to create user-defined variables in Adobe Captivate
    3. Advanced actions in Adobe Captivate
    4. Shared actions in Adobe Captivate projects
    5. Edit or delete user-defined variables in Adobe Captivate
    6. How to assign advanced actions to an event
  16. Record Projects
    1. Create interactive videos
    2. Automatic and manual recording with Captivate
    3. Set recording preferences in Adobe Captivate
    4. Record video demonstrations with Adobe Captivate
    5. How to record software simulations in Adobe Captivate
    6. How to pause recording
  17. Publish Projects
    1. Preview and publish responsive projects
    2. Publish project to Adobe Captivate Prime
    3. Publish projects as HTML5 files with Adobe Captivate
    4. Publish projects as executable files
    5. Publish projects as MP4 files with Adobe Captivate
    6. Set publishing preferences in Adobe Captivate
    7. Using web fonts from Adobe Fonts in Adobe Captivate
    8. Report quiz results to an internal server
  18. Use Adobe Captivate with Other Applications
    1. Import and edit PowerPoint presentations in Captivate
    2. Upload an Adobe Captivate project to a Learning Management System
    3. Learn about the Common JavaScript interface for Adobe Captivate
    4. How to publish Captivate projects to Microsoft Word
    5. Using Adobe Connect with Captivate
    6. How to add Captivate projects to a RoboHelp online help system
    7. How to package multiple SCOs using the Adobe Multi-SCORM Packager
  19. Troubleshoot Adobe Captivate
    1. Resolve known issues and limitations in the latest versions of Adobe Captivate, Adobe FrameMaker, and Adobe RoboHelp.
    2. Early build for Captivate (2019 release) on macOS Big Sur (macOS 11)
    3. Hotfix for VR content not playing on devices
    4. Configure SSL for Live Preview on Devices
    5. Captivate (2019 release) activation issues on macOS Catalina
    6. Captivate responsive courses will not auto-play on browsers
    7. Issues with Asset panel in Adobe Captivate (2019 release)
    8. Error 103 while installing Adobe Captivate
    9. Issues when previewing a Captivate project

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

  • Now available : Mac OS Catalina compatible Adobe Captivate update for 2019 release users . Get update now!
  • Asset Panel not loading in Adobe Captivate (2019 release)? Read More to find a solution.

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

You can increase the interactivity of your Adobe Captivate Classic 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 Classic, 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.

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

    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:

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

    • 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.

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 Classic 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.

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

  5. Preview and/or publish the project.

Adding an Image as button

Image as a button

In eLearning projects, there were situations, when you, as an eLearning developer, wanted to import any image and use it as a button. In earlier versions of Captivate Classic, adding an image as a button involved multiple steps. You had to import an image, add a smart shape over it, change the opacity, and then use the smart shape as a button. It was more a workaround, less a precise workflow.

In Captivate Classic (2019 release) Update 2, you can add an image as button and add interactivity to the button, something that Captivate Classic already does. You can use the object as a button to trigger any action and assign states.

This workflow not only improves your productivity, but also introduces a simpler way to create buttons.

You can use both jpg/bmp and vector images as button. The following are the file formats supported for image files:

·       Jpeg, jpg

·       Gif

·       Png

·       Bmp

·       Ico

·       Emf

·       Wmf

·       Pot, potx, pict

To convert an image and use the image as a button,

Image as button

  1. Open a project in Captivate Classic.

  2. To insert an image, click Media > Image, and select any image.

  3. On the stage, select the image.

  4. On the Property Inspector, choose the option Use as Button.

  5. In the Actions tab, define the action after you click the button when previewing the project or having published the project.

Set the stage

  1. Create a responsive project.

  2. In the project, on the toolbar, click Fluid Box, and two horizontal Fluid Boxes.

    Fluid Boxes
    Fluid Boxes

  3. On the right Fluid Box, add the image, conclusion_img_bottom.png.

    Insert image
    Insert image

  4. Add Dave and Angie to the left Fluid Box.

    Dave and Angie
    Dave and Angie

  5. On the right Fluid Box, add a smart shape with the title Image as button demo.

    Insert smart shape
    Insert smart shape

  6. Insert speech bubbles for both Dave and Angie. Also, unlock both the objects from the Fluid Box.

    Insert speech bubbles
    Insert speech bubbles

Assign actions to the objects

Once the stage is set, the next steps are creating a variable, advanced actions, and assigning the button actions to the advanced actions.

  1. Create a variable _toggle. The initial state of this variable is 0. When you click a button, the state of the variable becomes 1. For more information, see Variables in Captivate Classic.

    Create variable
    Create variable

  2. Create the advanced actions.

    1. The first advanced action hides both the speech bubbles when you launch the project. Name the action hide_bubbles.

      Hide bubble action
      Hide bubble action

      In the Property Inspector, under the Actions tab, choose the action hide_bubbles.

      Choose action
      Choose action

    2. The second advanced action, toggle_Dave, when invoked, reveals Dave’s speech bubble, when you click Dave. The variable _toggle changes its value to 1 when you click Dave. After the speech bubble disappears, the value of _toggle becomes 0.

      Toggle

      Toggle

    3. The third advanced action, toggle_Angie, when invoked, reveals Angie’s speech bubble, when you click Angie. The variable _toggle changes its value to 1 when you click Angie. After the speech bubble disappears, the value of _toggle becomes 0.

      Toggle Angie
      Toggle Angie

  3. Convert both Dave and Angie into buttons. Choose the image, and in the Property Inspector, choose the Use as Button check-box.

    Use as button
    Use as button

  4. Assign both Dave and Angie to their respective advanced action.

  5. After you are done creating your project, you will need to make it available for your users. To do this, you will need to publish your project. Adobe Captivate Classic allows you to publish your project to multiple output locations:

    ·       Your computer

    ·       iOS or Android

    ·       Adobe Connect

SVG as button

Make SVG as button

 

In this update, you can also make a Scalable Vector Graphic (SVG) button. The process is similar to how you have made other types of buttons as image.

  1. On the toolbar, click Media > SVG, and select any SVG.

  2. On the Property Inspector, enable the option Use as Button.

  3. In the Actions tab, assign any action to the button from the On Success drop-down list.

Fill SVG

You can apply a fill color to the image. To apply fill on the image,

  1. Select the SVG on the stage.

  2. On the stage, double-click the SVG.

  3. On the SVG, choose any path, and apply a color from the color palette. In SVG, you can use a path to create lines, curves, arcs, and more. A path is also a combination of multiple shapes, for example, straight or curved lines. A path can be as complex as a series of polylines; therefore, it is important to know the right path to apply a color to. For example, the screenshots below show a path that has been filled with color. In the first image, the path is filled with red. In the second image, the path is filled with green.

    The blue boundary on the SVG shows the path selected in the SVG and changing color would change color for that path only.

    red

    green

Add states to the button

To add states to the button,

  1. Convert an image into a button.

  2. On the Property Inspector, click State View.

  3. Change the properties of the RollOver and the Down states.

  4. Exit the State view and preview/publish the project.

The buttons should change states when they are acted upon. You can also add visited state and custom states to image as a 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

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 Classic.

  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.

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

  5. Preview and/or publish the project.

Using interactive buttons in a Quiz project

In Captivate Classic, 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:

  2. Add states to the following buttons:

    • Submit
    • Back
    • Skip
    • Review forward
    • Review back
    • Clear
  3. Preview and/or publish the 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 Classic.

    Master Slide Fluid Box layout
    Master Slide Fluid Box layout

Automatically resize buttons

You can configure Adobe Captivate Classic 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 Classic > 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.

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online