Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele historien til Activetuts +. Denne opplæringen ble først publisert i mai 2009.
Ved hjelp av ActionScript 3.0 oppretter vi en kul, animert bakgrunn som vi kan bruke i menyskjermene eller som en musikkvisualiserer.
La oss ta en titt på hva vi skal jobbe for:
Vi lager en klasse som tar vare på hele effekten. Når du ringer til klassen, kan du endre antall lys, farge, alfa, størrelse, retning, hastighet og kvaliteten på Blur-filteret. På denne måten er det mulig å oppnå mange forskjellige resultater når man bruker det. Du kan også bruke hvilken som helst bakgrunn du vil ha.
Opprett et nytt ActionScript 3.0-dokument (File> New ...). Sett Stage-størrelsen til de ønskede dimensjonene, jeg har brukt 600 x 300 px.
Legg til eller tegne et bilde som skal brukes som bakgrunn, jeg har brukt en enkel blå gradient (# 02C7FB, # 1F63B4).
Gi nytt navn til det første laget til "Bakgrunn", og opprett en annen og kaller den "Kode". Du kan låse "Kode" laget for å unngå å plassere uønskede tegninger der inne.
Lagre arbeidet ditt og la oss komme inn i koden!
Jeg antar at du allerede har en grunnleggende forståelse av ActionScript 3.0, hvis du har noen nøkkelord for bestemte søkeord, vennligst se Flash Help (F1).
Opprett en ny ActionScript-fil (Fil> Ny ...).
pakke klasser / * Import obligatoriske klasser * / import flash.display.MovieClip; importer flash.filters.BitmapFilter; importer flash.filters.BlurFilter; importere flash.events.Event;
Her importerer vi klassene som vi skal bruke, husk at ordet ved siden av "pakke" er navnet på mappen der vår klasse ligger.
// Vi må forlenge klassen, slik at vi kan bruke addChild () -metoden. offentlig klasse Lights utvider MovieClip
Utvidelse av MovieClip-klassen tillater at klassen vår arver alle metodene, egenskapene og funksjonene som MovieClip har, i dette tilfellet bruker vi det for å få tilgang til addChild () -metoden.
Selv om de har ganske mye selvforklarende navn, legger jeg til korte kommentarer på hver var for å sikre at det er klart. De får sine verdier fra parametrene til hovedfunksjonen.
private var lightsNumber: int; // Antall lys på scenen privat var xSpeed: int; // Den horisontale hastigheten lysene har private var ySpeed: int; // Vertikal hastighet private var lightsDir: String; // Retning lysene går, dette kan være opp, ned, venstre eller høyre privat var areaW: int; // Bredden på arealet hvor effekten vil finne sted privat var areaH: int; // Høyde private var lys: Array = new Array (); // Dette arrayet lagrer alle Lights MovieClips slik at vi kan bruke dem utenfor For hvor vi skal lage dem.
/ * Hovedfunksjon * / offentlig funksjon init (områdebredde: int, areaHeight: int, numberOfLights: int, lightSize: int, lightColor: uint, minimumSkala: Nummer, hSpeed: int, vSpeed: int, dir: Streng, kvalitet: int) : void areaW = areaWidth; areaH = areaHeight; lightsNumber = numberOfLights; lightsDir = dir;
Dette er funksjonen som vi trenger for å starte effekten, vi stiller også de variable verdiene i denne koden.
for (var jeg: 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();
I denne koden bruker vi en "For" -oppgave for å opprette antall lys som brukeren angir i parameteren og beregne en semi-tilfeldig hastighet for hvert lys.
Dette setter en tilfeldig startposisjon for lysene basert på områdeparametrene.
light.x = Math.floor (Math.random () * areaWidth); light.y = Math.floor (Math.random () * areaHeight);
var b: int = Math.floor (Math.random () * 10) + 5; // Beregner en tilfeldig Blur mellom 0-9 og legger 5 til resultatet. var uskarphet: BitmapFilter = ny BlurFilter (b, b, kvalitet); // BlurFilter-objektet. var filterArray: Array = nytt Array (uskarphet); // For å bruke filteret trenger vi en rekke filtre. light.filters = filterArray; // Setter filtrefeltet til lyset
Ovennevnte kode gjelder Blur. Husk at denne koden fortsatt er en del av For, slik at lysene blir forskjellige Blurs.
light.alpha = Math.random () * 0,6 + 0,1;
En enkel en; Dette setter alfaegenskapen mellom 0,1 og 0,6.
light.scaleX = Math.round (((Math.random () * (1-minimumskala)) + minimumskala) * 100) / 100; light.scaleY = light.scaleX;
Dette setter skalaen til lysene mellom den opprinnelige størrelsen og minimumskala parameteren. Vi bruker en rund metode for å spare prosessor.
addChild (lys); / * Lagre lys i en matrise for å bruke det senere * / lights.push (lys); / * Sjekk etter lysretning * / kontroller retning ();
Dette legger lysene til scenen, så lagrer vi dem i et array for å bruke dem senere. Det er også checkDirection-funksjonen for å se hvilken retning lysene skal gå.
Accentsconagua
privat funksjon 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!"); Her bruker vi en til For å få tilgang til alle lysene i Array, kontroller du retningsvariabelen for å bestemme hvor du skal flytte lysene. Avhengig av retningen legger vi lytteren til den tilsvarende funksjonen.
Denne neste delen kan virke litt komplisert, men det er lettere enn du tror. I utgangspunktet beveger det lyset avhengig av hastigheten beregnet i hovedfunksjonen, og kontrollerer om lyset har "forlatt" området for effekten. Hvis det er tilfelle, setter det en tilfeldig posisjon i motsetning til retningen lyset er på vei.
privat funksjonen flytting (e: Event): void e.target.x + = e.target.xSpeed; e.target.y- = e.target.ySpeed; / * Tilbakestill lysposisjon, Y først, deretter X * / hvis (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) > områdeW) e.target.y = areaH + (e.target.height / 2); e.target.x = Math.floor (Math.random () * areaW); / * Flytt ned funksjon * / privat funksjon moveDown (e: Event): void e.target.x + = e.target.xSpeed; e.target.y + = e.target.ySpeed; / * Tilbakestill lysposisjon, Y først, deretter X * / hvis (e.target.y - (e.target.height / 2)> areaH) e.target.y = 0 - (e.target.height / 2 ); e.target.x = Math.floor (Math.random () * areaW); hvis ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > områdeW) e.target.y = areaH + (e.target.height / 2); e.target.x = Math.floor (Math.random () * areaW); / * Flytt Høyre funksjon * / privat funksjon moveRight (e: Event): void e.target.x + = e.target.ySpeed; e.target.y + = e.target.xSpeed; / * Tilbakestill lysposisjon, Y først, deretter X * / hvis (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) > områdeW) e.target.x = 0 - (e.target.height / 2); e.target.y = Math.floor (Math.random () * areaW); / * Flytt Venstre funksjon * / privat funksjon moveLeft (e: Event): void e.target.x- = e.target.ySpeed; e.target.y- = e.target.xSpeed; / * Tilbakestill lysposisjon, Y først, deretter X * / hvis (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);
Lagre klassen din (husk at filen må ha samme navn som klassen) og la oss komme tilbake til Fla. Åpne handlingspanelet og skriv:
importere klasser. lys; var lys: Lys = Nytt lys (); light.init (600, 300, 40, 60, 0xFFFFFF, 0,3, 3, 3, "opp", 2); addChild (lys);
Det er det! Test filmen din for å se din fine, animerte bakgrunn!
Å spille med parametrene i klassen vil resultere i mange forskjellige effekter, prøv å endre bakgrunnen, sett tregere eller raskere hastigheter, bruk mer lys, mindre uskarphet og så videre!
Jeg håper du lærte noe du kan bruke, takk for å lese!
