Esempio dell'API di disegno: Algorithmic Visual GeneratorFlash Player 9 e versioni successive, Adobe AIR 1.0 e versioni successive L'esempio Algorithmic Visual Generator disegna dinamicamente sullo stage diversi “satelliti”, cioè dei cerchi che si muovono seguendo un'orbita circolare. Le operazioni illustrate in questo esempio sono le seguenti:
Nell'esempio della sezione precedente veniva animato un “satellite” solitario utilizzando l'evento Event.ENTER_FRAME. Questo esempio espande l'esempio precedente, creando un pannello di controllo con una serie di dispositivi di scorrimento che aggiornano immediatamente la visualizzazione di diversi satelliti. Questo esempio formalizza il codice in classi esterne e racchiude il codice di creazione del satellite in un ciclo, memorizzando un riferimento a ogni satellite in un array satellites. Per ottenere i file dell'applicazione per questo esempio, visitate la pagina www.adobe.com/go/learn_programmingAS3samples_flash_it. I file dell'applicazione si trovano nella cartella Samples/AlgorithmicVisualGenerator. La cartella contiene i file seguenti:
Impostazione dei listenerL'applicazione crea innanzi tutto tre listener. Il primo ascolta un evento inviato dal pannello di controllo e che indica che è necessario ricreare i satelliti. Il secondo ascolta le modifiche apportate alle dimensioni dello stage del file SWF. Il terzo ascolta ogni fotogramma che scorre nel file SWF e indica di ridisegnare mediante la funzione doEveryFrame(). Creazione dei satellitiUna volta impostati i listener, viene chiamata la funzione build(). Questa funzione chiama dapprima la funzione clear(), che svuota l'array satellites e cancella tutti gli eventuali disegni precedenti sullo stage. Questa operazione è necessaria, dal momento che la funzione build() potrebbe essere chiamata ogni volta che il pannello di controllo invia un evento a tale scopo, ad esempio quando sono state modificate le impostazioni del colore. In tal caso, i satelliti devono essere rimossi e ricreati. La funzione crea quindi i satelliti, impostando le proprietà iniziali necessarie per la creazione, quali la variabile position, che comincia in una posizione casuale all'interno dell'orbita, e la variabile color, che in questo esempio non viene modificata dopo che il satellite è stato creato. Per ogni satellite creato, viene aggiunto un riferimento ad esso nell'array satellites. Quando viene chiamata la funzione doEveryFrame(), essa viene aggiornata per tutti i satelliti in questo array. Aggiornamento della posizione di un satelliteLa funzione doEveryFrame() è il cuore del processo di animazione dell'applicazione. Viene chiamata per ogni fotogramma, con una velocità identica alla frequenza di fotogrammi del file SWF. Dal momento che le variabili del disegno cambiano leggermente, si ottiene l'effetto del movimento. La funzione dapprima cancella tutti i disegni precedenti e ridisegna lo sfondo. Quindi, scorre i contenitori di tutti i satelliti e incrementa la proprietà position di ciascun satellite, e aggiorna le proprietà radius e orbitRadius eventualmente modificate dall'interazione dell'utente con il pannello di controllo. Infine, il satellite viene aggiornato nella nuova posizione chiamando il metodo draw() della classe Satellite. Notate che il contatore i viene incrementato solo fino alla variabile visibleSatellites, poiché se l'utente ha limitato la quantità di satelliti visualizzati mediante il pannello di controllo, i satelliti rimanenti nel ciclo non devono essere ridisegnati bensì nascosti. Questa situazione si verifica in un ciclo che segue immediatamente il ciclo responsabile per il disegno. Quando la funzione doEveryFrame() viene completata, il numero di visibleSatellites viene aggiornato in posizione sullo schermo. Risposta all'interazione dell'utenteL'interazione dell'utente ha luogo mediante il pannello di controllo, che è gestito dalla classe ControlPanel. Questa classe imposta un listener insieme ai singoli valori minimo, massimo e predefinito di ciascun indicatore di scorrimento. Quando l'utente muove questi indicatori di scorrimento, viene chiamata la funzione changeSetting(). La funzione aggiorna le proprietà del pannello di controllo. Se la modifica richiede una ricreazione dello schermo, viene inviato un evento che viene gestito nel file principale dell'applicazione. Quando le impostazioni del pannello di controllo cambiano, la funzione doEveryFrame() disegna ogni satellite con le variabili aggiornate. Ulteriori personalizzazioniQuesto esempio è solo uno schema essenziale di come generare elementi visivi mediante l'API di disegno. Utilizza un numero relativamente basso di righe di codice per creare un'esperienza interattiva che sembra invece piuttosto complessa. Tuttavia, anche questo esempio può essere esteso ricorrendo a modifiche di lieve entità. Ad esempio:
L'API di disegno può essere utilizzata come alternativa alla creazione di effettivi visivi nell'ambiente di creazione di Flash e per disegnare forme di base in fase di runtime. Ma può anche essere usata per creare effetti visivi con varietà e aree di validità impossibili da creare a mano. Grazie all'API di disegno e a un po' di matematica, un autore ActionScript può dare vita a moltissime creazioni decisamente imprevedibili. |
|