Custom Right-click in Flash
August 16th, 2007 . by polyGeekUpdate: 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.)
Doesn’t appear to be working in Firefox on Mac OS X. Check out this short video illustrating the issue:
http://www.screencast.com/t/URlccIR0n
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.
@everyone,
Let me say I’m really happy with the responses thus far. I just posted this a few hours ago and there are already 8 comments. Kudos to the Flash/Flex community.
I’m more than willing to play host to this project of getting this to work more reliably on more browsers. But I think something like Google/Code might be a better solution to let the community work on this and communicate. Clearly there are many, MANY, people out there who know heaps more about Javascript than I do.
I’m going to write a separate post asking for comments about what people think would be the best approach for this project going forward.
Thanks,
Dan, a.k.a. polyGeek
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.
doesn’t work in opera…
@ufgdhfdhdfd, The External Interface doesn’t support Opera. So this solution will never work on that browser.
BTW, “ufgdhfdhdfd” is that a character from the Hitchhikers Guide? :-)
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?
@Frederique, you can’t add something like a color picker, or calendar, things like that. Or maybe for design purposes someone would like to make an animated control. Who knows?
But you’re right, for the vast majority of things just editing the existing context menu works fine.
Possible does not work, full unhooking for ON-line
I’m tested on local, this works OFF-line
Browser IE 7
see pic (your on-line example) - http://img182.imageshack.us/img182/9108/rkmj0.jpg
@Gumir, thanks for the feedback. Paulius Uza asked a lot of users to test this and found that it works about 80% of the time.
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…
@theCodeBot, thanks for the testing. That reminds me that I just got a new Dell XPS laptop with Ubuntu. I can test it on Linux as well.
Maybe, someday, this will be part of the Flash API and we won’t have to revert to these hacks.
Leave a Reply