Page 1 of 3   next page »

If you have used Macromedia Captivate to create interactive software training simulations, you have probably come across a situation where you needed to simulate a right-click event. Unfortunately, the current version of Captivate cannot directly support this functionality because Macromedia Flash Player uses the right-click event to trigger the player menu, which enables you to change player settings or zoom in and out of the SWF file that is playing. This restriction can be frustrating if your demonstration or simulation needs to show that your software has functions only available by performing a right-click action.

Instead of trying to avoid right-click events, I have come up with a solution that simulates right-click functionality. This article explains my solution, which incorporates elements of HTML, CSS, and JavaScript.

Configuring the HTML and CSS for a Shield
There is no way to stop the Flash Player context menu from appearing when it detects a right-click, but there are ways to stop the player from realizing that a right-click event has occurred. One way of doing this is to make the user think they clicked a Flash object when instead they clicked an invisible object placed in front of it. This way the invisible object acts as a shield that protects the Flash object from being clicked.

Before creating the "shield" layer, you must properly configure the Captivate object. Adjust the standard HTML output that Captivate generates with the following simple modifications:

• Set the object's id attribute to "cp".
• Add the wmode parameter and set it to "transparent".
• Add the embed tag with the swliveconnect attribute set to "true".

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.ca
b#version=6,0,29,0" width="303" height="320" id="cp">

<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">
<param name="AllowScriptAccess" value="always">

<embed src="right-click-functionality.swf" AllowScriptAccess="always" 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>

Now that you have set up the movie object correctly, add the shield layer on top of it. Start by inserting the following HTML just above the object tag:

<div id="shield"><img src="transparent.gif" class="shield" galleryimg="no">
</div>

The shield layer contains a transparent image that stops any mouse clicks from reaching the Flash application. Setting the galleryimg attribute to "no" prevents Internet Explorer from displaying the Image toolbar that appears when a user hovers over an image with the mouse.

The CSS for the shield image, shield layer, and Captivate content is quite simple:

div#shield {
     z-index: 2;
     position: absolute;
     display: none;
}

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

#cp {
     z-index: 1;
     position: relative;
}

You can add the CSS directly to the styles defined in the head of the HTML file, or place them in an externally linked style sheet.

This code sets the transparent GIF file to occupy 100% of the space of the shield layer. The shield layer is set so that it will not appear by default, and its position is set to "absolute". The Z-index property specifies for the browser how to stack components on the screen. Because the shield must be on top of the Captivate SWF file, you must set the shield's Z-index higher.

Setting Up the Captivate Source File
I used JavaScript to create most of the functionality in this solution. The JavaScript code positions the shield, turns it on and off, and decides if the user right-clicked in the appropriate area.

Before you can use the JavaScript code, you need some information from the Captivate content. You need to specify when the JavaScript should show the shield and where the user must click to advance to the next slide.

Page 1 of 3   next page »