Share
In questo tutorial creeremo un effetto pioggia dinamico utilizzando ActionScript 3.0. L'effetto può essere personalizzato in molti modi semplicemente cambiando alcune righe di codice. Iniziamo!
Diamo un'occhiata all'effetto finale su cui lavoreremo:
Disegneremo una semplice goccia di pioggia, quindi utilizzando le nostre abilità di ActionScript duplicheremo, sposteremo e posizioneremo il MovieClip per ottenere un buon effetto pioggia.
Creare un nuovo documento ActionScript 3 (File> Nuovo ...). Imposta le dimensioni dello stage alle dimensioni desiderate, ho usato 600 x 300 px.
Aggiungere o disegnare un'immagine da usare come sfondo, ho usato un'immagine modificata di JinThai, sotto licenza Creative Commons.
Rinominare il primo livello in "Sfondo", quindi crearne un altro e denominarlo "Codice" (lo useremo per posizionare il nostro ActionScript). È possibile bloccare il livello "Codice" per evitare il posizionamento di disegni indesiderati.
Crea un grafico da utilizzare come la goccia di pioggia. Imposta il suo colore su bianco e usa un gradiente lineare per l'alfa, il mio è 40 a 15. Convertilo in un MovieClip e chiamalo "Drop", ricorda di spuntare la casella di controllo "Esporta per ActionScript".
Iniziamo un po 'di codice in un file ActionScript separato:
pacchetto Classes / * Importa classi richieste * / import flash.display.MovieClip; import flash.events.Event;
Qui importiamo le classi che useremo. Ricorda che la parola accanto a "pacchetto" è il nome della cartella in cui si trova la nostra classe.
// Abbiamo bisogno di estendere la classe in modo che possiamo usare il metodo addChild (). la classe pubblica Rain estende MovieClip
Estendere la classe MovieClip consentirà alla nostra classe di ereditare tutti i metodi, le proprietà e le funzioni di MovieClip. In questo caso lo usiamo per ottenere l'accesso al metodo addChild ().
Qui utilizzeremo un esclusivo "Vettore" di classe Flash Player 10. In parole povere, la classe Vector funziona come una matrice, ma è considerevolmente più veloce.
offset var privato: int = 50; // Questa è l'area di offset in pixel che l'effetto avrà. Senza questo, gli angoli dell'area dell'effetto saranno le var private var prive di pioggiaNumero: int; // Il numero di gocce di pioggia; il suo valore è impostato nei parametri private var dropsVector: Vector.= nuovo vettore. (); // Il vettore che memorizzerà ogni goccia di pioggia
funzione pubblica init (drops: int, fallSpeed: int, windSpeed: int, hArea: int, vArea: int, dir: String): void dropsNumber = drops;
La funzione principale, con alcuni parametri che rendono l'effetto facile da adattare alle tue esigenze. Puoi cambiare il numero di gocce, la velocità alla quale cadono le gocce, la velocità con cui le gocce si muoveranno orizzontalmente, la dimensione dell'area dell'effetto e la direzione della pioggia (sinistra o destra).
Qui impostiamo il valore dropsNumber.
Per impostazione predefinita, l'offset var è impostato per funzionare con il lato sinistro, quindi dobbiamo controllare dove andrà la pioggia e cambiare l'offset se la direzione è corretta.
if (dir == "right") offset * = -1;
Per mostrare varie istanze di Drop MovieClip dobbiamo creare un nuovo oggetto Drop all'interno di un'istruzione "For":
per (var i: int = 0; i < drops; i++) var drop:Drop = new Drop(); drop.fallSpeed=fallSpeed; drop.windSpeed=windSpeed; drop.dir=dir; drop.hArea=hArea; drop.vArea=vArea;
Utilizziamo la variabile "drops" per ottenere il numero di gocce definito dall'utente e impostare le variabili all'interno di MovieClip per un uso successivo.
Imposta una posizione casuale iniziale per le gocce.
drop.x = Math.random () * (hArea + offset); drop.y = Math.random () * VAREA;
drop.scaleX = Math.round (((Math.random () * 0.8) + 0.3) * 10) / 10; drop.scaleY = drop.scaleX;
Questo imposta la scala delle gocce tra 0,3 e la dimensione originale.
dropsVector.push (goccia); addChild (goccia); // End of For inTheDirection (); // Fine della funzione init
Questo codice aggiunge Drop MovieClip al vettore e quindi al palco. Chiama anche la funzione "direction".
Accentsconagua
funzione privata inTheDirection (): void for (var i: int = 0; i < dropsNumber; i++) switch (dropsVector[i].dir) case "left" : dropsVector[i].addEventListener(Event.ENTER_FRAME, moveLeft); break; case "right" : dropsVector[i].scaleX*=-1; //Our Drop was created going to the left, so we flip it to make it look like it's going to the right dropsVector[i].addEventListener(Event.ENTER_FRAME, moveRight); break; default : trace("Error"); In questa funzione usiamo un altro "For" per accedere ai Movie Clip all'interno del Vector. Quindi controlliamo il parametro direction e aggiungiamo un listener alla funzione corrispondente. Questo si prenderà cura del movimento e della posizione.
funzione privata moveLeft (e: Event): void e.target.x- = e.target.windSpeed; e.target.y + = Math.random () * e.target.fallSpeed; if (e.target.y> e.target.vArea + e.target.height) e.target.x = Math.random () * (e.target.hArea + (offset * 2)); e.target.y = - e.target.height; private function moveRight (e: Event): void e.target.x + = e.target.windSpeed; e.target.y + = Math.random () * e.target.fallSpeed; if (e.target.y> e.target.vArea + e.target.height) e.target.x = Math.random () * (e.target.hArea - offset * 2) + offset * 2; e.target.y = - e.target.height;
Questo sposta le gocce in base ai parametri della funzione principale. Quindi ripristina la posizione quando le gocce si spostano all'esterno dell'area dell'effetto.
Finita la lezione, per utilizzarla torniamo all'IDE Flash, apriamo il pannello Azioni e scriviamo:
import Classes.Rain; var rain: Rain = new Rain (); rain.init (200, 50, 5, 600, 300, "sinistra"); addChild (pioggia);
Questo creerà un nuovo oggetto pioggia, quindi chiamerà la funzione principale per avviare l'effetto. Infine aggiungiamo l'effetto sul palco.
Ricorda che puoi giocare con i parametri per ottenere vari effetti e che puoi anche cambiare le gocce disegnando quello che vuoi. Continua a provare diverse combinazioni per ottenere l'effetto esatto che desideri.
Spero ti sia piaciuto leggere il tut tanto quanto l'ho scritto io. Grazie per aver letto!
