Comparing Filter i Flash
Del
Del
Del
Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert å bare $ 3. Ikke gå glipp av.

I denne opplæringen, vil vi opprette et filter program som vil tillate brukeren å bruke forskjellige filtre på et bilde, endre intensitetsnivåer og sammenligne de opprinnelige og filtrerte bilder. Vi vil også være å bruke komponenter for våre kontroller

kort oversikt

Det vil være tre lag:. Én for Action, en annen for teksten og komponenter og den siste for bildet. Den kompilerte programmet vil inneholde to bilder siden man vil bli opprettet ved kjøring. Kjøretids versjonen vil ha filtre som brukes på den. I tillegg vil en maske lages ved kjøring som vil bli brukt til å vise /skjule deler av det filtrerte bildet.

Jeg antar du allerede har en grunnleggende forståelse av Flash og Actionscript 3.0. Men jeg vil likevel prøve å holde hvert trinn så klart som mulig

Merk:. Gjennom denne opplæringen jeg skal bruke svake referanser når du legger hendelsen lyttere. For mer informasjon om svake referanser, se dette blogginnlegget.

Trinn 1

Opprett en ny Actionscript 3.0 dokument. Sett Stage størrelse 600 x 500px. Jeg har valgt denne størrelsen siden bildet jeg skal bruke vil passe godt innenfor disse dimensjonene.

Trinn 2

Opprett de tre tidligere nevnte lagene (nemlig "handlinger", "tekst og komponenter "og" image (original) "). Lås «handlinger» lag siden du ikke vil legge noe til det laget bortsett fra Actionscript.

Trinn 3

Velg "tekst og komponenter" laget og legge den statiske teksten "Filter" og "Intensitet" i venstre hjørne.

Trinn 4

Gå til Components panelet og dra fem knapper og to glidere på scenen. Du kan i utgangspunktet legge dem ut allikevel du liker.

Gi knappene label Verdiene til "Standard", "Blur", "Relieff", "Lysstyrke" og "Negative". Så gi dem instans navnene "default_btn", "blur_btn", "emboss_btn", "brightness_btn", og "negative_btn".

Gi intensiteten slider en forekomst navnet "intensity_sld", deretter navnet masken slider "mask_sld"

Merk:. Det er ikke så viktig hvor du plasserer masken slider siden vi skal bruke Actionscript for å omplassere den senere

Terminologi:. Gjennom denne opplæringen jeg kan referere til "maske slider "eller" mask_sld "om hverandre. Det samme gjelder for "intensitet slider" og "intensity_sld".

Trinn 5

Nå kan du låse "tekst og komponenter" lag. Deretter velger du "image (original)" lag og importere et bilde du vil bruke. Jeg kommer til å bruke et bilde av en løvetann.

Trinn 6

Velg bildet og konvertere den til et filmklipp symbol. Jeg har kalt det "løvetann", men det kan være noe du liker. Kontroller at registreringspunktet er øverst i venstre hjørne. Gå inn på "Avansert" view og sjekke "Export for Action". "Export i ramme en" automatisk skal sjekkes. For klassen, skriv "PhotoDandelion" og forlate basen klassen som "flash.display.MovieClip".

Trinn 7

Gi nytt bilde filmklipp forekomstnavnet "photoOriginal". Nå kan du låse "image (original)" lag

Trinn 8 -. Filter Basics

Flash lar deg bruke filtre som ligner på de i Photoshop. Du kan bruke filtre fra Properties panelet eller via Actionscript. Her er noen av de grunnleggende filtre Flash gir: skråkant, uskarphet, skygge, glød, etc.

Ved hjelp av Actionscript vi kan bruke et filter til noen Displayobject gjennom sin "filtre" eiendom. Verdien som er tildelt "filtre" egenskapen må være en matrise. Du kan også bruke mer enn ett filter
//Bruke en blur filter til en DisplayObject.var bFilter. BlurFilter = new BlurFilter (); Var arrFilters: Array = [bFilter]; displayObj.filters = arrFilters;
Trinn 9 - Convolution filtre

Flash støtter også konvolusjonsklanger filtre som kan utføre mer avanserte effekter som lysstyrke, kantdeteksjon, preging, etc.

