Create din egen Actionscript 3.0 Pixel Explosion Effect
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil du lære hvordan du oppretter en effekt som sikkert har fanget øyet før (for eksempel i filer som denne), Pixel Explosion. Under prosessen med å gjøre det vi vil lære hvordan du kan hente BitmapData fra en MovieClip, hvordan bruke en tweening motor og hvordan du bruker hendelsen lyttere.
La oss komme i gang da!
Trinn 1: Sette opp Stage
Det første vi skal gjøre er å lage en AS3 flash-fil. Så får vi satt opp vår scene til 400px x 400px og 30 fps. Vi skal koding på tidslinjen for å gjøre ting enkelt, men de som vet å programmere i OOP er velkommen til å skrive denne koden i klassene. Du trenger en grunnleggende kunnskap om AS3 å forstå alle prosessene denne opplæringen innebærer; men jeg vil prøve å holde det veldig enkelt. Den blå svevet knapper er de du må trykke i IDE. Det kan virke som mye arbeid i starten, men det er virkelig veldig enkelt ..
Trinn 2: Tegning vår hovedbildet
Vi vil nå trekke en vektor bilde av hva vi trenger . Du kan virkelig sette opp et bilde med denne effekten (JPG, PNG), men vektorer er kjøligere. Som du vil legge merke til, jeg er ikke mye av en designer. Alt du trenger å gjøre er å tegne bildet ditt (eller importere en jpg fra datamaskinen), velg den og konvertere den til en MovieClip (trykk F8 på Windows)
Trinn 3:. Forberedelse til Kode
Når du har forvandlet ditt bilde til en MovieClip, kan du forberede det for kode som vil målrette den. Vi vil opprette et nytt lag for handlingene (1.) og deretter gi den en forekomst navn mcLogo (2.). Så får vi importerer klasser for bruk i våre handlinger lag. For denne effekten vil vi trenger en god tweening motor. Den beste jeg fant som håndterer både hastighet og stabilitet er TweenMax. Du kan laste det ned fra http://blog.greensock.com/tweenmaxas3/(donere hvis du liker det). Husk å kopiere klasser katalog i samme katalog som FLA (som du kan se i den blå boksen). Endelig importere TweenMax klasse i tidslinjen din (3.)
Trinn 4:. Forberede for handlingen
Vi skal nå sette opp scenen og våre viktigste variablene. Vi vil justere scenen til TOP_LEFT hjørnet og sette den opp slik at den ikke skalerer innholdet. På variabler side, vil vi lage en beholder for å holde alle pikslene som vil eksplodere. Vi vil også lage en GlowFilter, dette er valgfritt selvfølgelig, men det vil styrke awesomeness av effekten. "Animere" er en bryter som slår sant når effekten finner sted og "pixelBMP" er bitmap data i bildet
stage.align = StageAlign.TOP_LEFT.; stage.scaleMode = StageScaleMode.NO_SCALE; Var pixelContainer: MovieClip = new MovieClip (); Var glød: GlowFilter = new GlowFilter (0xFFFF00, 1, 10, 10,5,2); Var animere: Boolean = false; Var pixelBMP: BitmapData;
Deretter vil vi skape gjenta variabler og tilordne piksel beholder posisjon til å være det samme som ditt bilde
Var jeg.: int = 0; Var j: int = 0;
Trinn 5: Lag Pixel Holders
Vi vil nå trekke ut bitmap data (pixel farger) fra det bildet du sette opp (1.). Husk disse to linjene, the'll hjelpe deg i andre prosjekter også. Vi vil opprette et nytt symbol fra biblioteket (2.) og klikk på knappen Avansert. Når klikket, velg Export for Actionscript (3.). Søk etter klasse tekstfeltet og skriv inn "myPixel"
Trinn 6:. Sett opp MyPixel Class
Nå skal vi sette opp pixel container. Vi vil delta i vår nyopprettede pixel effekt og foreta et lag som heter "action"
Trinn 7:. Sette opp Pixels å motta Colors
På handlinger lag vi skal sette opp bitmap. Denne lille stykke kode vil hjelpe deg hver gang du ønsker å manipulere bitmapData av et objekt (for eksempel med andre nyttige effekter som desaturation og uskarphet).
PixelBMP = new BitmapData (mcLogo.width, mcLogo.height, sant, 0x000000) pixelBMP.draw (mcLogo)
Jeg har laget en sirkel som holder fargen på hver piksel, men du kan tilpasse den til hva du vil; firkant, trekant eller en enkel piksel. Vi legger piksel glød effekt fra funksjonen parameter:
Var orgX: int = 0; Var orgie: int = 0; Var bmpImg: Bitmap, funksjon setUpPixel (bdData: BitmapData, glød: GlowFilter) {var mc: MovieClip = ny MovieClip (); mc.graphics.beginFill (bdData.getPixel (0,0)); mc.graphics.drawCircle (0,0,2) mc.graphics.endFill (); mc.filters = [glow]; addChild (mc); }
Trinn 8: Crossing Alle piksler
Vi vil opprette to "for" utsagn for å dekke alle pikslene i vårt bilde. Den første for (i) er vertikal og den andre (j) for horisontal. Den getPixel metoden returnerer en enhet som representerer fargen til pikselen i denne posisjon. Hvis det ikke er null, vil den starte driften presentert på Trinn 9. Vi vil krysse piksler to og to på grunn av minnehåndtering
for. (I = 0; i < mcLogo.height; i + = 2) for (j = 0; j < mcLogo.width; j + = 2)
Trinn 9: Å gi farge til Pixels
Vi starter ved å tildele pixel farge til gløden filteret. Deretter vil vi lage en ny myPixel at vi vil kalle "pixel_mc". Vi kaller funksjonen "setUpPixel" som vi definerte i trinn 7. Dette passerer bitmapData - 2 piksler bred, 2 piksler høyt, farge av dagens pixel, originalX, opprinnelig og gløden filter. Til slutt legger vi dette pixel til pixel container (linje 12)
for (i = 0; i < mcLogo.height; i + = 2) for (j = 0; j < mcLogo.width; j + = 2 ) {if (pixelBMP.getPixel (j, i) > 0) {glow.color = pixelBMP.getPixel (j, i); Var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (nye BitmapData (2, 2, falsk, pixelBMP.getPixel (j, i)), glød) pixel_mc.y = i; pixel_mc.x = j; pixelContainer.addChild (pixel_mc); pixelContainer.visible = false; }}
Trinn 10:. Testing Hva vi har gjort så langt
Små feil er svært vanlig i programmering, det er derfor vi trenger å teste vår MovieClip fra tid til annen. Dette gir oss vårt bilde, men også noen uskarphet. Uskarphet er på grunn av den gløden filter, så ingen fare der. Som du kanskje allerede vet, trenger vi ikke disse piksler for å være synlig, bortsett fra når de har vår effekten. Inntil da har vi vår fint bilde. Så alt du trenger å gjøre i dette trinnet er uncomment linje 13 - pixelContainer.visible = false; Hotell og du får din opprinnelige bildet tilbake Vi har pikslene på plass, nå er alt vi trenger å gjøre er å animere dem. Dette er var TweenMax entrer scenen. Vi starter funksjonen ved å gjøre det opprinnelige bildet usynlig og piksler synlige. Det neste vi skal sette det originale bildet og den knappen som vi skal lage senere (for å aktivere funksjonen) øverst mest indeksen. Husk denne funksjonen - setChildIndex (yourmc, numChildren-1) Det er der pikslene vil komme til liv. Den "for" krysser alle barn av pixelContainer. Pikselen er hentet gjennom getChildAt (i) metoden. Den xdest og ydest er noen tilfeldige destinasjoner der våre piksler vil fly til (siden Math.random () returnerer et tall mellom 0 og 1 er det nødvendig å multiplisere det). Til slutt legger vi overgangen og en letthet typen gjennom TweenMax For implosjon, selvfølgelig, vi trenger å lagre våre opprinnelige verdier et sted. Vi vil opprette 2 arrays (1.) - XArray og yArray som lagrer disse verdiene. Etter dette (2.) vil vi sette inn i for (j = 0; j < mcLogo.width; j + = 2). Nå vil vi også legge til en retract effekt. Det er stort sett det samme som eksplosjonen effekt, bare det vil bruke verdiene som er lagret i den tidligere opprettede utvalg La oss lage vår knappen. Start med å tegne den (en.). Gjør det til en MovieClip (som du lærte i trinn 2. Lage et nytt tiltak lag og skrive stop ();.. (2.) Dette hindrer vår mc fra looping Vi vil nå sette en keyframe for når knappen er trykket ( . 3.) Dette vil endre teksten og viser at nå, når du klikker på den, det vil reversere prosessen Vi må gjøre det samme vi gjorde i vår image, noe som gir den knappen en forekomst navn buttonMode eiendom komplekser normal markøren for å endre i handlingen en. mouseChildren eiendom når satt til false forbyr knappene barn å stjele mouseEvents. addEventListener metoden gjør at knappen for å starte funksjonen clickHandler når klikket (MouseEvent.CLICK). Vi vil nå sette opp funksjon som setter opp eksplosjon. "animere" er verdien som angir om pikslene skal eksplodere eller implodere Legge filtre, endre filtre verdier og modifisere lettelser typer overgangene vil store ting å leke med. For å endre lettelser typene du trenger å importere lettelser klasser. Du kan forhåndsvise tweening typene her Hvis du har testet filmen som vi har gått sammen, kan du har lagt merke til at overgangen mellom piksler og selve bildet er ganske tøffe. Vi kan legge en onComplete parameter på implode tween å kalle en funksjon som jevner at overgangen: Så, hva har vi dekket i dag? Jeg håper du likte denne opplæringen. Takk for lesing!
Trinn 11:. Sette opp Explosion Effect
det vil hjelpe deg i andre prosjekter
funksjonen eksplodere () {pixelContainer.alpha = 1.; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true;}
Trinn 12
funksjonen eksplodere () {pixelContainer.alpha = 1.; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true; for (var i: int = 0; i < pixelContainer.numChildren, jeg ++) {var pixel_mc: myPixel = myPixel (pixelContainer.getChildAt (i)); pixel_mc.visible = true; Var xdest: int = Math.random () * (stage.stageWidth + 300) -300; Var ydest: int = Math.random () * (stage.stageHeight + 300) -300; TweenMax.to (pixel_mc, 14, {x: xdest, y: ydest, letthet: Circ.easeOut});}}
Trinn 13: Implosion
Koden for å presse verdiene i neste indeks
Var xArray : Array = new Array (); Var yArray: Array = new Array (); for (i = 0; i0) {glow.color = pixelBMP.getPixel (j, i); Var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (nye BitmapData (2, 2, falsk, pixelBMP.getPixel (j, i)), glød) pixel_mc.y = i; pixel_mc.x = j; xArray.push (j); yArray.push (i); pixelContainer.addChild (pixel_mc); pixelContainer.visible = false; }}
Step 14
Trinn 15:. The Button
Trinn 16:. Eksportere vår Knapp for Action
Trinn 17:. Sette opp Button
funksjon initbutton () {btn_mc.buttonMode = true; btn_mc.mouseChildren = false; btn_mc.addEventListener (MouseEvent.CLICK, clickHandler);} initbutton ();
Trinn 18: The Detonator
funksjon clickHandler (e: MouseEvent) {if (animere == false) {eksplodere ();. animere = true; btn_mc.gotoAndStop (2); } Else {implodere () btn_mc.gotoAndStop (1); }}
Trinn 19: Tilpasse
import gs.easing *;
Trinn 20:.. Smoothing Transition
onComplete: smoothitfunction smoothit () {mcLogo.visible = true; TweenMax.to (pixelContainer, 1, {alfa: 0, onComplete: function () {pixelContainer.visible = false; mcLogo.visible = true; animere = false;}}}
Trinn 21: Gjennomgang
Importere våre hovedklassene.
Justere scenen.
Erklærte de viktigste variablene.
Legge til en piksel container på scenen.
Trekke Bitmap data fra vår image.
Opprette en MyPixel klasse og sende fargen på hver av bildepunktene til disse piksler.
Å gjøre en funksjon som velger alle piksler, så tweens dem til en tilfeldig posisjon.
Å gjøre en funksjon som tweens pikslene tilbake til utgangsposisjon.
Å gjøre en knapp som kaller disse funksjonene.
Final Kode
import gs.TweenMax; import gs.easing *; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; Var pixelContainer:. MovieClip = new MovieClip ( ); Var gløden: GlowFilter = new GlowFilter (0xFFFF00, 1, 10, 10,5,2); Var animere: Boolean = false; Var pixelBMP: BitmapData; Var i: int = 0; Var j: int = 0; Div xArray: Array = new Array (); Var yArray: Array = new Array (); addChild (pixelContainer) pixelContainer.x = mcLogo.x; pixelContainer.y = mcLogo.y; pixelBMP = new BitmapData (mcLogo.width, mcLogo. høyde, sant, 0x000000) pixelBMP.draw (mcLogo) for (i = 0; i < mcLogo.height; i + = 2) for (j = 0; j < mcLogo.width; j + = 2) {if (pixelBMP.getPixel (j, i) > 0) {glow.color = pixelBMP.getPixel (j, i); Var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (nye BitmapData (2, 2, falsk, pixelBMP.getPixel (j, i)), glød) pixel_mc.y = i; pixel_mc.x = j; xArray.push (j); yArray.push (i); pixelContainer.addChild (pixel_mc); pixelContainer.visible = false; }} Funksjon initbutton () {btn_mc.buttonMode = true; btn_mc.mouseChildren = false; btn_mc.addEventListener (MouseEvent.CLICK, clickHandler); funksjon clickHandler (e: MouseEvent) {if (animere == false) {eksplodere (); animere = true; btn_mc.gotoAndStop (2); } Else {implodere () btn_mc.gotoAndStop (1); }}} Initbutton (); funksjonen eksplodere () {pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true; for (var i: int = 0; i < pixelContainer.numChildren, jeg ++) {var pixel_mc: myPixel = myPixel (pixelContainer.getChildAt (i)); pixel_mc.visible = true; Var xdest: int = Math.random () * (stage.stageWidth + 300) -300; Var ydest: int = Math.random () * (stage.stageHeight + 300) -300; TweenMax.to (pixel_mc, 14, {x: xdest, y: ydest, letthet: Circ.easeOut}); }} funksjon implode () {for (var i: int = 0; i < pixelContainer.numChildren, jeg ++) {var pixel_mc: myPixel = myPixel (pixelContainer.getChildAt (i)); pixelContainer.visible = true; TweenMax.to (pixel_mc, 3, {y: yArray [i], x: xArray [i], enkel: Strong.easeIn, onComplete: smoothit}); }} funksjon smoothit () {mcLogo.visible = true; TweenMax.to (pixelContainer, 1, {alfa: 0, onComplete: function () {pixelContainer.visible = false; mcLogo.visible = true; animere = false;}})}