In qualsiasi progetto realizzato con Flash l'utente deve poter interagire con uno o più elementi del filmato utilizzando mouse o tastiera: in questo articolo vedremo come sia possibile intercettare gli eventi di queste due periferiche, sia che avvengano in un'area generale del filmato oppure su uno specifico pulsante o movieclip.
Listener ed eventi
A partire da Flash Mx sono stati introdotti i listener per mouse e tastiera. Comandi che vengono dedicati a "controllare" l'eventuale pressione di tasti o il movimento del mouse ed eventualmente eseguire delle azioni, che vengono impostate tramite funzioni.
Nella versione 5 era necessario sfruttare le azioni di pulsanti o movieclip per intercettare questi eventi, ora, invece, è possibile creare azioni dedicate alle periferiche: questo risulta molto più comodo e aiuta anche ad avere una maggior chiarezza nel codice.
Eventi del mouse
Iniziamo dal mouse; le operazioni che il Flash player è in grado di intercettare sono le seguenti:
- Movimento
- Pressione del tasto sinistro
- Rilascio del tasto sinistro
- Utilizzo della rotellina di scorrimento
Che sono associate rispettivamente agli eventi
- onMouseMove
- onMouseDown
- onMouseUp
- onMouseWheel
Supponiamo di volere che un oggetto abbia la posizione sempre corrispondente a quella del cursore del mouse; basterà usare questo codice:
Listato 1. Imposta la posizione di un oggetto seguendo quella del mouse
var listener_mouse:Object = new Object();
listener_mouse.onMouseMove = function() {
mc._x = _xmouse
mc._y = _ymouse
};
Mouse.addListener(listener_mouse);
Ogni volta che l'utente muoverà il mouse, il clip filmato con nome istanza mc verrà posizionato sotto al cursore.
Certo, un risultato del genere si può ottenere anche con il comando startDrag(), ma in questo caso abbiamo una maggiore versatilità in quanto possiamo impostare, per esempio, una distanza "fissa" dal cursore, ad esempio di 20 pixel, semplicemente così:
Listato 2. Imposta la posizione di un oggetto a 20 pixel da quella del mouse
var listener_mouse:Object = new Object();
listener_mouse.onMouseMove = function() {
mc._x = _xmouse - 20
mc._y = _ymouse - 20
};
Mouse.addListener(listener_mouse);
Aggiungiamo ora due nuove azioni, la prima, alla pressione del tasto sinistro, farà assumere al clip mc il valore di trasparenza del 50% e la seconda, al rilascio del tasto sinistro, farà tornare il clip pienamente visibile; non sono necessari nuovi listener, basterà associare i nuovi eventi all'oggetto già utilizzato, che nell'esempio è listener_mouse.
Listato 3. Oltre alla posizione dell'oggetto imposta delle azioni
var listener_mouse:Object = new Object();
listener_mouse.onMouseMove = function() {
mc._x = _xmouse - 20
mc._y = _ymouse - 20
};
listener_mouse.onMouseDown = function(){
mc._alpha = 50
}
listener_mouse.onMouseUp = function(){
mc._alpha = 100
}
Mouse.addListener(listener_mouse);
Notiamo che l'evento onMouseDown ha effetto quando l'utente preme il tasto del mouse e finché lo tiene premuto; quando lo rilascia viene invece invocato l'evento onMouseUp.
Come anticipato gli eventi sono stati associati a un solo listener che è stato a sua volta "collegato" al Mouse tramite il comando addListener.
Analizziamo l'ultimo evento rimasto, ovvero onMouseWheel; solitamente il flash player quando intercetta l'utilizzo della rotellina del mouse si occupa di far scorrere l'eventuale campo di testo, ma è possibile sfruttare questo evento anche per altri scopi; nel nostro esempio lo useremo per ruotare il movieclip, con il seguente codice:
Listato 4. Ruota il movieclip con la rotellina
listener_mouse.onMouseWheel = function(delta) {
mc._rotation += delta;
}
Notiamo l'utilizzo del parametro delta, che indica il senso in cui la rotellina è stata utilizzata e di conseguenza nel nostro esempio stabilisce il senso di rotazione (orario o antiorario).
Eventi della tastiera
Chiaramente la gamma di eventi della tastiera è ridotta solamente a due, ovvero:
- Pressione di un tasto
- Rilascio di un tasto
I cui corrispondenti eventi in Actionscript sono:
- onKeyDown
- onKeyUp
Il metodo di associazione è molto simile a quanto già visto per il mouse. Per esempio con il codice:
Listato 5. Imposta delle azioni in base agli eventi
var listener_key:Object = new Object();
listener_key.onKeyDown = function(){
mc._alpha = 50
}
listener_key.onKeyUp = function(){
mc._alpha = 100
}
Key.addListener(listener_key);
Il movieclip mc diverrà trasparente al 50% alla pressione del tasto e tornerà normale appena il tasto verrà rilasciato.
Conoscere il tasto premuto
L'aspetto più utile per gli eventi della tastiera è la possibilità di conoscere con precisione quale è il tasto premuto dall'utente, grazie ad alcune costanti.
Listato 6. Sposta l'oggetto quando vengono premute le frecce direzionali
var listener_key:Object = new Object();
listener_key.onKeyDown = function(){
if(Key.isDown(Key.LEFT)){
mc._x -= 5
}else if(Key.isDown(Key.RIGHT)){
mc._x += 5
}
}
Key.addListener(listener_key);
È possibile conoscere il codice del tasto premuto sfruttando i comandi Key.getAscii() e Key.getCode(); tali codici servono quando si devono associare delle azioni a tasti non previsti dalle costanti; Actionscript come costanti utilizzabili nel comando Key.isDown mette a disposizione solo alcuni tasti; per gli altri tasti è necessario il valore Ascii o numerico, altrimenti è possibile risalire alla lettera premuta utilizzando il codice chr(Key.getAscii())
Modificare o rimuovere i listener
Se in determinate situazioni, all'interno del filmato, volessimo rendere inefficaci le azioni associate a mouse e/o tastiera, sarà sufficiente utilizzare il comando oggetto.removeListener(nomeListener), quindi nei nostri esempi: Mouse.removeListener(listener_mouse) oppure Key.removeListener(listener_key).
Per modificare le azioni associate a un evento, invece, è sufficiente eseguire una riassegnazione.
Per esempio con il codice che segue, inizialmente il clip si posiziona sotto al cursore del mouse, ma se viene premuto un tasto il comportamento cambia e il clip si posiziona in maniera casuale.
Listato 7. Esempio di una riassegnazione
var listener_mouse:Object = new Object();
listener_mouse.onMouseMove = function() {
mc._x = _xmouse
mc._y = _ymouse
};
Mouse.addListener(listener_mouse);
var listener_key:Object = new Object();
listener_key.onKeyDown = function(){
// Modifico il comportamento dell'evento onMouseMove
listener_mouse.onMouseMove = function(){
mc._x = random(Stage.width)
mc._y = random(Stage.height)
}
}
Key.addListener(listener_key);
Conclusioni
Abbiamo visto come, utilizzando i listener e gli eventi, sia semplicissimo impostare delle azioni da far eseguire a degli elementi sullo stage. È anche possibile associare gli eventi a bottoni o movieclip, con una sintassi del tipo:
nomeclip.onMouseDown = funtion(){
// azioni
}
Questo però a volte causa confusione poiché si pensa che l'azione venga eseguita quando l'utente clicca su quel clip; non è così: gli eventi di mouse e tastiera sono validi per tutta l'area del filmato, indipendentemente dal clip a cui sono eventualmente associati.
Benché associare il metodo a un clip o a un pulsante possa essere più rapido in quanto richiede meno codice, è consigliato usare i listener in quanto hanno la specifica funzione di controllare gli eventi (nel nostro caso di input) e aiutano anche a evitare problemi di "mal comprensione" del codice come quello appena citato.
