Tutoriel 7 – Les événements à la souris

Imaginons que nous voulions détecter les déplacements et les cliques de souris de l’utilisateur, pour cela nous pouvons nous abonner à 4 types d’événements :

Le premier est déclenché lorsque l’utilisateur fait un clique de souris : bouton enfoncé puis relâché : L’événement est envoyé uniquement après le relâchement du bouton donc si l’utilisateur fait un clique long, on ne recevra l’événement que quand le bouton sera relâché.

Le deuxième est déclenché lorsque l’utilisateur fait un clique de souris, donc quand il presse le bouton vers le bas (appuie).

Le troisième est déclenché quand le bouton de la souris est relâché et donc que l’utilisateur lâche le bouton.

Le dernier est déclenché quand l’utilisateur se déplacer avec la souris.

Dans l’exemple qui suis, un texte l’état des boutons et la position de la souris quand elle se déplace. Vous noterez qu’on peut récupérer à n’importe quel instant la position de la souris grâce aux propriétés mouseX et mouseY issus de la classe DisplayObject.

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.text.TextField;

	[SWF(width=320, height=240, backgroundColor="#ffffff")]

	public class SourisEvt extends Sprite
	{
		private var debugText:TextField;

		public function SourisEvt()
		{
			debugText = new TextField();
			debugText.x = 20;
			debugText.y = 20;
			debugText.width = 200;
			debugText.height = 150;
			debugText.text = "En attente d'un clic ou d'un deplacement";
			this.addChild(debugText);

			this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			this.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
			this.stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
		}

		private function onMouseDown(evt:MouseEvent):void
		{
			debugText.text = "Vous cliquez";
		}

		private function onMouseUp(evt:MouseEvent):void
		{
			debugText.text = "Vous avez fini de cliquer";
		}

		private function onMouseMove(evt:MouseEvent):void
		{
			debugText.text = "X: " + this.mouseX + "nY: " + this.mouseY;
		}
	}
}

Rien de complexe avec ce code au final, la différence par rapport à l’article précédent est que maintenant nous utilisons des événements souris et donc des objets MouseEvent à la place d’objets Event. La classe MouseEvent contient des propriétés intéressantes liées à la souris et au clavier mais je vous invite à regarder ça par vous même, vous avez maintenant les bases nécessaires pour vous amuser sans moi 😀 .

Le prochain tutoriel sera un TP où vous réaliserez un petit jeu de tire 😉 rien de bien compliqué, mais ça sera l’occasion de mettre en pratique tout ce que l’on a vue depuis le début de cette série de tutoriels.