Add interactive buttons to your Captivate projects

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

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.

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

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.

Preview and/or publish the project.

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

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

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

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

Preview and/or publish the project.

Open a project in Captivate.

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

On the stage, select the image.

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

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

Create a responsive project.

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

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

Add Dave and Angie to the left Fluid Box.

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

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

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.

Create the advanced actions.

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

Assign both Dave and Angie to their respective advanced action.

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 allows you to publish your project to multiple output locations:

·       Your computer

·       iOS or Android

·       Adobe Connect

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

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

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

Select the SVG on the stage.

On the stage, double-click the SVG.

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.

Convert an image into a button.

On the Property Inspector, click State View.

Change the properties of the RollOver and the Down states.

Exit the State view and preview/publish the project.

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.

Add appropriate success and failure captions.

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

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

Preview and/or publish the project.

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

Add states to the following buttons:

• Submit
• Back
• Skip
• Review forward
• Review back
• Clear

Preview and/or publish the project.

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

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

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

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.

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.

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

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

Select Autosize Buttons in the General panel on the right.

Select the question button that you want to modify.

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