Share
In deze zelfstudie maken we een dynamisch regeneffect met ActionScript 3.0. Het effect kan op verschillende manieren worden aangepast door slechts enkele regels code te wijzigen. Laten we beginnen!
Laten we eens kijken naar het uiteindelijke effect waar we naartoe zullen werken:
We zullen een eenvoudige regendruppel tekenen en dan zullen we met behulp van onze ActionScript-vaardigheden de MovieClip dupliceren, verplaatsen en positioneren om een mooi regenachtig effect te krijgen.
Maak een nieuw ActionScript 3-document (Bestand> Nieuw ...). Stel de Stage-maat in op de gewenste afmetingen, ik heb 600 x 300 px gebruikt.
Voeg toe of teken een afbeelding om als achtergrond te gebruiken. Ik heb een aangepaste afbeelding van JinThai gebruikt, gelicenseerd onder Creative Commons.
Hernoem de eerste laag naar "Achtergrond" en maak een nieuwe laag met de naam "Code" (we zullen deze gebruiken om onze ActionScript aan te zetten). U kunt de laag "Code" vergrendelen om te voorkomen dat er ongewenste tekeningen in worden geplaatst.
Maak een afbeelding om te gebruiken als de regendruppel. Zet de kleur op wit en gebruik een lineair verloop voor de alpha, mijn is 40 tot 15. Converteer het naar een MovieClip en noem het "Drop", vergeet niet om het selectievakje "Exporteren voor ActionScript" aan te vinken.
Laten we beginnen met wat code in een apart ActionScript-bestand:
package Classes / * Importeer vereiste klassen * / import flash.display.MovieClip; import flash.events.Event;
Hier importeren we de klassen die we zullen gebruiken. Vergeet niet 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 Rain verlengt MovieClip
Door de klasse MovieClip uit te breiden, kan onze klasse alle methoden, eigenschappen en functies overnemen die de MovieClip heeft. In dit geval gebruiken we het om toegang te krijgen tot de methode addChild ().
Hier gebruiken we een exclusieve Flash Player 10 Klasse "Vector". Simpel gezegd, de Vector Class werkt als een array, maar is aanzienlijk sneller.
private var offset: int = 50; // Dit is het offset-gebied in pixels dat het effect zal hebben. Zonder dit, zullen de hoeken van het effectgebied regenvrij zijn private var drops Number: int; // Het aantal regendruppels; de waarde ervan is ingesteld in de parameters private var dropsVector: Vector.= nieuwe Vector. (); // De vector die elke regendruppel opslaat
openbare functie init (drops: int, fallSpeed: int, windSpeed: int, hArea: int, vArea: int, dir: String): void dropsNumber = drops;
De hoofdfunctie, met enkele parameters waardoor het effect eenvoudig aan te passen is aan uw behoeften. Je kunt het aantal druppels, de snelheid waarmee de druppels vallen, de snelheid waarmee de druppels horizontaal bewegen, de grootte van het effectgebied en de richting van de regen (links of rechts) veranderen.
We stellen de dropsNumber-waarde hier in.
Standaard is de offset var ingesteld om met de linkerkant te werken, dus we moeten controleren waar de regen zal komen en de offset veranderen als de richting goed is.
if (dir == "right") offset * = -1;
Om verschillende exemplaren van de Drop MovieClip te tonen, moeten we een nieuw Drop-object maken in een "For" -instructie:
for (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;
We gebruiken de variabele "drops" om het door de gebruiker gedefinieerde aantal drops te krijgen en de variabelen in de MovieClip in te stellen voor later gebruik.
Stel een initiële willekeurige positie in voor de Drops.
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;
Hiermee wordt de schaal van de druppels ingesteld tussen 0,3 en de oorspronkelijke grootte.
dropsVector.push (drop); addChild (drop); // End of For inTheDirection (); // Einde van init-functie
Deze code voegt de Drop MovieClip toe aan de Vector en vervolgens aan het werkgebied. Het roept ook de functie "richting" op.
Accentsconagua
private function 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 deze functie gebruiken we een ander "Voor" om toegang te krijgen tot de MovieClips in de Vector. Vervolgens controleren we de richtingparameter en voegen een luisteraar toe aan de overeenkomstige functie. Dit zal allemaal zorgen voor de beweging en de positie.
private function 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 functie 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;
Dit verplaatst de Drops op basis van de parameters van de hoofdfunctie. Vervolgens wordt de positie opnieuw ingesteld wanneer druppels buiten het effectgebied bewegen.
Dat is de klas klaar, om er gebruik van te maken gaan we terug naar de Flash IDE, open het Actions Panel en schrijf:
importeer klassen. Regen; var rain: Rain = new Rain (); rain.init (200, 50, 5, 600, 300, "left"); addChild (regen);
Hiermee wordt een nieuw regenobject gemaakt en wordt de hoofdfunctie aangeroepen om het effect te starten. Uiteindelijk voegen we het effect toe aan de fase.
Vergeet niet dat je met de parameters kunt spelen om verschillende effecten te krijgen en dat je de druppels ook kunt veranderen door te tekenen wat je maar wilt. Blijf verschillende combinaties proberen om het exacte effect te krijgen dat je wilt.
Ik hoop dat je net zo veel genoten hebt van het lezen van de tut als ik het heb geschreven. Bedankt voor het lezen!
