Share
Due volte al mese, rivisitiamo alcuni dei post preferiti dei nostri lettori da tutta la storia di Activetuts +. Questo tutorial è stato pubblicato per la prima volta nel maggio 2009.
Usando ActionScript 3.0, creeremo uno sfondo animato che possiamo usare nelle schermate dei menu o come visualizzatore musicale.
Diamo un'occhiata a ciò a cui lavoreremo:
Creeremo una classe che si prenderà cura di tutto l'effetto. Quando chiami la classe, sarai in grado di modificare il numero di luci, colori, alfa, dimensioni, direzione, velocità e la qualità del filtro Sfocatura. In questo modo è possibile ottenere molti risultati diversi quando lo si utilizza. Inoltre, puoi utilizzare qualsiasi sfondo che desideri.
Creare un nuovo documento ActionScript 3.0 (File> Nuovo ...). Imposta le dimensioni dello stage alle dimensioni desiderate, ho usato 600 x 300 px.
Aggiungi o disegna un'immagine da usare come sfondo, ho usato un semplice gradiente blu (# 02C7FB, # 1F63B4).
Rinominare il primo livello in "Sfondo", quindi crearne un altro e denominarlo "Codice". È possibile bloccare il livello "Codice" per evitare il posizionamento di disegni indesiderati.
Salva il tuo lavoro e entriamo nel codice!
Suppongo che tu abbia già una conoscenza di base di ActionScript 3.0, se hai dubbi specifici sulle parole chiave, consulta la Guida di Flash (F1).
Creare un nuovo file ActionScript (File> Nuovo ...).
pacchetto Classes / * Importa classi richieste * / import flash.display.MovieClip; import flash.filters.BitmapFilter; import flash.filters.BlurFilter; import flash.events.Event;
Qui importiamo le classi che useremo, ricordiamo 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 Lights 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 ().
Sebbene abbiano dei nomi che si spiegano da soli, aggiungerò brevi commenti su ogni var per assicurarmi che sia chiaro. Ricevono i loro valori dai parametri della funzione Main.
luci var privateNumero: int; // Il numero di Lights on Stage private var xSpeed: int; // La velocità orizzontale che le Luci hanno private var ySpeed: int; // Vertical Speed private var lightsDir: String; // Direction the Lights is going, può essere su, giù, sinistra o destra area var privataW: int; // La larghezza dell'area in cui si svolgerà l'effetto private var areaH: int; // Altezza luci var private: Array = new Array (); // Questo array memorizzerà tutti i Lights Movie Clip in modo che possiamo usarli al di fuori del Per dove li creeremo.
/ * Funzione principale * / funzione pubblica init (areaWidth: int, areaHeight: int, numberOfLights: int, lightSize: int, lightColor: uint, minimumScale: Number, hSpeed: int, vSpeed: int, dir: String, quality: int) : void areaW = areaWidth; areaH = areaAltezza; lightsNumber = numberOfLights; lightsDir = dir;
Questa è la funzione di cui abbiamo bisogno per iniziare l'effetto, impostiamo anche i valori delle variabili in questo codice.
per (var i: int = 0; i < numberOfLights; i++) /* Create the specified number of lights */ var light:MovieClip = new MovieClip(); /* Set random speed to x and y based on the params */ xSpeed = Math.floor((Math.random() * (hSpeed - -hSpeed + 1)) + -hSpeed); ySpeed = Math.round((Math.random() * vSpeed) + 0.5); light.xSpeed = xSpeed; light.ySpeed = ySpeed; /* Create lights */ light.graphics.beginFill(lightColor); light.graphics.drawCircle(0, 0, lightSize / 2); light.graphics.endFill();
In questo codice usiamo un'istruzione "For" per creare il numero di Lights che l'utente imposta nel parametro e calcolare una velocità semi-casuale per ogni Light.
Questo imposta una posizione di partenza casuale per le luci in base ai parametri dell'area.
light.x = Math.floor (Math.random () * areaWidth); light.y = Math.floor (Math.random () * areaHeight);
var b: int = Math.floor (Math.random () * 10) + 5; // Calcola una sfocatura casuale tra 0-9 e aggiunge 5 al risultato. var blur: BitmapFilter = new BlurFilter (b, b, quality); // L'oggetto BlurFilter. var filterArray: Array = new Array (blur); // Per applicare il filtro abbiamo bisogno di una serie di filtri. light.filters = filterArray; // Imposta la matrice dei filtri sulla luce
Il codice sopra riportato applica la sfocatura. Ricorda che questo codice fa ancora parte del For, quindi le luci ottengono sfocature diverse.
light.alpha = Math.random () * 0.6 + 0.1;
Facile; questo imposta la proprietà alfa tra 0.1 e 0.6.
light.scaleX = Math.round (((Math.random () * (1-minimumScale)) + minimumScale) * 100) / 100; light.scaleY = light.scaleX;
Questo imposta la scala delle luci tra la dimensione originale e il parametro della scala minima. Usiamo un metodo rotondo per salvare il processore.
addChild (luce); / * Memorizza le luci in una matrice per utilizzarla in seguito * / lights.push (luce); / * Controllare la direzione delle luci * / checkDirection ();
Questo aggiunge le luci allo stage, quindi le salviamo in una matrice per usarle in seguito. Ha anche la funzione checkDirection per vedere in quale direzione andranno le luci.
Accentsconagua
funzione privata checkDirection (): void for (var i: int = 0; i < lights.length; i++) switch ( lightsDir ) case "up" : lights[i].addEventListener(Event.ENTER_FRAME, moveUp); break; case "down" : lights[i].addEventListener(Event.ENTER_FRAME, moveDown); break; case "right" : lights[i].addEventListener(Event.ENTER_FRAME, moveRight); break; case "left" : lights[i].addEventListener(Event.ENTER_FRAME, moveLeft); break; default : trace("Invalid Direction!"); Qui usiamo a per per accedere a tutte le luci nella matrice, quindi controllare la variabile di direzione per determinare dove spostare le luci. A seconda della direzione, aggiungiamo l'ascoltatore alla funzione corrispondente.
Questa prossima sezione potrebbe sembrare un po 'complicata, ma è più facile di quanto pensi. Fondamentalmente, sposta la Luce a seconda della velocità calcolata nella funzione Principale, quindi controlla se la Luce ha "lasciato" l'Area dell'effetto. Se questo è il caso, imposta una posizione casuale contraria alla direzione in cui la Luce si sta dirigendo.
funzione privata moveUp (e: Event): void e.target.x + = e.target.xSpeed; e.target.y- = e.target.ySpeed; / * Ripristina posizione luce, prima Y, poi X * / if (e.target.y + (e.target.height / 2) < 0) e.target.y = areaH + (e.target.height / 2); e.target.x=Math.floor(Math.random()*areaW); if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW) e.target.y = areaH + (e.target.height / 2); e.target.x = Math.floor (Math.random () * areaW); / * Move Down function * / private function moveDown (e: Event): void e.target.x + = e.target.xSpeed; e.target.y + = e.target.ySpeed; / * Ripristina posizione luce, prima Y, poi X * / if (e.target.y - (e.target.height / 2)> areaH) e.target.y = 0 - (e.target.height / 2 ); e.target.x = Math.floor (Math.random () * areaW); if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW) e.target.y = areaH + (e.target.height / 2); e.target.x = Math.floor (Math.random () * areaW); / * Funzione Move Right * / private function moveRight (e: Event): void e.target.x + = e.target.ySpeed; e.target.y + = e.target.xSpeed; / * Ripristina posizione luce, prima Y, poi X * / if (e.target.y - (e.target.height / 2)> areaH || e.target.y + (e.target.height / 2) < 0) e.target.x = 0 - (e.target.height / 2); e.target.y = Math.floor(Math.random()*areaH); if ((e.target.x - e.target.width / 2) > areaW) e.target.x = 0 - (e.target.height / 2); e.target.y = Math.floor (Math.random () * areaW); / * Sposta la funzione Left * / private function moveLeft (e: Event): void e.target.x- = e.target.ySpeed; e.target.y- = e.target.xSpeed; / * Ripristina posizione luce, prima Y, poi X * / if (e.target.y - (e.target.height / 2)> areaH || e.target.y + (e.target.height / 2) < 0) e.target.x = areaW + (e.target.width / 2); e.target.y=Math.floor(Math.random()*areaH); if ((e.target.x + e.target.width / 2) < 0) e.target.x = areaW + (e.target.width / 2); e.target.y=Math.floor(Math.random()*areaW);
Salva la tua classe (ricorda che il file deve avere lo stesso nome della Classe) e torniamo al Fla. Apri il pannello Azioni e scrivi:
import Classes.Lights; var light: Lights = new Lights (); light.init (600, 300, 40, 60, 0xFFFFFF, 0.3, 3, 3, "up", 2); addChild (luce);
Questo è tutto! Metti alla prova il tuo film per vedere il tuo bel sfondo animato!
Giocare con i parametri della classe risulterà in molti effetti diversi, provare a cambiare lo sfondo, impostare velocità più basse o più veloci, usare più luci, meno sfocatura e così via!
Spero che tu abbia imparato qualcosa che puoi usare, grazie per la lettura!
