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.)
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.
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?
@Shane, The weak link in the chain here will always be the Actionscript/Javascript interface via the ExternalInterface. My suggestion to anyone using this code is just accept that it won’t always work and code around it.
The first thing I’d do is create a callback using ExternalInterface and just see if you can get any communications going. If so then assume that the right-click code will work. If not then use the native context-menu.
It really sucks that we have to jump through these hoops.
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.
@alkaline886, Oy, I have no idea. Man, I just hate Javascript. Good thing that procreation doesn't require Javascript or mankind would become extinct. :)
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.
@Flashmattic, I just tested it myself and it doesn't work for me either. FF 3.0.9 and FP 10. :(
I don't think I did solve the nested objects in Flex issue. That would be tricky wouldn't it?
Great code that works everywhere except where I need it: Safari 4. Any ideas or is this a lost cause?
@d-con, frak, don’t you hate it when that happens? :)
I talked to a Nate Beck this weekend at FlashCamp in Phoenix. He’s been working on this. He has big plans for it in a project that he’s involved in. But I don’t know what the time frame is for getting it done. Plus, there’s only so much we can do about this. Browsers suck.
Hi Dan,
Since you are the only person i could find with a lot of experience on this subject, as well as Molehill / Away3D, i thought i’d ask my question to you.
I’ve been trying to combine your “right click” project with Away3D and Molehill API, and I immediately encountered a major problem.
I don’t care in what types of browsers this project will or will not work, because i’ve been writing my own desktop application with an embedded browser of which i’m writing the code myself. Therefor there is no need to bypass the menu enforcement used by opera or similar browsers.
Whenever i want to use the code for ‘customized right click actions’, i need to set the params.wmode variable to “opaque” or “transparent”. However, when i want to use the Molehill API, i need to set the params.wmode variable to “direct”, in which case the ‘customized right click actions’ code doesn’t respond at all.
Is there any way to get your code to work while using params.wmode = “direct”, or maybe is it possible to use the molehill API while using params.wmode = “opaque” / “transparent”?
I really hope there is a solution to this.
Greets, Gabi
@Gabi Okay, I’m not certain but I think the wmode=direct is only temporary while Molehill is in beta. In which case your good to go. Otherwise your screwed. :-(
Thanks for your fast reply on this one.
I’ve been looking for some info on the official release date of Molehill, but there’s nothing to be found, so i can’t even see if this actually is going to be a temporary solution.
So what’s the problem with wmode=direct in your project then? I figure wmode=direct is a new setting only available in Molehill, but isn’t “direct” in any way similar to either “opaque” or “transparent”? I’m guessing that all of these parameters are settings to configure flash player’s display behavior, and in essence they all basically should perform in the same way except for Molehill’s ability to use hardware acceleration.
And as i see it, the javascript used for the callback function has nothing to do with either hardware acceleration, nor the way flash player’s display behaves. So I feel like there must be some way around this problem, and if you maybe have some suggestions on where to start looking, i’d really appreciate it!
Cheers, Gabi
@Gabi I think the wmode=opaque/transparent is something that has to do with the browser handling the Flash Player. Really, the custom-right-click has very little to do with Flash. It’s almost completely Javascript based. It’s the browser/JS that intercepts the mouse click and then uses External Interface to transfer that info to your app in the Flash Player.
But, I could be totally wrong. If I have an area of expertise, which is debatable, it certainly isn’t this one. :-)
Hi again!
I’ve dropped the Molehill projects for now, at least until Adobe had an official release date for it.
I have another question now though…
Your script works perfectly, regarding the right click callback. However, i can’t seem to find out how to set the movie’s width and height to 100% so it’s fullscreen. When i use your code like this:
var so = new SWFObject("Prototype.swf", "customRightClick", "100%", "100%", "10", "#000000");
the movie turns out all buggy and the width and height dont match the screen.
Any ideas on this one?
Never mind, i think i fixed this problem myself:
Somehow SWFobject doesn’t handle the actual page’s height and width within the browser properly.
My solution to this is to create a floating ‘banner’ using javascript, in which i embed the SWFobject.
When i set the movie’s width and height to 100% now (using the same code i posted before), SWFobject has no problem handling the banner’s width and height, and the result turns out great!
I can also switch between fullscreen and windowed by simply changing the banner’s size dynamicly.
It’s of course a quite simple solution, but since i am a complete rookie on javascript vs. html i am a little proud of myself.
Cheers!
@Gabi – Nice solution. I’m the same way. Anytime I can get something to work in HTML/Javascript I feel like a code ninja. ;-)
Code ninjas for the win!
Anyhow, I have found out some information regarding my prior questions on Molehill and your Right click script. Sadly it’s not good news…
The reason why this script won’t work with wmode = direct or wmode = gpu is because your script is a modification of how the browser wants Flash player to act.
Basically this means that when you use wmode = opaque (or transparent, or any other wmode prior to FP version 10), the script passes the information to the browser, and the browser tells Flash player to ignore the standard right click function, and passes it a custom one.
However when you use wmode = direct, Flash player basically ignores all the given parameters and methods by the browser so it can draw the movie to the screen as fast as possible.
When you use wmode = gpu, Flash player will be told to ignore everything the browser wants it to do, and solely listen to what the graphics card has to say.
There is simply no way Adobe can modify this to actually work, since that would mean they would have to modify Flash player in such a way that it listens to the browser, CPU and GPU all at the same time…
Therefor this script doesn’t work, and will never work with hardware acceleration.
It’s sad but true.
Thanks for discovering all that. Once you think about it it totally makes since but I would have never put that together myself.
This works fine:
var so = new SWFObject(“custom_rightClick.swf”
This does not work:
var so = new SWFObject(“http://something.com/custom_rightClick.swf”
Please help? Thanks.
Sorry, I got nothin.