Share
In de tutorial leren we hoe je een dynamische, sprankelende fotodisplayer kunt maken met de FLiNT-deeltjesmotor en flitser.
Deze applicatie selecteert willekeurig afbeeldingen uit een array en plaatst deze in zwevende bubbels. We voegen ook een interactieve achtergrond toe aan de afbeelding met FLiNT-deeltjesfysica.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Laten we beginnen. Open uw favoriete versie van Adobe Flash (moet werken met AS3). Ik gebruik Flash CS5 in deze zelfstudie, maar dat is niet nodig. Maak een nieuw AS3-document en zorg ervoor dat de instellingen zijn zoals hieronder:
Laten we nu de FLiNT-motor instellen. Download het van github.com als je dat nog niet hebt gedaan. Pak vervolgens de inhoud uit in de hoofdmap van uw project.
Als je verstrikt wilt raken in het gebruik van FLiNT, raad ik je aan om Create a Sparkling Bomb Mouse Cursor met FLiNT Particles uit te schakelen. Het is geweldig voor mensen die net beginnen met de motor.
Ga nu naar het eigenschappenvenster van Flash. Stel de documentklasse in op "hoofd". Open je favoriete editor voor actiescript. Maak een nieuw klassebestand in de map waarin uw FLA zich bevindt. Stel de naam in op "Hoofd". Hier is alles wat je op dit moment zou moeten hebben:
package public class Main public function Main ()
Voeg de volgende importinstructies toe aan uw code onder de pakket Dit zal de noodzakelijke .as-bestanden voor uw gebruik in uw programma importeren.
import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Point; import org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.ScaleImage; import org.flintparticles.common.counters.Blast; import org.flintparticles.common.counters.Steady; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.emitters.Emitter; import org.flintparticles.common.initializers.ImageClass; import org.flintparticles.common.initializers.Initializer; import org.flintparticles.common.initializers.ScaleImageInit; import org.flintparticles.common.particles.Particle; import org.flintparticles.threeD.initializers.RotateVelocity; import org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; import org.flintparticles.twoD.actions.MouseAnti Gravity; import org.flintparticles.twoD.actions.Move; import org.flintparticles.twoD.actions.RotateToDirection; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.twoD.initializers.Position; import org.flintparticles.twoD.initializers.Velocity; import org.flintparticles.twoD.renderers.DisplayObjectRenderer; import org.flintparticles.twoD.zones.DiscSectorZone; import org.flintparticles.twoD.zones.DiscZone; import org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone;
Oef! Ik weet dat dit een heleboel bestanden zijn, we kunnen FLiNT bedanken voor hun geweldige organisatie op deze :)
Laten we nu de Flash IDE openen. Het is aan jou om een 800x600 verloopvak als achtergrond te maken. Het belangrijkste doel van deze tutorial is niet om nieuwe flash-tekenvaardigheden te leren, maar ik kan je laten zien wat ik heb getekend in mijn eigen toepassing. Deze achtergrond is ook opgenomen in de bron van de zelfstudie.
Nu kunnen we de afbeeldingen selecteren die we met onze applicatie willen laten weergeven. Het goede aan het ontwerp van de applicatie is dat deze met zoveel afbeeldingen kan werken als je wilt, zolang je ze maar opgeeft in de array van de applicatie? Maar daar komen we later op terug.
Laten we voorlopig vier afbeeldingen van internet selecteren. Dit zijn de vier afbeeldingen die ik heb geselecteerd:
Sleep nu een ieder naar het werkgebied. Duwen F8 om een MovieClip te maken. Hier zijn de instellingen die u voor elke MovieClip moet kiezen. Vervang nu in elk geval de "1" door het nummer van de afbeelding.
Nadat je een aantal afbeeldingen hebt gekozen die aan je voldoen, ga je door naar de volgende stap :)
Laten we nu een lijst maken van al onze afbeeldingen in onze Hoofd klasse. Voeg de gemarkeerde regel code toe aan uw klas
pakket import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Point; import org.flintparticles.common.actions.Age; import org.flintparticles.common.actions.ScaleImage; import org.flintparticles.common.counters.Blast; import org.flintparticles.common.counters.Steady; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.emitters.Emitter; import org.flintparticles.common.initializers.ImageClass; import org.flintparticles.common.initializers.Initializer; import org.flintparticles.common.initializers.ScaleImageInit; import org.flintparticles.common.particles.Particle; import org.flintparticles.threeD.initializers.RotateVelocity; import org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; import org.flintparticles.twoD.actions.MouseAnti Gravity; import org.flintparticles.twoD.actions.Move; import org.flintparticles.twoD.actions.RotateToDirection; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.twoD.initializers.Position; import org.flintparticles.twoD.initializers.Velocity; import org.flintparticles.twoD.renderers.DisplayObjectRenderer; import org.flintparticles.twoD.zones.DiscSectorZone; import org.flintparticles.twoD.zones.DiscZone; import org.flintparticles.twoD.zones.LineZone; import org.flintparticles.twoD.zones.PointZone; import org.flintparticles.twoD.zones.RectangleZone; public class Main private var imageList: Array = [Image1, Image2, Image3, Image4] public function Main ()
Laten we een object maken dat de afbeelding maskeert die door ons programma is geselecteerd. Dit zal gewoon een zwarte cirkel zijn, wat de vorm is die we onze afbeeldingen willen laten zien. Als je wilt, kun je iets creatiever dan een ster doen? Het werkt allemaal.
Teken de cirkel, selecteer deze en druk op F8 om een nieuwe MovieClip te maken. Zorg ervoor dat u het registratiepunt in de rechterbovenhoek instelt. Stel ook de klassenaam in op MaskMC. Wis nu het object van de stage. Hier is een screenshot van hoe het object er kan uitzien:
Plaats deze variabele boven de constructor. Deze variabele wordt gebruikt als een countdown-timer om te controleren wanneer een nieuwe bubbel moet worden gemaakt:
privé var countDown: int = 30
Laten we nu een toevoegen ENTER_FRAME gebeurtenislistener en een functie om te bellen. Voeg de volgende code toe aan uw constructor.
addEventListener (Event.ENTER_FRAME, enterFrame)
Nu kunnen we deze functie voor onze gebeurtenislistener maken om te linken naar:
private function enterFrame (e: Event): void // Maak bubbels
Nu we onze gebeurtenislistener hebben ingesteld, kunnen we onze functie zodanig aanpassen dat we elke keer dat de teller nul is iets moeten doen. Pas je functie aan om er als volgt uit te zien:
// 30 keer per seconde: private functie enterFrame (e: Event): void // Trek één af van countdownown countDown-- // Als het aftellen op 0 staat als (countDown == 0) // Maak een nieuwe bubble // Start het aftellen bij 30 countDown = 30
Nu kunnen we gewoon de juiste bubble making-code in de functie invoegen en we zijn er helemaal klaar voor!
Laten we het volgende deel van onze functie enterFrame () doen. In deze stap zullen we de bubbel Filmclip. Voeg het volgende toe aan uw functie:
// Creëert een nieuwe filmclip die onze bubbelvariant is myNieuweBubble: MovieClip = nieuwe MovieClip () // Voegt het masker toe aan de bubble myNewBubble.addChild (nieuwe MaskMC ()) // Selecteert een willekeurige MovieClip uit de reeks afbeeldingen. // [Math.floor (Math.random () * imageList.length)] kiest gewoon het aantal // de afbeelding, op basis van het aantal items in de lijst var myImageInBubble: MovieClip = new imageList [Math.floor ( Math.random () * imageList.length)] () // Voegt de afbeelding toe aan de bubble myNewBubble.addChild (myImageInBubble) // Maskeer de afbeelding met het masker .getChildAt (0) is het eerste // -object dat is toegevoegd aan een MovieClip myImageInBubble.mask = myNewBubble.getChildAt (0)
Dit is hoe je functie er nu uit moet zien:
private functie enterFrame (e: Event): void countDown-- if (countDown <= 0) var myNewBubble:MovieClip = new MovieClip() myNewBubble.addChild(new MaskMC()) var myImageInBubble:MovieClip = new imageList[Math.floor(Math.random() * imageList.length)]() myNewBubble.addChild(myImageInBubble) myImageInBubble.mask = myNewBubble.getChildAt(0)
En nu kunnen we de laatste hand leggen aan onze functie enterFrame (). Hier zijn de dingen die moeten worden toegevoegd onder wat we eerder hebben gedaan:
// Plaatst de bel onder aan het scherm myNewBubble.y = 800 // Verplaatst de bubbel willekeurig op de X-as myNewBubble.x = Math.random () * stage.width // Voegt een gebeurtenislistener toe aan de bubble myNewBubble. addEventListener (Event.ENTER_FRAME, bubbleFrameEnter) addChild (myNewBubble)
Hier is een momentopname van hoe uw enterframefunctie eruit zou moeten zien:
private functie enterFrame (e: Event): void countDown-- if (countDown <= 0) var myNewBubble:MovieClip = new MovieClip() myNewBubble.addChild(new MaskMC()) var myImageInBubble:MovieClip = new imageList[Math.floor(Math.random() * imageList.length)]() myNewBubble.addChild(myImageInBubble) myImageInBubble.mask = myNewBubble.getChildAt(0) myNewBubble.y = 800 myNewBubble.x = Math.random() * stage.width myNewBubble.addEventListener(Event.ENTER_FRAME, bubbleFrameEnter) addChild(myNewBubble) countDown = 30
Als je het nog herinnert van onze laatste stap, hebben we een nieuwe enterframe-evenementlistener toegevoegd aan onze nieuwe bubbel. Voeg deze functie toe aan je hoofdklasse zodat de bubbels bewegen:
private function bubbleFrameEnter (e: Event): void // Verplaats het doelwit van onze functie langzaam omhoog e.target.y - = 7 // Als de Y van de ballon lager is dan nul als (e.target.y < 0) //Pop and remove bubble
Mogelijk merkt u dat dit de prestaties van uw SWF verlaagt. Als dit het geval is, probeert u elke bubbel aan een array toe te voegen wanneer deze is gemaakt en verplaatst u elke bubbel in de array met 7 pixels omhoog in de functie enterFrame ().
We moeten nog steeds onze bubbels maken met de FLiNT-engine, maar we kunnen ze op zijn minst verwijderen en wat geheugen besparen. Dit is wat we kunnen toevoegen aan de ENTER_FRAME-handler van onze bubbel om onze objecten uit het werkgebied te verwijderen en de bijbehorende gebeurtenislistener te verwijderen..
// Zoek de ouder van onze bubbel (doel) // en vertel hem om ons doel te verwijderen. E.target.parent.removeChild (e.target) // Verwijder de gebeurtenis // luisteraar van onze doel (de bubbel), dus dat doet het niet t doet niets meer e.target.removeEventListener (Event.ENTER_FRAME, bubbleFrameEnter)
Hier is wat je bubbleFrameEnter functie moet er als volgt uitzien:
private function bubbleFrameEnter (e: Event): void e.target.y - = 7 if (e.target.y < 0) //FLiNT explosion FX here //_______________________ e.target.parent.removeChild(e.target) e.target.removeEventListener(Event.ENTER_FRAME, bubbleFrameEnter)
Als u een array gebruikt, moet u de ballon hier uit de array verwijderen.
Gefeliciteerd met de afwerking Deel een van onze applicatie! Nu moeten we wat FLiNT-effecten toevoegen aan ons programma om het realistischer en leuker te maken om te bekijken!
Laten we nu wat achtergrondbeleffecten toevoegen aan onze scène. Om dit te doen, moeten we een MovieClip ontwerpen om met FLiNT te gebruiken. Zorg ervoor dat de volgende instellingen zijn ingesteld in je nieuwe MovieClip:
Teken een luchtbel die je zou willen gebruiken. Merk op dat dit verschilt van de fotobubbels waarmee we te maken hebben gehad. Ik heb de volgende afbeelding hieronder gekozen (8 keer vergroot). De grootte doet er niet toe, zolang deze maar klein genoeg is om een aantal keer te vermenigvuldigen en er toch goed uit te zien.
We kunnen nu aan de slag met de FLiNT-motor. Om te beginnen, moeten we onze Emitter en Renderer maken. Voeg de volgende code toe boven de constructor van uw documentklasse.
// Creëert een nieuwe DisplayObjectRenderer private var myRenderer: DisplayObjectRenderer = new DisplayObjectRenderer (); // Creëert een 2D FLiNT-zender voor standaard 2D-effecten privé var myEmitter: Emitter2D = nieuwe Emitter2D ()
Van de emittent kunnen we alle juiste eigenschappen aan de bubbels koppelen zodat ze zich gedragen zoals we willen. De renderer zal de bellen op het podium tekenen.
Nu we onze emitter hebben gemaakt, kunnen we alle acties en eigenschappen toevoegen die we willen om het te laten reageren zoals we het willen. Hiertoe voegt u de volgende code overal in uw constructor toe.
// Vertelt de emitter om elke seconde 10 bubbels te maken myEmitter.counter = new Steady (10); // Laat de emitter de bubble_mc MovieClip gebruiken als onze particle myEmitter.addInitializer (nieuwe ImageClass (bubble_mc)); // Laat de emitter bellen binnen een bepaalde // -regel overspannen. Luchtbellocaties variëren van (0,700) tot (830,700), // van een zijde van de onderkant van het scherm naar de andere myEmitter.addInitializer (nieuwe positie (nieuwe LineZone (nieuw punt (0,700), nieuw punt (830,700))) ) // Stelt de snelheid van de deeltjes in op X: 0, Y: -65, // waardoor ze in een rechte richting omhoog gaan. myEmitter.addInitializer (nieuwe Velocity (nieuwe PointZone (nieuw Point (0, -65)))); // Vertelt de emitter om afbeeldingen willekeurig te schalen van .75x tot 5x myEmitter.addInitializer (nieuwe ScaleImageInit (0.75, 5)); // Vertelt de deeltjes om te beginnen met het verplaatsen van myEmitter.addAction (new Move ()); // Tekent een rechthoek vanuit de linkerbovenhoek (-40, -40), // naar de rechter benedenhoek (850.750). Dit is de // veilige zone voor bubbels. Alle bubbels die deze grenzen verlaten // worden vernietigd myEmitter.addAction (nieuwe DeathZone (nieuwe RectangleZone (-40, -40.850.750), true)); // Vertelt bubbels om van de muis weg te gaan, specificeert // de kracht van de beweging (10), de renderer // aangesloten op de emitter (myRenderer) en de epislon van de zwaartekracht (1) myEmitter.addAction (new MouseAnti Gravity (10, myRenderer, 1)) // Vuurt alle dingen op die we zojuist hebben opgegeven :) myEmitter.start ()
Goed gedaan om geweldige deeltjeseffecten te maken met FLiNT. Oh wacht? je kunt ze niet zien? Lijkt erop dat we dat in de volgende stap moeten behandelen :)
En nu * drumroll * komt het laatste puzzelstukje in deze puzzel. (erm) Ik bedoel tutorial. Nu hoeven we alleen nog maar onze deeltjeseffecten met onze zender te maken. Om dit te doen, voeg de volgende code toe aan de onderkant van onze constructor:
// Verbind de deeltjesemitter met de renderer myRenderer.addEmitter (myEmitter); // Voeg de renderer toe aan het werkgebied. addChild (myRenderer);
In Stap 15 we hebben een lege plek in onze code gelaten voor explosies toen onze beeldbellen het podium verlieten. Nu is het tijd om wat FLiNT-effecten toe te voegen aan de mix, zodat het lijkt alsof de bubbels echt knappen.
Laten we beginnen met het tekenen van ons explosiedeeltje. Ga naar de Flash-IDE en maak een nieuwe donkere, kleinere bubbel en (selecteer + F8) het. Stel nu de klassenaam in op "bubble_mc2".
Wijzig uw bubbleFrameEnter () functie om er als volgt uit te zien. Bekijk de commentaren voor een uitgebreide uitleg van wat we doen:
privéfunctie bubbleFrameEnter (e: Event): void // Oude bewegingsartikelen e.target.y - = 7 // Controleer wanneer de bubble de top bereikt als (e.target.y < 0) //Create a new particle emitter for the explosion var newE:Emitter2D = new Emitter2D(); //Add the emitter to the renderer myRenderer.addEmitter(newE); //This time we want to use a "blast" //counter. Blast(20) tells the emitter to //create 20 pieces in the explosion newE.counter = new Blast(20); //Give the emitter our particle MovieClip newE.addInitializer(new ImageClass(bubble_mc2)); //Set the position of the created particles to be a //"DiscZone". This is basically a circular area //where particles can be created. //DiscZone(centerPoint:Pointer,innerRadius,outerRadius) //We are setting the center point to be approximately //the center of the bubble and both radius's shall be //set to "50" newE.addInitializer(new Position(new DiscZone(new Point(e.target.x + 75, e.target.y + 75),50,50))); //Creates a new explosion //(power:Number, x:Number, y:Number, expansionRate:Number, depth:Number, epsilon:Number) //The explosion has a power of 5, starts at the center of our DisZone, //has a expansionRate of 2000, depth of 20, and an epislon of 1 newE.addAction(new Explosion(5, e.target.x + 75 , e.target.y + 75, 2000,20, 1)); //Tells the emitter to start moving the particles newE.addAction(new Move()); //Sets the death zone of particles outside of the screen newE.addAction(new DeathZone(new RectangleZone(-30, -30, 820, 620), true)); //Starts the emitter newE.start(); e.target.parent.removeChild(e.target) e.target.removeEventListener(Event.ENTER_FRAME, bubbleFrameEnter)
Gefeliciteerd met het gebruik van FLiNT om een dynamische beeldweergave te maken. Nu je dit hebt gemaakt, kun je de technieken uit deze tutorial gebruiken voor je eigen persoonlijke projecten om iets unieks te creëren met FLiNT.
Bedankt voor het lezen en ik hoop dat de zelfstudie nuttig voor je was :)
Accentsconagua