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!
La oss se på det endelige resultatet vi vil jobbe for:
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.
Start Flash og opprett et nytt dokument. Still scenestørrelsen til 557x400px, og bildefrekvensen til 24fps.
Grensesnittet vil være veldig enkelt; bare et bilde i scenen som da vil bli endret av skyvekomponentene i Juster fargepanelet.
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
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.
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:
Opprett en ny ActionScript 3.0-klasse (Cmd + N) og lagre den som Main.as i klassemappen din.
Lag din grunnklassestruktur for å begynne å skrive koden din.
> pakke import flash.display.Sprite; offentlig klasse Hoved utvider Sprite offentlig funksjon Main (): void // constructor code
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;
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
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
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 ();
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);
Denne funksjonen endrer lysstyrkeverdien, får dataene sine fra brightSL skyvekomponent.
privat endelig funksjon justerbarhet (e: SliderEvent): void color.brightness = e.target.value; Oppdater();
Denne funksjonen endrer kontrastverdien, får data fra contSL skyvekomponent.
privat endelig funksjon adjustContrast (e: SliderEvent): void color.contrast = e.target.value; Oppdater();
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.
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.
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];
Vi bruker dokumentklassen i denne opplæringen, hvis du ikke vet hvordan du bruker den eller er litt forvirret, vennligst les denne QuickTip.
Du er klar til å teste - trykk Cmd + Return for å eksportere søknaden din og se den fungere!
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!