What is the proper way to handle MouseOver and MouseOut in actionscript?

Question

This feels like it should be obvious, but I am having trouble handling MouseEnter and MouseOut with a series of movieclips in actionscript.

I have a movieclip that serves as a background. On that background, I am adding an additional movieclip to serve as a button. On that button's MouseEnter, I add an additional movieclip to serve as a hoverstate, and remove the initial button. On MouseOut, I remove the hoverstate button, and readd the original plain button.

90% of the time, it works as you would expect. But the other 10% of the time, on MouseOut, the MouseEnter event triggers and even though your mouse is not on the button anymore, it has the hoverstate on such that you do.

Some code to illustrate, this is my main movieclip that I add first thing:

package  {
import flash.display.MovieClip;

public class Menu_Main extends MovieClip {

    var backdrop:Backdrop;

    public function Menu_Main() {
        backdrop = new Backdrop();
        addChild(backdrop);
    }
}

}

And here is my subsequent movieclip logic, the one that handles my menu button: package {

import flash.display.MovieClip;
import flash.events.MouseEvent;

public class Backdrop extends MovieClip {

    var button:MyMenuButton;
    var button_hover:MyMenuButton_Over;

    public function InitializeButton()
    {
        button = new MyMenuButton();

        button.addEventListener(MouseEvent.MOUSE_OVER, Button_MouseOver);
        addChild(button);
    }

    function Button_MouseOver(event:MouseEvent):void
    {
        removeChild(button);

        button_hover = new MyMenuButton_Over();
        button_hover.addEventListener(MouseEvent.ROLL_OUT, ButtonHover_MouseOut);
        addChild(button_hover);
    }

    function ButtonHover_MouseOut(event:MouseEvent):void
    {
        removeChild(button_hover);
        addChild(button);
    }

    public function Backdrop() {

        InitializeButton();

    }
}

}

The code here does not include my attempts to remove EventListeners in opportune places. No matter what combination of adding and removing EventListeners, the result would be the same. I have also tried some combinations of ROLL_OUT and ROLL_OVER instead of the mouse versions. I can't say that I've used them perfectly, but the results were again the same.

Can anyone give some advice as to the proper way to handle this?

Answer 1

Two things: first, I've tried your code, using Flash CS5.5 and FlashDevelop, and see NO problems that you describe. The button performs well for me (on an old P4 machine).

Second, you can accomplish the same performance with a little less code and one fewer MovieClip. Make a button MC with two frames. Color the button's body differently in fr. 2 than in fr. 1.

Use same Main class. Backdrop class now looks like this:

package
{

 import flash.display.MovieClip;
 import flash.events.MouseEvent;

 public class Backdrop extends MovieClip {

 var button:MyMenuButton;
 var button_hover:MyMenuButton_Over;

public function Backdrop() 
{
   InitializeButton();
}

 public function InitializeButton()
 {
    button = new MyMenuButton();
    button.stop();
    button.addEventListener(MouseEvent.MOUSE_OVER, Button_Over);
    addChild(button);
 }

 function Button_Over(event:MouseEvent):void
 {
    button.gotoAndStop(2);        
    button.addEventListener(MouseEvent.MOUSE_OUT, Button_Out);
 }

 function Button_Out(event:MouseEvent):void
 {
    button.gotoAndStop(1);    
 }

}

}

Answer 2

This happens because events in Action Script are not synchronous.

Best practice here is to add a single transparent button, on which you will add all the listeners needed - ROLL_OVER and ROLL_OUT. On each handler - do what you want to do - add or remove children, that doesn't matter, because the actual target which dispatches the events is still there and it's still the same.

Cheers!