1. Home
2. Developer Connection
3. Adobe Captivate Developer Center

Adobe Captivate Article

Using animations to extend Adobe Captivate for right-click capability

William Heinz

www.openskylearning.com

Most software today uses right-click functionality to accomplish various software tasks. In Adobe Captivate, you can add click boxes that support left and double-click. The right-click functionality is trapped by the Flash Player to display the player menu. This article describes how to add right-click functionality to a simulation. Right-click functionality is an essential tool for creating software testing using Adobe Captivate, and it greatly enhances the ability of Adobe Captivate to teach software applications. The approach described in this tutorial allows you to size and place the right-click area almost as intuitively as adding a Adobe Captivate Click box. The solution will work with Adobe Captivate 1.01, Adobe Captivate 2, and Adobe Captivate 3.

Fortunately, Adobe Captivate already provides the ability to add Macromedia Flash animations into a Adobe Captivate project. Since Flash ActionScript can incorporate logic, it is possible to create intelligent animations that work with Adobe Captivate to enhance its capabilities.

In this tutorial, I provide a Flash file, RightClickAnimation.swf, that you can add to a Adobe Captivate slide to very easily add right-click functionality to a Adobe Captivate simulation. Adobe Captivate allows you to place and size animations so that it is possible to add an animation and at the same time, define a right-click area when you place the animation on the slide. In this way, the Flash SWF file mimics right-click functionality for your end user in your Adobe Captivate content.

Most Flash SWF files work the same whether playing within or outside of Adobe Captivate content. The right-click SWF file, however, is a rare exception since Flash displays its own menu when a user right-clicks. In short, you must block the Flash menu when running the SWF file standalone or in a browser so that it does not interfere with the right-click menu you want to show in your demo or simulation. This document provides you with the steps and HTML code required to overcome this issue.

The detailed instructions below allow anyone, even non-programmers, to add right-click functionality to your Adobe Captivate simulations. Once you have done it a few times you will find it only takes a few minutes to add right-click functionality to any slide.

If you have questions, please e-mail me. If you want to know more about OpenSky Learning please visit our website at: http://www.openskylearning.com.

This tutorial differs from the article called, Adding right-click functionality to Adobe captivate content by Steven Shongrunden in the following ways:

1. It interfaces tightly with Adobe Captivate so you can place and size the animation to outline the area for your right-click. This is much easier than adding JavaScript to define your click area.
2. It allows for scoring, which is essential for software testing.
3. It allows for separate right-click functionality on as many slides as you like.
4. It is designed so that non-programmers can quickly and efficiently add right-click functionality.

Requirements

In order to make the most of this article, you need the following software and files:

Adobe Captivate (versions 1.01, 2, or 3)

• Try
• Buy

Adobe Dreamweaver (or any text editor)

• Try
• Buy

Sample files:

• rightclickanimation3.zip (ZIP, 868K)

Seeing an Example

It is usually a good idea to see a working example before trying to create one. I have created a Adobe Captivate simulation that is a mock task to be completed in Microsoft Word. The instructions for the task are displayed in gold. You will no doubt find more creative ways to use the right-click animation but this example, even if it is a bit over simplified, demonstrates the concept. View the simulation and follow the instructions.

http://www.openskylearning.com/CaptivateAnimations/RightClickDemo/RightClick_Skin.htm

Incorporating the right-click animation into Adobe Captivate

Use the following steps ton incorporate the right-click animation into Adobe Captivate.

1. Unzip rightclickanimation3.zip (which you downloaded in the Requirements section) into a directory and note its location.
2. Copy the RightClickAnimation3.swf file into your Adobe Captivate Highlights directory (usually C:\Program Files\Adobe\Adobe Captivate 3\Gallery\SWF Animation\Highlights).
3. Create your Adobe Captivate recording using right-clicks where required.
4. From within Adobe Captivate 3, open one slide that contains your right-click (this is usually the slide before the right-click menu appears).

