Pour commencer, voici le décor :
rollMouseBase

Mon animation se compose en 3 clips :

  • Un clip contenant le carré gris clair
  • Un clip contenant le carré gris foncé
  • Un clip contenant les deux

Ensuite, le code au niveau de la scène principale afin d'écouter les événements (cf Bubbling Events) :

function listen(evt:MouseEvent):void
{
	var type:String = evt.type;
	var target:MovieClip = evt.target as MovieClip;
	trace(type+" - "+target.name);
}
 
clipContainer.addEventListener(MouseEvent.MOUSE_OVER, listen);
clipContainer.addEventListener(MouseEvent.MOUSE_OUT, listen);

Une fois compilé, pour tester correctement la chose, je passe la souris sur le carré gris clair et la fais glisser sur le carré gris foncé. Voici ce que donne la fenêtre de sortie :

mouseOver - clipGrisClair
mouseOut - clipGrisClair
mouseOver - clipGrisFonce
mouseOut - clipGrisFonce

Grâce au Bubbling Events, la fonction a pu détecter exactement quel clip était survolé à quel moment. Cela est très pratique (pas besoin de mettre un écouteur sur chacun des clips) ! Toutefois, il y a des cas ou ce genre de comportement ne convient pas... Voici donc ce qu'il se passe avec le même bout de code légèrement modifié :

function listen(evt:MouseEvent):void
{
	var type:String = evt.type;
	var target:MovieClip = evt.target as MovieClip;
	trace(type+" - "+target.name);
}
 
clipContainer.addEventListener(MouseEvent.ROLL_OVER, listen);
clipContainer.addEventListener(MouseEvent.ROLL_OUT, listen);

A noter que seul le type d'événement écouté a changé. Dès lors, en faisant exactement le même mouvement qu'auparavant, la sortie suivante est affichée :

rollOver - clipContainer
rollOut - clipContainer

Cette fois, le changement de clip survolé (gris clair ou gris foncé) n'est pas "détecté", seule l'entrée et la sortie de la souris sur le clip container est notifiée. Et cela fait une énorme différence selon les cas à gérer !!! Pour récapituler :

  • MOUSER_OVER et MOUSE_OUT notifie chaque clip survolé par la souris
  • ROLL_OVER et ROLL_OUT notifie uniquement le survol du clip écouté (indépendamment des clips à l'intérieur)

Pour bien le montrer, j'ai également mis les sources d'un slider (très light) d'image : afin de gérer l'animation de chacune des images qui défilent, l'événement MouseEvent.MOUSE_OVER est utilisé, et pour le défilement, c'est l'événement MouseEvent.ROLL_OVER. Il y a encore quelques autres fioritures de code pour s'amuser, mais le principe est la !