Pulsanti in ActionScript 3
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”.
Un nuovo documento ActionScript 3
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.
La finestra di Output
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!
Commenti
Pasquale
il 3 dicembre 2010 alle 19:07 ha scritto:
Ciao, complimenti per la spiegazione semplice, chiara e pulita. Io avrei bisogno che al click del pulsante, mi esca la scritta testuale ma vorrei farla visualizzare sotto forma di maschera (in poche parole animata). Premetto che di flash ne so molto a livello grafico e poco a livello action script se non che’ le basi. Spero mi riuscirai ad essere d’aiuto..Ciao!
Salvatore Laisa
il 4 dicembre 2010 alle 22:05 ha scritto:
ciao Pasquale,
viste le tue conoscenze direi che la cosa migliore per te è fare l’animazione in modo grafico all’interno di un clip filmato, all’interno di questo clip filmato metti uno “stop();” al primo fotogramma in modo che sia ferma, mettere il clip sullo stage e dalle azioni della timeline principale dirgli “miaClip.visible = false;” per renderla invisibile.
Successivamente copi il codice di questo post e all’interno della funzione chiamata dal click sul pulsante metti due semplici righe di codice:
miaClip.visible = true;
miaClip.play();
cosi la clip diviene visibile e l’animazione al suo interno parte!
Pasquale
il 2 gennaio 2011 alle 16:08 ha scritto:
Ciao, me ne approfitto per chiederti anche un’altra cosa. Io sto creando una intro in flash as3 e riscontro questa problematica: io ho creato un clip e all’interno di questo clip c’e’ un pulsante. Vorrei che quando passo sopra al pulsante di questo clip, mi parte il fotogramma interno al clip, passo fuori il pulsante, parta un altro fotogramma sempre interno al clip. Trovo problemi a chiamare il pulsante in quando non essendo sullo stage presumo abbia bisogno di un pezzo di codice davanti al nome. Ti posto il codice da me utilizzato:
//aggiungi l’ascoltatore al passaggio del mouse sul bottone
nomepulsante.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
//aggiungi l’ascoltatore al passaggio fuori dal bottone
nomepulsante.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
//inizializzi le due funzioni che saranno chiamate dall’ascoltatore del tuo bottone
function mouseOverHandler(evento:MouseEvent):void{
//fai partire il fotogramma 21 del clip
nomeclip.gotoAndPlay(21);
}
function mouseOutHandler(evento2:MouseEvent):void{
//stoppi clip
nomeclip.gotoAndStop(41);
}
il problema e’ che dice: accesso alla proprieta’ non definita nomeclip.
Potresti aiutarmi? Te ne sarei infinitamente grato,grazie e buon anno!
Salvatore Laisa
il 2 gennaio 2011 alle 16:42 ha scritto:
penso di aver capito, allora metti la clip con dentro il pulsante sullo stage e dalla timeline principale (quindi non entrare nei simboli) metti le azioni
miaClip.mioBottone.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
function mouseOutHandler(evento2:MouseEvent):void{
nomeclip.gotoAndStop(41);
}
quando vari simboli sono annidati uno dentro l’altro ci si accede scrivendo ogg1.ogg2.ogg3 ed è un’operazione che è sempre meglio fare dalla timeline principale.
Il messaggio di errore che mi hai detto al 90% dei casi è generato dal non avere messo il nome di istanza al simboli, cosa che capita spesso a tutti, prova a dare un’occhiata!
antonietta
il 22 aprile 2011 alle 11:40 ha scritto:
Grazie Salvatore…
mi hai salvata veramente!
è da molto tempo che non utilizzavo flash e ho dovuto preparare un progetto per il video che già era stato complicato, malgrado lo utilizzassi regolarmente prima. Ora che mi trovo a dover presentare la proposta per un sito web con semplici pulsantini che danno solo la possibilità di andare avanti o indietro, mi trovo in seria difficoltà…
tra l’altro con la guida online di flash era impossibile arrivare a una soluzione, invece, grazie alle cose che hai scritto tu, chiare e semplici, in poco tempo sono riuscita a fare la prima mossa!!!
wow!
sarai nella top five delle mie enciclopedie!
MANY THAKS!!!
anto
antonietta
il 22 aprile 2011 alle 16:34 ha scritto:
Ciao Salvatore, non so se leggi ancora domande e commenti, ma ho trovato un problema successivo a quello dei comandi da dare ai pulsanti.
Io ho un menù di argomenti, scelgo la prima parola e vado a una scheda, poi ho messo un back e posso tornare indietro, ma se il menù resta sempre presente, acnhe quando cambio argomento, per facilitare la navigazione e non mettere troppi back, avevo pensato di utilizzae lo stesso pulsante per la STESSA parola di menù ogni volta che questa compare, e invece mi dà errore, dice questa cosa: DEFINIZIONE DI FUNZIONE DUPLICATA, cosa significa?
puoi aiutarmi??
grazie, anto
Salvatore Laisa
il 22 aprile 2011 alle 17:19 ha scritto:
ciao,
l’errore che ti esce vuol dire che hai creato più volte una funzione con lo stesso nome, deduco che hai copiato/incollato sia il codice del listener che della funzione e l’errore sia uscito da li.
in genere si può fare che una funzione sia richiamata da più listener, il problema è rendere la funzione “dinamica” in modo che capisca che pulsante è stato cliccato e quindi fare diverse cose…
purtroppo senza vedere file e codice non posso dirti molto di più
antonietta
il 26 aprile 2011 alle 09:57 ha scritto:
Grazie Salvatore,
in effetti credo di aver spiegato la cosa piuttosto male, grazie comunque per aver provato a capire la cosa…
adesso riprendo il progetto e provo a spiegarmi un po meglio.
Il mio problema è che con il manuale di flash non combino nulla, sono una principiante anche se ho sempre utilizzato il programma per creare cose piuttosto semplici e le cose che scrivono sono troppo complicate, non mi aiutano in nessun modo…
Vabbè. a presto.
Anto
Scrivi un commento