Page 2 of 3   « previous page   next page »

I created a special SWF file to handle this responsibility (see the right-click-box.swf file in the sample file at the beginning of this article). Think of this SWF file as Captivate's built-in Click Box. When the animation appears in the Timeline, it specifies the JavaScript to enable right-click functionality. If a slide in your Captivate content requires a right-click to advance, use the following steps as you author your Captivate content:

• Start Demo: Adding Right Click Functionality to Captivate Content
• Add a Click Box over the target area.
• Click the Insert menu, select Animation, and select the right-click-box.swf file.
• Place the animation over the Click Box.
• Ensure that the animation does not touch the start or end of the slide in the Timeline.

After following these steps and publishing your Captivate content as a SWF file, you are ready finally to implement the JavaScript that brings everything together.

Note: Moving data from Captivate to JavaScript in this fashion is outside the scope of this article. Interested Flash developers can examine the right-click-box.fla sample file to see how I do this.

Implementing the JavaScript
The JavaScript can be broken down into three sections. One section acquires the necessary data from the Captivate demo or simulation, another section sets up the shield, and the final section decides what to do when the user right-clicks the shield.

The first section is called when the right-click-box.swf animation starts to play in the Timeline:

// Array to hold data sent by the right-click box we inserted in Captivate
var rightClickBoxData = new Array(4);

// Receive the function call from the movie clip
var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
function cp_DoFSCommand(command, args) {
var myFlashObj = InternetExplorer ? cp : document.cp;

// Set the dimensions of the right click box
// rightClickBoxData[0] = x position (relative to Captivate movie)
// rightClickBoxData[1] = y position (relative to Captivate movie)
// rightClickBoxData[2] = width
// rightClickBoxData[3] = height
rightClickBoxData = args.split(" ");

// Enable right click functionality
rightClickToAdvance();
}
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 &&
navigator.userAgent.indexOf("Windows") != -1
&& navigator.userAgent.indexOf("Windows 3.1") == -1) {
document.write(Œ<SCRIPT LANGUAGE=VBScript\> \n');
document.write(Œon error resume next \n');
document.write(ŒSub cp_FSCommand(ByVal command, ByVal args)\n');
document.write(Πcall cp_DoFSCommand(command, args)\n');
document.write(Œend sub\n');
document.write(Œ</SCRIPT\" \n');
}

When the second section runs, it calls the rightClickToAdvance() function, which enables and positions the shield (Figure 1):

function rightClickToAdvance(){

// Define the shield and Captivate objects
var shield = document.getElementById("shield");
var cp = document.getElementById("cp");

// Enable the shield
shield.style.display = "inline";

// Place the shield over top of only the Captivate SWF file
shield.style.top = cp.offsetTop;
shield.style.left = cp.offsetLeft;
shield.style.width = cp.width;
shield.style.height = cp.height;

// Perform the userRightClicked function when the user press the right mouse button
document.oncontextmenu = userRightClicked;

// Stop the user from being able to select the shield
document.onselectstart = new Function ("return false");
}

The last section of code indicates to the browser that right-clicks should call the userRightClicked() function (Figure 2).

The userRightClicked() function determines whether the user right-clicked a location inside the target area of the right-click box. If the user's right-click was not in the target area, nothing happens. If the user right-clicks the target area, the userRightClicked() function disables the shield, advances the Captivate simulation to the next slide, and returns functionality back to normal:

Page 2 of 3   « previous page   next page »