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).
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.
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.
Change SmartShape to button by selecting the Use as Button check box.
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.
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.
There are three types of default buttons:
- Text Button
- Transparent Button
- Image Button
For a normal button, we can change its properties from the properties window. For example, you can change the properties of the following:
- Font style
- Font color
- Assign action etc.
Select text button. Go to the drop-down menu of Button type and select Transparent Button from the drop down list.
Select the button and in the Fill & Stroke option, change the fill color of the button (solid, gradient or texture) as per the requirement.
Select the button and from the drop down list for Button type, choose Image button.
Choose the image you want to create as a button.
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.
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.
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.
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.
Here is the inserted exit button in Up and Over states.
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.
In the below sample, you can see that buttons are used in the Interface to create 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.
Subscribe to Our Blogs
Get CommLab's latest eLearning articles straight to your inbox. Enter your email address below: