Share
Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Activetuts +. Deze tutorial werd voor het eerst gepubliceerd in mei 2009.
Met ActionScript 3.0 maken we een coole geanimeerde achtergrond die we kunnen gebruiken in menuschermen of als een muziek visualizer.
Laten we eens kijken naar waar we naartoe zullen werken:
We zullen een klasse maken die voor het hele effect zorgt. Wanneer u de klas belt, kunt u het aantal lichten, de kleur, de alpha, de grootte, de richting, de snelheid en de kwaliteit van het vervagingfilter wijzigen. Op deze manier is het mogelijk om veel verschillende resultaten te bereiken wanneer u het gebruikt. U kunt ook elke gewenste achtergrond gebruiken.
Maak een nieuw ActionScript 3.0-document (Bestand> Nieuw ...). Stel de Stage-maat in op de gewenste afmetingen, ik heb 600 x 300 px gebruikt.
Voeg een afbeelding toe of teken deze om als achtergrond te gebruiken, ik heb een eenvoudige blauwe kleurovergang gebruikt (# 02C7FB, # 1F63B4).
Hernoem de eerste laag naar "Achtergrond" en maak vervolgens een nieuwe laag met de naam "Code". U kunt de laag "Code" vergrendelen om te voorkomen dat er ongewenste tekeningen in worden geplaatst.
Sla je werk op en laten we in de code stappen!
Ik ga ervan uit dat je al een basiskennis hebt van ActionScript 3.0, als je specifieke twijfel over zoekwoorden hebt, raadpleeg dan de Flash Help (F1).
Maak een nieuw ActionScript-bestand (Bestand> Nieuw ...).
package Classes / * Importeer vereiste klassen * / import flash.display.MovieClip; import flash.filters.BitmapFilter; import flash.filters.BlurFilter; import flash.events.Event;
Hier importeren we de klassen die we zullen gebruiken, onthoud dat het woord naast "pakket" de naam is van de map waarin onze klasse zich bevindt.
// We moeten de klasse uitbreiden, zodat we de methode addChild () kunnen gebruiken. public class Lights verlengt MovieClip
Door de klasse MovieClip uit te breiden, kan onze klasse alle methoden, eigenschappen en functies van de MovieClip overnemen, in dit geval gebruiken we deze om toegang te krijgen tot de methode addChild ().
Hoewel ze vrijwel zelfverklarende namen hebben, voeg ik korte opmerkingen toe over elke var om zeker te zijn dat het duidelijk is. Ze halen hun waarden uit de parameters van de hoofdfunctie.
private var lightsNumber: int; // Het aantal Lights on Stage privévarxSpeed: int; // De horizontale snelheid van de lampen heeft privé var ySpeed: int; // Verticale snelheid private var lightsDir: String; // Richting van de lichten gaan, dit kan een privé var-gebied zijn Boven, Beneden, Links of Rechts W: int; // De breedte van het gebied waar het effect zal plaatsvinden private var areaH: int; // Hoogte particuliere var-lampjes: Array = nieuwe array (); // Deze array slaat alle Lights MovieClips op zodat we ze kunnen gebruiken buiten de For waar we ze gaan maken.
/ * Hoofdfunctie * / openbare functie 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 = areaHeight; lightsNumber = numberOfLights; lightsDir = dir;
Dit is de functie die we nodig hebben om het effect te starten, we stellen ook de variabele waarden in deze code in.
for (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 deze code gebruiken we een "For" -instructie om het aantal Lights te maken dat de gebruiker in de parameter instelt en een semi-willekeurige snelheid voor elk licht te berekenen.
Hiermee wordt een willekeurige startpositie voor de lichten ingesteld op basis van de parameters van het gebied.
light.x = Math.floor (Math.random () * areaWidth); light.y = Math.floor (Math.random () * areaHeight);
var b: int = Math.floor (Math.random () * 10) + 5; // Berekent een willekeurige vervaging tussen 0-9 en voegt 5 toe aan het resultaat. var blur: BitmapFilter = nieuw BlurFilter (b, b, kwaliteit); // Het BlurFilter-object. var filterArray: Array = new Array (vervaging); // Om het filter toe te passen, hebben we een reeks filters nodig. light.filters = filterArray; // Stelt de filterarray in op het licht
De bovenstaande code past de vervaging toe. Onthoud dat deze code nog steeds deel uitmaakt van de For, dus de Lights krijgen verschillende Blurs.
light.alpha = Math.random () * 0.6 + 0.1;
Een gemakkelijke; Hiermee wordt de alpha-eigenschap ingesteld tussen 0,1 en 0,6.
light.scaleX = Math.round (((Math.random () * (1-minimumScale)) + minimumScale) * 100) / 100; light.scaleY = light.scaleX;
Hiermee wordt de schaal van de lichten ingesteld tussen de oorspronkelijke grootte en de minimale schaalparameter. We gebruiken een ronde methode om de processor op te slaan.
addChild (licht); / * Bewaar lichten in een array om deze later te gebruiken * / lights.push (licht); / * Controleer op lichtrichting * / checkDirection ();
Dit voegt de Lights toe aan het werkgebied en we slaan ze op in een array om ze later te gebruiken. Het is ook de checkDirection-functie om te zien in welke richting de lichten zullen gaan.
Accentsconagua
persoonlijke functie 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!"); Hier gebruiken we een voor om toegang te krijgen tot alle lichten in de array en controleer vervolgens de richtingsvariabele om te bepalen waar de lichten moeten worden verplaatst. Afhankelijk van de richting voegen we de luisteraar toe aan de corresponderende functie.
Dit volgende gedeelte lijkt misschien een beetje ingewikkeld, maar het is makkelijker dan je denkt. In principe verplaatst het het licht, afhankelijk van de snelheid berekend in de hoofdfunctie, en controleert vervolgens of het licht het gebied van het effect heeft "verlaten". Als dat het geval is, stelt het een willekeurige positie in tegengesteld aan de richting die het Licht op gaat.
privéfunctie moveUp (e: Event): void e.target.x + = e.target.xSpeed; e.target.y- = e.target.ySpeed; / * Reset de lichtpositie, eerst Y, daarna 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); / * Omlaag functie * / persoonlijke functie moveDown (e: Event): void e.target.x + = e.target.xSpeed; e.target.y + = e.target.ySpeed; / * Reset lichtpositie, eerst Y, daarna 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); / * Move Right-functie * / private functie moveRight (e: Event): void e.target.x + = e.target.ySpeed; e.target.y + = e.target.xSpeed; / * Reset de lichtpositie, eerst Y, daarna 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); / * Move Left-functie * / private function moveLeft (e: Event): void e.target.x- = e.target.ySpeed; e.target.y- = e.target.xSpeed; / * Reset de lichtpositie, eerst Y, daarna 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);
Sla je klas op (onthoud dat het bestand dezelfde naam moet hebben als de Class) en laten we teruggaan naar de Fla. Open het Actions Panel en schrijf:
Importeer Classes.Lights; var light: Lights = new Lights (); light.init (600, 300, 40, 60, 0xFFFFFF, 0.3, 3, 3, "up", 2); addChild (licht);
Dat is het! Test je film om je mooie geanimeerde achtergrond te zien!
Spelen met de parameters in de klas zal resulteren in veel verschillende effecten, probeer de achtergrond te veranderen, langzamere of hogere snelheden in te stellen, meer lichten te gebruiken, minder vervaging en ga zo maar door!
Ik hoop dat je iets hebt geleerd dat je kunt gebruiken, bedankt voor het lezen!
