AS3: Azioni su un Pulsante

Tra le ricerche che portano visitatori a questo blog ho notato alcune richieste frequenti cui ho deciso di rispondere.

La prima (per numero di query) riguarda la domanda come assegnare azioni ai Pulsanti in ActionScript 3?

Non è difficile e spero di riuscire a spiegarlo in modo comprensibile a tutti.

Immagino che la prima difficoltà che ha portato i miei visitatori a porre questa domanda a Google sia il fatto che con ActionScript 3 non è più possibile inserire Azioni direttamente sulle Istanze dei Pulsanti sullo Stage.

Nelle versioni precedenti era sufficiente cliccare su un’Istanza di un Pulsante, premere F9 per far comparire il Pannello Azioni di Flash e scrivere tutto il codice al suo interno.

Se l’Istanza del Pulsante aveva un nome era anche possibile assegnare Azioni ad un pulsante richiamandolo per nome da un’altra porzione di codice, magari assegnata al fotogramma o a un’altro oggetto, in questo modo:

nomePulsante.onRelease = function() {
    ///.... fai qualcosa.
}

Dimentichiamo questa sintassi, che non è più utilizzabile e vediamo come fare in ActionScript 3…

Facciamo funzionare un Pulsante con AS3

Gli Eventi legati all’uso del Mouse sono gestiti grazie alla Classe MouseEvent. Questa Classe contiene tutto quello che ci serve per gestire un’input del Mouse in maniera più che efficace. Cominciamo con il più semplice dei casi:

  1. Assicuratevi di aver creato un’Istanza di un Pulsante. Va bene un Pulsante dalla Libreria dei Componenti, va bene un vostro disegno convertito in Pulsante, va bene un qualsiasi MovieClip e, naturalmente, va bene un Oggetto grafico direttamente dal Codice.
  2. Assicuratevi che questa istanza di Pulsante abbia un nome. Per gli elementi posizionati sullo Stage il nome va inserito all’interno del Pannello Proprietà.
  3. Anche se non possiamo assegnare Azioni direttamente al Pulsante, possiamo ancora scrivere Azioni nei Fotogrammi, quindi selezionate il fotogramma e aprite il Pannello Azioni (F9), scrivete questo codice:
mioPulsante.addEventListener(MouseEvent.CLICK, sparisci);
function sparisci(m:MouseEvent) {
    m.currentTarget.visible = false;
}

Il risultato è che quando il Pulsante chiamato mioPulsante sarà premuto, scomparirà. Non è molto, ma è sufficiente per capire come funziona la logica di questa cosa.

Il comando addEventListener è fondamentale: in ActionScript 3 quasi ogni cosa viene gestita tramite un Evento e questo comando serve ad assegnare un Listener e una Funzione ad una qualsiasi Istanza. Questo comando richiede almeno due parametri: il primo parametro è il tipo di Evento che vogliamo gestire, il secondo parametro è il nome della funzione da richiamare quando si verifica l’Evento.

Con questo sistema possiamo scrivere una funzione sola ed assegnarla a tanti pulsanti diversi, oppure possiamo aggiungere tanti listener diversi per uno stesso pulsante, ad esempio:

mioPulsante.addEventListener(MouseEvent.CLICK, sparisci);
function sparisci(m:MouseEvent) {
    m.currentTarget.visible = false;
}
mioPulsante.addEventListener(MouseEvent.CLICK, tracciami);
function tracciami(m:MouseEvent) {
    trace(m.currentTarget.name);
}

il codice qui sopra assegna due Listener allo stesso pulsante, per lo stesso tipo di Evento (Click), quando faremo Click sul Pulsante verranno eseguite entrambe le funzioni. Nelle versioni precedenti di ActionScript era più complicato ottenere un risultato simile, assegnando un comportamento al Release di un pulsante si perdevano tutti gli altri comportamenti precedentemente assegnati al Release sullo stesso pulsante.

Tipi di MouseEvent