konvolusjon filtre kan bare brukes ved hjelp av Actionscript og krever også ved bruk av matriser som beskriver hvordan fargene for hver piksel skal utføres. Matrisen må være i en rekke
//Defaultvar matrixDefault. Array = [0, 0, 0, 0, 1, 0, 0, 0, 0]; //Brightervar matrixBrighter: Array = [0, 0, 0, 0, 2, 0, 0, 0, 0]; //Darkervar matrixDarker: Array = [0, 0, 0, 0, 0,5, 0, 0, 0 , 0]; //Embossvar matrixEmboss: Array = [-1, -1, 0, -1, 1, 1, 0, 1, 1];

midtverdien er det eksisterende bildeelementet og de omkringliggende verdiene er dens nabopiksler. Standardverdien er 1; å øke denne verdien vil få bildet til å bli lysere. Avtagende det vil føre til at det blir mørkere. Å ha negative verdier øverst til venstre og positive verdier på høyre (eller vice versa) skaper en emboss effekt

Ved hjelp av Actionscript, vi kan bruke en konvolusjon filter slik:.
//Følgende matrise vil lyse image.var matrixBrighter: Array = [0, 0, 0, 0, 2, 0, 0, 0, 0]; Var matrixCol: Number = 3; //Antall columnvar matrixRow: Number = 3; //Antall rowvar cvFilter: ConvolutionFilter = new ConvolutionFilter (matrixCol, matrixRow, matrixBrighter); Var arrFilters: Array = [cvFilter]; displayObj.filters = arrFilters;

For mer informasjon om Convolution filter, referer til Adobe Flash Artikkel .

Trinn 10

Nå skal vi skrive Actionscript-kode. Velg det første bildet av "handlinger" lag og gå inn i prosedyrepanelet.

Trinn 11

Vanligvis liker jeg å holde teksten konsekvent i hele programmet. Så her er koden for å sette tekst (Verdana) for alle komponentene globalt
import fl.managers.StyleManager; Var format. Tekstformat = new tekstformat ("Verdana", 10, 0x000000); StyleManager.setStyle ("tekstformat "format);
Step 12

Nå la oss lage en kopi av bildet (for å bruke filtre) og plasser den på samme sted som det originale bildet. Jeg kommer til å bruke versjon B, siden jeg ønsker å bruke en maske etter filteret. Med versjon A, hvis du bruker en blur filter kan du merke at uskarphet stiger masken. .. Det er fordi filteret er å bruke sin kraft etter masken

Senere vil vi maskere "photoWrapper" og bare gjelde filtrene til «photoEffected" Twitter /* //versjon Avar photoEffected: PhotoDandelion = ny PhotoDandelion (); photoEffected.x = photoOriginal.x; photoEffected.y = photoOriginal.y; addChild (photoEffected); * ///versjon BVAR photoWrapper: Sprite = new Sprite (); photoWrapper.x = photoOriginal.x; photoWrapper .Y = photoOriginal.y; Var photoEffected: PhotoDandelion = new PhotoDandelion (); photoWrapper.addChild (photoEffected); addChild (photoWrapper);
Trinn 13

Neste opprette linjen som vil skille filtrert og originale bildet. Vi vil bruke en form for å tegne en linje. Plasser linjen til bunnen midten av bildet, deretter trekke linjen fra bunnen opp
Var comparisonLine. Shape = new Shape (); comparisonLine.x = photoOriginal.x + photoOriginal.width /2; comparisonLine.y = photoOriginal.y + photoOriginal.height; comparisonLine.graphics.lineStyle (2, 0x999999, 1, true); comparisonLine.graphics.moveTo (0, 0); comparisonLine.graphics.lineTo (0, -photoOriginal.height); addChild ( comparisonLine);
Step 14

Du vil huske at vi har en maske slider. Ved hjelp av Actionscript, kan vi plassere det under bildet og strekke det så bredden er den samme som bildet bredde. Stille "maksimal" og "bredde" verdier til bildets bredde bidra til å skape et 1: 1-forhold. Vi vil derfor ikke trenger å lage noen skala konvertering senere. I tillegg vil vi sentrere pilen i glidebryteren
mask_sld.x = photoOriginal.x;. Mask_sld.y = photoOriginal.y + photoOriginal.height; mask_sld.minimum = 0; mask_sld.maximum = photoOriginal.width; mask_sld .value = photoOriginal.width /2; mask_sld.width = photoOriginal.width;
Step 15

