mar 30 2009
Animare l’header di un sito con Flash: separazione tra linea temporale e codice
La seguente appartiene ad una serie di pagine correlate:
Nell’ultimo appuntamento di questa serie esamineremo un metodo ingegnoso per svincolare del tutto il codice ActionScript dalla linea temporale di riferimento, pur senza rinunciare ad un riferimento visivo che indichi il fotogramma a cui il codice verrà associato. Per raggiungere questo scopo ci avvarremo della proprietà MovieClip.currentLabels, dell’oggetto FrameLabel e soprattutto del metodo MovieClip.addFrameScript di cui abbiamo parlato pochi giorni or sono.
Fino ad ora la nostra esercitazione, pur relegando la grandissima parte del codice nel file esterno Main.as, ricorreva ancora a del codice associato direttamente a fotogrammi quando si trattava di invocare dei metodi pubblici al momento adatto. Alla luce di quanto abbiamo spiegato a proposito del metodo addFrameScript sarebbe molto semplice fare a meno anche di quello. Risulterebbe però un po’ scomodo perdere il riferimento visivo, specie qualora si dovessero operare delle modifiche.
Assegneremo quindi delle etichette ai fotogrammi ai quali deve essere associato del codice, ciascuna etichetta dovrà avere lo stesso nome di un metodo pubblico che contiene quel codice. Tutte le etichette di fotogramma di una linea temporale sono memorizzate nell’array currentLabels che è una proprietà della classe MovieClip. Questo array è una collezione di oggetti FrameLabel che memorizzano il numero di fotogramma ed il nome di ciascuna etichetta. Poiché addFrameScript richiede proprio due parametri, utilizzeremo il numero di fotogramma dell’oggetto FrameLabel come primo argomento ed il valore stringa dell’etichetta di fotogramma ci occorrerà per risalire al riferimento del metodo da passare come secondo argomento.
In questo modo i fotogrammi da noi scelti saranno strettamente vincolati ad un metodo che porta lo stesso nome del fotogramma e che conterrà il codice da eseguire quando l’indicatore di riproduzione sarà giunto in quel punto.
Da un lato l’uso delle etichette ci permetterà di vedere con una semplice occhiata in quale punto il codice verrà eseguito, dall’altro la separazione tra codice e ambiente visuale sarà assoluta. Consideriamo inoltre che i fotogrammi chiave etichettati potranno essere spostati a piacimento senza perdere il codice associato. Sicuramente il risultato è un lavoro più professionale e soprattutto più gestibile.
Tutto ciò è stato ottenuto con una semplice modifica al costruttore di Main:
public function Main():void {
var labels:Array = currentLabels;
for(var i:uint = 0; i < labels.length; i++) {
var lbl:FrameLabel = labels[i];
addFrameScript((lbl.frame - 1),this[lbl.name]);
}
initWindows();
initRain();
initClouds();
}
Davvero poco da aggiungere, solo da notare che il riferimento ai metodi da associare è stato ottenuto con la notazione tipica degli array this[lbl.name] dove lbl.name è il nome dell’etichetta nonché quella del metodo.
Si conclude qui la serie di articoli dedicata a questa esercitazione, spero sia stata di vostro gradimento.
Potrebbero inoltre interessarti:
- Guida ActionScript 3 in Flash CS3: creare un Feed Reader
Questo esempio caricherà un feed RSS da una fonte esterna e analizzerà i suoi contenuti per mostrarli, dopo averli formattati, dentro un campo di testo in Flash. La sorgente per questo esempio saranno le news da Adobe XML News Aggregator (MXNA). Quando si carica un contenuto testuale da una fonte esterna...
- Animare l’header di un sito con Flash: animazioni con ActionScript, il metodo shuffle()
Nell’articolo precedente abbiamo osservato come gli elementi dell’array windows vengano ordinati in modo casuale tramite il metodo shuffle(). Questo metodo, a mio parere, potrebbe tornare utile in molte altre circostanze e quindi merità un breve approfondimento a parte. Questo il metodo: function shuffle(arr:Array):Array { var arrLength:uint = arr.length; var newArr:Array...
- Animare l’header di un sito con Flash: animazioni con ActionScript, le nuvole
La volta scorsa abbiamo esaminato il metodo shuffle(), ora diamo un’occhiata più da vicino al modo in cui vengono animate via codice le nuvole del nostro esempio. Come per quella delle finestre il costruttore della Document Class Main inizializza l’animazione. public function Main():void { initWindows(); initRain(); initClouds(); } Di seguito il...
- Animare l’header di un sito con Flash: animazioni con ActionScript, la pioggia
Dopo avere esaminato le animazioni delle finestre e delle nuvole le volte scorse, analizziamo l’animazione della pioggia. Anche questa, come le prime due, sfrutta il contributo decisivo del codice ActionScript esterno. Il costruttore della classe Main invoca il metodo di inizializzazione initRain(): public function Main():void { initWindows(); initRain(); initClouds(); }...
- Animare l’header di un sito con Flash: le altre animazioni
Siamo quasi giunti al termine della serie, oggi daremo una rapidissima scorsa alle animazioni dell’ambiente visuale del fla e analizzeremo gli ultimi due semplicissimi metodi della classe Main. Uno spunto costante di questa esercitazione è proprio, a mio avviso, osservare come le istruzioni via codice ed i simboli grafici preparati...
- ASBox 2.1: Lightbox con Flash
[ Esistono altre versioni di ASBox: vedi il registro delle versioni ] Dopo appena due giorni dalla 1.1 ecco l’aggiornamento per la seconda versione: non ho fatto altro che aggiungere anche qui le nuove funzionalità già sperimentate. Ricordo sempre che ASBox è un progetto scritto in AS3 e necessita di Flash...
- Il metodo Loader.unloadAndStop()
La decima versione del Flash Player ha portato pochi ma mirati interventi sul codice ActionScript. Uno tra questi, che va senz’altro menzionato, è il metodo Loader.unloadAndStop(). Prima di unloadAndStop() capitava che, dopo avere importato un swf esterno contenente un video, quando lo si rimuoveva la traccia audio continuava a sentirsi in...
- ASBox 1.1: Lightbox con Flash
[ Esistono altre versioni di ASBox: vedi il registro delle versioni ] Riprende lo sviluppo del progetto ASBox. Ho deciso di fare tesoro dei consigli tratti dai commenti alle prime due versioni dello script e ho aggiunto un paio di interessanti funzionalità, aggiornando per il momento soltanto la prima release, quella più...
- Coverflow Gallery con ASBOX2 e Papervision3D
Oggi ho scoperto con piacere che il mio progetto ASBox2 è stato ripreso ed adattato per poterlo sfruttare all’interno di una coverflow gallery sviluppata con la libreria Papervision3D. Ve lo segnalo perché credo sia una buona risorsa da mettere nei propri bookmark e vi rimando all’articolo originale per il download dell’esempio....
- Risorse su Facebook
Da ieri ho reso pubblico su Facebook il profilo di marcellosurdi.name. Segnalerò, oltre a tutti gli articoli qui pubblicati disponibili anche via RSS e agli aggiornamenti riguardanti il mio sito, tutti gli articoli italiani ed esteri meritevoli che leggo in giro per il web. Trovo che sia il modo più...
1 maggio 2009, ore 0:40
Geniale! Grazie.