Gli Eventi legati al Mouse che possiamo gestire dipendono dall’Ambiente di Runtime.

Se il nostro filmato deve essere distribuito dentro un’Applicazione AIR abbiamo a disposizione Eventi legati al Tasto Destro, al Tasto Centrale e al Menu Contestuale; Se il filmato gira su un Sistema diverso da Windows non possiamo intercettare il Tasto CTRL. La parte interessante della nuova struttura del linguaggio è che in futuro potranno essere aggiunti altri tipi di Evento, altri tipi di gestione dell’Interfaccia, ma la sintassi di base rimarrà sempre la stessa.

Utilizzando MouseEvent dentro Flash per un Filmato che verrà distribuito in SWF (da vedere con Flash Player dentro ad un Browser Web) abbiamo a disposizione questi tipi di Evento:

  • CLICK – Un Click singolo si ha quando l’utente preme il tasto sinistro del mouse e, senza spostarlo, lo rilascia.
  • DOUBLE_CLICK – Un Doppio Click, due Click singoli in rapida successione. *
  • MOUSE_DOWN – La pressione del tasto sinistro del Mouse.
  • MOUSE_MOVE – Intercetta il semplice movimento del Mouse.
  • MOUSE_OUT | ROLL_OUT – Quando il Mouse esce dall’area interessata dal Listener.
  • MOUSE_OVER | ROLL_OVER – Quando il Mouse entra nell’area interessata dal Listener.
  • MOUSE_UP – Quando viene rilasciato il tasto sinistro del Mouse.
  • MOUSE_WHEEL – Quando si fa scorrere la rotellina del Mouse.

* per utilizzare l’Evento DOUBLE_CLICK bisogna prima impostare la Proprietà doubleClickEnabled a true, in questo modo:

mioPulsante.doubleClickEnabled = true;

Grazie a Cinzia per avermi fatto notare questa dimenticanza.

Utilizzare l’Evento

Negli esempi di questo articolo abbiamo visto che la Funzione richiamata da un Evento del Mouse riceve come unico argomento l’Evento stesso, vediamo come utilizzarlo.

L’unica proprietà dell’Evento che abbiamo utilizzato finora si chiama currentTarget e rappresenta l’Istanza cui era stato assegnato il Listener. Utilizzando currentTarget possiamo sempre sapere chi ha scatenato l’Evento, quindi se la stessa Funzione è stata assegnata a diversi pulsanti possiamo utilizzare questa Proprietà per orientarci.

Altre Proprietà utili della Classe Mouse Event sono:

  • type – Il tipo di Evento.
  • altKey – true o false – Ci dice se quando si è verificato l’Evento da Mouse il tasto Alt della tastiera era premuto oppure no (utile per aggiungere comportamentei di tipo Alt+Click)
  • ctrlKey – true o false – Simile al precedente, si riferisce al tasto CTRL e funziona solo su Windows.
  • shiftKey – true o false – Funziona come altKey e ctrlKey, ma si riferisce al tasto Maiuscolo (Shift).
  • localX | stageX – la coordinata X del punto in cui si è verificato l’Evento, riferita all’Oggetto o a tutto lo Stage.
  • localY | stageY – la coordinata Y del punto in cui si è verificato l’Evento, riferita all’Oggetto o a tutto lo Stage.

Questo Articolo non esaurisce certo l’argomento degli Eventi del Mouse, ma credo che sia sufficiente a sciogliere molti dei più comuni dubbi in proposito.

Potrebbero interessarti anche...

