Lag en Whimsical animert Flash Background

Create en Whimsical animert Flash Bakgrunn
Del
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.

To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble først publisert i mai 2009.

Ved hjelp av Actionscript 3.0, vil vi lage en kul animert bakgrunn som vi kan bruke i Meny Screens eller som en Music Visualizer.



Endelig resultat Forhåndsvisning

La oss ta en titt på hva vi skal jobbe mot:



Trinn 1: Kort oversikt

Vi vil opprette en klasse som vil ta vare på hele effekten. Når du ringer klassen, vil du være i stand til å endre antall lys, farge, alpha, størrelse, retning, hastighet og kvalitet på Blur filteret. På denne måte er det mulig å oppnå mange forskjellige resultater ved bruk av den. Dessuten kan du bruke hvilken som helst bakgrunn du ønsker



Trinn 2: FLA Document

Opprett en ny Actionscript 3.0 dokument (Fil > New ...).. Sett Stage størrelse på dine ønskede dimensjoner, har jeg brukt 600 x 300 px



Trinn 3:. Din bakgrunn

Legg til eller trekke et bilde som skal brukes som bakgrunn, jeg 've brukes en enkel blå gradient (# 02C7FB, # 1F63B4)



Trinn 4:. Layers

Gi nytt navn det første laget til "Bakgrunn" og deretter opprette en ny og gi den navnet " Kode". Du kan låse "Code" lag for å unngå plassering av uønskede tegninger der



Trinn 5:.! Action

Lagre arbeidet og la oss komme inn koden
< p> Jeg antar du allerede har en grunnleggende forståelse av Actionscript 3.0, hvis du har noen søkeord spesifikke tvil Vennligst henvis til Flash Hjelp (F1)

Opprett en ny Actionscript-fil (Fil >. Ny. ..)