5. Select the menu Insert > Animation and use the following steps to add right-click functionality to your content:

   1. Make sure you copied RightClickAnimation3 as described in step 2 above.
   2. Browse to the RightClickAnimation3.swf file as the animation to add by opening to the Highlights folder.
   3. Ignore the warning message that refers to using _root. The Animation dialog box appears.
   4. Select the Options tab in the Animation dialog box. The settings below work well for me:.
      1. Set Display to the Rest of Slide option from the pop-up menu.
      2. Set Appear After to .3 seconds.
      3. Select the Pause until User Clicks option .
      4. Make sure that Synchronize with Movie. is set to off.
      5. Set Effect to No Transition.
      6. Click OK to save your animation.
6. Move your animation so that it covers the area where you are expecting a right- click. This is similar to the way you specify the size for a Click box in Adobe Captivate.
7. Important: You must add a regular left Click box somewhere out of the way to stop the flow of the program and to provide errors on a regular click. Use the following steps to do so:
   1. Go to the menu, and select Insert > Click Box. The New click box dialog box appears.
   2. On the Options tab, select the Rest of Slide option. In the Options subsection, select the Failure Caption option, but deselect all other options.
   3. Click OK to close the dialog box.
8. Set the Failure Caption text to something like “Expecting a right-click on this slide” by double-clicking the “Type failure text here” text box.
9. Save and test the Adobe Captivate content in preview to make sure it works appropriately.
   
   

   Note:

   • If you have output options turned on (e.g. SCORM), you cannot use the right-click functionality on the first slide. I recommend inserting a blank slide that shows for .5 seconds at the very beginning of your project if you need a right-click at the very beginning of your simulation.
   • If you do not have a click box on the slide where the right-click menu appears, add a click box on the menu where you want the user to click.
   • In the Adobe Captivate 3 content, you may want to hide the mouse if you are waiting for the user to select the right-click menu.

10. Publish the Adobe Captivate content.

    Important note: You have added right-click functionality to your simulation and it works in Preview mode. There are now two more tasks to accomplish to make it function correctly when running outside of Adobe Captivate. First you may want to make it score correctly, if you are using the right click in an assessment. Additionally, you must block the normal Flash interception of the right-click which produces the Flash right-click menu. You cannot do this in Flash, so you do it in the HTML file that calls the Adobe Captivate simulation.

Scoring your quiz

Scoring does not work correctly in preview mode. To see your scoring you must browse the HTML. If you are not interested in scoring, you can skip this section, which explains how to block the Adobe Flash right-click menu.

Scoring for the right click does not require you to do anything special, but you should understand that the way it works behind the scenes is a bit different from what you probably would expect and the reporting is a bit confusing until you understand how it works.

Before I start trying to explain how it works, I should say something about why it works this way. To score the right click, I have to change Adobe Captivate internal variables. I was not able to find a variable (that I had access to) that would allow me to change the scoring for an action. I was, however, able to change the max score. And since I could not give credit for a correct right click from a user, I reduced how many answers a user had to get right, in order to score a correct right click. This allows the user to get 100% if he/she gets the right click correct, and a lower percent if the user gets it wrong.

In other words, a correctly-executed right-click answer subtracts one from the maximum (possible) score instead of adding one to the actual score. This works out to be almost the same thing if you are scoring by percentage correct.

Let me explain with an example. Suppose you had a simulation with four slides and each slide contains an interaction with the weight of one; the total achievable score, or maximum score is four points. If a user now answers all but the right-click question correctly, the user has a score of three out of four (or 75%).

If a user answers all interactions correctly including the right-click method you would expect a score of 100% and this is what you will get. Using our example, the maximum score will automatically be reduced by one point from four to three. As a result, the user will receive a 100% score displayed as three out of three answers correct, not four out of four, as you would expect. I know this is a bit complicated to grasp, but if you read this carefully and then play with it a little you will see how it works and how you can use the right click method in your scoring. If you still don’t understand the concept, after playing with it, contact me by e-mail and I will explain further.

In summary, to get reporting working in this way, you do the following:

1. Double-click on each left click box for which you want to score and go to the Reports Tab. Select the Report Answers option for the question.
2. Don’t forget the left click box that is on the same screen as your right-click animation. Report answers should also be set for this even though no user will ever click it. This causes the max score to be increased by one to allow for the right click, which is invisible to Adobe Captivate.
   From the Adobe Captivate main menu, click Quiz, then Quiz Preferences. In the tree structure on the left select the Settings option select the Allow Users to Review Quiz option.

