9 Simple Steps to Customize eLearning Course GUI Using Actions in Captivate 6

9 Simple Steps to Customize eLearning Course GUI Using Actions in Captivate 6

Simple Steps to customize eLearning

Is there a way to increase the attention of the learner, as they go through their online courses? Well, one solution is by developing an eLearning course with an attractive course Graphical User Interface (GUI) that is relevant to the subject.

As most of you know, Captivate 6 offers a great feature called Advance Actions. Using these actions, we can easily develop an interactive eLearning course with our own GUI. These actions can be used with system and user variables, as also in association with text entry boxes, mathematical expressions, quizzing and widgets. Advanced actions can provide endless possibilities and turn a course from ordinary to interactive.

Here, I would like to share with you how to customize a course GUI using Actions in Captivate 6. Let’s see the step by step process:

Step 1: First, design course GUI as per your requirement, using any multimedia software such as Photoshop or Flash or Illustrator. Once your designing part is over, crop and save each design element of your course GUI (such as Banner, Next, Back, Menu, Audio On/Off buttons, bottom design etc….)

Course GUI

Step 2: Now go to Captive 6 and give the same dimensions to your course that you have given for the course GUI design. Import the design elements of your course GUI into the course and align them properly.

Note: If you import your course buttons as “Smart Shapes”, then you can view them throughout the course; or if you import them as buttons, then you can view them slide wise. All the buttons should be placed and displayed on the first page of the course.

Importing Buttons

Step 3: Once you are done with the alignment, you need to give Actions to your course buttons. In the next step I will explain to you how to do this to a Play/ Pause button.

Step 4: For Play/ Pause buttons, you need to place the Pause button layer above the Play button layer. Now open the Play/Pause buttons Properties window and provide the properties as shown below.

Setting Button Properties
Setting Play Button Properties

Step 5: Create a variable called Play (you can give any name to your variable, but it should be identifiable) for further actions. To create a variable go to Project in the Menu bar and then select Variable option from the drop down list.

Step 6: Select the Pause button, go to Executive Advanced Actions. Select the Conditional actions from the action type. Name the action with the specific name. Select the variable Play from the variable type, select not equal to from comparison type. Select 1 from the literal variable. Update the script and close the action window.

Creating Variables Using Advanced Actions

Step 7: Open the same Action and give the actions for the button as shown below. After adding the actions click on the Update button.

Advanced Actions

Step 8: Reopen the above mentioned Action and delete the play action from the IF condition, since it restricts the user to reuse the button. See the image below for the clear picture.

Updating an Action

Step 9: For the Play button, you can copy action from the Pause button and give the actions as shown in the image below.

Reusing Actions

I hope that you find the steps are useful to customize your course GUI.

View E-book on How to Select the Right Rapid Authoring Tool