Movimento 5 Stelle
 

25. Gestire il Mouse

Posted Mer, 11/26/2008 - 13:57 by Francesco Casula

In questo capitolo vedremo rapidamente come poter leggere le coordinate del Mouse e come poter catturare i clic effettuati dall'utente rispetto allo stage, o ad un altro oggetto presente nel filmato principale.

Cominciamo con un esempio molto semplice che aggiungerà un listener all'oggetto stage, sfruttano le proprietà della classe MouseEvent per risalire ai dati di nostro interesse.

Prima di introdurre il codice sorgente vero e proprio, diamo un'occhiata alle proprietà di maggior rilievo della classe MouseEvent :

  • ctrlKey - Ci consente di verificare se durante l'evento è stato premuto il tasto CTRL.
  • shiftKey - Per verificare se durante l'evento è stato premuto il tasto SHIFT (MAIUSC).
  • buttonDown - Ci consente di verificare se il tasto del mouse è ancora premuto.
  • localX - Coordinata X dove si è verificato l'evento rispetto all'oggetto che lo contiene.
  • localY - Coordinata Y dove si è verificato l'evento rispetto all'oggetto che lo contiene.
  • stageX - Coordinata X dove si è verificato l'evento rispetto allo Stage.
  • stageY - Coordinata Y dove si è verificato l'evento rispetto allo Stage.

Procediamo ora con il sorgente dell'esempio pocanzi menzionato, dove sfrutteremo come sempre la classe documento Hello World, che conterrà a sua volta due campi di testo (istanze della classe TextField) che mostreranno le coordinate attuali del mouse X e Y rispetto allo stage del filmato.

HelloWorld.as

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

	public class HelloWorld extends MovieClip
	{
		private var vedi_x:TextField;
		private var vedi_y:TextField;

		public function HelloWorld():void
		{
			this.vedi_x = new TextField();
			this.vedi_x.text = "X : 0";

			this.vedi_y = new TextField();
			this.vedi_y.y = 18; // Abbassiamo il campo di testo per non sovrapporlo al precedente
			this.vedi_y.text = "Y : 0";

			this.addChild(this.vedi_x);
			this.addChild(this.vedi_y);

			stage.addEventListener(MouseEvent.MOUSE_MOVE, aggiornaXY);
		}

		private function aggiornaXY(evt:MouseEvent):void
		{
			this.vedi_x.text = "X : " + evt.stageX;
			this.vedi_y.text = "Y : " + evt.stageY;
		}
	}
}

Compilando il codice dell'esempio soprastante, possiamo notare con quale semplicità ActionScript 3 ci consente di intercettare ed elaborare questi dati.
Se invece di aggiungere il listener allo stage lo avessimo aggiunto alla classe documento tramite la parola chiave this (this.addEventListener(...)), avremmo ottenuto le coordinate solo nel caso in cui il puntatore del mouse avesse incrociato il contenitore dell'istanza principale.

In questo caso, non avendo impostato alcun parametro e avendo inserito solo due istanze di TextField, l'istanza principale occuperà una discreta area di spazio rettangolare a partire dall'angolo in alto a sinistra.

Prima di chiudere il capitolo vedremo un ultimo esempio, dove creeremo un oggetto derivato da Sprite, adibito a contenere un rettangolo che ci notificherà le coordinate e i clic del mouse che avverranno su di esso.

Vediamo il codice sorgente della classe Rettangolo :

disegno/Rettangolo.as

package disegno
{
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.MouseEvent;

	public class Rettangolo extends Sprite
	{
		private var figura:Shape;

		public function Rettangolo(X:uint, Y:uint, W:uint, H:uint):void
		{
			this.figura = new Shape();

			this.figura.graphics.beginFill(0x00FF00);
			this.figura.graphics.lineStyle(1, 0x0000FF);

			// X = coordinata x ; Y = coordinata y ; W = larghezza rettangolo ; H = altezza rettangolo
			this.figura.graphics.drawRect(X, Y, W, H);
			this.figura.graphics.endFill();

			this.addChild(this.figura);

			// Usiamo lo stesso "ascoltatore" per entrambi gli eventi di nostro interesse
			this.addEventListener(MouseEvent.CLICK, aggiornaMouse);
			this.addEventListener(MouseEvent.MOUSE_MOVE, aggiornaMouse);
		}

		private function aggiornaMouse(evt:MouseEvent):void
		{
			switch (evt.type)
			{
				case MouseEvent.CLICK :
					trace("Clic!");
					break;
				case MouseEvent.MOUSE_MOVE :
					trace("X : " + evt.localX + " - Y : " + evt.localY);
					break;
			}
		}
	}
}

Per notificare l'avvenuto evento stavolta ho usato la funzione nativa trace(), perché altrimenti avrei dovuto inserire due istanze di TextField all'interno di "Rettangolo", modificandone probabilmente le dimensioni del contenitore, che in questo caso ho preferito che fosse esattamente delle dimensioni del rettangolo disegnato.

Avrei anche potuto far risollevare gli eventi da "Rettangolo", per farli catturare e gestire poi dalla classe documento, che avrebbe visualizzato i valori attraverso i due campi TextField contenuti nell'istanza principale piuttosto che assieme al rettangolo, evitando così di modificare le dimensioni del container.

HelloWorld.as

package
{
	import disegno.Rettangolo;
	import flash.display.MovieClip;

	public class HelloWorld extends MovieClip
	{
		public function HelloWorld():void
		{
			var r1:Rettangolo = new Rettangolo(100, 50, 50, 50);
			this.addChild(r1);
		}
	}
}