Le Blog à Manu

Cet article est une sorte de mémo, ma vieillesse tend peut être à me faire oublier certaines choses ! Etant habitué à travailler avec Flash et l’ActionScript 2 (AS2), le changement pour la version 3 donne lieu à quelques nouveautés qu’il faut pas oublier pour ne pas s’inquiéter devant une animation qui ne veut pas marcher !Notamment en ce qui concerne la gestion de la souris sur les clips. Nous devons informer Flash lorsque nous créons un clip en AS3. Lui dire si les événements souris sont pris en compte, si le clip agit comme un bouton, si les descendants (enfants) du clip prennent aussi les événements souris. Pour cela nous avons plusieurs instructions :

buttonMode

mouseEnabled

mouseChildren

buttonMode est une propriété prenant les valeurs false et true. Avec la valeur true, le clip se comporte comme un bouton, lorsque la souris passe dessus elle se transforme en main, le clip peut recevoir aussi l’événement « click ». mouseEnabled est aussi une propriété prenant les valeurs true ou false, sur true cela permet d’indiquer au clip que celui-ci reçoit les événements souris. mouseChildren fait de même mais pour les enfants du clip en question, cela permet de rapidement interdire les événements souris sur les enfants d’un clip. Voici un code d’exemple :

var clip:MovieClip = new MovieClip();
clip.graphics.beginFill( 0xff0000 , 1 );
clip.graphics.drawCircle(100,100,40);
addChild(clip);
clip.addEventListener(MouseEvent.CLICK,c_clip);

var clip2:MovieClip = new MovieClip();
clip2.graphics.beginFill( 0×0000ff , 1 );
clip2.graphics.drawCircle(100,100,20);
clip.addChild(clip2);
clip2.addEventListener(MouseEvent.CLICK,c_clip2);

function c_clip(evt:MouseEvent)
{
trace( »click sur clip »);
}

function c_clip2(evt:MouseEvent)
{
trace( »click sur clip2″);
}

Ce code permet d’afficher deux cercles dont l’un (le bleu) est l’enfant de l’autre (rouge). Le cercle rouge étant plus grand que le bleu. Par défaut les événements souris sont activés sur le cercle rouge et bleu. Pour désactiver les événements souris sur le cercle rouge il suffit d’ajouter le code suivant :

clip.mouseEnabled=false;

Le cercle rouge ne reçoit plus aucun événement alors que le bleu continue à en recevoir. Si vous voulez que le bleu ne reçoive plus rien, vous devez soit positionner la propriété mouseEnabled de clip2 à false, soit positionner mouseChildren de clip à false. Voici un autre code à ajouter :

clip.buttonMode=true;
clip.mouseEnabled=true;
clip.mouseChildren=false;

Dans ce dernier cas, le cercle rouge prend les événements boutons mais pas le cercle bleu. Pourtant lorsque vous passez la souris sur le cercle bleu, la main est toujours présente. Pourquoi ? Si vous cliquez et que vous programmez les événements click des deux clips vous aurez la réponse. En effet, en cliquant sur le cercle bleu vous allez constater que c’est le cercle rouge qui prend l’événement click. Tout se passe comme si le cercle bleu était transparent malgré qu’il soit au dessus du rouge. Pratique non ?