Gérer le clic sur un objet animé dans Animate

Il peut être utile dans une animation interactive de détecter les actions de souris avec vos éléments dans Animate, voici un exemple simple pour détecter le clic utilisateur.

Activer le mouseOver

Soit un symbole (Clip) « Square » dans la bibliothèque avec un nom de liaison « Square » (voir Instancier un symbole) et une forme simple statique à l’intérieur.

Sur la première image de mon scénario, j’écris le code suivant :

let square = new lib.Square();
this.addChild(square);

Lorsque l’on publie l’animation on constate que le curseur ne se modifie pas au survol de l’objet. Pour cela nous allons avoir besoin de 2 choses supplémentaires.

Dans un premier temps il faut définir un style de curseur pour notre objet via la propriété « cursor », qui fonctionne comme son homonyme CSS.

square.cursor = 'pointer';

Mais à nouveau si l’on publie l’animation, le curseur n’est toujours pas actif au survol. Nous devons en plus activer les événements de survol sur notre scène (mouseOver) :

stage.enableMouseOver(10);

Notez le paramètre de la méthode, il indique le nombre de vérification effectuées par secondes. Plus ce chiffre est élevé plus la détection des objets sera fine mais plus l’animation sera gourmande en ressources.

A ce stade, votre objet à bien le curseur au survol lors de la publication. Voyons maintenant comment détecter le clic utilisateur.

Écouter l’événement de clic

square.on('click', (e) => {
	console.log('click');
});

La méthode « on » est un raccourci de la méthode « addEventListener » mais propose plus d’options. Admettons que nous souhaitions écouter une unique fois le clic utilisateur, il suffit de le préciser avec le paramètre « once » (le 4ème paramètre) :

square.on('click', (e) => {
	console.log('click');
}, null, true);

Une autre solution serait de supprimer l’écouteur (avec la méthode « off ») mais c’est souvent une solution laborieuse à mettre en place, sachant qu’il existe une méthode plus simple et plus radicale :

square.removeAllEventListeners('click');

La méthode « removeAllEventListeners » permet de supprimer tous les écouteurs d’événements de type ‘clic’ sur mon objet ‘square’.

Événements de souris et animation

Maintenant, que se passe t’il si je décide de faire une animation sur mon Clip ?

Faites une animation de forme très simple à l’intérieur du symbole « Square » et publiez l’animation.

On constate que, même si mon curseur réagi toujours au survol de mon objet, je n’ai plus aucun événement de ‘clic’ qui remontent. En effet, ces événements en sont pas compatibles avec les animations de forme. Et ce, même si cette animation est à l’intérieur d’un clip, à la racine de votre symbole !

Pour contourner le problème, vous pouvez définir une zone de clic pour votre symbole via la propriété ‘hitArea’ :

let hit = new createjs.Shape();
hit.graphics.beginFill("#000").drawRect(-100, -100, 200, 200);
square.hitArea = hit;

Notez que si vous utilisez des interpolations classiques pour votre animation (en animant un symbole graphique par exemple) vous n’avez pas à définir de hitArea.

Sources : EaselJS mouse interaction