Leverage the Latest Learning Technologies to Overcome Global Training Challenges
Share Twitter Facebook LinkedIn Google+

How to Create a Button in Adobe Captivate 7?

Written By

How to Create a Button in Captivate 7?

Buttons play a major role in developing an online learning course. They are mainly useful in Course Interface and Interactivity slides. Interfaces may be present by default or they can be customized; in a customized course, buttons play a major role in deciding the look and feel of the course and restrict the learner from moving to next slide. Here is a screenshot from an elearning course, which shows how buttons can be used in the Interactivity slide and Course Interface (GUI).

Course sample

Home, FAQs, Help, Menu, Play and Pause, Audio on and Off, Previous and Next are all the customized buttons used in this course.

As shown in the screenshot, we can create buttons in Captivate 7 by using Smartshapes or by inserting buttons from the object tool bar.

Creating Buttons Using SmartShape

Go to the object tool bar; give a click over the smart shape. The smart shapes pallet is opened.

Smartshape pallet

Select any one of the smartshapes and draw on the screen with the help of the mouse. Select and double click the shape created. You will see that the Properties window is opened.

smartshape window

Change SmartShape to button by selecting the Use as Button check box.

Use as button

This is how we can change smartshape to button.

Inserting button from the Object Tool Bar

Go to the object tool bar and insert the button.

Insert button

Once we click on the button, we can see the button inserted in the slide. On double clicking the button, we can see its general properties.

Text button

There are three types of default buttons:

  1. Text Button
  2. Transparent Button
  3. Image Button

Text Button

For a normal button, we can change its properties from the properties window. For example, you can change the properties of the following:

  • Name
  • Font style
  • Font color
  • Assign action etc.

Transparent Button

Select text button. Go to the drop-down menu of Button type and select Transparent Button from the drop down list.

Transparent button

Select the button and in the Fill & Stroke option, change the fill color of the button (solid, gradient or texture) as per the requirement.

Fill and Stroke options

Image Button

Select the button and from the drop down list for Button type, choose Image button.

Image button

Choose the image you want to create as a button.

Change folder

Browse the default images from the gallery with a click on the change folder.

You can see that the gallery buttons window opens up. Select any one of the desired Upimages (PNG, JPG or bmp) from the path and click open.

Open window

After a click on the open button, we can see the button is inserted with Up state. By overlapping the mouse cursor on the button, we can see the Overstate of a button. The screenshot given here shows the button with Up and Over states.

Up and Over

You can create your own button not only from the gallery, but also from your own image library. In order to create a customized button in a captivate course, we will need to work apart from Captivate. To create a customized button in Captivate 7, you should create three different images. One for each stage (Up, Over and Down). By using any of the tools like Photoshop, Flash, Illustrator or any editing software, you can create the required images. It is preferable to save images with UP, Over and Down names in any of the format – PNG, GIF, JPEG or BMP.

Here, I am going to explain how you can create button images in Photoshop for Adobe Captivate 7.

Open Photoshop and create the shape as per the requirement. For example, we will create the exit button. Below is the screenshot for reference showing Up, Over and Down images.

Layer pallet

After creating the shape, insert the button in the slide.

Select the image button as mentioned earlier and select the Change Folder option, browse the path and select the file Exit_up from the list and click open.

Open

Here is the inserted exit button in Up and Over states.

Cutomized buttons

It is a simple and easy way to create text; transparent, image and customized image buttons in Captivate 7.

Below is the sample where the buttons are used as images. By using image buttons we created click on images interactivity slide.

Click on images

In the below sample, you can see that buttons are used in the Interface to create menu.

Menu

I hope you find creating buttons in Captivate 7 interesting. If you have created buttons for an elearning course using Captivate 7, do share your experiences.

View Presentation on How can we Rapidly Author eLearning Courses Using Adobe Captivate?

Share
Topics: , , ,

Subscribe to Our Blogs

Get CommLab's latest eLearning articles straight to your inbox. Enter your email address below:

 
eLearning Learning
  • Go to Insert menu and in shapes option you can select your desire shape.
    Select the shape and go to properties there you can find the “Use as button” option check mark that option then you can view additional actions tab along with the “Style and options”.