Manipulate visuelle effekter med den ColorMatrixFilter og ConvolutionFilter
to
Del
7
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
ColorMatrixFilter og ConvolutionFilter kan brukes til å visuelt forvandle din Flash stedene. I denne artikkelen vil jeg vise deg hvor enkelt det er å manipulere, ved hjelp av en kul verktøy jeg bygget for enkel eksperimentering.
Innledning
Har dere noen gang eksperimentert med Flash er ColorMatrix og konvolusjon filtre? Jeg gravde rundt i et forsøk på å finne noen interessante ting du kan gjøre med Flash og jeg kom borti dem. Eksperimentere med dem kan levere noen fantastiske resultater.
Jeg har skrevet en EffectsTester å gjøre det enkelt å eksperimentere med dem. Sjekk ut disse camshots jeg tok mens spille rundt med den.
Nå, hvis du finner det interessant, la meg gå gjennom hva disse to filtre er alle om
The Color Matrix Filter
The Color Matrix Filter brukes til å manipulere fargen på en skjerm objekt.
La meg forklare nøyaktig beregning utført av ColorMatrixFilter. Hver piksel i et bilde er en blanding av rødt, grønt og blått. Disse primærfargene Bilde fra Wikimedia Commons. Takk til Mike Horvath og jacobolus. Den mengden av rødt i en piksel kan variere fra null (ingen rød i det hele tatt) til 255. Samme for grønn og blå. Så, fra bildet ovenfor, kan du se at en ren gul piksel har rød = 255, og grønn = 255. White er rød, grønn og blå alle satt til 255. Svart har alle tre sett til null. Først, la oss konsentrere oss om disse tre verdier: La oss merke disse verdiene en [0], en [1], og [2] på sin side. Nå, tenk om bare én piksel i hele kildebildet (den i øverste venstre hjørne vil gjøre). La oss kalle mengden av rødt i at srcR Spørsmålet er.: hvor mye rødt vil være i den piksel i målbildet, Destr Her kan du se at en [0] er 1, mens en [1] og [2] er begge null, så: Det er ingen endring! Men hva om vi endret en [0] til null og en [1] til en? Deretter: ... mengden av rødt i destinasjons pixel ville være lik mengden av grønt Du lurer sikkert på om En Jeg skjønner det er vanskelig å forstå dette bare ved å lese om det, så vi kommer til å se på noen kule eksempel effekter. Det er mye mer moro, uansett. Men først, for de nysgjerrige, her er den faktiske matematiske formelen Flash bruker: (Hver av de verdiene du ser i 5x4 matrisen kan variere mellom -255 og 255.) Ta en titt på "Color Chart" eksempelbilde: Nå, la oss si at du ønsker å fjerne alle røde fargen fra bilde. Bare sette alle verdiene i R rad til null: Dette betyr: Nå la oss si at du ønsker å legge litt mer grønt der det tidligere var rødt. Sett "1" ved inngang 0x1, så G rad leser "1 1 0 0 0": La oss nå få til noe veldig rart ved å endre G rad til "0 -1 0 0 50": Hva skjedde? Som et eksempel, hvis det er noen tilfeldige pixel man hadde grønt = 30, ble det multiplisert med "-1", og deretter 50 ble tilsatt, slik at resultatet blir: (30 * -1) + 50 = 20. Nå kan du prøve dette: Alle piksler med grønne verdier som er større enn 50 får slått av og de med grønne verdier under 50 har alle tre fargekanaler økt. Dette gjør at du kan se deler av bildet som har bare en svært liten mengde grønne, som med fiskebildet: Her, bare piksler med en mengde grønn mindre enn 50. Jo mørkere pixel , jo mer grønt er det i det opprinnelige bildet. Det er det grunnleggende prinsippet uansett. Jeg vet det kan virke komplisert i starten, men leke med den, og du får det til slutt :) OK, la oss gå for noe standard: et gråtonebilde. Endre matrise slik: Du har fått en gråtone. Nice :) La oss få en annen populær farge statlige. Inverted Colors For å invertere fargene, må vi gjøre det slik at hver piksel med en rød Verdien av 255 har en rød verdi på null, og vice-versa. Samme for de to andre farger. Så vi trenger å gjøre Flash kjøre kode som ser slik ut: Men det er lett! Alt vi trenger å gjøre er å sette matrisen som dette: Tada! Electric fisk: De fleste av de mer eksotiske effekter som kan oppnås ved ColorMatrixFilter er gjort ved å sette en negativ verdi for en farge og en positiv verdi for offset - eller vice versa. Sett "-1" fra 0x3 til 2x3 (den alfaer) og 255 for forskyvning av alfa (4x3). Ærlig talt, jeg er ikke helt sikker på hva jeg nettopp gjorde -. beregninger blir veldig vanskelig å spore etter en stund Selv om det er mulig å forstå hvordan ColorMatrixFilter fungerer fra et matematisk synspunkt, realistisk det kommer til å forbli et spørsmål om å spille rundt med det. Du kan aldri være helt sikker på hva som kommer til å dukke opp når du sette noen bestemte verdier. Det er derfor jeg gjorde dette EffectsTester. Så leke seg. Gjør deg selv metallic grønn eller rød, eller fargeløs. Når du har fått en effekt du liker, kan du bruke den til noe Displayobject (MovieClip, Sprite, Bitmap. ..) i din egen kode som dette: La oss nå se på convolution filter Fra Adobes klasse referanse: En convolution kombinerer piksler i inngangsbildet med nabopiksler. for å frembringe et bilde. Et bredt utvalg av bildeeffekter kan oppnås gjennom convolutions, som uklarhet, kantdeteksjon, skarphet, preging, og beveling. ConvolutionFilter looper gjennom alle pikslene i et visningsobjekt. For hver av dem, den bruker midtverdien i matrisen som verdien av det eksisterende bildeelement blir manipulert. For eksempel, i en 3 x 3 matrise, er midtverdien for (1, 1). Det multipliserer deretter verdiene fra matrisen av pikslene rundt og legger de resulterende verdiene for alle piksler for å få valuta for den resulterende senter piksel. Forstå det nøyaktige regnestykket under Convolution matrise er verdt en hel ny artikkel , så jeg vil ikke dekke alt dette her. Hvis du ønsker å komme inn i det, sjekk ut dette innlegget på adobe.com. Men en enkel lek rundt med verdiene til slutt vil gi deg alle mulige effekter du kan oppnå. Og det blir gøy :) Så la oss se hva vi kan gjøre! convolution filter bruker en matrise, akkurat som fargematrisen filter. Igjen, verdiene varierer mellom -255 og 255. Og igjen, oppnår du det meste av interessante effekter ved kombinasjon av negative verdier med positive meldinger. La meg dele med dere mine observasjoner av hvordan denne tingen fungerer. Prøv å øke litt tilfeldig verdi fra matrisen. Uansett hvilken du velger, vil det lysne bildet; Hvis du vil at bildet skal bo på normal lysstyrke, sørg for verdien av "divisor" er lik summen av alle verdiene i matrisen. Nå, hvis du prøver å senke en tilfeldig verdi under null mens holde minst ett annet over null, får du noe som skjer der. Det påvirker dine kanter: Her er en fin en: ønsker å se ut som en soldat? :) Prøv disse verdiene: Nå senke "divisor" verdien til "-1" for å bli en soldat på oppdrag om natten Mange ting kan oppnås hvis du holder. museknappen litt mer :) Nedre og heve noen verdier til det ekstreme. Ikke glem å justere "divisor" - det er avgjørende. Forstørre din matrise. Gjør det 5x5, for eksempel Hvis du vil bruke effekten i din egen kode, bruker du filtre Til slutt: prøv å kombinere begge filtrene Ha det gøy å spille med disse filtrene og poste noen resultater du får i kommentarfeltet! Takk for lesing.
, når kombinert, kan gjøre noen andre farger:
< p> fargematrisen filter ser på hver piksel i et kildebilde og endrer dem basert på hvor mye rødt, blått og grønt er i pixel. Du ender opp med et helt nytt bilde; . målbildet
Her er hvordan det fungerer
, mengden av grønt srcG Hotell og mengden av blå srcB
? Flash bruker denne beregningen:
Destr = (a [0] * srcR) + (a [1] * srcG) + (a [2] * srcB);
Destr = (1 * srcR) + (0 * srcG) + (0 * srcB); //som betyr ... Destr = srcR;
Destr = (0 * srcR) + (1 * srcG) + (0 * srcB); //som betyr ... Destr = srcG;
i kilden pixel! Videre, hvis du har endret den andre raden til å lese "1 0 0"
, da mengden av grønt i målet piksel ville være lik mengden av rødt i kilde pixel; du ville ha byttet dem over og din oransje fisken ville slå inn grønne:
kolonne og rad og om Offset
kolonne . Vel, A står for alfa, som betyr åpenhet. A-verdiene har mye den samme effekten som de R G B-verdier, men siden ingen av disse eksempelbilder er gjennomsiktig, er det vanskelig å demonstrere. Forskyvning kolonne kan du bare øke eller redusere mengden av rød, blå eller grønn i destinasjons pixel. Typen -255 inn i R rad er offset kolonnen, og du vil se at det er ikke lenger noe rødt i bildet
Experiment
Destr = (a [0] * srcR) + (a [1] * srcG) + (a [2] * srcB) + (en [ ,,,0],3] * srca) + a [4]; destG = (a [5] * srcR) + (a [6] * srcG) + (a [7] * srcB) + (a [8] * srca) + a [9]; destB = (a [10] * srcR) + (a [11] * srcG) + (a [12] * srcB) + (a [13] * srca) + a [14]; Desta = ( et [15] * srcR) + (a [16] * srcG) + (a [17] * srcB) + (a [18] * srca) + en [19];
Destr = (0 * srcR) + (0 * srcG) + (0 * srcB) + (0 * srca) + 0; //som betyr: Destr = 0 + 0 + 0 + 0 + 0; //så: Destr = 0;
< p> derfor en type terskel
opprettes: for hver piksel med en grønn verdi større enn 50, vil den transformerte piksel bli slått helt av. Hvorfor? Vel, antar at pixel grønne kanalen har en verdi på 51:
destG = (0 * srcR) + (-1 * srcG) + (0 * srcB) + (0 * srca) + 50; //husker srcG = 51: destG = 0 + (-51) + 0 + 0 + 50; //så: destG = - 51 + 50; //så: destG = 1; //men en piksel kan ikke ha en negativ mengde grønt, så dette er bare satt til null: destG = 0;
x
gråtoner
Inverted Colors
Destr = 255 - srcR; destG = 255 - srcG; destB = 255 - srcB;
Flere Effects
Wow, nå vet jeg nå hvordan de gjorde Terminator 2 :)
Real World Application
//første import ColorMatrixFilter opp på toppen av koden din: import flash.filters.ColorMatrixFilter; //... senere: Var filtre: Array = new Array (); //for alt etter "= new", kopiere og lime inn fra "Grab The Code" boksen av EffectsTester: var CMF: ColorMatrixFilter = new ColorMatrixFilter (new Array (-1,0,0,0,255,0, -1, 0,0,255,0,0, -1,0,255,0,0,0,1,0)); //de neste to linjene bruke filteret til din skjerm objekt: filters.push (CMF); myDisplayObject.filters = filtre;
konvolusjonen Filter
Experiment
Real World Application
objekt, akkurat som du gjorde for ColorMatrixFilter.:
//første import ConvolutionFilter opp på toppen av koden din: import flash.filters.ConvolutionFilter; //... senere: Var filtre: Array = new Array (); //for alt etter "= new" , kopiere og lime inn fra "Grab The Code" boksen av EffectsTester: var cf: ConvolutionFilter = new ConvolutionFilter (3,3, new Array (1,0, -10, -2,3,1,6,1, -1 ), 0); //de neste to linjene bruke filteret til din skjerm objekt: filters.push (cf); myDisplayObject.filters = filtre;
//først importere. filter klasser opp på toppen av koden din: import flash.filters.ColorMatrixFilter, importere flash.filters.ConvolutionFilter; //... senere: Var filtre: Array = new Array (); //for alt etter "= new ", kopiere og lime inn fra" Grab The Code "boksen av EffectsTester: var CMF: ColorMatrixFilter = new ColorMatrixFilter (new Array (-1,0,0,0,255,0, -1,0,0,255,0,0, - 1,0,255,0,0,0,1,0)); Var cf: ConvolutionFilter = new ConvolutionFilter (3,3, new Array (1,0, -10, -2,3,1,6,1, - 1), 0); //de neste tre linjer gjelder filtrene til skjermen objekt: filters.push (CF), filters.push (CMF); myDisplayObject.filters = filtre;