Lag din egen ActionScript 3.0-pikseleksplosjonseffekt

I denne opplæringen lærer du hvordan du lager en effekt som sikkert har tatt øye med (for eksempel i filer som denne), Pixel-eksplosjonen. Under prosessen med å gjøre det, lærer vi hvordan du trekker ut BitmapData fra en MovieClip, hvordan du bruker en tweening-motor og hvordan du bruker hendelseslyttere.

La oss komme i gang da!

Trinn 1: Sette opp scenen

Det første vi skal gjøre er å opprette en AS3-flashfil. Da skal vi sette opp scenen til 400px x 400px og 30 fps. Vi kodes på tidslinjen for å gjøre ting enkelt, men de som vet å programmere i OOP er velkommen til å skrive denne koden i klasser. Du trenger grunnleggende kunnskap om AS3 for å forstå alle prosessene som denne opplæringen innebærer; Jeg vil imidlertid prøve å holde det veldig enkelt. De blå hovered knappene er de du må trykke i IDE. Det kan virke som mye arbeid først, men det er veldig enkelt ...

Trinn 2: Tegne vårt hovedbilde

Vi skal nå tegne et vektorbilde av det vi trenger. Du kan virkelig sette opp et bilde med denne effekten (.jpg, .png), men vektorer er kjøligere. Som du vil merke, er jeg ikke mye av en designer. Alt du trenger å gjøre er å tegne bildet ditt (eller importere en jpg fra datamaskinen), velg den og konverter den til en MovieClip (trykk F8 på Windows).

Trinn 3: Klargjøre for koden

Når du har forvandlet bildet til en filmklipp, kan du forberede det til koden som vil målrette den. Vi lager et nytt lag for handlingene (1.) og deretter gi det et forekomstnavn på mcLogo (2.). Deretter importerer vi klassene for bruk i handlingslaget vårt. For denne effekten trenger vi en god tweening motor. Det beste jeg fant som håndterer både fart og stabilitet er TweenMax. Du kan laste den ned fra http://blog.greensock.com/tweenmaxas3/ (doner hvis du liker det). Husk å kopiere klassekatalogen i samme katalog som din .fla (som du kan se i den blå boksen). Endelig importerer du TweenMax-klassen i tidslinjen (3.).

Trinn 4: Klargjøre for handlingen

Nå skal vi sette opp scenen og våre hovedvariabler. Vi justerer scenen til TOP_LEFT hjørnet og setter det opp slik at innholdet ikke skaleres. På variablarsiden lager vi en beholder for å holde alle pikslene som vil eksplodere. Vi lager også en GlowFilter, dette er valgfritt selvfølgelig, men det vil forbedre effekten av virkningen. "Animering" er en bryter som blir sant når effekten finner sted og "pixelBMP" er bitmapdataene til bildet ditt.

 stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = ny MovieClip (); var glow: GlowFilter = ny GlowFilter (0xFFFF00, 1, 10, 10,5,2); var animerer: boolsk = false; var pixelBMP: BitmapData;

Deretter skal vi opprette gjentatte variabler og tilordne posisjonsbeholderposisjonen til å være den samme som bildet ditt.

 var jeg: int = 0; var j: int = 0;

Trinn 5: Lag pikselholdere

Vi vil nå trekke ut bitmapdataene (pikselfargene) fra bildet du har satt opp (1.). Husk disse to linjene, det hjelper deg også i andre prosjekter. Vi lager et nytt symbol fra biblioteket (2.) og klikker på Avansert-knappen. Når du har klikket, velger du Eksporter for handlingskript (3.). Søk etter tekstfeltet Klasse og skriv "myPixel".

Trinn 6: Konfigurer MyPixel-klassen

Nå skal vi sette opp pikselbeholderen. Vi legger inn vår nyopprettede piksel-effekt og lager et lag kalt "action".

Trinn 7: Konfigurere piksler for å motta farger

På handlingslaget legger vi opp bitmapet. Denne lille koden vil hjelpe deg hver gang du vil manipulere bitmapData av et objekt (for eksempel med andre nyttige effekter som desaturering og uskarphet).

pixelBMP = ny BitmapData (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo)

Jeg har laget en sirkel som holder fargen på hver piksel, men du kan tilpasse den til det du ønsker; kvadrat, trekant eller til og med en enkel piksel. Vi legger til pikselglødseffekten fra funksjonsparameteren:

var orgX: int = 0; var orgY: 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 = [gløde]; addChild (mc);

Trinn 8: Krysser over alle piksler

Vi lager to "for" setninger som dekker alle piksler av bildet vårt. Den første for (i) er for vertikal og den andre (j) for horisontal. GetPixel-metoden returnerer en enhet som representerer farge på piksel på den posisjonen. Hvis det ikke er null, vil det starte operasjonene som presenteres i trinn 9. Vi krysser pikslene to for to på grunn av minnehåndtering.

 for (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2)

Trinn 9: Gir farge til pikslene