Nå la oss lage funksjonen og tildele arrangementet for masken glideren. Vi ønsker at "comparisonLine" å følge masken glidebryteren. Den "fotomaske" width bør endres i henhold til masken glideren når det blir dratt. Jeg vet at vi ikke har adressert "fotomaske" ennå, men det er neste steg
import fl.events.SliderEvent; funksjon maskSliderDrag (evt: SliderEvent):. Void {comparisonLine.x = evt.target.value + evt. target.x; photoMask.width = evt.target.value;} mask_sld.addEventListener (SliderEvent.THUMB_DRAG, maskSliderDrag, falsk, 0, true);
Trinn 16

Som nevnt før, "photomask" vil bli brukt til å maskere "photoWrapper" i motsetning til "photoEffected". Siden det kommer til å bli en rektangulær maske, vil vi bruke en form. Angi posisjonen og dimensjon av rektangelet til det samme som "photoOriginal". Sørg for at du fylle formen med en farge (dette kan være hvilken som helst farge) ellers masken virker kanskje ikke som forventet. Deretter setter du "fotomaske" som photoWrapper maske og bredden av masken til masken glideren sin "verdi"
Var fotomasken. Shape = new Shape (); photoMask.x = photoOriginal.x; photoMask.y = photoOriginal.y; photoMask.graphics.beginFill (0xff9900); photoMask.graphics.drawRect (0, 0, photoOriginal.width, photoOriginal.height); photoMask.graphics.endFill (); addChild (fotomaske); photoWrapper.mask = fotomaske fotomaske. width = mask_sld.value;
Step 17

Vi trenger en måte å lagre den siste knappen inne, som vi vil lagre i "activeFilter". Dette vil bli brukt senere av intensiteten slider
Var activeFilter: Button;
Trinn 18

Neste vi vil gå videre til intensiteten glidebryteren.. Vi definerer funksjonen "intensityChange", som vil bli kalt når intensiteten glideren er dratt. Funksjonen vil sende en hendelse (dvs. museklikk) basert på den siste knappen trykkes. Vi vil også tildele arrangementet og i utgangspunktet deaktivere slider
funksjon intensityChange (evt: SliderEvent):. Void {activeFilter.dispatchEvent (ny MouseEvent (MouseEvent.CLICK));} intensity_sld.addEventListener (SliderEvent.THUMB_DRAG, intensityChange, false, 0, true); intensity_sld.enabled = false;
Step 19

Nå la oss definere filterfunksjoner. Den "default" og "negative" filterfunksjoner er like i at de begge deaktivere intensiteten slider og dermed ikke trenger å oppdatere skyve egenskaper. For "blur", "preging", og "lysstyrke", de trenger alle å reaktivere intensiteten glidebryteren. I tillegg bruker de "verdi" eiendom for å bestemme intensiteten av filteret. I tillegg har hvert filter sin egen unike "maksimal" verdi, så vi trenger å beregne "snapInterval". "Verdien" Eiendommen er også beregnet på nytt siden jeg vil gjerne glidebryteren for å tilbakehalvveis mellom min og maks. Vi trenger bare å stille inn intensiteten glideegenskapene når "activeFilter" er ikke lik dagens mål
funksjon default_btnHandler (evt: MouseEvent):. Void {var matrixDefault: Array = [0, 0, 0, 0, 1 , 0, 0, 0, 0]; Var conv: ConvolutionFilter = new ConvolutionFilter (3, 3, matrixDefault); photoEffected.filters = [conv]; activeFilter = evt.target som knapp; intensity_sld.enabled = false;} funksjon blur_btnHandler (evt: MouseEvent): void {if (! activeFilter = evt.target) {intensity_sld.maximum = 30; intensity_sld.snapInterval = (intensity_sld.maximum - intensity_sld.minimum) /40; intensity_sld.value = intensity_sld.maximum /2; } Var blurX: Number = intensity_sld.value; Var Blury: Number = intensity_sld.value; photoEffected.filters = [ny BlurFilter (blurX, Blury, BitmapFilterQuality.HIGH)]; activeFilter = evt.target som knapp; intensity_sld.enabled = true;} funksjon emboss_btnHandler (evt: MouseEvent): (! activeFilter = evt.target) void {if {intensity_sld.maximum = 4; intensity_sld.snapInterval = (intensity_sld.maximum - intensity_sld.minimum) /40; intensity_sld.value = intensity_sld.maximum /2; } Var matrixEmboss: Array = [-intensity_sld.value, -intensity_sld.value, 0, -intensity_sld.value, 1, intensity_sld.value, 0, intensity_sld.value, intensity_sld.value]; Var conv: ConvolutionFilter = new ConvolutionFilter (3, 3, matrixEmboss); photoEffected.filters = [conv]; activeFilter = evt.target som knapp; intensity_sld.enabled = true; } funksjon brightness_btnHandler (evt: MouseEvent): void {if (! activeFilter = evt.target) {intensity_sld.maximum = 6; intensity_sld.snapInterval = (intensity_sld.maximum - intensity_sld.minimum) /40; intensity_sld.value = intensity_sld.maximum /2; } Var matrixBrightness: Array = [0, 0, 0, 0, intensity_sld.value, 0, 0, 0, 0]; Var conv: ConvolutionFilter = new ConvolutionFilter (3, 3, matrixBrightness); photoEffected.filters = [conv]; activeFilter = evt.target som knapp; intensity_sld.enabled = true;} funksjon negative_btnHandler (evt: MouseEvent): void {var matrixNegative: ColorMatrixFilter = new ColorMatrixFilter ([- 1, 0, 0, 0, 255, 0, -1, 0, 0, 255, 0, 0, -1, 0, 255, 0, 0, 0, 1, 0]); photoEffected.filters = [matrixNegative]; activeFilter = evt.target som knapp; intensity_sld.enabled = false;}

