Replicate en Active Camouflage Effect med Flash
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Aktiv kamuflasje er en sci-fi-konseptet, vanligvis sett i form av en drakt som tillater brukeren å bli nesten usynlig. Det kan sees i filmer som Predator og Die Another Day, og spill som Halo og Crysis.
Denne opplæringen viser deg hvordan du kan oppnå en slik effekt i Flash ved å animere en forskyvning filter ved hjelp av en sekvens av punktgrafikk. Ikke bare er effekten kult, men denne teknikken er sjelden sett i online tutorials.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Displacement Kartlegging i Flash
Displacement Kartlegging er et teksturkart som brukes til å modulere forskyvning styrke. Forskyvning betyr bokstavelig talt flytte piksler av en overflate malplassert. I de fleste 3D-programmer, blir pikslene forskyves langs overflaten normalt. I Adobe Flash, skjer forskyvning i 2D plass, langs X og Y-koordinatene i et bilde.
Displacement filtre i Flash er vanligvis besjelet av dynamisk endre sin intensitet (den scaleX, og Scaley parametre), endre posisjonen av fortrengnings bitmap (MapPoint parameter), eller ved manipulering av fargekanalene. Denne opplæringen vil ytterligere forklare disse teknikkene, men vi vil også studere en annen, som bruker en bitmap sekvens for å tegne en ny forskyvning kart på hver ramme. .
Eksempel på forskyvning langs overflaten normal
Eksempel på forskyvning kartlegging i flash, langs X- og Y-aksene
Trinn 2:. Flash Document
Åpne et nytt dokument i Flash og sette opp størrelsen til 550x368 så det matcher vår bakgrunnsbilde. Sett bildefrekvens til 48fps. Forskyvningen filter er faktisk kommer til å kjøre på 12fps, men i tilfelle du ønsker ytterligere animasjon senere på det vil se jevnere på 48fps.
Klikk på Fil > Publish Innstillinger > Actionscript 3.0 Innstillinger og slå av "auto-erklære scenen forekomster"
Trinn 3:.. Import Bakgrunns
Import rainforest.jpg til scenen
Presse Ctrl + K for å justere og matche lerretet størrelse. Dette kommer til å bli vår bakgrunnsbilde.
Nå med bildet valgt, trykker F8 for å konvertere det til et symbol. Velg "Movie Clip" i typemenyen.
Hvis egenskapsvinduet er stengt, trykk Ctrl + F3 for å åpne den. Vi skal nevne filmklippet som nettopp ble opprettet. På forekomsten navnefeltet, skriv "bkgd_mc"
Trinn 4:. Importer Bitmap Sequence
Nå trykker Ctrl + F8 for å opprette et nytt filmklipp helt. Vi er ikke navngi denne ennå. Først skal vi importere bitmap sekvens inne i dette filmklippet. Gå til Fil > Import > Import til scenen. Velge den første bilde i sekvensen, noe som kalles "pred0001.jpg". Flash kommer til å spørre om du vil importere alle bildene i denne sekvensen. Klikk ja
Trinn 5:. Konverter The Bitmap Sequence
Du vil merke at hver bitmap er plassert på en keyframe langs filmklipp tidslinje. Starter på ramme 1, velger du bildet og trykker på F8 for å skjult det til filmklipp. Gjør dette på hver ramme til slutten av sekvensen. Gjør det i orden, fra først til sist, og sørg for at du ikke hoppe over noen rammer, ellers vil rote opp animasjonen.
Når du er ferdig, hver tast ramme bør ha ett filmklipp som inneholder en ramme av karakterens ansikt. Velg ramme én gang til og trykk enter for å se animasjonen
Trinn 6:. Fordel å Layers
Velg filmklipp på ramme 1. Høyreklikk og distribuere til lag. Igjen, gjør det til alle filmklipp på alle rammer. Når du er ferdig vil du ikke lenger kunne se animasjonen, bare bildet på det øverste laget
Trinn 7:. Dra Movie Clip til Stage
Press Ctrl + L for å åpne opp biblioteket, og dra "Symbol 2" til scenen. I kategorien egenskaper nevne dette tilfellet "displ_mc". Denne filmklipp vil bli brukt i vår forskyvning filter.
Trinn 8: Opprett dokument Class
Vi kommer til å skrive koden for vår forskyvning kart filter i et dokument klasse fil. Opprett en ny Actionscript-fil og gi den navnet "pred_as3". Nå lim denne koden:
pakke {import flash.display.MovieClip, import flash.display.BitmapData, import flash.display.IBitmapDrawable, import flash.display.BitmapDataChannel, import flash.filters.DisplacementMapFilter, import flash.filters. DisplacementMapFilterMode, import flash.geom.Point, import flash.events.Event; public class pred_as3 strekker MovieClip {}}
Gå tilbake til flash dokumentet og navngi klassen pred_as3.
Som du ser har vi allerede importert alle klasser som vi trenger i denne opplæringen, Nå la oss fortsette å skrive ut dokumentet klassen. Legg denne koden til det:
private Var clipcont = new Array (); //alle de animerte rammer vil bli lagret i denne arrayprivate Var count: Number; //del av enterframe kretsen; forteller hvilken ramme av animasjon vil være shownprivate Var timer: uint = 0; //setter hastigheten på animationpublic Var displ_mc: MovieClip; offentlig Var bkgd_mc: MovieClip;
Vi er om noen variabler som skal brukes senere. De trenger å bli erklært før klassen konstruktør hvis de skal brukes av mer enn én funksjon i dokumentet klassen
Trinn 9:. Skape den Displacement Filter
Rett nedenfor siste linje, begynner vi å skrive parametre og konstruktøren av forskyvningen kartet filter
privat Var strength1. int = 120; //Verdien av scaleX og Scaley - angir intensiteten av den fortrengnings filterprivate Var mapBitmap: BitmapData = new BitmapData (320240); //størrelsen av forskyvningen kartet i pixelsprivate Var MapPoint: Punkt = new Point (0,0); //posisjonen av fortrengnings bitmapprivate Var componentX = BitmapDataChannel.GREEN; //som fargekanal blir brukt; spiller ingen rolle siden det er i nyanser av grått, private Var componentY = BitmapDataChannel.GREEN; privat Var spe: int = 1; //endrer styrken av forskyvningen filter //alle variabler blir deretter brukt til en ny filterprivate Var filter .: DisplacementMapFilter = new DisplacementMapFilter (mapBitmap, MapPoint, componentX, componentY, scaleX, Scaley); privat Var filterList = new Array (); //et filter liste rekke
Så vi har satt rammer for styrke, størrelse, plassering og RBG kanal. La oss ta en nærmere titt på hver enkelt av disse parametrene ..
Trinn 10: Displacement Styrke
Som nevnt tidligere, er forskyvning i flash bare mulig langs X- og Y-aksene. Parametrene som setter fortrengnings styrke for X og Y er henholdsvis scaleX og Scaley. I denne opplæringen skal vi bruke samme styrke på både X og Y aksene, så vi bruker den samme variabelen strength1 for begge parametrene. Nedenfor er et eksempel på en forskyvning langs den horisontale akse, med Scaley satt til null (venstre bilde), og den vertikale aksen, med scaleX satt til null (til høyre).
Trinn 11: Størrelse på Displacement Map
Legg merke til hvordan størrelsen er satt til 320x240. Vi vet allerede størrelsen på punktgrafikk i animasjon og konstruktøren må ha samme størrelse som dem. Hvis verdien i konstruktøren er større enn for punktgrafikk, det kommer til å være forskyvning i områder der det ikke skal skje. Den # 808080 grå rundt figurens hode er en nøytral farge, på den annen side et område som er tomt, eller en gjennomsiktig bitmap ville faktisk fortrenge bakgrunnsbildet.
Eksempel på verdien satt i konstruktøren blir større enn den faktiske forskyvning kartet: De tomme områdene fortrenge bakgrunnen
Trinn 12:. RGB Channel
Den forskyvning filter bruker bare en av de 3 RGB-kanalene på en bitmap for hver akse . Når du bruker en farget bitmap som en forskyvning kartet, vil hver kanal gi svært ulike resultater som vist i eksempelet nedenfor. I denne opplæringen bruker vi et bilde i gråtoner, slik at kanalen er irrelevant. ComponentX og componentY er satt til grønn, men den samme virkning kan oppnås ved hjelp av de røde og blå kanaler.
De forskjellige resultater oppnådd under anvendelse av den grønne kanalen, kanal rød eller blå kanalen.
Trinn 13: MapPoint
Para MapPoint setter posisjonen kartet forskyvning. Stillingen er i forhold til objektet som det er brukt til, og ikke på scenen. Ved å sette posisjonen til (0,0), vises kartet forskyvning i øvre venstre hjørne av vår bakgrunnsbilde, som ikke alltid sammenfallende med det øverste venstre hjørnet av scenen, som vist nedenfor.
MapPoint parameter er i forhold til objektet, ikke scenen
Trinn 14:. bruke filteret
La oss nå bruke forskyvning filter til vår bakgrunnsbilde "displ_mc". Forskyvningen filteret blir skjøvet inn i en rekke av filtre, og vi gjør dette inne i klassen konstruktør. Vi er også å legge våre to viktigste filmklipp til scenen med addchild metoden. I AS3 klassen konstruktøren er den første funksjonen som skal utføres i et dokument klasse og det heter automatisk, så det er bedre at noen funksjoner eller metoder som må kjøres ved lasting kalles fra inne i en klasse konstruktør.
offentlig funksjon pred_as3 () {addChild (displ_mc); addChild (bkgd_mc); //Legge til både filmklipp tilfeller til stagefilterList.push (filter); //legge forskyvning kartet filter til array.bkgd_mc.filters = filterList; //Gjelder rekken av filtre til målet film clip.storeClips (); }
Den siste kodelinje er å kalle en funksjon som ikke har blitt skrevet ennå. Som navnet antyder denne funksjonen lagrer alle animerte filmklipp i en matrise. Så la oss gå videre og skrive at nå
Trinn 15:. Oppbevares The Animation Into en Array
Så vi opprettet en forskyvning kart filter og brukt den til filmklipp, men vi har ikke lagt til noen punktgrafikk til filteret enda. Vi kommer til å gjøre dette i to trinn: Først skal vi lagre animasjonen i en matrise, og senere vil vi legge denne animasjonen til filter
private funksjons storeClips (). Void //lagrer animasjon i en matrisen {count = displ_mc.numChildren; //totalt antall movieclips inne displ_mc for (var i: int = 0; i < displ_mc.numChildren; i ++) //finner alle movieclips inne displ_mc {clipcont.push (displ_mc.getChildAt (i)); //rammer er presset inne i clipcont matrise}}
Denne funksjonen bruker en for loop å skanne alle filmklipp inne displ_mc. Vi vil at animasjons rammer som ble konvertert til filmklipp tidligere i denne opplæringen. Husker da jeg sa til å konvertere dem bilde for bilde? Vi gjorde det slik at rammene kan sorteres riktig og senere åpnes ved hjelp av getChildAt () -metoden. Siden vi ikke navngi noen av disse tilfellene, sorterer Flash dem internt etter ordre fra skapelsen. Hvis bitmaps ble tilfeldig konvertert til filmklipp, ville animasjonen aldri spille riktig. Så rammene kan nå skyves inn i clipcont array, en etter en.
Koden så langt skal se slik ut:
pakke {import flash.display.MovieClip; import flash.display.BitmapData; import flash.display.IBitmapDrawable; import flash.display.BitmapDataChannel; import flash.filters.DisplacementMapFilter; import flash.filters.DisplacementMapFilterMode; import flash.geom.Point; import flash.events.Event; public class pred_as3 strekker MovieClip {private Var clipcont = new Array (); //alle de animerte rammer er lagret i denne arrayprivate Var count: Number; //del av enterframe kretsen; forteller hvilken ramme av animasjon blir shownprivate Var timer: uint = 0; offentlig Var displ_mc: MovieClip; offentlig Var bkgd_mc: MovieClip; private Var strength1: int = 120; //Angir intensiteten av den fortrengnings filterprivate Var mapBitmap: BitmapData = new BitmapData (320240); //størrelsen av forskyvningen kartet i pixelsprivate Var MapPoint: Punkt = new Point (0,0); //posisjonen av fortrengnings bitmapprivate Var componentX = BitmapDataChannel.GREEN; //som fargekanal brukes; spiller ingen rolle siden det er i nyanser av grått, private Var componentY = BitmapDataChannel.GREEN; privat Var spe: int = 1; //alle variabler blir deretter brukt til en ny filterprivate Var filter: DisplacementMapFilter = new DisplacementMapFilter (mapBitmap, MapPoint , componentX, componentY, scaleX, Scaley); privat Var filterList = new Array (); //et filter liste utvalg .//CLASS CONSTRUCTORpublic funksjon pred_as3 () {addChild (displ_mc); addChild (bkgd_mc); //Legge til både filmklipp tilfeller til stagestoreClips (); filterList.push (filter); //legge forskyvningen filter til array.bkgd_mc.filters = filterList; //Gjelder sett med filtre til målet filmklipp. } private funksjon storeClips (): void //lagrer animasjon i en matrise {count = displ_mc.numChildren; //totalt antall movieclips inne displ_mc for (var i: int = 0; i < displ_mc.numChildren; i ++) //finner alle movieclips inne displ_mc {clipcont.push (displ_mc.getChildAt (i)); //rammer er presset inne i clipcont matrise}}}}
Trinn 16: Forandre Displacement Filter
< p> Nå som vi har animasjonen klar til bruk, la oss sette det i forskyvning filter. Vi kommer til å få tilgang til clipcont array med en "time released" løkke bruker Event.ENTER_FRAME klassen. Hver 4. rammer, blir en ny bitmap i matrisen aksesseres, og deretter påført på filteret ved hjelp av trekning () -metoden. Etter den siste rammen i clipcont trekkes, begynner sløyfe over og den første ramme i clipcont er trukket. Det er en uendelig loop.
privat funksjon animere (e: Hendelses) {filter.scaleX = strength1; //setter verdien av Scaley og scaleX filter.scaleY = strength1; if (Timer > 3) //en ny ramme trekkes hver 4. rammer {if (count < = 0) {count = clipcont.length; //sette en uendelig løkke} teller -; timer = 0;} if (clipcont [teller]) {filter.mapBitmap.draw (clipcont [teller]); //en ny ramme av animasjon trekkes} bkgd_mc.filters = filterList; //oppdaterer filter}
Kopier over linjene til din Actionscript-fil. . Nå la oss gjøre dette løp ved å legge til en hendelse lytteren til klassen konstruktør
offentlig funksjon pred_as3 () {addChild (displ_mc); addChild (bkgd_mc); //Legge til både filmklipp tilfeller til stagefilterList.push (filter); //legge forskyvning kartet filter til array.bkgd_mc.filters = filterList; //Gjelder sett med filtre til målet film clip.storeClips (); addEventListener (Event.ENTER_FRAME, animere); //kaller animere funksjonen angir rammen}
Oppdater klassen konstruktør med addEventListener metoden. Nå animere funksjonen har blitt lagt til scenen og kalles på hver ramme. Teste effekten trykke Ctrl + Enter. Du skal se den animerte ansikt på øverste venstre hjørne av filmen
Trinn 17:. Gjør det Følg Mouse
Vi har en animasjon sløyfe kjører i hjørnet av filmen . La oss gjøre kartet forskyvningen følge muse, på denne måten vil du være i stand til å se hvordan den aktive kamuflasje effekten ser mot ulike deler av bakgrunnen. Lim denne linjen inne animere funksjon:
privat funksjon animere (e: Hendelses) {filter.scaleY = strength1; //setter verdien av Scaley og scaleX filter.scaleX = strength1; timer ++; if (Timer > 3) //en ny ramme trekkes hver 4. rammer {if (count < = 0) {count = clipcont.length; //sette en uendelig løkke} teller -; timer = 0; } if (clipcont [teller]) {filter.mapBitmap.draw (clipcont [teller]); //en ny ramme av animasjon trekkes} filter.mapPoint = new Point (mouseX-160, mousey-240); //Forskyvning kart følger muse bkgd_mc.filters = filterList; }
Denne måten vi oppdaterer forskyvning kartet posisjon på et skriv ramme basis ved hjelp av mouseX og mousey egenskaper. Trykk Ctrl + Enter for å teste den. Hodet skal nå følge muse
Trinn 18:. Endre Filter Strength
I det siste trinnet av denne opplæringen vi skal spille litt med styrken i vår filter, øker verdien av scaleX og Scaley parametre i løpet av en tidsperiode, og deretter minkende tilbake til den opprinnelige verdi. Det vi prøver å oppnå med dette er å gjøre effekten ser mer dynamisk og ... synlig. Mens hele poenget med en kamuflasje i det virkelige liv bør være å gjøre ting mindre synlige, det vi prøver å gjøre her er å gjøre det ser kult. La oss fryse animasjonen slik at du kan forstå hva jeg snakker om. I animere funksjonen, må du bytte linje
filter.mapBitmap.draw (clipcont [teller]);
med denne linjen i stedet:
filter.mapBitmap.draw (clipcont [20]);
I stedet av tegning animasjon, vi forteller flash å trekke den samme rammen om og om igjen. Trykk Ctrl + Enter for å teste den.
Effekten ser helt statisk og kjedelig. La oss gi det litt bevegelse. Lim koden under inne animere funksjon:
privat funksjon animere (e: Hendelses) {filter.scaleY = strength1; //oppdaterer verdien av Scaley og scaleX filter.scaleX = strength1; timer ++; if (Timer > 3) //en ny ramme trekkes hver 4. rammer {if (count < = 0) {count = clipcont.length; //sette en uendelig løkke} teller -; timer = 0; } if (clipcont [teller]) {filter.mapBitmap.draw (clipcont [20]); //en ny ramme av animasjon trekkes} filter.mapPoint = new Point (mouseX-160, mousey-240); //Forskyvning kartet følger musen if (filter.scaleX > 220 || filter.scaleX < 120) //filter forandrer det er intensitet, noe som gjør effekten mer dynamisk {spe * = 1; } Strength1 + = spe; bkgd_mc.filters = filterList; }
Nå teste den med Ctrl + Enter.
Se hvor mye bedre det ser ut? Ok så kan du nå gjenopprette animasjon, fikse linjen som har blitt endret:
filter.mapBitmap.draw (clipcont [teller]);
Denne effekten er også nyttig i tilfelle du ønsker å legge ved en statisk kroppen til å ansikts animasjon senere. Det ville se mer aktiv ved siden av bitmap animasjon.
Konklusjon
Filen kan være litt tungt hvis du bruker jpeg kvalitet 100, som er det jeg anbefaler. I en lavere kvalitet effekten mister litt av sin sjarm. Hvis du ønsker en mindre film du kan komprimere bildene enda mer i photoshop, men sørg for at du holder fargevalget høyre. Fargen rundt figurens hode bør alltid være # 808080 eller vil du se en boks rundt det.
Så dette er det. Den første opplæringen jeg noensinne har skrevet, var det gøy å gjøre det, og jeg håper du hadde det gøy å lese og gjøre god bruk av den. Jeg hadde veldig mye pris på din tilbakemelding. Takk for lesing!