August 16th, 2007 . by polyGeek
Update: I’ve created a project on Google Code for this in the hopes of getting some Javascript experts to make the code work reliably in all the browsers that support the Actionscript External Interface.
By using a few lines of Javascript, and the External Interface I’ve been able to replace the default context-menu in Flash with a customized one. In my examples I use a simple color wheel in Flash and the color-picker component in Flex.
You can check out the pages here: Flash version, Flex version, Download code.
Here is the testing matrix so far:
- Internet Explorer 7, Windows XP, passed
- FireFox 2, Windows XP, passed
If you have a configuration that is different than any shown above then please comment and let me know the results. I’ll update the list as comments come in.
If it doesn’t work on your system it would be great if you took a crack at modifying the Javascript to support your browser. I’m pretty much out of the loop from here on out because I don’t have anything left to test on.
Below is the list of browser/OSes that the Flash External Interface works on. I would like to make sure that the Javascript works on all of the browser/OSes that are supporeted by the External Interface – listed below.
| External Interface browser support |
| Browser |
Operating System |
| Internet Explorer 5.0 and later |
Windows |
|
| Netscape 8.0 and later |
Windows |
Macintosh |
| Mozilla 1.7.5 and later |
Windows |
Macintosh |
| Firefox 1.0 and later |
Windows |
Macintosh |
| Safari 1.3 and later |
|
Macintosh |
The gist of how this works
It’s really pretty simple. We’ve all seen sites that have Flash content that have disabled the right-click altogether. I just took that idea and modified it by capturing the onMouseDown in Javascript and if it’s a right-click then notifying Flash via the External Interface. Flash then does its work which is very basic Actionscript.
Hopefully this will work on most browser/OSes and so encourage Adobe to just give us access from within Flash to fully customize the context-menu and not have to muck about in Javascript.
Sorry about disparaging Javascript. It isn’t Javascript’s fault that Internet Explorer is such a pain in the frakking ass. It took me 15 minutes to get this all to work in FireFox. It took 4 hours to get it to work in IE. (Insert Yosemite Sam cursing tirade here.)
If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.
Posted in Tags: custom right-click, Flex
|
36 Comments »
similar posts
36 Responses to “Custom Right-click in Flash”
Ditto result on my Mac Firefox. didn’t work on Safari either.
It doesn’t work for linux firefox, versions:
Flash: 9,0,60,120
Firefox: 2.0.0.6
The standard flash right-click menu pops up, background does not change at all.
It’s not working for me on Windows XP / Firefox 2.0.0.6, Flash Player 9,0,45,0. Working in IE 6.
Not working on Windows XP Firefox 2.0.0.6. If I click outside the Flash movie, I get the color wheel once, but never again.
Works in IE7 on XP, though. Pretty snazzy.
Works in IE6 but not FF 2.0.0.5.
Windows XP
Flash Player 9r47
Great work! I will look into the FF issue, I fear it might be stuck at “onload”.
Unfortunatelly not working on:
Firefox 2.0.0.6
Flash Player 9.0 r47
Windows Vista
This appears to work for me when I right click on the HTML portion of the page. It seems to place the colorbox in relation to where I right clicked on the HTML.
Event is not defined on line 21. The rightClick() method at no point has the event passed in which appears to be the issue.
Note that I haven’t taken a look at the source, call me lazy, I just prefer the right-click view source option over a zip file… but I can see why you didn’t go that direction. :)
FF2, WinXP, FP9.0.45
@Brent – event doesn’t have to be passed in for IE. event refers to the current event being processed (single-threaded). In Firefox/Mozilla, something needs to be passed in.
However, even with that correction, it’s not the only issue. In the FF error console it mentions that rightClick is not a function of the SWF.
This worked in Firefox (2.0.0.6) on the Mac but not in Safari (2.0.4). OS X 10.4.10
However, Firefox *did* display the Adobe context menu and *then* showed the custom menu after I had clicked anywhere on the page to make the Adobe menu disappear.
Your code is working on my system in: IE6, IE7, Safari 3 and is not working in Opera 9.22, FireFox 2 and NS 8.1.2 (all on WinXP with Flash 9). I noticed that in NS and FF that if you click long enough inside/outside then sometimes the custom menu DOES popup but most times it doesn’t.
What if you don’t have a right mouse button?
@pan69
CTRL + left click
Apple + left click
:)
FF2.0.0.6, winXP – failed
IE , winXP – passed
errors in FF:
1.function getDivScroll does not always return a value 2. event is not defined (rightclick.js) 3. function rightClick does not always return a value
etc etc
in both versions on XP SP2 IE6.0 with Flash 9.0.45.0 I get a JavaScript error ‘object doesn’t support this property or method’ for the line function ‘event.stopPropagation()’ in the function ‘rightClick’ – shouldn’t it be ‘event.cancelBubble’? Certainly when I did something similar in IE I created a function called userRightClicked which contained the code I wanted to run and, at the end, the following lines:
window.event.keyCode = 0;
window.event.returnValue = false;
window.event.cancelBubble = true;
return false;
I then assigned this function to document.oncontextmenu – that all seemed to work ok.
in Firefox 2.0.0.6 on same OS, I get ‘event is not defined
http://polygeek.com/flash/custom_rightClick/Flash/rightClick.js
Line 21′
You’re never going to get it to work perfectly in Firefox as it has a setting that allows users to disallow JavaScript from mucking around with the context menu… ‘tools>options>content>advanced’
>> Firefox has a setting that allows users to disallow JavaScript from mucking around with the context menu…
Yes, but it allows by default.
Why do it this way when flash (as 2 and 3) have a function to customize de rightclick-menu and hide de standard functions? I’ve been doing this for years to add a “created by” and “mail to” and it works fine. What are the banifits of this workround method?
Fails in Firefox 2.0.0.14 and 3.0 on Ubuntu 8.04 and Fedora 8, fine in IE7 and FF3 for XP. Under Linux, the external interface is not implemented, so It does not send the event to flash. However, the other error I noted is that JS does not block the event from Flash like it should be able to do without External Interfacing.
The default context menu is displayed as if hideBuiltInItems() was called and the SWF was left at that.
Tested a little further on Linux, forgot to try right clicking outside the movie. Both flash and flex versions, if you try the right click in the movie, it shows the context menu w/ the hideBuiltInItems() effect, but if you right click OUTSIDE, the correct functionality is called…odd…
Doesn’t seem to work in Flex using Flash player 10, Firefox 3.0.3, on Windows Vista. Anybody got a solution for this with those requirements?
I am having trouble getting it to work with swfobject 2.1. Do you know of a fix for this other than going back to 1.5.
Works prefect in FF 3.07 + FP 10,0,12,36
And IE 6.03 both on Win XP64.
Too bad you loose the scrollwheel funcionality, gonna check the js maybe i'm lucky.
but, ty
Doesn't work for me either on firefox 3.5.1 with Flash Player 10.
Aside from that – how did you solve the nested objects in Flex that you might want to put a context menu for them.
Cheers.
Great code that works everywhere except where I need it: Safari 4. Any ideas or is this a lost cause?
Brooks
