Share
I opplæringen lærer vi hvordan du lager en dynamisk, boblende fotodisplayer ved hjelp av FLiNT-partikkelmotor og flash.
Denne applikasjonen vil tilfeldig velge bilder fra en matrise og plassere dem i flytende bobler. Vi vil også legge til en interaktiv bakgrunn til bildet med FLiNT partikkelfysikk.
La oss se på det endelige resultatet vi vil jobbe for:
La oss begynne. Åpne din favorittversjon av Adobe Flash (trenger å jobbe med AS3). Jeg vil bruke Flash CS5 i denne opplæringen, men du trenger ikke. Opprett et nytt AS3-dokument og kontroller at innstillingene er som nedenfor:
La oss nå sette opp FLiNT-motoren. Hvis du ikke allerede har det, last det ned fra github.com. Deretter pakker du inn innholdet i rotkatalogen av prosjektet ditt.
Hvis du vil bli fanget på FLiNT-bruk, anbefaler jeg at du sjekker Lag en Sparkling Bomb Mouse Cursor med FLiNT Particles ut. Det er flott for folk som bare begynner med motoren.
Gå nå til Flashs egenskaper panel. Sett dokumentklasse til "Main". Åpne din favoritt handlingScript editor. Opprett en ny klassefil i katalogen som din FLA er i. Angi navnet til "Main". Her er alt du burde ha for øyeblikket:
pakke offentlig klasse Hoved offentlig funksjon Main ()
Legg til følgende importerklæringer til koden din under pakke Dette vil importere de nødvendige .as-filene til programmet ditt for bruk.
importer flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.geom.Point; importere org.flintparticles.common.actions.Age; importere org.flintparticles.common.actions.ScaleImage; importere org.flintparticles.common.counters.Blast; importere org.flintparticles.common.counters.Steady; importer org.flintparticles.common.displayObjects.RadialDot; importere org.flintparticles.common.emitters.Emitter; importere org.flintparticles.common.initializers.ImageClass; importere org.flintparticles.common.initializers.Initializer; importere org.flintparticles.common.initializers.ScaleImageInit; import org.flintparticles.common.particles.Particle; importere org.flintparticles.threeD.initializers.RotateVelocity; importere org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; importere org.flintparticles.twoD.actions.MouseAntiGravity; importere org.flintparticles.twoD.actions.Move; importere org.flintparticles.twoD.actions.RotateToDirection; importere org.flintparticles.twoD.emitters.Emitter2D; importere org.flintparticles.twoD.initializers.Position; importere org.flintparticles.twoD.initializers.Velocity; importer org.flintparticles.twoD.renderers.DisplayObjectRenderer; importere org.flintparticles.twoD.zones.DiscSectorZone; importere org.flintparticles.twoD.zones.DiscZone; importere org.flintparticles.twoD.zones.LineZone; importere org.flintparticles.twoD.zones.PointZone; importere org.flintparticles.twoD.zones.RectangleZone;
Puh! Jeg vet at det er massevis av filer, vi kan takke FLiNT for deres fantastiske organisasjon på denne :)
La oss nå åpne Flash IDE. Det er opp til deg å lage en 800x600 gradientboks som bakgrunn. Hovedformålet med denne opplæringen er ikke å lære noen nye flash tegning ferdigheter, men jeg kan vise deg hva jeg tegnet i min egen applikasjon. Denne bakgrunnen er også inkludert i kilden til opplæringen.
Nå kan vi velge bildene vi ønsker at programmet skal vises på. Den gode delen om utformingen av applikasjonen er at den kan fungere med så mange bilder som du vil, så lenge du nevner dem i programmets array? Men vi kan komme til det senere.
For nå, la oss bare velge fire bilder fra internett. Her er de fire bildene jeg har valgt:
Dra nå hver på scenen. Trykk F8 å lage en MovieClip. Her er innstillingene du bør velge for hver MovieClip. Bytt bare "1" med nummeret på bildet i hvert tilfelle.
Når du har valgt et antall bilder som tilfredsstiller deg, gå videre til neste trinn :)
La oss nå lage en liste over alle bildene våre i vår Hoved klasse. Legg til den uthevede koden til klassen din
pakke import flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.geom.Point; importere org.flintparticles.common.actions.Age; importere org.flintparticles.common.actions.ScaleImage; importere org.flintparticles.common.counters.Blast; importere org.flintparticles.common.counters.Steady; importer org.flintparticles.common.displayObjects.RadialDot; importere org.flintparticles.common.emitters.Emitter; importere org.flintparticles.common.initializers.ImageClass; importere org.flintparticles.common.initializers.Initializer; importere org.flintparticles.common.initializers.ScaleImageInit; import org.flintparticles.common.particles.Particle; importere org.flintparticles.threeD.initializers.RotateVelocity; importere org.flintparticles.twoD.actions.DeathZone; import org.flintparticles.twoD.actions.Explosion; importere org.flintparticles.twoD.actions.MouseAntiGravity; importere org.flintparticles.twoD.actions.Move; importere org.flintparticles.twoD.actions.RotateToDirection; importere org.flintparticles.twoD.emitters.Emitter2D; importere org.flintparticles.twoD.initializers.Position; importere org.flintparticles.twoD.initializers.Velocity; importer org.flintparticles.twoD.renderers.DisplayObjectRenderer; importere org.flintparticles.twoD.zones.DiscSectorZone; importere org.flintparticles.twoD.zones.DiscZone; importere org.flintparticles.twoD.zones.LineZone; importere org.flintparticles.twoD.zones.PointZone; importere org.flintparticles.twoD.zones.RectangleZone; offentlig klasse Hoved private var imageList: Array = [Image1, Image2, Image3, Image4] offentlig funksjon Main ()
La oss lage et objekt som vil maskere bildet valgt av vårt program. Dette vil bare være en svart sirkel som er den formen vi vil at bildene våre skal ta. Hvis du vil, kan du gjøre noe mer kreativt som en stjerne? Alt fungerer.
Tegn sirkelen, velg den og trykk F8 å lage en ny MovieClip. Pass på å angi registreringspunktet øverst til høyre. Sett også klassenavnet til MaskMC. Slett nå objektet fra scenen. Her er et skjermbilde av hva objektet kan se ut:
Plasser denne variabelen over konstruktøren. Denne variabelen vil bli brukt som nedtellingstimer for å sjekke når du skal lage en ny boble:
privat var countDown: int = 30
La oss legge til en ENTER_FRAME hendelseslytter og en funksjon for å ringe. Legg til følgende kode for konstruktøren din.
addEventListener (Event.ENTER_FRAME, enterFrame)
Nå kan vi lage denne funksjonen for vår hendelselytter å koble til:
privat funksjon enterFrame (e: Event): void // Opprett bobler
Nå som vi har satt vår hendelseslytter opp, kan vi endre funksjonen vår for å gjøre noe hver gang telleren når null. Endre funksjonen din slik at den ser slik ut:
// 30 ganger i et sekund: privat funksjon enterFrame (e: Event): void // Trekk en fra countDown countDown-- // Hvis nedtellingen er på 0 hvis (countDown == 0) // Lag en ny boble // Start nedtelling på 30 countDown = 30
Nå kan vi bare sette inn riktig boble-kode i funksjonen, og vi blir alle satt!
La oss gjøre neste del av vår enterFrame () -funksjon. I dette trinnet skal vi skape boble Filmklipp. Legg til følgende i funksjonen din:
// Skaper en ny filmklip som blir vår boble var myNewBubble: MovieClip = ny MovieClip () // Legger masken til boblen myNewBubble.addChild (new MaskMC ()) // Velger en tilfeldig MovieClip fra rekke bilder. // [Math.floor (Math.random () * imageList.length)] velger bare antall // bildet, basert på antall elementer i listen var myImageInBubble: MovieClip = new imageList [Math.floor ( Math.random () * imageList.length)] () // Legger bildet til boblen minNewBubble.addChild (myImageInBubble) // Masker bildet til masken .getChildAt (0) er det første // objektet lagt til i en MovieClip myImageInBubble.mask = myNewBubble.getChildAt (0)
Slik ser du funksjonen din nå:
privat funksjon 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)
Og nå kan vi legge til slutt på vår enterFrame () -funksjon. Her er ting å legge til under det vi gjorde tidligere:
// Plasser boblen nederst på skjermen minNewBubble.y = 800 // Flytter boblen tilfeldig på X-aksen minNewBubble.x = Math.random () * stage.width // Legger til en hendelseslytter til boblen minNewBubble. addEventListener (Event.ENTER_FRAME, bubbleFrameEnter) addChild (myNewBubble)
Her er et øyeblikksbilde av hva din enterframe-funksjon skal se ut som:
privat funksjon 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
Hvis du husker fra vårt siste skritt, la vi til en ny enterframe hendelse lytter til vår nye boble. Legg denne funksjonen til hovedklassen din slik at boblene beveger seg:
privat funksjon bubbleFrameEnter (e: Event): void // Flytt målet for vår funksjon opp sakte e.target.y - = 7 // Hvis bobles Y er lavere enn null hvis (e.target.y < 0) //Pop and remove bubble
Du kan oppleve at dette reduserer SWFs ytelse. Hvis det er tilfelle, prøv å legge hver bobler til en matrise når den er opprettet, og flytte hver boble i oppstillingen med 7 piksler i enterFrame () -funksjonen.
Vi har ennå ikke gjort våre bobler pop med FLiNT-motoren, men vi kan i det minste fjerne dem og spare litt minne. Her kan vi legge til vår boble ENTER_FRAME-handler for å slette objekter fra scenen og fjerne hendelseslytteren som er knyttet til dem.
// Finn foreldre til boblen vår (målet) // og fortell det å fjerne målet vårt e.target.parent.removeChild (e.target) // Fjern vårt mål (boblens) hendelse // lytter, så det gjør det ikke t gjør noe mer e.target.removeEventListener (Event.ENTER_FRAME, bubbleFrameEnter)
Her er hva din bubbleFrameEnter funksjonen skal se ut som:
privat funksjon 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)
Hvis du bruker en matrise, må du fjerne boblen fra matrisen her.
Gratulerer med etterbehandling Del en av søknaden vår! Nå må vi legge til noen FLiNT-effekter til vårt program for å gjøre det mer realistisk og morsomt å se på!
La oss nå legge til noen bakgrunnsbobleeffekter til vår scene. For å gjøre dette må vi designe en MovieClip å bruke sammen med FLiNT. Pass på at følgende innstillinger er angitt i den nye MovieClip:
Tegn en boble som du vil bruke. Legg merke til at dette er forskjellig fra fotoboblene vi har håndtert. Jeg har valgt følgende bilde under (zoomet 8 ganger). Størrelsen spiller ingen rolle så lenge den er liten nok til å formere seg noen ganger og fortsatt se bra ut.
Vi kan nå komme i gang med FLiNT-motoren. For å begynne, må vi lage vår Emitter og Renderer. Legg til følgende kode over konstruktøren til dokumentklassen din.
// Oppretter en ny DisplayObjectRenderer privat var myRenderer: DisplayObjectRenderer = ny DisplayObjectRenderer (); // Oppretter en 2D FLiNT emitter for standard 2D effekter private var myEmitter: Emitter2D = new Emitter2D ()
Fra emitteren kan vi feste alle de riktige egenskapene til boblene for å få dem til å oppføre seg som vi vil ha dem til. Renderen skal tegne boblene på scenen.
Nå som vi har opprettet vår emitter, kan vi fortsette og legge ved alle handlingene og egenskapene vi vil ha for å få det til å virke akkurat slik vi ønsker det. For å gjøre dette, legg til følgende kode hvor som helst inni konstruktøren din.
// Forteller emitteren for å lage 10 bobler hvert sekund myEmitter.counter = new Steady (10); // Forteller emitteren å bruke bubble_mc MovieClip som vår partikkel myEmitter.addInitializer (new ImageClass (bubble_mc)); // Forteller emitteren for å lage bobler innenfor en viss // linjespanne. Bobleplassene varierer fra (0,700) til (830,700), // spenner fra den ene siden av bunnen av skjermen til den andre myEmitter.addInitializer (ny posisjon (ny LineZone (nytt punkt (0,700), nytt punkt (830.700))) ) // Setter hastigheten på partiklene til X: 0, Y: -65, // slik at de går i en rett retning opp. myEmitter.addInitializer (ny hastighet (ny PointZone (nytt punkt (0, -65)))); // Forteller emitteren å tilfeldigvis skala bilder fra .75x til 5x myEmitter.addInitializer (ny ScaleImageInit (0.75, 5)); // Forteller partiklene å begynne å flytte myEmitter.addAction (new Move ()); // Tegner et rektangel fra øverste venstre hjørne (-40, -40), // i nederste høyre hjørne (850.750). Dette vil være // sikker sone for bobler. Eventuelle bobler som utløper disse grensene // er ødelagt myEmitter.addAction (new DeathZone (new RectangleZone (-40, -40,850,750), true)); // Forteller bobler å bevege seg bort fra musen, og spesifiserer // bevegelseskraften (10), gjengeren som er tilkoblet // til emitteren (myRenderer) og epislon av tyngdekraften (1) myEmitter.addAction (ny MouseAntiGravity (10, myRenderer, 1)) // Bryr opp alle de tingene vi nettopp har angitt :) myEmitter.start ()
Fin jobb på å lage noen fantastiske partikkeleffekter med FLiNT. Å vent? Du kan ikke se dem? Ser ut som vi må dekke det i neste trinn :)
Og nå * drumroll * kommer det siste puslespillet i dette puslespillet. (erm) Jeg mener opplæringen. Nå er alt vi trenger å gjøre, gjengjør partikkeleffekter med vår emitter. For å gjøre dette, legg til følgende kode i bunnen av konstruktøren vår:
// Koble partikkelemitteren til rendereren myRenderer.addEmitter (myEmitter); // Legg gjengivaren til scenen. addChild (myRenderer);
I Trinn 15 Vi dro et tomt sted i vår kode for eksplosjoner da våre bildebobler forlot scenen. Nå er det på tide å legge til noen FLiNT-effekter i blandingen for å få det til å se ut som boblene er virkelig popping.
La oss begynne med å tegne vår eksplosjonspartikkel. Gå inn i Flash IDE og opprett en ny mørkere, mindre boble og (Velg + F8) den. Sett nå klassenavnet til "bubble_mc2".
Endre din bubbleFrameEnter () funksjon for å se ut som under. Ta en titt på kommentarene for en grundig forklaring på hva vi gjør:
privat funksjon bubbleFrameEnter (e: Event): void // Gamle bevegelse ting e.target.y - = 7 // Sjekk når boblen når toppen hvis (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)
Gratulerer med å bruke FLiNT til å lage en dynamisk bildedisplayer. Nå som du har opprettet dette, kan du begynne å bruke teknikkene som vises i denne opplæringen for dine egne personlige prosjekter for å skape noe helt unikt med FLiNT.
Takk for at du leser, og jeg håper at opplæringen var nyttig for deg :)
Accentsconagua