Share
În acest tutorial, vom învăța cum să folosim AS3 pentru a crea o RIA care poate modifica proprietățile de culoare ale unei imagini, cum ar fi Luminozitate, Contrast, Hue și Saturație. Citește mai departe!
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Vom folosi o clasă ActionScript nativă, care va obține noi valori dintr-o componentă Slider și apoi să le aplicăm imaginii țintă utilizând clasa ColorMatrixFilter.
Lansați Flash și creați un nou document. Setați dimensiunea scenei la 557x400px, iar rata de cadre la 24fps.
Interfața va fi foarte simplă; doar o imagine în etapa care va fi apoi modificată de către Componentele de culisare din panoul de reglare a culorilor.
Vom avea nevoie de o imagine pentru a testa aplicația noastră, alegeți-o din colecția dvs. personală sau descărcați-o pentru testare.
Aceasta este imaginea din demo, obținută de la Flickr, cu o licență Creative Commons.
Flori de Antonio Manchado
Creați un panou și patru glisante cu nume de instanțe, după cum se vede în imaginea următoare:
Puteți adăuga bare peste glisiere așa cum se arată pentru a îmbunătăți aspectul.
Să setăm valorile componentelor Slider.
Acestea sunt obținute din valorile valide minime și maxime ale clasei AdjustColor, pe care o vom folosi pentru a regla fiecare proprietate:
Creați o nouă clasă ActionScript 3.0 (Cmd + N) și salvați-o ca Main.as în dosarul dvs. de clasă.
Creați structura claselor de bază pentru a începe să scrieți codul.
> pachet import flash.display.Sprite; clasa publică principală extinde Sprite funcția publică Main (): void // code constructor
Acestea sunt clasele pe care trebuie să le importăm pentru ca clasa noastră să funcționeze; import directiva face ca clasele și pachetele definite extern să fie disponibile pentru codul dvs..
import flash.display.Sprite; import fl.motion.AdjustColor; import flash.filters.ColorMatrixFilter; import fl.events.SliderEvent;
Acestea sunt variabilele pe care le vom folosi; citiți comentariile din cod pentru a afla mai multe despre ele.
var var color: AdjustColor = new AdjustColor (); // Acest obiect va păstra proprietățile de culoare private filtru var: ColorMatrixFilter; // Va stoca filtrul de culoare modificat pentru a schimba imaginea
Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă; acest cod este primul care se execută atunci când faceți o instanță a unui obiect sau în acest caz se execută când SWF este încărcat, așa cum este în clasa de documente.
Acesta va efectua acțiunile necesare pentru a porni aplicația.
funcția publică finală Main (): void // Code
Matricea de culoare va fi generată de valorile stocate în proprietățile AdjustColor; trebuie să setăm valorile inițiale pentru aceste proprietăți pentru a obține o matrice corectă. Dacă nu facem acest lucru, se va genera o matrice cu valori nula.
/ * Necesar pentru a crea matricea inițială * / color.brightness = 0; color.contrast = 0; color.hue = 0; color.saturation = 0; / * Această funcție va adăuga ascultătorii necesari * / addListeners ();
Această funcție adaugă ascultătorilor componentele cursorului pentru a apela anumite funcții ori de câte ori se modifică valorile acestora.
funcția finală privată addListeners (): void colorPanel.brightSL.addEventListener (SliderEvent.CHANGE, adjustBrightness); colorPanel.contSL.addEventListener (SliderEvent.CHANGE, reglațiContrast); colorPanel.hueSL.addEventListener (SliderEvent.CHANGE, adjustHue); colorPanel.satSL.addEventListener (SliderEvent.CHANGE, ajustareSaturație);
Această funcție modifică valoarea luminozității, obținându-i datele de la brightSL elementul glisant.
funcția finală privată adjustBrightness (e: SliderEvent): void color.brightness = e.target.value; Actualizați();
Această funcție modifică valoarea Contrast, obținându-și datele din contSL elementul glisant.
setarea finală privată a funcțieiContrast (e: SliderEvent): void color.contrast = e.target.value; Actualizați();
Această funcție modifică valoarea Hue, obținându-i datele din hueSL elementul glisant.
funcția finală privată finală (e: SliderEvent): void color.hue = e.target.value; Actualizați();
Când modificați nuanța unei culori, o mutați în jurul roții de culoare cu numărul de grade specificat.
Această funcție modifică valoarea saturației, obținându-și datele de la satSL elementul glisant.
setarea finală a funcției finale private (e: SliderEvent): void color.saturation = e.target.value; Actualizați();
Când modificați saturația unei culori, o deplasați spre sau în afara centrului roții de culoare.
Această funcție se numește în fiecare schimbare a cursorului. Reînnoiește ColorMatrixFilter valoare și îl aplică imaginii în etapă.
actualizare finală privată (): void filter = new ColorMatrixFilter (color.CalculateFinalFlatArray ()); image.filters = [filtru];
Vom folosi clasa de documente în acest tutorial, dacă nu știți cum să o utilizați sau sunteți puțin confuză vă rugăm să citiți acest QuickTip.
Sunteți gata să testați - apăsați Cmd + Return pentru a exporta aplicația dvs. și a vedea că funcționează!
Ați învățat o tehnică excelentă de manipulare a imaginii, experimentați-o cu ea!
Vă mulțumim că ați citit acest tutorial, sper că ați găsit-o utilă!
Accentsconagua