Sun City Design - Research

Captivate Right-Click Functionality

Learn how to implement right-click functionality in Macromedia Captivate when publishing to a web page.

Introduction

Macromedia Captivate is a program designed to let people easily create interactive training simulations anddemonstrations. Captivate produces Macromedia Flash format (.swf) output for easy viewing on a web site. By using this format many benefits are seen in smooth animation, small file size, and easy deployment procedures.

As nice as these features are, there are still a few issues with the Flash format that limit the functionality possible in Captivate. One of these limitations is the inability to simulate a right-click event when creating a simulation in Captivate. The reason Captivate cannot replicate this action is because when a user right-clicks on a Flash movie, the built-in Flash context menu is automatically displayed. This is an obvious case for concern if the software you are simulating is reliant on features only accessible by right-clicking somewhere on the screen.

There have been various workarounds mentioned: clicking on a neutral “Next step” button, or clicking on a picture of a right mouse button, but these alternatives are very far from ideal. I set out to find a more acceptable method and came up with something that, with some minor modifications, could become a fully featured solution.

How it works

My method has very little to do with Flash and is accomplished almost exclusively with HTML, CSS, and JavaScript.

The key is to stop a right-click event from reaching the Flash movie. In order to do this, I created a new “shield” layer containing a transparent spacer image and set its z-index value higher than that of the Flash movie. This shield is not shown by default and is only displayed when the rightClickToAdvance() function is called.

Since we only want this shield to appear when a right-click is required to advance to the next slide, we have to signify when the shield should be shown from inside the Captivate movie. In order to do this I created a Flash movie clip that calls the rightClickToAdvance() JavaScript function when it is displayed in the Captivate movie. I then imported this movie clip into Captivate and positioned it over the click box on the slide to be right-clicked.

Example

View Working Example

Download

Download the example and source files: Right-click Functionality Files (.zip - 347KB)

Source Code

Place this JavaScript in the head of your HTML document:

// Captivate Right-Click Functionality
// by Steven Shongrunden ( www.suncitydesign.com )
// Only tested on IE6.0

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

// Macromedia code to receive the function call from the SWF movie
var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
function cp_DoFSCommand(command, args) {
	var myFlashObj = InternetExplorer ? cp : document.cp;
	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');
} 

// Function to handle when the user right clicks on the shield
function userRightClicked() {

	// Advance the slide
	window.cp.SetVariable("rdcmndNextSlide","1");

	// Get rid of the shield
	document.getElementById("shield").style.display = "none";

	// Return to normal functionality
	document.oncontextmenu = null;
		
	return false;
	
}

function rightClickToAdvance(){
	// Enable the shield
	document.getElementById("shield").style.display = "inline";
	document.oncontextmenu = userRightClicked;
}

Place this CSS in your style definitions:

div#shield {

	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: transparent;
	z-index: 13;
	cursor: default;
	color: transparent;
	display:none;

}

img.spacer {
	width: 100%;
	height: 100%;
}

Use this code to display your movie in the body of your HTML file:

<div id="shield"><img src="spacer.gif" alt="" class="spacer"></div>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="303" height="320" id="cp" name="cp" style="z-index:1;">
<param name="movie" value="right-click-functionality.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="loop" value="0">
<param name="wmode" value="transparent">
<embed name="cp" src="right-click-functionality.swf" width="303" height="320" loop="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" SWLIVECONNECT="true"></embed>
</object>

Simply change the source of the swf file and the dimensions to customize for your Captivate project. Also ensure the spacer image is available and insert this file onto the slide which you would like to enable right-click functionality.

Areas for Improvement

As of now the user only has to right-click anywhere on the page and not in the area of the click box. I haven’t had time to fix this issue yet, but one way of doing this would be to pass the position and dimensions of the imported Flash file through to the JavaScript function and then have JavaScript decide whether or not the user right-clicked in the appropriate area.

This method works on Microsoft Internet Explorer 6.0, but has not been tested on any other browser.

Comments

If you have any comments, suggestions, or questions about this tutorial please feel free to send me an e-mail

I hope this method helps you get past this problem or at least gives you a place to start to achieve a full implementation.