Pulsanti in ActionScript 3

Scritto da Salvatore Laisa il 8 gennaio 2010

ActionScript 3 è un linguaggio molto più potente e versatile del suo predecessore, anche se si è perso qualcosa in semplicità di utilizzo. In parole povere: per realizzare operazioni complesse troverete questo linguaggio molto comodo, mentre per realizzare azioni più banali potreste incontrare inaspettate difficoltà. Niente panico! In pochi e semplici passaggi vedremo come dare interattività a qualunque pulsante realizzato in Flash con questo linguaggio, e faremo chiarezza su alcuni aspetti base di As3.

Software richiesto: Flash CS3 e superiori.

1. Iniziamo

Innanzitutto aprite un nuovo documento in Flash (ovviamente deve essere un nuovo documento di tipo ActionScript 3) e create un qualunque oggetto grafico, che trasformerete in un pulsante. Ricordatevi che la cosa più importante è dare un nome di istanza a questo pulsante, per poterci mettere mano da codice. Con grande fantasia, per questo esempio chiamerò il mio “pulsantino”.

Nota: potete convertire il vostro oggetto grafico sia in Clip Filmato (MovieClip) sia in Pulsante (Button), ricordatevi in entrambi i casi di dare un nome di istanza all’oggetto!

2. In ascolto…

Deselezionate il pulsante e aprite il pannello delle Azioni (nel menu Finestra -> Azioni). La prima riga di codice che scriveremo ci servirà per creare un’entità che resterà in attesa di un evento e richiamerà un’azione non appena questo evento accadrà.

pulsantino.addEventListener(MouseEvent.CLICK , Cliccato);

Le prime due parole significano che aggiungiamo all’oggetto “pulsantino” un oggetto di tipo Event Listener. Tra parentesi indichiamo il tipo di evento per il quale deve restare in ascolto – nel nostro caso si tratta del click del mouse – e il nome della funzione da richiamare quando questo evento avviene.

Nota: ricordatevi che ActionScript 3 è case-sensitive, ovvero legge le differenze tra le lettere maiuscole e minuscole. Fate quindi attenzione a come scrivete le parole-chiave, e ai nomi che date a funzioni e variabili. “Cliccato” è diverso da “cliccato”!

Ora abbiamo quindi una sentinella che resta in ascolto del click del mouse sul nostro “pulsantino”: quando sentirà questo evento richiamerà la funzione “Cliccato”. Ma cosa farà questa funzione? Al momento niente, ma solo perché non l’abbiamo ancora definita! Quindi procediamo…

3. Causa ed effetto

Facciamo in modo che ci appaia un messaggio nella finestra di output con il comando “trace”:

function Cliccato(event:MouseEvent){
	trace("Mi hai cliccato!");
}

La parola-chiave “function” indica che stiamo scrivendo una funzione, e la parola successiva è il nome che vogliamo attribuire alla funzione in questione (è necessario chiamare questa funzione esattamente con lo stesso nome che abbiamo utilizzato in precedenza). Subito dopo, tra parentesi, indichiamo il tipo di evento che richiama la funzione: nel nostro caso è esattamente lo stesso dell’EventListener. Tra parentesi graffe indichiamo le righe di codice da eseguire quando questa funzione viene chiamata – per il nostro scopo ci basta la funzione “trace”, che stamperà una stringa di testo da noi indicata nel pannello di output.

Dopo aver scritto queste 4 righe di codice, salvate il file e avviatelo premendo Ctrl + Invio (per utenti Mac: Cmd + Invio). Ora, ogni volta che cliccherete sul vostro pulsante otterrete il messaggio nel pannello output di Flash.

4. Varie possibilità

A questo punto abbiamo tra le mani il “motore” per eseguire azioni al click del mouse su un pulsante. Per esempio, se vogliamo fare in modo che cliccando il nostro pulsante si sposti la Timeline verso un determinato frame, ci basta sostituire la riga del “trace” con la seguente:

// Il numero tra parentesi può essere cambiato a vostro piacimento o necessità
gotoAndStop(3);

oppure modificare il valore del testo all’interno di un campo di testo dinamico:

// Prima create un campo di testo dinamico e dategli un nome!
// in questo caso l'ho chiamato "TestoDinamico"
TestoDinamico.text = "Hai cliccato il pulsante!";

Esempio:

5. In chiusura

Gli eventi e le funzioni svolgono un ruolo fondamentale nella programmazione in ActionScript 3, in quanto è principalmente grazie a essi che possiamo realizzare le interazioni nei nostri siti o applicazioni. Con questo tutorial abbiamo fatto chiarezza sull’utilizzo pratico di questo linguaggio per dare vita ai nostri pulsanti, tuttavia… questa è solo la punta dell’iceberg!

• 
• 
• 
• 
• 
• 
• 
•