Merk: For "negative" filter, jeg har brukt en ColorMatrixFilter som bruker en 4 av 5 matrise bruke fargetransformasjoner. For mer informasjon om ColorMatrixFilter, se denne Adobe Flash artikkel.

Trinn 20

La oss nå gi hver av knappene til sine respektive funksjoner.
Default_btn.addEventListener (MouseEvent.CLICK , default_btnHandler, falsk, 0, true); blur_btn.addEventListener (MouseEvent.CLICK, blur_btnHandler, falsk, 0, true); emboss_btn.addEventListener (MouseEvent.CLICK, emboss_btnHandler, falsk, 0, true); brightness_btn.addEventListener (MouseEvent. KLIKK, brightness_btnHandler, falsk, 0, true); negative_btn.addEventListener (MouseEvent.CLICK, negative_btnHandler, falsk, 0, true);
Trinn 21 - Endelig kode

Jeg har laget tre ekstra funksjoner nemlig "applyConvolutionFilter", "activeFilterAndIntensityOnOff", og "setSliderProperties". Deres formål er å redusere repeterende koding i filterfunksjonene

Den endelige komplett koden skal se ut omtrent slik ...
import fl.events.SliderEvent, import fl.managers.StyleManager; Var format.: tekstformat = new tekstformat ("Verdana", 10, 0x000000); StyleManager.setStyle ("tekstformat", format); Var photoWrapper: Sprite = new Sprite (); photoWrapper.x = photoOriginal.x; photoWrapper.y = photoOriginal.y; Var photoEffected: PhotoDandelion = new PhotoDandelion (); photoWrapper.addChild (photoEffected); addChild (photoWrapper); Var comparisonLine: Shape = new Shape (); comparisonLine.x = photoOriginal.x + photoOriginal.width /2; comparisonLine.y = photoOriginal.y + photoOriginal.height; comparisonLine.graphics.lineStyle (2, 0x999999, 1, true); comparisonLine.graphics.moveTo (0, 0); comparisonLine.graphics.lineTo (0, -photoOriginal.height); addChild (comparisonLine); mask_sld.x = photoOriginal.x; mask_sld.y = photoOriginal.y + photoOriginal.height; mask_sld.minimum = 0; mask_sld.maximum = photoOriginal.width; mask_sld.value = photoOriginal.width /2; mask_sld. width = photoOriginal.width; funksjon maskSliderDrag (evt: SliderEvent): void {comparisonLine.x = evt.target.value + evt.target.x; photoMask.width = evt.target.value;} mask_sld.addEventListener (SliderEvent.THUMB_DRAG, maskSliderDrag); Var fotomaske: Shape = new Shape (); photoMask.x = photoOriginal.x; photoMask.y = photoOriginal.y; fotomaske. graphics.beginFill (0xff9900); photoMask.graphics.drawRect (0, 0, photoOriginal.width, photoOriginal.height); photoMask.graphics.endFill (); addChild (fotomaske); photoWrapper.mask = fotomaske photoMask.width = mask_sld .value; Var activeFilter: Button, funksjon intensityChange (evt: SliderEvent): void {activeFilter.dispatchEvent (ny MouseEvent (MouseEvent.CLICK));} intensity_sld.addEventListener (SliderEvent.THUMB_DRAG, intensityChange); intensity_sld.enabled = false; funksjon applyConvolutionFilter (matrise: Array): void {var cFilter: ConvolutionFilter = new ConvolutionFilter (3, 3, matrise); photoEffected.filters = [cFilter];} funksjon activeFilterAndIntensityOnOff (BTN: Button, intensityOnOff: Boolean): void {activeFilter = btn; intensity_sld.enabled = intensityOnOff;} funksjons setSliderProperties (BTN: Button, max: Number): void {if (activeFilter = BTN) {intensity_sld.maximum = max; intensity_sld.snapInterval = (intensity_sld.maximum - intensity_sld.minimum) /40; intensity_sld.value = intensity_sld.maximum /2; }} funksjon default_btnHandler (evt: MouseEvent): void {var matrixDefault: Array = [0, 0, 0, 0, 1, 0, 0, 0, 0]; applyConvolutionFilter (matrixDefault); activeFilterAndIntensityOnOff (evt.target som Button, false);} funksjon blur_btnHandler (evt: MouseEvent): void {var btn: Button = evt.target som knapp; setSliderProperties (BTN, 30); Var blurX: Number = intensity_sld.value; Var Blury: Number = intensity_sld.value; photoEffected.filters = [ny BlurFilter (blurX, Blury, BitmapFilterQuality.HIGH)]; activeFilterAndIntensityOnOff (BTN, true);} funksjon emboss_btnHandler (evt: MouseEvent): void {var btn: Button = evt.target som knapp; setSliderProperties (BTN, 4); Var matrixEmboss: Array = [-intensity_sld.value, -intensity_sld.value, 0, -intensity_sld.value, 1, intensity_sld.value, 0, intensity_sld.value, intensity_sld.value]; applyConvolutionFilter (matrixEmboss); activeFilterAndIntensityOnOff (BTN, true);} funksjon brightness_btnHandler (evt: MouseEvent): void {var btn: Button = evt.target som knapp; setSliderProperties (BTN, 6); Var matrixBrightness: Array = [0, 0, 0, 0, intensity_sld.value, 0, 0, 0, 0]; applyConvolutionFilter (matrixBrightness); activeFilterAndIntensityOnOff (BTN, true);} funksjon negative_btnHandler (evt: MouseEvent): void {var matrixNegative: ColorMatrixFilter = new ColorMatrixFilter ([- 1, 0, 0, 0, 255, 0, -1, 0, 0, 255, 0 , 0, -1, 0, 255, 0, 0, 0, 1, 0]); photoEffected.filters = [matrixNegative]; activeFilterAndIntensityOnOff (evt.target som Button, false);} default_btn.addEventListener (MouseEvent.CLICK, default_btnHandler, falsk, 0, true); blur_btn.addEventListener (MouseEvent.CLICK, blur_btnHandler, falsk, 0, true); emboss_btn.addEventListener (MouseEvent.CLICK, emboss_btnHandler, falsk, 0, true); brightness_btn.addEventListener (MouseEvent.CLICK, brightness_btnHandler, falsk, 0, true); negative_btn.addEventListener (MouseEvent.CLICK, negative_btnHandler, falsk, 0, true);

Merk: Du kan også gå utover det jeg har gjort, for eksempel å implementere en sentral funksjon som omfatter alle filtre. Deretter bruker du en "hvis else if" eller "switch" for å utføre nødvendige koden for den tilsvarende filter.

Konklusjon

Det er mange ting du kan gjøre med filtre, jeg har rett og slett gitt en kort introduksjon. De grunnleggende filtre i Flash er ganske god i at det er nok parametere for å leke seg med. Hvis du ikke finner det du leter etter, så kan du prøve noen av de andre filtre som ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilter, etc. Du kan bli overrasket over hva du finner. Holde eksperimentere og viktigst av alt, ha det gøy!

Takk for at du tok deg tid til å se denne opplæringen. Jeg håper du fant det nyttig. Anmeldelser