Blocking the Flash right-click menu

You have added right-click functionality to your simulation and it works in Preview mode. There is still one important task to accomplish to make it function correctly when running the Adobe Captivate SWF file outside of Adobe Captivate. You must block the normal Flash interception of the right-click, which produces the Flash right-click menu. Since you cannot do this in Flash itself, you must do it in the HTML file that calls the Adobe Captivate simulation.

The simplified approach for blocking the Flash right-click menu

Use this technique first if you can. It is the easiest and quickest way to create HTML that will run your SWF file and block the Flash right-click menu.

1. Copy the file MyProgram.html from RighClickAnimation3.zip, which you downloaded from the Requirements section into your Adobe Captivate Output directory (typically this is located in My Documents/My Adobe Captivate Projects/<your project>). Rename MyProgram.html after your project (in other words, <YourProject>_RightClick.html). I will refer to this file as “your right-click HTML file” in this set of instructions.
2. If you look at the files that Adobe Captivate generates, you will notice that it generates two SWF files. One named after your project and another that is your project with "_skin" concatenated to the name. Run the SWF file that has _skin concatenated to it. In other words, if your project is called abc.cp a file named abc_skin.swf is created. Run this file. Edit your right-click HTML file and change all instances of “MyProgram.swf” to the name of the SWF file simulation that you want to run.
   Important: Do not change the ID and Name; leave these parameters set to "MyProgram."
3. Change all instances of height and width to match the height and width of your simulation. If you don’t know the height and width of your project, you can get this information from the Adobe Captivate main menu by selecting Project > Project Resize, or you can look at the HTML file that Adobe Captivate generated—both will give you the height and width for your project.
4. Copy RightClick.js (also provided in RightClickAnimation3.zip in the Requirements section of the first page) into the same directory as your HTML file.
5. Run your right-click HTML file in your browser to test your project with the right-click animation. The Flash right click menu will not appear now.
   Note: I have tested this HTML in Netscape(7.2), Firefox (5.0) and Internet Explorer(7.0, and will block the Flash menu when users browse your HTML from these browsers.

A second approach for blocking the Flash right-click menu

If you use SCORM and must use the HTML that Adobe Captivate creates, you must modify the HTML generated by Adobe Captivate. There are four changes that you must make to the HTML file in this scenario:

1. Include a few small JavaScript routines in your code, within RightClick.js. Open your HTML code, and find the line that loads standard.js, as shown below in line 1 in your code and insert line 2 after it.
   1 <script src="standard.js" type="text/javascript"></script>
2 <script src="RightClick.js" type="text/javascript"></script>
2. Add a call to the JavaScript routine, init().
   Modify the HTML body tag to include a call to init() tag, as in the following example:
   <BODY onload="javascript:init();" bgcolor="#ffffff">
Note: If your code already has an onload() function, noting that the routine that is being called by the onload() function. Add the call to the init() function to that routine. The point is to make sure that the init() function is called when your HTML runs.
3. Find the end of your header code (as shown in line 1 below) and insert line two just below what I've shown below. Adding this division is necessary to block the right click from being received by the Flash player.
   </head>
<DIV ID=oOwnCapture > </DIV>
4. Add a Flash parameter for wmode=opaque. Once again, find the line that contains your program. Although your program can be named anything you like, in this case assume that your program is called Right Click Demo_Skin.swf as in line 1 below. Add a param line to set the wmode to opaque, as shown in line two. Note that the parameter _RCA_attempts to set the number of right-click attempts before Adobe Captivate will move to the next slide. If you want to provide infinite attempts, set the number high.
   1 '<param name="movie" value="Right Click Demo_Skin.swf?_RCA_attempts=4">'+
2 '<param name="wmode" value="opaque">'+

You will need to make this same change twice. The second time, the <noscript> section looks like the following:

<param name="movie" value="Right Click Demo_Skin.swf?_RCA_attempts=4">
<param name="wmode" value="opaque">

Note: All four changes above must be correct or the right-click menu from Flash will not be blocked. If the menu continues to show after making these changes, make sure that you have done all four steps correctly. When your HTML works correctly, save it, since it is very easy to overwrite your XML when re-publishing your Adobe Captivate file. This method has been tested with IE (7.0)

About the author