Vi starter med å tildele pikselfarge til glødfilteret. Da skal vi opprette en ny myPixel som vi vil kjenne "pixel_mc". Vi kaller funksjonen "setUpPixel" som vi definerte i trinn 7. Dette passerer bitmapData - 2 piksler bred, 2 piksler høy, farge på nåværende piksel, originalX, originalY og glødelfilteret. Til slutt legger vi til dette pikselet til pikselbeholderen (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 = ny myPixel () pixel_mc.setUpPixel (ny 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 vanlige i programmeringen, og derfor må vi teste filmklippet fra tid til annen. Dette gir oss vårt bilde, men også litt uskarphet. Sløret er på grunn av glødfilteret, så det er ingen bekymringer der. Som du kanskje allerede vet, trenger vi ikke disse bildene å være synlige, unntatt når de har effekten vår. Inntil da har vi et fint bilde. Så alt du trenger å gjøre i dette trinnet er ukjent linje 13 - pixelContainer.visible = false; og du får ditt originale bilde tilbake.

Trinn 11: Sette opp eksplosjonseffekten

Vi har pikslene på plass, nå er alt vi trenger å gjøre, animere dem. Dette er hvor TweenMax kommer inn i scenen. Vi starter funksjonen ved å gjøre det opprinnelige bildet usynlig og pikselene synlige. Deretter setter vi opp det opprinnelige bildet og knappen som vi vil lage senere (for å aktivere funksjonen) øverst på indeksen. Husk denne funksjonen - setChildIndex (yourmc, numChildren-1) det vil hjelpe deg i andre prosjekter.

 funksjon eksplodere () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true;

Trinn 12

Dette er hvor pikslene kommer til liv. "For" krysser hvert barn av pixelcontaineren. Pikselet trekkes ut gjennom getChildAt (i) metode. Den xdest og ydmeste 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 til overgangen og en enkel type gjennom TweenMax.

 funksjon eksplodere () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true; for (var jeg: int = 0; i Trinn 13: Implosion
 For implosion, selvfølgelig, må vi lagre våre innledende verdier et sted. Vi lager (1.) 2 arrays - xArray og yArray som lagrer disse verdiene. Etter dette (2.) legger vi inn i for (j = 0; j koden for å skyve 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 = ny myPixel () pixel_mc.setUpPixel (ny 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; 
 Trinn 14
 Nå legger vi også til en tilbaketrekkingseffekt. Det er stort sett det samme som eksplosjonseffekten, bare det vil bruke verdiene som er lagret i den tidligere opprettede gruppen.
  Trinn 15: Knappen
 La oss lage vår knapp. Begynn med å tegne den (1.). Gjør det til en filmklipp (som du har lært i trinn 2. Lag et nytt handlingslag og skriv stop (); (2.). Dette forhindrer at musen vår blir sløyfe. Vi legger nå inn en keyframe for når knappen er trykket ( 3.). Dette vil endre teksten og vise at nå, når du klikker på den, vil den reversere prosessen.
  Trinn 16: Eksporterer vår knapp for ActionScript
 Vi må gjøre det samme vi gjorde på bildet vårt, og gir knappen et forekomstnavn.
  Trinn 17: Sette opp knappen
 Egenskapen buttonMode setter den normale markøren for å endres i handlingen en. 
 MouseChildren-egenskapen når den er satt til falsk forbyder knappene barn å stjele mouseEvents.
 AddEventListener-metoden gjør det mulig for knappen å starte funksjon clickHandler når den klikkes (MouseEvent.CLICK).
  funksjon initbutton () btn_mc.buttonMode = true; btn_mc.mouseChildren = false; btn_mc.addEventListener (MouseEvent.CLICK, clickHandler);  initbutton ();
 Trinn 18: Detonatoren
 Vi vil nå sette opp funksjonen som setter opp eksplosjonen. "animering" er verdien som indikerer om pikslene skal eksplodere eller implodere.
  funksjon clickHandler (e: MouseEvent) if (animating == false) explode (); animerer = sant; btn_mc.gotoAndStop (2);  else implode () btn_mc.gotoAndStop (1); 
 Trinn 19: Tilpasse
 Hvis du legger til filtre, endrer filtreverdiene og modifiserer lette typer overgangene, er det gode ting å leke med. For å endre lettere typer må du importere lekeklassene. Du kan forhåndsvise tweening typer her.
  importer gs.easing. *;
 Trinn 20: Utjevning av overgangen
 Hvis du har testet filmen som vi har gått sammen, har du kanskje lagt merke til at overgangen mellom piksler og det faktiske bildet er ganske hardt. Vi kan legge til en onComplete parameter på implode-tween for å ringe en funksjon som glatter den overgangen:
 onComplete: smoothit funksjon smoothit () mcLogo.visible = true; TweenMax.to (pixelContainer, 1, ala: 0, onComplete: function () pixelContainer.visible = false; mcLogo.visible = true; animering = false;
 Trinn 21: Gjennomgang
 Så hva har vi dekket i dag?
  Importerer våre hovedklasser.
 Justere scenen.
 Deklarere hovedvariablene.
 Legge til en pikselbeholder på scenen.
 Ekstra Bitmap-data fra vårt bilde.
 Oppretter en MyPixel-klasse og sender fargen til hvert av bildepikselene til de pikslene.
 Lag en funksjon som velger alle piksler, og tweens dem til en tilfeldig posisjon.
 Lag en funksjon som tweens piksler tilbake til opprinnelig posisjon.
 Lag en knapp som kaller disse funksjonene.
 
 Endelig kode
  importer gs.TweenMax; importer gs.easing. *; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = ny MovieClip (); var glow: GlowFilter = ny GlowFilter (0xFFFF00, 1, 10, 10,5,2); var animerer: boolsk = false; var pixelBMP: BitmapData; var jeg: int = 0; var j: int = 0; var xArray: Array = new Array (); var yArray: Array = new Array (); addChild (pixelContainer) pixelContainer.x = mcLogo.x; pixelContainer.y = mcLogo.y; pixelBMP = ny BitmapData (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo) for (i = 0; i0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = ny myPixel () pixel_mc.setUpPixel (ny 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 (animating == false) explode (); animerer = sant; btn_mc.gotoAndStop (2);  else implode () btn_mc.gotoAndStop (1);  initbutton (); funksjon eksplodere () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true; for (var jeg: int = 0; i Jeg håper du likte denne opplæringen. Takk for at du leste!



		
			
	   
	




Kode