Adjust fargeegenskapene på et bilde med Actionscript 3
Del
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil vi lære å bruke AS3 å lage en RIA som kan endre fargeegenskapene på et bilde, for eksempel lysstyrke, kontrast, nyanse og metning. Les videre
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1:. Kort oversikt
Vi vil bruke en innfødt Action klasse som vil få nye verdier fra en Slider Component og deretter bruke dem til målbildet bruker ColorMatrixFilter klassen
Trinn 2: Flash Dokumentinnstillinger
Launch Flash og opprette et nytt dokument. Satt scenen størrelse til 557x400px, og bildefrekvensen til 24fps
Trinn 3:. Den Interface
Grensesnittet vil være veldig enkelt; bare et bilde i den fasen som vil bli modifiserte av Sliders Components i Juster farge Panel
Trinn 4:. Demo Bilde
Vi trenger et bilde for å teste vår program, velger du den fra din personlige samling eller laste ned en for testing.
Dette er bildet fra demoen, hentet fra Flickr, med en Creative Commons License.
Flower av Antonio Manchado
Trinn 5: Forekomst Names
Opprett et panel og fire Sliders med forekomstnavn som sett i følgende bilde:
Du kan legge til barer over Sliders som vist for å forbedre utseendet
Trinn 6:.. Slider Verdier
La oss sette Slider komponenter 'verdier
Disse er hentet fra minimum og maksimums gyldige verdiene for AdjustColor klassen, som vi vil bruke til å justere hver eiendom:
brightSL: -100 til 100
contSL: -100 til 100
hueSL: -180 til 180
satSL: -100 til 100
Trinn 7: New Action Class
Opprett en ny Actionscript 3.0 Class ( Cmd + N) og lagre den som Main.as Lag din grunnleggende klassestrukturen for å begynne å skrive koden din Dette er de klassene vi trenger å importere for vår klasse for å jobbe; import Dette er de variablene vi vil bruke; lese kommentarene i koden for å lære mer om dem Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse; denne koden er den første som skal utføres når du gjør en forekomst av et objekt, eller i dette tilfellet er det kjøres når SWF er lastet, som det er i dokumentet klassen. Det vil utføre neccesary handlinger til starte applikasjonen fargematrisen vil bli generert av verdiene som er lagret i AdjustColor egenskaper; Vi må sette opprinnelige verdier for disse egenskaper for å få en riktig matrise. Hvis vi ikke gjør dette, vil en matrise med nullverdier bli generert Twitter /* Må opprette første Matrix * /color.brightness = 0;. Color.contrast = 0; color.hue = 0; color.saturation = 0; /* Denne funksjonen vil legge de nødvendige hendelsen lyttere * /addListeners (); Denne funksjonen legger lyttere til de Slider komponenter for å kalle visse . funksjoner når deres verdier endre Denne funksjonen endrer Lysstyrke verdi, får sine data fra brightSL Denne funksjonen endrer kontrast verdi, får sine data fra contSL Denne funksjonen endrer Hue verdi, får sine data fra hueSL Når du endrer nyansen i en farge, flytter du den rundt fargehjulet av det angitte antall grader . Denne funksjonen endrer Saturation verdi, får sine data fra satSL Når du endrer metning av en farge, flytter du den mot eller bort fra sentrum av fargehjulet Vi vil gjøre bruk av dokument klasse i denne opplæringen, hvis du skjønner ' t vet hvordan du bruker det eller er litt forvirret kan du lese dette QuickTip Du er klar til å teste - trykk Cmd + Retur eksportere programmet og se det fungerer! Du har lært en utmerket teknikk for bildemanipulering, eksperimentere med det! Takk leser denne opplæringen, jeg håper du har funnet det nyttig!
i klassen din mappe
Trinn 8:. Class Struktur
>. pakke {import flash.display.Sprite; public class Hoved strekker Sprite {offentlig funksjon main (): void {//konstruktør kode}}}
Trinn 9: Må Classes
direktivet gjør eksternt definert klasser og pakker tilgjengelig i koden
import flash.display.Sprite;. import fl.motion.AdjustColor, import flash.filters.ColorMatrixFilter; import fl.events.SliderEvent;
Trinn 10: Variabler
privat Var farge: AdjustColor = new AdjustColor ();. //Dette objektet vil holde fargen propertiesprivate Var filter: ColorMatrixFilter; //Vil lagre den endrede fargefilter for å endre bildet
Trinn 11: Constructor
offentlig endelige funksjonen main (). void {//Kode}
Trinn 12: Innledende Matrix
Trinn 13: Legg Slider Lyttere
private endelige funksjons 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
slider . komponent
privat endelige funksjon adjustBrightness (e: SliderEvent): void {color.brightness = e.target.value; oppdatering ();}
Trinn 15: Kontrast
slider komponent
privat endelige funksjon adjustContrast. (e: SliderEvent): void {color.contrast = e.target.value; oppdatering ();}
Trinn 16:. Hue
slider komponent
privat endelige funksjon adjustHue (e: SliderEvent): void {color.hue = e.target.value; oppdatering ();}
Trinn 17: Saturation
slider komponent
privat endelige funksjon adjustSaturation (e: SliderEvent):. void {color.saturation = e.target.value; oppdatering ();}
Trinn 18: Update Funksjon
privat endelige funksjonsoppdatering (). Void {filter = new ColorMatrixFilter (color.CalculateFinalFlatArray ()); image.filters = [filter];}
Trinn 19: Set Hoved Class
Trinn 20:. Test
Konklusjon
mer fargerik Ressurser på Activetuts +
manipulere visuelle effekter med den ColorMatrixFilter og ConvolutionFilter
Sammenligning Filter i Flash
Lag en lysstyrke Editor i Actionscript 3
Quick Tips: piske opp Real Time Motion Trails
Utnytt Power of Palette Mapping å tilpasse spillkarakterer - Aktiv Premium