Trinn 6:. Importe Obligatoriske Classes
pakke Classes {/* Import nødvendige klasser * /import flash.display.MovieClip; import flash.filters.BitmapFilter; import flash.filters.BlurFilter; import flash.events.Event;

Her kan vi importere klasser som vi vil bruke, må du huske at ordet ved siden av "pakken" er navnet på mappen der vår Class ligger


Trinn 7: Utvide Class
//Vi trenger å utvide klassen slik at vi kan bruke addChild () -metoden. public class Lights strekker MovieClip {

Utvide MovieClip klasse vil tillate klassen vår å arve alle metoder, egenskaper og funksjoner som den MovieClip har, i dette tilfellet vi bruke den til å få tilgang til addChild () -metoden.



Trinn 8: variablene

Selv om de har ganske mye selvforklarende navn vil jeg legge korte kommentarer på hver Var å sørge for at det er klart. De får sine verdier fra parametrene i Hovedfunksjon
privat Var lightsNumber. Int; //Antall Lights on Stage privat Var xSpeed: int; //Den horisontale hastighets lysene har privat Var ySpeed: int; //Vertical Speed ​​privat Var lightsDir: String; //Direction lysene går, dette kan være Opp, Ned, Venstre eller Høyre privat Var areaW: int; //Bredden på området der effekten vil foregå privat Var areaH: int; //Høyde private Var lysene: Array = new Array (); //Denne rekken vil lagre alle lysene movieclips slik at vi kan bruke dem utenfor For hvor vi skal lage dem



Trinn 9:. Main Funksjon Twitter /* Hovedfunksjon * /public funksjonen init ( areaWidth: int, areaHeight: int, numberOfLights: int, lightSize: int, lightColor: UINT, minimumScale: Antall, hSpeed: int, vSpeed: int, dir: String, kvalitet: int): void {areaW = areaWidth; areaH = areaHeight; lightsNumber = numberOfLights; lightsDir = dir;

Dette er funksjonen som vi trenger for å starte effekt, har vi også satt de variable verdiene i denne koden



Trinn 10:. Opprette Lights
for (var i: int = 0; i < numberOfLights; i ++) {/* Lag det angitte antall lys * /var lys: MovieClip = new MovieClip (); /* Sett tilfeldig hastighet til x og y basert på params * /xSpeed ​​= Math.floor ((Math.random () * (hSpeed ​​- -hSpeed ​​+ 1)) + -hSpeed); ySpeed ​​= Math.round ((Math.random () * vSpeed) + 0,5); light.xSpeed ​​= xSpeed; light.ySpeed ​​= ySpeed; /* Lag lys * /light.graphics.beginFill (lightColor); light.graphics.drawCircle (0, 0, lightSize /2); light.graphics.endFill ();

I denne koden bruker vi en "For" statement å skape antall Lights brukeren setter i parameter og beregne en semi-tilfeldig hastighet for hver Lys


.
Trinn 11: Posisjon

Dette setter en tilfeldig start posisjon for Lights basert på området parametre
light.x = Math.floor (Math.random () * areaWidth); lys.. y = Math.floor (Math.random () * areaHeight);



Trinn 12: Blur Filter
Var b: int = Math.floor (Math.random () * 10) + 5; //Beregner en tilfeldig Blur mellom 0-9 og legger 5 til resultatet. Var uskarphet: BitmapFilter = new BlurFilter (b, b, kvalitet); //Den BlurFilter objekt. Var filterArray: Array = new Array (blur); //Å bruke filteret vi trenger en rekke filtre. light.filters = filterArray; //Setter filtre matrisen til Light

Koden ovenfor gjelder Blur. Husk at denne koden er fortsatt en del av den for, så lysene få forskjellige visker



Trinn 13:. Alpha
light.alpha = Math.random () * 0,6 + 0,1;

En enkel en; dette setter alpha eiendom mellom 0,1 og 0,6



Trinn 14:. Scale
light.scaleX = Math.round (((Math.random () * (1-minimumScale)) + minimumScale ) * 100) /100; light.scaleY = light.scaleX;

Dette setter omfanget av lysene mellom den opprinnelige størrelsen og minimum skala parameter. Vi bruker en runde metode for å spare prosessor



Trinn 15:. Legge lysene til Stage
addChild (lys); /* Oppbevar lysene i en matrise for å bruke det senere * /lights.push (lys); /* Se etter lys retning * /checkDirection ();

Dette legger lysene på scenen, så vi lagre dem i en Array å bruke dem senere. Det også checkDirection funksjon for å se i hvilken retning lysene vil gå



Trinn 16: Sjekk Retning Funksjon
privat funksjon checkDirection (): void {for (var i.: Int = 0; i < lights.length; i ++) {switch (lightsDir) {case "up": lys [i] .addEventListener (Event.ENTER_FRAME, moveUp); gå i stykker; case "ned": lys [i] .addEventListener (Event.ENTER_FRAME, moveDown); gå i stykker; case "riktig": lys [i] .addEventListener (Event.ENTER_FRAME, moveRight); gå i stykker; case "venstre": lys [i] .addEventListener (Event.ENTER_FRAME, moveLeft); gå i stykker; standard: trace ("Ugyldig Direction!"); }}}

Her bruker vi en for å få tilgang til alle lysene i Array, så sjekk retningen variabel for å finne ut hvor du skal flytte lyset. Avhengig av hvilken retning vi legger lytteren til tilsvarende funksjon



Trinn 17:. Flytte funksjoner

Denne neste delen kan virke litt komplisert, men det er enklere enn du tror. I utgangspunktet flytter det lyset avhengig av hastigheten beregnet i hovedfunksjon, deretter sjekker hvis Light har "left" Arealet av effekten. Hvis det er tilfelle, setter det en tilfeldig posisjon i motsetning til retningen lyset er på vei
privat funksjon moveUp (e: Hendelses):. Void {e.target.x + = e.target.xSpeed; e.target.y- = e.target.ySpeed; /* Tilbake lys posisjon, Y først, deretter 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); }} /* Flytt ned funksjon * /private funksjon moveDown (e: Hendelses): void {e.target.x + = e.target.xSpeed; e.target.y + = e.target.ySpeed; /* Tilbake lys posisjon, Y først, deretter 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); }} /* Flytt Høyre funksjon * /private funksjon moveRight (e: Hendelses): void {e.target.x + = e.target.ySpeed; e.target.y + = e.target.xSpeed; /* Tilbake lys posisjon, Y først, deretter 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); }} /* Flytt Venstre funksjon * /private funksjon moveLeft (e: Hendelses): void {e.target.x- = e.target.ySpeed; e.target.y- = e.target.xSpeed; /* Tilbake lys posisjon, Y først, deretter 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); }}}}



Trinn 18:. Ringe Function

Lagre klassen din (husk at filen må ha samme navn som klassen) og la oss komme tilbake til Fla Åpne Handlinger panelet og skriver:
import Classes.Lights; Var lys: Lys = nye Lights (); light.init (600, 300, 40, 60, 0xFFFFFF, 0,3, 3, 3, "opp", 2); addChild (lys);

Det er det! Test filmen for å se fin animert bakgrunn!



Konklusjon

Spille med parametrene i klassen vil resultere i en rekke forskjellige effekter, prøv å endre bakgrunnen, sett saktere eller raskere hastigheter, bruke mer lys, mindre Blur og så videre!

Jeg håper du har lært noe du kan bruke, takk for lesing!