A long while ago I wrote an article describing how to block background elements in Flash. The problem I used to encounter was that my background elements were clickable through other movie clips on the stage.
Recently, I’ve had the opportunity to use Flash CS3 and ActionScript 3.0 and my problems with click handling have been flipped upside-down. The annoyance I encounter now, is that I cannot click through movie clips, even if their alpha is set to be completely transparent. For example, if I have a series of clickable movie clips positioned under another clip acting as a glare.
Flash 9 now handles click events more efficiently and will only process a mouse click on the top most element in a stack of InteractiveObjects, whether or not it has a listener for that mouse click event. This means, that any time you have a MovieClip object placed over top of another MovieClip, only the top one will be able to receive mouse click events by default. This actually makes a lot of sense. Not only is it what I expect as a designer/developer, but it also means the Flash player has to do much less work checking through movie clips to see if they should be handling a click. But how do we fix this?
Introducing mouseEnabled and mouseChildren. The solution to this problem is a simple property called mouseEnabled. By deafult, mouseEnabled is set to true for any InteractiveObject or subclass, which includes Sprites and MovieClips. Setting this property to false, however, will mean that the clip ignores all mouse events. Perfect! Well… Almost.
There’s one last problem that you will most certainly run into. Even if you set the mouseEnabled property of a clip to false, its children may still have it set to true, and they will be the ones that will capture your mouse click. Instead of looping through all the children of a movie clip and setting mouseEnabled to false, the fine folks at Adobe have provided with another property: mouseChildren. When this property is set to false, it disables mouse events for all of that clip’s children.
Armed with these two properties, you’re now able to successfully click “through” the top most movie clips on your stage. Here’s a quick example.
mainMovie.bottomElement.addEventListener(MouseEvent.CLICK, myHandler); mainMovie.topElement.mouseEnabled = false; mainMovie.topElement.mouseChildren = false;
In this example, we assume that mainMovie.topElement is a MovieClip that is positioned on top of mainMovie.bottomElement. Also, mainMovie.topElement can have many children. The code given above will allow the user to click through the topmost movie clip and successfully trigger the myHandler method.
I should note that this solution is only valid while compiling your SWF’s as Flash 9 or greater, using ActionScript 3.0 or greater. In earlier versions, you can click through movie clips just fine.