AS3

MouseWheelTrap – how to stop simultaneous Flash / browser scrolling

24 Comments

Update: This project is now hosted at GitHub. There are currently known issues with Chrome’s PPAPI plugin architecture. USE AT YOUR OWN RISK.

I recently stumbled over a new AS3 gotcha that seems to be bugging a lot of the Flash community. Apparently a new ‘feature’ of AS3, whereby using the mousewheel inside an embedded Flash movie still scrolls the surrounding browser window (if it has enough content, that is).

This didn’t happen in AS2. If a Flash movie had focus, mousewheel events weren’t sent to the browser window. It wasn’t a problem in FireFox either, until a recent update and adversely affects any AS3 Flash app embedded in an HTML page where you might want to scroll or zoom with the mousewheel while over the Flash, instead of the scrolling the browser window.

So, I decided to cook up some code to fix this. While it’s early version and isn’t perfect, it suits my purposes, is easy to set up and doesn’t require any external JavaScript – so I’d thought I’d share it with the world, in case Adobe never get around to addressing this ‘feature’.

Introducing MouseWheelTrap. A handy little utility class that traps mousewheel events while the mouse is over the Flash, so your app scrolls how it was intended to. I’ve tested it with SWFObject on PC IE and FireFox, but not with SWFMacMouseWheel on Mac (if someone could tell me if it works). I decided against using jQuery for trapping mouse events, partly out of laziness, partly because many people have no control over the HTML that embeds their Flash app and therefore can’t add custom JavaScript.

Setting up MouseWheelTrap is easy:

  • Download the MouseWheelTrap ZIP package, or just the AS file.
  • Unzip the package and have a look at the demo, or just take the MouseWheelTrap.as file and put it in the com.spikything.utils folder into your own project or classpath.
  • Import the utility and set it up somewhere in your main class like so:
import com.spikything.utils.MouseWheelTrap;
MouseWheelTrap.setup(stage);

Simple huh? Let me know how you get on…

24 thoughts on “MouseWheelTrap – how to stop simultaneous Flash / browser scrolling”

  1. Wonderful, worked great for me. I was having the issue in IE (FireFox was working fine for me) — adding this fix immediately solved the problem.

  2. This worked great Liam.

    thanks

    you don’t know how hard I was looking on the internet for a solution.

    I thought the answer would be in JavaScript…but you made it easier.

    thanks

  4. It works great in firefox and safari. In IE and chrome I must first click on my map (.swf). Once I do this it works great fine. Could this be a javascript issue? I’m using flex 3 so the only changes I’ve made were to the addEventListeners.

    FROM
    mx.core.FlexGlobals.topLevelApplication.addEventListener(MouseEvent.ROLL_OUT, function():void

    TO
    Application.application.addEventListener(MouseEvent.ROLL_OUT, function():void

    sample page (the map at bottom of page) : http://crownpeak.vipnet.org/cmsportal3/

    Thanks in advance,
    Mark

  5. Melmendo, I’d say that could be to do with the fact that Flex builds its children in the background and isn’t actually quite ready when you expect it. If you have a search MouseWheelTrap, I think a few people out there adapted it for better Flex support – I will look into it.

  6. Hey there,
    it’s really nice solution you posted. Helped me out alot!
    However, while testing my flash app (not very optimized and many animations and data processing going on) on various browsers. I’ve noticed that the app lags A LOT in Opera. I first tried to replace eval with xml-formated js, then moved the js eval section of your code to the html header, still no good. Then analyzed the code a little bit closer and changed
    stage.addEventListener(MouseEvent.MOUSE_MOVE, function():void {
    to
    stage.addEventListener(MouseEvent.MOUSE_OVER, function():void {
    It’s completely sufficient to use MOUSE_OVER event type to initiate MouseWheelTrap, since otherwise the flash has to send request to the javascript every single time the cursor moves around. This little correction brings a slight performance boost in IE/FF/Chrome and a HUGE ONE in Opera (v 10.50).
    Hope this helps anyone.

  7. Yeah, good point. I think there was I reason I used MOUSE_MOVE instead (probably to do with right-clicking or something). It may be a left over from a stage.frameRate idling thing I did that worked nicely (since this had internal logic to ensure it only updates when necessary).

    When I get some time, I’ll test the change and implement it if I can’t break it 🙂 I’ll also format the JavaScript as XML for clarity – thanks for the heads up!

  8. i friend your code is great but i have a problem, i have to scale a mc with mouse wheel and your code just work on stage not on mc ….. anybody have some idea?????

  10. Actually, MOUSE_OVER will only fire over the areas of the stage that have graphical content. So xxcc, if your stage is completely full of “stuff,” then great. But only MOUSE_MOVE is guaranteed to fire over empty areas of the stage as well. So that is probably why you used it, Liam.

    This is a great utility. I tried it out and it worked great. I just wonder how adobe’s components get around this problem. Do you suppose that they use some kind of external runtime javascript call, too?

    I am currently writing a tutorial on making your own flash scrollbar class. The solution to this problem was one of the hurdles I needed to cross. I will be sure to give you credit in the article, Liam. I assume it’s going to be okay to include your class file in the download bundle? I won’t alter it in any way.

    Mr. Jody Hall

  11. Yep, no problem – feel free to include the class in your article. There may be a way to optimise it to avoid unnecessary js calls, but something I’ll have to do if and when I get time. At the moment I’m fulltime on an embedded systems project for the BBC and have no free time.

  12. Liam,
    You sound like a busy person. Well, that’s a very good thing! Anyway, thanks for the permission. I did eventually finish the article, which is located at: http://theflashconnection.com/content/flash-as3-scrollbar-class. The page where I mention your class and link to your blog is this one: http://theflashconnection.com/content/dispatching-events-and-more-enhancements. The download file on that page includes your class file. Check out the article if you get the time someday.

    Mr. Jody Hall

  13. Sweet – Works Very Well!

    I also made it possible to scroll only over a certain component of the swf 🙂

  15. I haven’t been checking my site for months, but at least I can talk about the project I’m working on now. It’s the YouView set top box platform (youview.com).

    Anyway, good to see this MouseWheelTrap thing is still of use to people – for what it’s worth. If I get time I’ll look into the Chrome problem, though how each browser deals with JQuery style manipulation of the event model is beyond my understanding really. Anyone find a solution, feel free to amend the source!

  16. MouseWheelTrap is working fine in wmode is window.

    But it is not working in wmode=transparent. please advise

Leave a Reply