Share
A Color Picker este o aplicație, de obicei găsită în software-ul grafic și online, utilizată în scopul gestionării culorilor, creând scheme de culori, selectând culori și multe altele.
În acest tutorial, vă voi învăța cum să creați un Color Picker personalizat în Flash utilizând ActionScript 3.0.
Folosind o imagine existentă, vom extrage valorile culorilor folosind clasa ColorTransform și poziția mouse-ului, apoi putem aplica valoarea returnată pentru orice DisplayObject.
Deschideți Flash și creați un fișier Flash nou (ActionScript 3).
Setați dimensiunea scenei la 600x300 și setați culoarea de fundal la # D2D1D0.
Nota editorului: Noul ecran de imagine Carlos: P
Vom crea o casetă care va conține toate elementele Color Picker.
Desenați un dreptunghi de 217x174 px și completați-l cu această culoare: # A6A6A6.
Acum duplicați dreptunghiul (Cmd + D), faceți-l cu 215x172 px și completați-l cu: #FAFAFA.
Repetați procesul și umpleți noul dreptunghi cu: # E0E0E0.
Acesta va fi fundalul selectorului de culori.
Acest selector de culori are doi indicatori de culori, unul afișează culoarea activă, iar celălalt culoarea care este în prezent returnată de mișcarea mouse-ului.
Selectați Rectangle Tool (R) și creați două dreptunghiuri de 50x23 px folosind orice culoare, am folosit negru pentru a contrasta cu fundalul. Conversia fiecărui dreptunghi în MovieClip (F8) și setarea numelor de instanțe la "color" și "selectedColor".
Vrem să știm valoarea hexazecimală a culorilor afișate de Color Picker, câmpurile text dinamice vor face treaba.
Selectați instrumentul Text (T) și creați două cadre dinamice de text lângă fiecare dreptunghi de culoare. Am folosit acest format de text: Helvetica Neue 11pt, # 353535. Nu uitați să încorporați numerele și semnul "#" din meniul proprietăți.
Denumiți câmpurile "colorHex" pentru partea stângă și "sColor" pentru cea dreaptă.
Vom avea nevoie de un spectru de culori pentru a crea Color Picker. În exemplul meu am folosit această imagine din ColorTools.
Redimensionați imaginea la 200x130 px și trageți un gradient liniar de la negru la alb pe lateral pentru a adăuga o scală de gri.
Conversia întregului spectru într-un filmClip și denumirea acestuia "spectru".
Conversia tuturor clipurilor într-un singur filmClip și setarea numelui de instanță la "colorPicker".
Acum avem nevoie de un obiect pentru a aplica datele obținute de la Color Picker. Orice DisplayObject va funcționa, în acest caz voi folosi un text.
Numele instanței TextField este "txt".
Creați un nou document ActionScript și salvați-l ca "Main.as".
Acestea sunt clasele pe care le vom folosi în această clasă. Pentru ajutor specific pentru fiecare clasă, consultați Ajutorul Flash (F1).
pachet import flash.display.Sprite; import flash.display.BitmapData; import flash.geom.ColorTransform; importul flash.events.MouseEvent;
Acest cod va declara și extinde clasa, extindem folosind clasa Sprite deoarece folosim unele dintre proprietățile și metodele sale.
clasa publică principală extinde Sprite
Utilizăm trei variabile, explicate în comentariile codului.
var bitmapData: BitmapData = BitmapData nouă (202,132); // Un obiect Bitmap, dimensiunea se bazează pe dimensiunea spectrului de culoare var colorTransform: ColorTransform = new ColorTransform (); var hexColor: *; // Această variabilă va stoca datele de culoare bitmap
Aceasta este funcția principală.
funcția publică Main (): void bitmapData.draw (colorPicker.spectrum); // Transmite datele bitmap ale spectrului la variabila / * Funcții ascultători * / colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_MOVE, updateColorPicker); colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_UP, setValue);
Această funcție se va ocupa de schimbările de culoare atunci când utilizatorul mișcă mouse-ul.
funcția privată updateColorPicker (e: MouseEvent): void / * Obține culoarea de la pixel unde este mouse-ul și transmite valoarea variabilei colorTransform * / hexColor = "0x" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker .spectrum.mouseY) .toString (16); colorTransform.color = hexColor; / * Setează datele de transformare a culorilor în clipul "color" și câmpul "colorHex" în ColorPicker * / colorPicker.color.transform.colorTransform = colorTransform; colorPicker.colorHex.text = "#" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker.spectrum.mouseY) până la String (16) .toUpperCase ();
Această funcție stabilește valoarea activăColor MovieClip și sColor TextField din Color Picker, precum și țintă selectată de utilizator.
funcția privată setValue (e: MouseEvent): void txt.textColor = hexColor; // Aceasta este destinația colorPicker.selectedColor.transform.colorTransform = colorTransform; colorPicker.sColor.text = colorPicker.colorHex.text;
Reveniți la fișierul .Fla și în panoul Proprietăți adăugați "Main" în câmpul Class pentru a face acest lucru Document Class.
Acum puteți alege paleta de culori preferată sau spectrul de culori și o puteți implementa într-un personalizat Color Picker dezvoltat cu ActionScript 3.0. Incearca-l!
Sper că ți-a plăcut acest tut, mulțumesc pentru lectură!
Accentsconagua