Juster fargeegenskapene til et bilde ved hjelp av ActionScript 3

I denne veiledningen lærer vi hvordan du bruker AS3 til å lage en RIA som kan endre fargeegenskapene til et bilde, for eksempel Lysstyrke, Kontrast, Fargetone og Metning. Les videre!


Endelig resultatforhåndsvisning

La oss se på det endelige resultatet vi vil jobbe for:


Trinn 1: Kort oversikt

Vi vil bruke en innfødt ActionScript-klasse som vil få nye verdier fra en Slider-komponent og deretter bruke dem på målbildet ved hjelp av ColorMatrixFilter-klassen.


Trinn 2: Flash-dokumentinnstillinger

Start Flash og opprett et nytt dokument. Still scenestørrelsen til 557x400px, og bildefrekvensen til 24fps.


Trinn 3: Grensesnittet

Grensesnittet vil være veldig enkelt; bare et bilde i scenen som da vil bli endret av skyvekomponentene i Juster fargepanelet.


Trinn 4: Demo Image

Vi trenger et bilde for å teste programmet vårt, velge det fra din personlige samling eller last ned en for testing.

Dette er bildet fra demoen, hentet fra Flickr, med en Creative Commons License.

Blomst av Antonio Manchado


Trinn 5: Fornavn

Opprett et panel og fire Slider med forekomstnavn som vist i følgende bilde:

Du kan legge til barer over skyvekontrollene som vist for å forbedre utseendet.


Trinn 6: Skyveverdier

La oss sette verdier for Slider-komponentene.

Disse er hentet fra minimum og maksimum gyldige verdier av AdjustColor-klassen, som vi skal bruke for å justere hver eiendom:

  • brightSL: -100 til 100
  • contSL: -100 til 100
  • hueSL: -180 til 180
  • satSL: -100 til 100

Trinn 7: Ny ActionScript-klasse

Opprett en ny ActionScript 3.0-klasse (Cmd + N) og lagre den som Main.as i klassemappen din.


Trinn 8: Klassestruktur

Lag din grunnklassestruktur for å begynne å skrive koden din.

> pakke import flash.display.Sprite; offentlig klasse Hoved utvider Sprite offentlig funksjon Main (): void // constructor code

Trinn 9: Nødvendige klasser

Dette er klassene vi må importere for vår klasse for å jobbe; de importere Direktivet gir eksternt definerte klasser og pakker tilgjengelig for koden din.

 importer flash.display.Sprite; importer fl.motion.AdjustColor; importer flash.filters.ColorMatrixFilter; importere fl.events.SliderEvent;

Trinn 10: Variabler

Dette er variablene vi skal bruke; Les kommentarene i koden for å lære mer om dem.

 privat var farge: AdjustColor = ny AdjustColor (); // Dette objektet holder fargeegenskapene private var filter: ColorMatrixFilter; // Vil lagre det endrede fargefilteret for å endre bildet

Trinn 11: Konstruktør

Konstruktøren er en funksjon som kjører når et objekt opprettes fra en klasse; denne koden er den første som skal utføres når du lager en forekomst av et objekt, eller i dette tilfellet kjøres det når SWF er lastet, som det er i dokumentklassen.

Det vil utføre de nødvendige tiltak for å starte applikasjonen.

 offentlig sluttfunksjon Main (): void // Code

Trinn 12: Initial Matrix

Fargematrixen vil bli generert av verdiene lagret i AdjustColor-egenskapene; vi må sette innledende verdier til disse egenskapene for å få riktig matrise. Hvis vi ikke gjør dette, genereres en matrise med nullverdier.

 / * Kreves for å opprette første Matrix * / color.brightness = 0; color.contrast = 0; color.hue = 0; color.saturation = 0; / * Denne funksjonen vil legge til de nødvendige hendelseslytterne * / addListeners ();

Trinn 13: Legg til glidebrytere

Denne funksjonen legger til lyttere til Slider-komponentene for å ringe til bestemte funksjoner når deres verdier endres.

 privat endelig funksjon addListeners (): void colorPanel.brightSL.addEventListener (SliderEvent.CHANGE, adjustBrightness); colorPanel.contSL.addEventListener (SliderEvent.CHANGE, adjustContrast); colorPanel.hueSL.addEventListener (SliderEvent.CHANGE, adjustHue); colorPanel.satSL.addEventListener (SliderEvent.CHANGE, adjustSaturation); 

Trinn 14: Lysstyrke

Denne funksjonen endrer lysstyrkeverdien, får dataene sine fra brightSL skyvekomponent.

 privat endelig funksjon justerbarhet (e: SliderEvent): void color.brightness = e.target.value; Oppdater(); 

Trinn 15: Kontrast

Denne funksjonen endrer kontrastverdien, får data fra contSL skyvekomponent.

 privat endelig funksjon adjustContrast (e: SliderEvent): void color.contrast = e.target.value; Oppdater(); 

Trinn 16: Fargetone

Denne funksjonen endrer Hue-verdien, får dataene sine fra hueSL skyvekomponent.

 privat endelig funksjon justeringHue (e: SliderEvent): void color.hue = e.target.value; Oppdater(); 

Når du endrer fargen på en farge, beveger du den rundt fargeskiven med angitt antall grader.


Trinn 17: Metning

Denne funksjonen endrer metningsverdien, får dataene fra satSL skyvekomponent.

 privat endelig funksjon adjustSaturation (e: SliderEvent): void color.saturation = e.target.value; Oppdater(); 

Når du endrer metning av en farge, beveger du den mot eller vekk fra midten av fargeskiven.


Trinn 18: Oppdateringsfunksjon

Denne funksjonen kalles i hver glidebryterendring. Det fornyer ColorMatrixFilter verdi og gjelder det for bildet i scenen.

 privat endelig funksjon oppdatering (): void filter = new ColorMatrixFilter (color.CalculateFinalFlatArray ()); image.filters = [filter]; 

Trinn 19: Sett hovedklasse

Vi bruker dokumentklassen i denne opplæringen, hvis du ikke vet hvordan du bruker den eller er litt forvirret, vennligst les denne QuickTip.


Trinn 20: Test

Du er klar til å teste - trykk Cmd + Return for å eksportere søknaden din og se den fungere!


Konklusjon

Du har lært en utmerket teknikk for bildemanipulering, eksperimentere med det!

Takk for at du har lest denne opplæringen, håper jeg du har funnet det nyttig!


Mer fargerike ressurser på Activetuts+

  • Manipulere visuelle effekter med ColorMatrixFilter og ConvolutionFilter
  • Sammenligning av filtre i Flash
  • Lag en Brightness Editor i ActionScript 3
  • Rask Tips: Piske opp Real Time Motion Trails
  • Hent kraften til palettmapping for å tilpasse spilltegn - Aktiv Premium