• Web Design » Flash » Tutorial Action Script

Tutti gli oggetti in Flash hanno delle proprietà (note anche come variabili) i cui valori nel corso dell’animazione possono cambiare.
FlashMX mette a dispozione una nuova funzionalità che permette di ‘monitorare’ una variabile per tutto il corso dell’animazione e richiamare una funzione ogniqualvolta il suo valore viene modificato: stiamo parlando del metodo Watch.
Il controllo del valore di una variabile può essere anche fatto attraverso l’evento enterFrame di un movieClip ma questo può essere pesante sul lavoro del computer.
Watch permette di attivare una funzione solo quando il valore della variabile controllata viene modificato.
La sintassi è la seguente:

nomeOggetto.watch(“nomeVariabile/Proprietà”, nomeFunzione)

La funzione deve accettare tre parametri: id, oldVal e newVal che vengono inviati automaticamente alla funzione quando viene richiamata dal metodo watch.
Id è il nome della variabile controllata, oldVal è il valore precedente la modifica e newVal è il nuovo valore.
Due cose importanti da ricordare.
La funzione che viene richiamata da watch deve essere definita o prima del metodo stesso, oppure all’interno come parametro.
Se non si desidera più controllare una variabile si utilizzi il metodo unwatch con la seguente sintassi: nomeOggetto.unwatch(nomeVariabile/Proprietà).
Non è possibile inoltre controllare proprietà predefinite quali (_x,_y ecc.).

Ecco un esempio.
In questo progetto, controlleremo il valore della variabile clr, e ogni volta che verrà modificato il suo valore, verrà richiamata dal metodo watch una funzione che creerà un’istanza di clip (che fungerà da sfondo) diversa in base al nuovo valore della variabile controllata
Innanzitutto si creino tre simboli di clip filmato nella libreria con i seguenti identificatori: back1, back2, back3 (che vanno inseriti nella finestra Linkage Properties) e si selezionino le opzioni Export for ActionScript ed Export in first frame.
Useremo gli identificatori all’interno del blocco di codice.
Si crei anche un movieClip vuoto che servirà per allegare le istanze dei clip in precedenza creati.
Ora si crei un semplice pulsante a cui collegheremo un evento release del mouse.
Il rilascio del pulsante provoca la modifica del valore della variabile clr.
Useremo anche un flag (che con molta fantasia chiameremo flag), che sarà fondamentale per la variazione di clr.
Nel primo fotogramma chiave del filamto le prime due righe sono queste:

clr = 0;
flag = 0;

Quindi andiamo a definire cosa deve succedere quando rilasciamo il pulsante.

change_btn.onRelease = function () {
if (flag + 1 > 3) {
flag = 1;
clr = flag;
} else if (!(flag + 1 > 3)) {
++flag;
clr = flag;
}
};

Esaminiamo il codice.
Flash incontra lo script quando il pulsante del mouse viene rilasciato.
Spiegheremo dopo il perché del flag.
All’interno dell’evento abbiamo un ciclo if..else if, dove nella prima espressione di confronto si verifica se è possibile caricare lo sfondo (l’istanza di clip) successivo.
Se è caricato il terzo sfondo e visto che gli sfondi sono tre, non sarà possibile creare una quarta istanza e quindi flag verrà resettato ad 1.
Anziché usare un valore esplicito (3) si può usare meglio una variabile.
Quindi il valore di flag viene assegnato alla variabile oggetto del controllo, clr.
La seconda espressione viene ricavata se la prima risulta falsa, ed esegue un controllo inverso.
Ad ogni istruzione if seguono due righe di codice in cui sono state inserire delle espressioni di assegnazione.
Nella prima espressione (flag + 1 > 3) flag viene resettato ad 1 perché lo sfondo corrente è l’ultimo e quindi più avanti non si può andare.
Nella seconda esperessione (!(flag + 1 > 3)) invece flag viene incrementato di 1 unità.
In entrambe le espressioni compare la riga clr = flag che modifica il valore della variabile da controllare e di conseguenza watch richiama immediatamente la funzione associata.
Perché l’uso di flag? Semplicemente perché watch imposta la variabile controllata clr al valore undefined e quindi non sarebbe possibile ricavare le espressioni condizionali con questo valore.
Allora si è usata una variabile intermedia su cui lavorare e poi usare per modificare clr.

A questo punto definiamo il metodo watch.

this.watch ('clr', function (id, oldVal, newVal) {
trace (oldVal);
trace (newVal);
empty_mc.attachMovie ("back" + newVal, "myBack" , 1);
});

Abbiamo usato this perché la variabile da controllare si trova nella stessa posizione di watch.
Di solito conviene inserire wacth dove risiede la variabile.
Il primo parametro del metodo richiede il nome, come stringa, della variabile da controllate mentre il secondo la definizione della funzione che può essere definita all’interno come parametro oppure al di fuori e indicato solo il nome.
Si è preferito usare il primo metodo.
La funzione riceve da watch tre parametri che vengono memorizzati rispettivamente in id (nome variabile), oldVal (vecchio valore) e newVal (nuovo valore – il valore di flag assegnato a clr).
Le due azioni trace visualizzano i valori vecchio e nuovo e da qui si può capire perché si è usato il flag.
Infine l’ultima riga allega nell’istanza di clip vuoto un’istanza di uno dei tre simboli di clip nella libreria in base al nuovo valore di clr.

Il codice completo:

clr = 0;
flag = 0;
//
change_btn.onRelease = function () {
if (flag + 1 > 3) {
flag = 1;
clr = flag;
} else if (!(flag + 1 > 3)) {
++flag;
clr = flag;
}
};
//
this.watch ('clr', function (id, oldVal, newVal) {
trace (oldVal);
trace (newVal);
empty_mc.attachMovie ("back" + newVal, "myBack" , 1);
});

E possibile controllare anche una variabile associata ad un campo di testo di input per esempio, e richiamare una funzione ogni volta che si cambia il valore nel campo.
Questo è un modo per utilizzare watch, qualora ne trovaste degli altri sarei bel lieto di condividerli.