ROLL_OVER & ROLL_OUT v.s. MOVE_OVER & MOVE_OUT

http://www.kirupa.com/forum/showthread.php?p=1948052#post1948052

The InteractiveObject class (flash.display.InteractiveObject) in ActionScript 3 has both rollOver and rollOut events as well as mouseOver and mouseOut events.

Both sets of events determine when a mouse enters or leaves the graphics area of an interactive object. The rollOver and mouseOver events fire when the mouse comes in contact with an interactive object, while rollOut and mouseOut occur when the mouse leaves the interactive object.

Where they differ is with their interaction with interactive object children. The roll events (rollOver and rollOut) simplify the process and prevent interference with child events. Essentially, this is the same as using mouseOver and mouseOut with mouseEnabled set to false. mouseOver and mouseOut with mouseEnabled provide a parent sprite with events from its children. rollOver and rollOut keeps the events on the parent object.

Example: toggle between the use of the ROLL_OVER & ROLL_OUT and MOUSE_OVER and MOUSE_OUT events.

codes:

// main button

var spriteButton:Sprite = new Sprite();

spriteButton.name = "spriteButton";

// graphics

var spriteGraphics1:Sprite = createGraphics("spriteGraphics1", 0xFF, 50, 50, 25);

var spriteGraphics2:Sprite = createGraphics("spriteGraphics2", 0x80, 50, 50, 15);

// add to display list

spriteButton.addChild(spriteGraphics1);

spriteButton.addChild(spriteGraphics2);

addChild(spriteButton);

// events

spriteButton.addEventListener(MouseEvent.ROLL_OVER, over);

spriteButton.addEventListener(MouseEvent.ROLL_OUT, out);

//~spriteButton.addEventListener(MouseEvent.MOUSE_OVER, over);

//~spriteButton.addEventListener(MouseEvent.MOUSE_OUT, out);

function over(evt:MouseEvent):void {

trace("over: " + evt.target.name);

}

function out(evt:MouseEvent):void {

trace("out: " + evt.target.name);

}

// create circles

function createGraphics(name:String, color:uint, x:Number, y:Number, radius:Number):Sprite {

var circle:Sprite = new Sprite();

circle.name = name;

circle.graphics.beginFill(color);

circle.graphics.drawCircle(x, y, radius);

return circle;

}

You'll notice that with rollOver and rollOut, spriteButton is the target and doesn't receieve events from its children while the opposite is true for mouseOver and mouseOut.


rollOver and rollOut output

over: spriteButton

out: spriteButton

over: spriteButton

out: spriteButton

mouseOver and mouseOut output

over: spriteGraphics1

out: spriteGraphics1

over: spriteGraphics2

out: spriteGraphics2

over: spriteGraphics1

out: spriteGraphics1