Welcome!

Adobe Flex Authors: Liz McMillan, RealWire News Distribution, Maureen O'Gara, Yakov Fain, Keith Swenson

Related Topics: Adobe Flex

Adobe Flex: Article

Adding Right-Click Functionality to Captivate Content

Instead of trying to avoid right-click events, I have come up with a solution that simulates right-click functionality

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".
After making these changes, your HTML code for the Captivate object should look like the following (with your own width, height, and filename values):

<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.

More Stories By Steven Shongrunden

Steven Shongrunden has been developing leading-edge e-learning solutions for the past three years. He is the owner of Sun City Design, an Internet marketing and consulting firm in Canada. He manages all aspects of the company's web development and technical training solutions.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.