AS3: MOUSE_OUT not firing when Mouse leaves stage

Question

I am developing a website with nav items that cover the whole stage from top to bottom (see altered image below) and it is pretty easy for the user to exit the stage with their mouse, not triggering the MouseEvent.MOUSE_OUT events required to "turn off" said nav items.

Should I be using Event.MOUSE_LEAVE to detect when the mouse has left the stage, and turn off any enabled nav items? That is what I been trying to do, but have had trouble getting any output from my listener. Any ideas?

alt text http://marcysutton.com/blog/wp-content/uploads/2010/01/redpropeller.png

For a class associated with a movieclip in the Flash IDE, is this the correct syntax for registering an Event.MOUSE_LEAVE listener? It doesn't seem to do anything no matter what I do. Is it a case where I have to embed the movie in a browser for the event to fire?

this.stage.addEventListener(Event.MOUSE_LEAVE, mouseLeaveListener);

Here is my MainNav.as class:

package com.redpropeller {

import com.greensock.*;
import com.greensock.plugins.*;
import flash.display.*;
import flash.text.*;
import flash.events.*;

public class MainNav extends MovieClip { // MainNav is a movieclip in the IDE

    public var colors:Array;

    public function MainNav():void {
        colors = new Array(0xee3124, 0xc72a1f, 0xa62c24, 0x912923, 0x7e221c);
        TweenPlugin.activate([TintPlugin]);

        // trying to target stage through this object
        this.stage.addEventListener(Event.MOUSE_LEAVE, mouseLeaveListener);

        for(var i:Number=0; i<this.numChildren; i++){
            var n = this.getChildAt(i);
            n.useHandCursor = true;
            n.buttonMode = true;

            n.addEventListener(MouseEvent.MOUSE_OVER, navBtnOn);
            n.addEventListener(MouseEvent.MOUSE_OUT, navBtnOff);
        }
    }
    public function mouseLeaveListener(e:Event):void {
        trace('mouseleave'); // nothing ever happens

    }
    private function navBtnOn(e:MouseEvent):void {
        TweenLite.to(e.currentTarget.bar_mc, 0.01, {tint:0x333333});
    }
    private function navBtnOff(e:MouseEvent):void {
        TweenLite.to(e.currentTarget.bar_mc, 0.01,
            {tint:uint(colors[this.getChildIndex(MovieClip(e.currentTarget))])});
            // changes color back to specific tint
    }
}

}

Answer 1

Answer: Event.MOUSE_LEAVE does not fire in the IDE. It works fine when the movie is embedded in an HTML page. Thanks for your help!