Bottoni, listener ed eventi con ActionScript 3

Per dare interattività al filmato abbiamo bisogno di bottoni, l'idea è quella di catturare la pressione di un bottone e far partire una certa azione: pensiamo ad esempio ai classici pulsanti play e stop. Tradotto in ActionScript:

ciò che vogliamo fare è collegare una o più funzioni all'evento scatenato dalla pressione del mouse su un certo MovieClip.

Vediamo quindi come definire un semplice bottone all'interno del nostro filmato, come "registrare" il click del mouse e come assegnare le azioni che desideriamo.

Per la definizione del bottone non dovrebbero esserci problemi in quanto abbiamo già qualche esperienza con la creazione di un MovieClip. Prendiamo quindi il quadratino che abbiamo già creato nelle lezioni scorse e assegnamogli il nome di istanza "quadrato". Vediamo che fare per catturare il click del mouse.

I listener

Assegnare delle azioni ad un evento è molto semplice.

Dobbiamo avere come complice un listener: una "sentinella" che rimanga in ascolto (listening) di eventuali eventi che dovessero scatenarsi.

Dobbiamo anche indicare alla nostra sentinella l'evento a cui fare attenzione, infine stabiliamo le azioni che dovranno essere eseguite. Esaminiamo un frammento di codice che cattura l'evento CLICK del mouse:

this.quadrato.addEventListener(MouseEvent.CLICK, function()
{
  // ... lista delle azioni da compiere
});

Questa definizione aggiunge un listener all'istanza quadrato e stabilisce una serie di azioni da compiere quando clicchiamo sul quadrato stesso. In effetti è la definizione di un bottone! Come sempre la scriviamo nel primo fotogramma della timeline.

Naturalmente possiamo utilizzare anche altri tipi di eventi. Ecco un breve elenco di quelli collegati al mouse:

gotoAndPlay

Per completare l'esempio, supponiamo di aver creato un filmato e che il nostro bottone serva a farcene visualizzare una parte. Flash ci permette di scegliere una certa posizione all'interno della timeline, dalla quale far partire l'animazione, grazie al comando gotoAndPlay().

gotoAndPlay(posizione);

Possiamo specificare la posizione inserendo il numero del fotogramma di partenza oppure un'etichetta (label) con la quale abbiamo contrassegnato un certo fotogramma.

Attivare il bottone

Montando insieme la cattura dell'evento e l'azione che vogliamo associare al CLICK otteniamo:

this.quadrato.addEventListener(MouseEvent.CLICK, function()
{
  gotoAndPlay (20); // inseriamo il frame iniziale nell'istruzione gotoAndPlay
});

Ora se clicchiamo sul quadrato lanceremo l'animazione a partire dal ventesimo fotogramma.

Possiamo modificare questo codice sostituendo il tipo di evento da utilizzare e scrivendo all'interno delle parentesi graffe le azioni da eseguire allo scatenarsi dell'evento.

Infine è utile notare che, all'interno del codice, ogni istruzione è separata dalle altre tramite un punto e virgola (;) che ne delimita la fine.