AS3 MOUSE_OVER problems due to movieclip overlap

Question

I am working on something that has a lot of different buttons on the screen. The buttons need to be made using movieclips, not actual "buttons".

I'm using Flash CS4 and ActionScript 3.

I have created a glow effect around the button on mouseover. This works great, except that the glow effect creates a hitbox for the button about twice the width and height of the actual button. I did some research, and ended up making a symbol inside the button symbol that contains just the hit region I want to trigger the button. This works excellently for triggering the button. Now, when I mouse over the buttons, they only light up when I hit the actual button graphic itself, not the box around it from the glow animation. However, the problem is that for some reason the box from the animation is still blocking mouseover from being detected on nearby buttons (if the box overlaps them.)

This might sound confusing, so here is a picture:

• The green area defines where the mouse will activate the glow animation.

• The red area defines the actual box for the glow animation symbol.

• The yellow area defines the portion of the button that doesn't activate the glow animation because the red box is blocking the mouseover event from being fired.

• I've left out the red box for the button on the left to make it easier to see the problem, take note, however, that there IS in fact one of these boxes around both buttons, the button on the right was just placed on the stage AFTER the button on the left, resulting in its box being on top of the left button's.

NOTE: Both the hit-area and the animation are already contained within their own separate symbols inside the button symbol. Setting the animation symbol's mouseEnabled and mouseChildren to false does not seem to to do the trick like I had hoped it would (based on researching this problem.)

NOTE: The animation does not activate (and it is is not supposed to) when the mouse is moved into the red region, it only activates when the mouse is moved into the green region, this is the desired behavior, the only problem is that I don't want the red box to be detected by mouse events at all.

Here is the code for the button's class:

package classes{

    import flash.display.MovieClip;
    import flash.events.MouseEvent;
    import flash.events.Event;
    public class glowing_place_marker extends MovieClip {

        public static var instances:Array = new Array();
        public var is_playing:Boolean=false;
        private var is_mouse_over:Boolean = false;
        private var animation:MovieClip;

        public function glowing_place_marker() {

            this.animation = this.place_marker_animation;
            this.animation.stop();
            this.animation.mouseEnabled = false;
            this.animation.mouseChildren = false;   

            self:instances.push(this);
            this.place_marker_hit.addEventListener(MouseEvent.MOUSE_OVER, roll_over_handler);
            this.place_marker_hit.addEventListener(MouseEvent.MOUSE_OUT, roll_out_handler);

        }

        public function roll_over_handler(e:MouseEvent) {
            this.animation.play();      
            this.is_playing=true;
            this.is_mouse_over = true;

        }

        public function roll_out_handler(e:MouseEvent) {

            stage.addEventListener(Event.ENTER_FRAME, checkFrame);
            this.is_mouse_over = false;
        }

        function checkFrame(event:Event):void {
            if (!this.is_mouse_over) {
                if (this.animation.currentFrame==1) {
                    stage.removeEventListener(Event.ENTER_FRAME, checkFrame);   
                    this.animation.stop();              
                    this.is_playing = false;

                }
            }
        }

    }

}

Can anyone explain to me how to get the animation's box (the red box), to not block the buttons underneath it? (Effectively make the red box un-detectable by mouse events, so clicks, mouseover, etc. go right through it to the items underneath.)

Thank you in advance.

Answer 1

Try setting mouseEnabled = false on the container DisplayObject (the one with the glow) that contains the hit-area for your button. You will still want to leave mouseChildren = true. This way, the glow should no longer block mouse events.

The useful thing about mouseEnabled and mouseChildren is that you can choose to disable just the container, or just a containers' children.

This is a good read:

The power and genius of mouseChildren and mouseEnabled