Create en imponerende forstørrelses Effect med Actionscript 3.0
14
Del
4
Del
Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble første gang publisert i april 2009.
I denne opplæringen vil vi skape et forstørrelsesglass effekt, demonstrere bruk av displacementMapFilter. Effekten kan oppnås på relativt kort tid og med svært lite kode.
Endelig resultat Forhåndsvisning
La oss ta en titt på hva vi re sikter til:
Trinn 1: Kort oversikt
Vi kommer til å jobbe med to lag, pluss en ekstra valgfri lag. Den første vil holde et bilde som vil inneholde de visuelle grafikk, kan dette være noe. Det andre laget vil være fargen kartet som vil styre pixel skyve. Det tredje laget vil holde Actionscript.
En valgfri fjerde laget vil være et overliggende grafisk skuespill som rammen eller linse surround.
La oss se nærmere på det!
Trinn 2:. Dokumentoppsett
Første vi trenger å gjøre er å lage en ny Actionscript 3.0 Flash-fil - gjør dokumentstørrelsen 530px X 400px med en bildefrekvens på 30 bilder i sekundet
Trinn 3: Import Resources
Neste vi trenger å importere et bilde som vi kan bruke for denne effekten - jeg fant en kul, fritt tilgjengelig bakgrunnsbildet på 1024px X 768px
Importer dette til scenen og. . lagnavnet "Image"
La oss nå skalere bildet ned til 50% og sentrere det
Trinn 4:. Skripting Filter
Opprett en ny lag på toppen, og kaller det "Handlinger". Så la oss få handlinger panelet ut og starte koding effekten. Først må vi filteret for bildet så la oss lage et nytt filter objekt og kaller det "dFilter". Vi vil forlate filter fri for parametere som det er ganske mange å sette
Var dFilter: DisplacementMapFilter = new DisplacementMapFilter ();
Neste vi må sette disse filterparametrene i børsnoterte visning
<.. hr>
Trinn 5: Effekt Scale
La oss starte med det enkleste de og sette vekten til rundt 50. Dette er beløpet som forstørrelsesglasset vil zoome inn Det kan også settes til en negativ. verdi, men i dette tilfellet må vi det for å zoome inn, ikke ut
Ekstra linjer: 3,4
Var dFilter. DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50
Merk: Dette er ikke den faktiske rekkefølgen i hvilken filteret tar normalt parametrene. Men i dette tilfellet kan vi legge dem til som vi ønsker fordi vi bruker det børsnoterte visning for en bedre oversikt
Trinn 6:. Farge Channel Komponenter
Neste vi vil angi komponent fargekanalene for X og Y -. Dette tilsier som colorchannels i kart kontrollen (som vi skal lage i et sekund) filteret vil lytte til
Hvis du er kjent med RGB hex-kode #RRGGBB, kan vi velge fra BitmapDataChannel.RED, BitmapDataChannel.GREEN og BitmapDataChannel.BLUE. For å gjøre det enklere kan vi også bare skrive en (rød), 2 (grønn) eller 4 (blå) - (og nei, jeg gjorde ikke en stavefeil, er den blå 4; dette er satt fra selve kanalposisjon i hex-kode). I dette eksempelet vil vi bare holde oss til rød (1) og grønt (2) - men vi vil komme tilbake til mer om dette når vi utformer selve forskyvning kartet
Ekstra linjer: 5,6 <. br> Var dFilter: DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2
Trinn 7: Displacement Mode
Neste vi må stille modus for å finne ut hvordan pikslene vil reagere hvis de blir presset lenger enn bildets grenser. Her kan vi velge mellom:
DisplacementMapFilterMode.COLOR /DisplacementMapFilterMode.WRAP /DisplacementMapFilterMode.CLAMP /DisplacementMapFilterMode.IGNORE
Igjen vi kan forenkle dette ved å skrive "farge", "klemme", "wrap "," ignorer ". Jeg vil ikke komme nærmere inn på disse i denne opplæringen, så kan bare bruke "farge" som fungerer best i de fleste tilfeller
Ekstra linjer: 7
Var dFilter. DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50dFilter.componentX = 1dFilter.componentY = 2dFilter.mode = "color"
I denne modusen kan piksler for å fortsette utover bildegrensen (i tilfelle filter skyver pikslene lenger enn kanten av image)
Trinn 8:. Omkringliggende Farge og Alpha
Nå la oss sette det omkringliggende farge til 0x000000 og alfa til 0. Dette er 100% gjennomsiktig, slik at det ikke vises noe utenfor image unntatt kilde piksler
Ekstra linjer: 8,9
Var dFilter. DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50dFilter.componentX = 1dFilter.componentY = 2dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0
Trinn 9: Filter Effect Posisjon
Nå må vi angi posisjonen filteret vil påvirke bildet; vår objektiv posisjon. Dette må settes som et punkt objekt som inneholder x- og y-verdi. Vi begynner med å lage et punkt objektet slik at den er klar til bruk når vi tilordne den til displacementMapFilter. La oss kalle det "dPoint" og sette den til 0, 0 som startverdier. Vi vil komme tilbake til dette i et øyeblikk når vi trenger å instruere dette punktet for å følge musen.
Neste vi tildele "dPoint" til "dFilter er" point posisjon.
Ekstra linjer : 1,11
Var dPoint: Point = new Point (0, 0); Var dFilter: DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50dFilter.componentX = 1dFilter.componentY = 2dFilter.mode = "farge" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint;
Trinn 10: BitmapData
Sist men ikke minst må vi tildele kontroll kartet til filteret. Dette er kartet som inneholder de fargede piksler som den componentX og Y lytte til
Ekstra linjer: 13
Var dPoint. Point = Nytt punkt (0, 0); Var dFilter: DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50dFilter.componentX = 1dFilter.componentY = 2dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint; dFilter.mapBitmap =
Her Vi trenger også en BitmapData objekt til å fungere som en data beholder for vår fargekart
Trinn 11:. Designing the Color Map
Først lager vi en 100px X 100px, rød til svart, lineær gradient torget. Dette vil ta dagens piksler, og presse dem til venstre og høyre som vi setter componentX til rødt. La oss gjøre dette til en MovieClip kalles "redMap"
Så gjør vi det samme igjen - men denne gangen med en grønn til svart lineær gradient torget, igjen 100px X 100px. Denne gangen vil vi også rotere den 90 °. Du husker kanskje vi setter komponenten for Y-aksen forskyvning som grønn (componentY = 2), slik gradienten går langs y-aksen. Nok en gang vil vi konvertere den til en MovieClip, denne gangen kaller det "greenMap"
Trinn 12: Klar Kart for Capture Phase
Vi har nå to separate fargebilder; vi trenger bare en, så setter blendmode av greenMap til "skjerm". Hver farge fra greenMap vil da skinne gjennom på redMap. Plasser greenMap på toppen av redMap og sørge for at de justeres riktig.
Velg begge movieclips ved å klikke på lag "Kart" og konvertere de to til ett MovieClip kalt "fargekart". Deretter satt forekomsten navn til "colorMap_mc"
Trinn 13:.. Kart Container
Nå la oss gå tilbake til koden og fortsette ved å fange fargekartet MovieClip i en bitmapData
Gå til toppen av koden og opprette en ny BitmapData objekt. La oss kalle det "DMAP" og sett størrelsen på det å matche størrelsen på vårt fargekart (i dette tilfellet 100px X 100px, men dette kan være nesten hva som helst). Vi setter gjennomsiktig til "true" og farge til 0x808080. Dette sikrer at eventuelle gjenværende piksler i bitmapData er nøytrale
Ekstra linjer: 3
Var dPoint: Point = new Point (0, 0); Var DMAP. BitmapData = new BitmapData (colorMap_mc.width, colorMap_mc.height, sant, 0x808080) Var dFilter: DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50dFilter.componentX = 1dFilter.componentY = 2dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint; dFilter.mapBitmap =
Trinn 14: Capture Phase
Vi må trekke fargekartet innhold inn i bitmapData. Når det er gjort, vil vi være i stand til å bruke script til å slette fargekartet fra scenen. Dette er mulig som fargekartet bildet vil ligge innenfor bitmapData kode
Ekstra linjer: 5, 7
Var dPoint: Point = Nytt punkt (0, 0); Var DMAP:. BitmapData = nye BitmapData (colorMap_mc.width, colorMap_mc.height, sant, 0x808080) dMap.draw (colorMap_mc) removeChild (colorMap_mc) Var dFilter: DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50dFilter.componentX = 1dFilter.componentY = 2dFilter .mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint; dFilter.mapBitmap =
Trinn 15: Tilordne Kart til Filter
Legg til bitmapData DMAP til displacementMapFilter ved å sette den siste parameteren på listen (mapBitmap) til «DMAP"
Modifisert linjer: 19
Var dPoint. Point = Nytt punkt (0, 0); Var DMAP: BitmapData = new BitmapData (colorMap_mc.width, colorMap_mc.height, sant, 0x808080) dMap.draw (colorMap_mc) removeChild (colorMap_mc) Var dFilter: DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50dFilter.componentX = 1dFilter. componentY = 2dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPointdFilter.mapBitmap = DMAP
Trinn 16: Legg Filter til Image
Filteret er fullstendig! Vi trenger nå å legge den til bildet, så velger du bildet og sørge for at den har en forekomst navn - kan kalle det "Image_mc". Det gjøres, vi er i stand til å sette filteret på bildet. Vi gjør dette på slutten av koden ved å sette Bilde filtre parameter som en matrise som dette:
Image_mc.filters = [dFilter]
Ekstra linjer: 21
Var dPoint: Point = new punktet (0, 0); Var DMAP: BitmapData = new BitmapData (colorMap_mc.width, colorMap_mc.height, sant, 0x808080) dMap.draw (colorMap_mc) removeChild (colorMap_mc) Var dFilter: DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50dFilter.componentX = 1dFilter.componentY = 2dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPointdFilter.mapBitmap = dMapImage_mc.filters = [dFilter]
OK, la oss eksportere filmen og se hvordan filteret påvirker bildet. Det skal se omtrent slik ut:
Trinn 17:. Interaktivitet
Hva vi har så langt er ikke veldig spennende, så la oss prøve å gjøre objektivet følge muse
Først vi legge til "enterframe" loop kode som dette:
Ekstra linjer: 23,25,27
Var dPoint: Point = new Point (0, 0); Var DMAP: BitmapData = new BitmapData (colorMap_mc.width, colorMap_mc.height, sant, 0x808080) dMap.draw (colorMap_mc) removeChild (colorMap_mc) Var dFilter: DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50dFilter.componentX = 1dFilter. componentY = 2dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPointdFilter.mapBitmap = dMapImage_mc.filters = [dFilter] Image_mc.addEventListener (Event.ENTER_FRAME, onFrame) -funksjonen onFrame (e: Hendelses ) {}
Trinn 18: Følg Mouse
Neste vi setter verdiene av vår dPoint er X og Y for å følge musen. I tillegg vil vi overføre den nylig endret dPoint til dFilter igjen og tilordne filter til bildet
Ekstra linjer. 26,27,28,29
Var dPoint: Point = new Point (0 , 0); Var DMAP: BitmapData = new BitmapData (colorMap_mc.width, colorMap_mc.height, sant, 0x808080) dMap.draw (colorMap_mc) removeChild (colorMap_mc) Var dFilter: DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter. Scaley = 50dFilter.componentX = 1dFilter.componentY = 2dFilter.mode = "color" dFilter.color = 0x000000dFilter.alpha = 0dFilter.mapPoint = dPointdFilter.mapBitmap = dMapImage_mc.filters = [dFilter] Image_mc.addEventListener (Event.ENTER_FRAME, onFrame) funksjon onFrame (e: Hendelses) {dPoint.x = mouseX dPoint.y = mousey dFilter.mapPoint = dPoint Image_mc.filters = [dFilter]}
Lar teste det igjen. Det skal se slik ut:
Trinn 19: Fullfører
Det er fortsatt ikke nøyaktig hvordan vi vil ha det, lar så sørg midten av forskyvning følge muse og også legge til en liten lettelser til bevegelsen. For å gjøre det vi endre følgende kode:
dPoint.x = mouseXdPoint.y = mousey
Modifisert linjer: 26,27
Var dPoint: Point = new Point (0, 0 ); Var DMAP: BitmapData = new BitmapData (colorMap_mc.width, colorMap_mc.height, sant, 0x808080) dMap.draw (colorMap_mc) removeChild (colorMap_mc) Var dFilter: DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50dFilter.scaleY = 50dFilter.componentX = 1dFilter.componentY = 2dFilter.mode = "color" dFilter.color = 0x000000dFilter.alpha = 0dFilter.mapPoint = dPointdFilter.mapBitmap = dMapImage_mc.filters = [dFilter] Image_mc.addEventListener (Event.ENTER_FRAME, onFrame) -funksjonen onFrame (e: Hendelses) {dPoint.x + = ((mouseX-colorMap_mc.width /2) -dPoint.x) * 0,3 dPoint.y + = ((mousey-colorMap_mc.height /2) -dPoint.y) * 0,3 dFilter.mapPoint = dPoint Image_mc.filters = [dFilter]}
For å oppsummere: vi trekker halve størrelsen av kart fra kartposisjon, så det sentre. Deretter legger vi en grunnleggende tweening funksjon, som kan skrives ut:
dette + = (at-dette) * hastighet
Trinn 20: Legge Custom Graphics
< p> På toppen av det hele, jeg har lagt et forstørrelsesglass grafikk som jeg utarbeidet i photoshop. Jeg konverterte den til en MovieClip, ga det en forekomst navn og gjort det følger det punktet at vi bruker for displacemenMapFilter.
Dette oppnås ved å sette den nye lens_frame_image X og Y posisjon lik dPoint posisjon. Deretter trekker forskyvningen for grafikk kanten, slik at det passer perfekt med filtereffekten
Ekstra linjer:. 4,5
funksjon onFrame (e: Hendelses) {dPoint.x + = ((mouseX -colorMap_mc.width /2) -dPoint.x) * 0,3 dPoint.y + = ((mousey-colorMap_mc.height /2) -dPoint.y) * 0,3 lens_mc.x = dPoint.x-8 lens_mc.y = dPoint .Y-8 dFilter.mapPoint = dPoint Image_mc.filters = [dFilter]}
Nå er vår Resultatet skal se slik ut:
Konklusjon
Når du har lært å lage denne effekten selv det bør ikke ta mer enn 15 minutter å sette opp. Huske; Hvis du glemmer hva parametrene for displacementMapFilter er du alltid kan se dem opp på "hjelp". Der vil du få listet orden og hva hver parameter gjør
For rask eksperimentering du kan gå til min hjemmeside og se i "flash" under "test /laboratorier." - Jeg har en haug med displacementMapFilter test miljøer du kan prøve ut.
Jeg håper du kan finne anvendelse for dette filteret i skapende arbeid! Anmeldelser