| By Steven Shongrunden | Article Rating: |
|
| March 1, 2006 12:00 PM EST | Reads: |
23,698 |
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.
Published March 1, 2006 Reads 23,698
Copyright © 2006 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
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.
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Adobe Unveils LiveCycle Enterprise Suite 2 for Deployment in the Cloud
- Adobe Flex Developer Earns $100K in New York City
- Adobe May Cooperate with Apple to Transplant Flash Player to iPhone
- Ph.D. in Twitter Anyone?
- Eolas Sues the Internet
- Adobe LiveCycle Enterprise Suite 2 for Cloud Computing
- Adobe Betas Target RIAs and Cloud Computing
- Special Report on the Emerging Cloud Computing Trend
- Adobe Cans Another 9% of its Workforce
- My Thoughts on Ulitzer
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Ulitzer Live! New Media Conference & Expo
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Eval JavaScript in a Global Context
- Fig Leaf Software to Exhibit at Government IT Conference & Expo
- Cloud Executives Feature on Cloud Computing Expo Power Panel
- Software Flexibility in the Cloud - Part 4 of 5
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Is Microsoft as Free as Open Source?
- Adobe Reader Sued
- Adobe Unveils LiveCycle Enterprise Suite 2 for Deployment in the Cloud
- Where Are RIA Technologies Headed in 2008?
- Cover Story: How to Increase the Frame Rates of Your Flash Movies
- AJAX World RIA Conference & Expo Kicks Off in New York City
- Your First Adobe Flex Application with a ColdFusion Backend
- Adobe Flex 2: Advanced DataGrid
- i-Technology Blog: Death-Knell For "Rich Media? Hardly!
- Adobe/Macromedia - Microsoft, Look Out!
- How To Create a Photo Slide Show ...
- Adobe Flex Interface Customization - Themes, Styles, Skins
- Personal Branding Checklist
- Has the Technology Bounceback Begun?
- "Real-World Flex" by Adobe's Christophe Coenraets




































