mar 29 2009
Animare l’header di un sito con Flash: le altre animazioni
La seguente appartiene ad una serie di pagine correlate:
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 nell’IDE cooperino e si integrino in un insieme armonico.
Il cielo assume un colore verde più o meno scuro con una semplice interpolazione di forma; il sole compie il suo corso tramite un’interpolazione di movimento lungo un tracciato; una semplicissima interpolazione di movimento invece per la luna. Queste sono le animazioni gestite totalmente nell’IDE di Flash, ciascuna ovviamente nel proprio livello (rispettivamente i livelli sky, sun e moon). Esse fanno da contraltare a quelle delle finestre, delle nuvole e della pioggia viste negli articoli passati che, seppure preparate con dei simboli grafici, sfruttano il contributo decisivo del codice ActionScript.
Esiste infine nella nostra esercitazione una categoria di animazioni, per così dire intermedia, che, sebbene preparata prevalentemente nell’ambiente visuale, si appoggia al codice per la gestione temporale che risulterebbe difficoltosa tramite timeline. Il metodo nightAnims() imposta il ciclo Timer a questo scopo:
public function nightAnims():void {
tm2 = new Timer(7000,7);
tm2.addEventListener(TimerEvent.TIMER,function(){makeNightAnims();});
tm2.start();
}
Come è facile notare makeNightAnims() verrà eseguito sette volte ad intervalli di sette secondi l’una dall’altra.
private function makeNightAnims():void {
if(tm2.currentCount < 7) {
if(tm2.currentCount == 3) {
airplane.y -= 25;
airplane.gotoAndPlay(2);
}
light.visible = false;
thunder.gotoAndPlay(2);
setTimeout(function(){
light.x = Math.floor(Math.random() * 560) + 100;
light.visible = true;
}
,500
);
}
else reset();
}
Il metodo sopra si occupa della gestione delle animazioni dei lampi, del fascio di luce e dell’aeroplano. Esso verrà eseguito, come detto in precedenza, sette volte ad intervalli di sette secondi. Poiché il framerate del nostro filmato è 20 f/s, la gestione su timeline avrebbe richiesto altri 140 fotogrammi e, soprattutto, avrebbe complicato oltremodo la linea temporale. Le poche linee di codice viste sopra sono l’alternativa sicuramente preferibile e si occupano:
- alla terza esecuzione di far ripartire l’aeroplano (che già una volta prima dell’avvio del ciclo Timer aveva solcato il cielo);
- di far scoppiare il fulmine (thunder.gotoAndPlay(2));
- di far scomparire ogni volta per mezzo secondo il fascio di luce (al quale è stato applicato il filtro Sfocatura per renderlo più realistico) e di farlo ricomparire in modo casuale in una posizione differente.
Fare le stesse cose da linea temporale oltre che più difficoltoso, difficilmente e a costo di un notevole dispendio di tempo avrebbe consentito delle modifiche successive. Durante il ciclo Timer pertanto la linea temporale viene arrestata da un comando stop(), presente nel metodo startRain(), e riavviata da un comando play del metodo reset(), invocato da makeNightAnims() nella sua settima ed ultima esecuzione al termine del ciclo. Nell’ultimo appuntamento di questa serie vedremo inoltre come separare del tutto il codice dalla linea temporale.
Potrebbero inoltre interessarti:
- 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(); }...
- 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...
- 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ù...
- 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: separazione tra linea temporale e codice
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...
- 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...
- 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ù...