14 Risposte

  1. Sabrina ha detto:

    Salve,
    come posso inserire un commento (ALT) visibile al passaggio del mouse su un istanza di un pulsante?

  2. Lamera Riccardo ha detto:

    complimenti per la spiegazione, ci mettero un anno a capire come funziona ma grazie per averla esposta

  3. kekko ha detto:

    EHILà…
    sapevo già qste cose ma devo dire che le hai spiegate davvero bene… complimenti!! :D

  4. Cinzia ha detto:

    Mitica!
    Grazie infinite. Sicuramente avrò ancora bisogno di aiuto e, adesso che ti ho trovata, sono più tranquilla. ;-)

  5. Cinzia ha detto:

    Mitica!
    Grazie infinite. Sicuramente avrò ancora bisogno di aiuto e, adesso che ti ho trovata, sono più tranquilla. ;-)

  6. Daniele Alessandra ha detto:

    Ciao Cinzia,

    il doppio click non funziona automaticamente sugli elementi, bisogna prima modificare la Proprietà doubleClickEnabled.

    Prova ad aggiungere questa riga al tuo codice:

    test_mc.doubleClickEnabled = true;

    Se non si imposta questa Proprietà a true gli Eventi di tipo MouseEvent.DOUBLE_CLICK non funzionano.

    ^^
    Grazie per i complimenti e grazie per essere stata la prima persona ad inserire un commento su questo Blog.

  7. Daniele Alessandra ha detto:

    Ciao Cinzia,

    il doppio click non funziona automaticamente sugli elementi, bisogna prima modificare la Proprietà doubleClickEnabled.

    Prova ad aggiungere questa riga al tuo codice:

    test_mc.doubleClickEnabled = true;

    Se non si imposta questa Proprietà a true gli Eventi di tipo MouseEvent.DOUBLE_CLICK non funzionano.

    ^^
    Grazie per i complimenti e grazie per essere stata la prima persona ad inserire un commento su questo Blog.

  8. Cinzia ha detto:

    Ciao, scusa il disturbo, ho un problema, ho la necessità di creare un quadrato draggabile che sparisca al doppio click del mouse. Ho letto la tua spiegazione (mi congratulo con te per la chiarezza e la semplicità, sai essere davvero incisiva, spesso capisco male/poco da altre spiegazioni, sono alle prime armi) mi chiedevo se allegandoti il codice, potessi dargli un’occhiata… Ah, dimenticavo con tutte gli altri event funziona! Grazie per il tuo tempo. Ecco il codice
    test_mc.addEventListener(MouseEvent.DOUBLE_CLICK, sparisci);
    function sparisci(m:MouseEvent) {
    m.currentTarget.visible = false;
    }

    test_mc.buttonMode=true;
    test_mc.addEventListener(MouseEvent.MOUSE_DOWN,setPress);
    test_mc.addEventListener(MouseEvent.MOUSE_UP,setRelease);

    function setPress(m:MouseEvent):void
    {
    m.target.startDrag(false,new Rectangle(0,0,stage.stageWidth,stage.stageHeight));
    }

    function setRelease(m:MouseEvent):void
    {
    m.currentTarget.stopDrag();

    }

  9. Cinzia ha detto:

    Ciao, scusa il disturbo, ho un problema, ho la necessità di creare un quadrato draggabile che sparisca al doppio click del mouse. Ho letto la tua spiegazione (mi congratulo con te per la chiarezza e la semplicità, sai essere davvero incisiva, spesso capisco male/poco da altre spiegazioni, sono alle prime armi) mi chiedevo se allegandoti il codice, potessi dargli un’occhiata… Ah, dimenticavo con tutte gli altri event funziona! Grazie per il tuo tempo. Ecco il codice
    test_mc.addEventListener(MouseEvent.DOUBLE_CLICK, sparisci);
    function sparisci(m:MouseEvent) {
    m.currentTarget.visible = false;
    }

    test_mc.buttonMode=true;
    test_mc.addEventListener(MouseEvent.MOUSE_DOWN,setPress);
    test_mc.addEventListener(MouseEvent.MOUSE_UP,setRelease);

    function setPress(m:MouseEvent):void
    {
    m.target.startDrag(false,new Rectangle(0,0,stage.stageWidth,stage.stageHeight));
    }

    function setRelease(m:MouseEvent):void
    {
    m.currentTarget.stopDrag();

    }

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.