Esempio dell'API di disegno: Algorithmic Visual Generator

Flash 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:

  • Uso dell'API di disegno per disegnare una forma di base con aspetti dinamici

  • Collegamento dell'interazione dell'utente con le proprietà utilizzate in un disegno

  • Trasmissione dell'effetto dell'animazione mediante la cancellazione dello stage in ciascun fotogramma e il ridisegno

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:

File

Descrizione

AlgorithmicVisualGenerator.fla

Il file dell'applicazione principale in Flash Professional (FLA).

com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as

La classe che fornisce la funzionalità principale dell'applicazione, tra cui il disegno di satelliti sullo stage e la risposta agli eventi inviati dal pannello di controllo per aggiornare le variabili che influenzano il disegno dei satelliti.

com/example/programmingas3/algorithmic/ControlPanel.as

Una classe che gestisce l'interazione dell'utente con diversi dispositivi di scorrimento e, quando ciò avviene, l'invio di eventi.

com/example/programmingas3/algorithmic/Satellite.as

Una classe che rappresenta l'oggetto di visualizzazione che ruota in base a un'orbita attorno a un punto centrale e contiene le proprietà correlate al proprio stato di disegno.

Impostazione dei listener

L'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 satelliti

Una 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 satellite

La 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'utente

L'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 personalizzazioni

Questo 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:

  • La funzione doEveryFrame() può incrementare il valore del colore del satellite.

  • La funzione doEveryFrame() può ridurre o espandere il raggio del satellite nel corso del tempo.

  • Il raggio del satellite non deve necessariamente essere circolare; ad esempio, può utilizzare una classe Math per spostarsi in base a una sinusoide.

  • I satelliti possono utilizzare il rilevamento a zone con altri satelliti.

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.