Share
În această componentă de introducere rapidă pentru componentele Flash Professional, vom examina ScrollPane și ColorPicker. Hai să ne aruncăm?
Check out demo-ul. În acesta, pe partea stângă, veți vedea două componente Color Picker, două etichete cu etichete "Custom Color Picker" și "Picker normal de culoare" și un dreptunghi albastru.
Selectorul personalizat de culori utilizează culori luate exclusiv dintr-o selecție aleasă de noi. Selectorul de culori normal are toate culorile unui selector obișnuit de culoare, iar atunci când un utilizator alege o culoare, schimbăm dreptunghiul în culoarea pe care a ales-o.
În partea dreaptă a SWF există un ScrollPane în care se încarcă o imagine și un buton pe care îl folosim pentru a iniția încărcarea imaginii.
Deschideți un nou document Flash și setați următoarele proprietăți:
Deschideți fereastra componentelor accesând Meniu> Fereastră> Componente sau apăsați CTRL + F7
Glisați două ColorPickers, două Etichete, un ScrollPane și un buton în scenă.
În panoul Properties, dați prima etichetă numele de instanță etichetă personalizată.
Dacă panoul Proprietăți nu se afișează, mergeți la Meniu> Fereastră> Proprietăți sau apăsați CTRL + F3.
Setați eticheta X la 16 și Y la 12.
Dați celei de-a doua etichete numele de instanță "normalLabel"; setați X la 16 și Y la 176.
Dați primului ColorPicker numele de instanță "customColorPicker"; setați X la 16 și Y la 41.
Dă cel de-al doilea ColorPicker numele de instanță "normalColorPicker"; setați X la 16 și Y la 206.
Dați celui de-al doilea ScrollPane numele de instanță "imageScrollPane"; setați X la 277 și Y la 29.
Dați butonul numele de instanță "loadImageButton"; setați X la 354 și Y la 332.
Cu ajutorul instrumentului dreptunghi trageți un dreptunghi pe scenă. Am desenat-o cu o culoare albastră. Selectați dreptunghiul și mergeți la Meniu> Modificare> Conversie la simbol (sau apăsați F8); setați numele său la "pătrat" și asigurați-vă că "Tip" este setat la MovieClip.
Apoi, dați-i un nume de instanță pătrat așa cum am făcut-o cu componentele de mai sus. Setați dimensiunea sa la 143x97px, setați X la 90 și Y la 47.
ColorPicker este o componentă foarte mică care permite utilizatorilor să selecteze o culoare. De asemenea, puteți defini culorile dorite disponibile în ColorPicker.
Componenta ScrollPane afișează fișierele DisplayObjects, JPEG, GIF și PNG, precum și fișierele SWF, într-o zonă derulantă. Când conținutul pe care îl încărcați este prea mare pentru film, acesta este o componentă ideală de utilizat.
Creați un nou fișier ActionScript și îl denumiți Main.as. Vom declara componentele noastre în Main.as astfel încât trebuie să dezactivați "instanțele instanței de declarare automată"; avantajul de a face acest lucru este că primiți cod de hinting pentru instanță.
Mergi la Meniu> Fișier> Publicați setările și faceți clic pe Setări de lângă Script [Actionscript 3.0]
Debifați "Declare automat instanțe de scenă".
Apoi, în Main.as, vom deschide declarația pachetului și vom importa clasele pe care le vom folosi.
Adăugați următoarele la Main.as:
pachet // Extindem importul MovieClip flash.display.MovieClip; // Necesitatea de a importa componentele pe care le folosim import fl.controls.ColorPicker; import fl.controls.Label; import fl.containers.ScrollPane; import fl.controls.Button; // Evenimentele de care avem nevoie pentru importul flash.events.MouseEvent; importul flash.events.Event; // Necesitatea de a schimba culoarea filmuluiClip importul flash.geom.ColorTransform; // Trebuie să încărcați imaginea import flash.net.URLRequest;
Adăugați declarația de clasă, extindeți videoclipul și configurați funcția constructorului nostru. Aici ne declarăm variabilele și ne chemăm funcțiile în Constructorul Principal.
Adăugați următoarele la Main.as
public class Main extinde MovieClip // Componentele noastre onstage public var customLabel: Label; public var normalLabel: etichetă; public var customColorPicker: ColorPicker; public var normalColorPicker: ColorPicker; public var pătrat: DisplayObject; public var imagineScrollPane: ScrollPane; public var loadImageButton: buton; funcția publică Main () setupLabels (); setupColorPickers (); setupButton ();
Aici definim funcțiile utilizate în constructorul nostru.
În setupLabels funcția pe care o stabilim este textul de pe Etichete. În setupColorPickers am setat culorile pentru noi customColorpicker; aceste culori sunt o serie de culori folosind sintaxa Flash pentru culori hexazecimale. Adăugăm, de asemenea, un ascultător de evenimente pentru colectorii noștri de culoare, astfel încât atunci când un utilizator alege o culoare, oprim funcția relevantă.
În setupButton funcția setăm proprietatea Label Button și adăugăm un Event Listener când utilizatorul face clic pe butonul.
Adăugați următoarele la Main.as:
funcția privată setupLabels (): void // Setează textul Labels customLabel.text = "Custom Color Picker"; normalLabel.text = "Selectorul normal de culoare" funcția privată setupColorPickers (): void // Aici setăm culorile pentru selectorul de culoare customColorPicker.colors = [0x000FF, 0xFF0000,0x00FF00, 0xFFFF00,0xFF33FF]; // Când utilizatorul alege o culoare numim funcția changeColor customColorPicker.addEventListener (Event.CHANGE, changeColor); normalColorPicker.addEventListener (Event.CHANGE, changeColor); funcția privată setupButton (): void // Setează butonul Butoane (Textul de pe buton) loadImageButton.label = "Încarcă imaginea"; // Când utilizatorul face clic pe buton, sunăm funcția loadImage loadImageButton.addEventListener (MouseEvent.CLICK, loadImage);
Aici codificăm funcțiile pentru ascultătorii evenimentului pe care i-am adăugat mai sus.
schimba culoarea funcția utilizează a ColorTransform astfel încât să putem schimba culoarea dreptunghiului pe scenă. Am setat culoarea ColorTransform la culoarea utilizată de utilizator e.target.selectedColor. Ținta este ColorPicker a cărei culoare a fost modificată. Apoi, folosim transforma proprietate a pătrat filmClip și setați colorTransform la culoarea selectată.
Accentsconagua
schimbarea funcției privateColor (e: Event): void // Necesitatea de a configura un obiect ColorTransform pentru a schimba Culoarea culorii varCareClip: ColorTransform = new ColorTransform (); // setați culoarea colorTransform la utilizatorul de culori ales în colorPicker color.color = e.target.selectedColor; // Schimba culoarea filmuluiClip prin ColorTransform square.transform.colorTransform = culoare; funcția privată loadImage (e: Event): void // Încarcă imaginea în scrollPane imageScrollPane.load (nou URLRequest ("image.jpg")); // închideți clasa // închideți pachetul Veți observa în Componente Parametri (care poate fi deschis din meniul ferestrei) pe care îl puteți verifica și selecta anumite proprietăți.
Imaginea de mai sus este pentru componenta ColorPicker.
Proprietățile sunt după cum urmează pentru componenta ColorPicker:
Proprietățile pentru ScrollPane sunt
ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO.ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO. Fișierele de ajutor sunt un loc minunat pentru a afla mai multe despre aceste proprietăți.
Pentru a afla mai multe despre proprietățile pentru etichete și butoane, asigurați-vă că verificați Sfat rapid de pe componentele butonului și etichetei
