Share
I denne Quick Introduksjon til Flash Professional-komponentene skal vi se på ScrollPane og ColorPicker. La oss dykke inn?
Sjekk ut demoen. I den, på venstre side, ser du to Color Picker-komponenter, to etiketter merket "Custom Color Picker" og "Normal Color Picker" og et blått rektangel.
Den tilpassede fargeplukkeren bruker farger tatt utelukkende fra et utvalg av våre valg. Normal Color Picker har alle fargene til en vanlig fargeplukker og når en bruker velger en farge, endrer vi rektangelet til fargen de har valgt.
På høyre side av SWF er det en ScrollPane, der vi legger inn et bilde, og en knapp som vi bruker til å starte lastingen av bildet.
Åpne et nytt Flash-dokument og angi følgende egenskaper:
Åpne komponentvinduet ved å gå til Meny> Vindu> Komponenter eller trykk CTRL + F7
Dra to ColorPickers, to etiketter, en ScrollPane og en knapp til scenen.
I Egenskapspanelet gir den første Etiketten forekomstnavnet custom.
Hvis Egenskaper-panelet ikke vises, gå til Meny> Vindu> Egenskaper eller trykk CTRL + F3.
Sett etiketten er X til 16 og dens Y til 12.
Gi den andre etiketten forekomstnavnet "normalLabel"; sett sin X til 16 og dens Y til 176.
Gi den første ColorPicker forekomstnavnet "customColorPicker"; sett sin X til 16 og dens Y til 41.
Gi den andre ColorPicker forekomstnavnet "normalColorPicker"; sett sin X til 16 og dens Y til 206.
Gi den andre ScrollPane forekomstnavnet "imageScrollPane"; sett sin X til 277 og dens Y til 29.
Gi Knappen forekomstnavnet "loadImageButton"; sett sin X til 354 og dens Y til 332.
Bruk rektangelfunksjonen til å tegne et rektangel på scenen. Jeg trakk min med en blå farge. Velg rektangelet og gå til Meny> Endre> Konverter til symbol (eller trykk F8); sett navnet til "square" og kontroller at "Type" er satt til MovieClip.
Deretter gi det et forekomstnavn på torget som vi gjorde med komponentene ovenfor. Still størrelsen på 143x97px, sett dens X til 90, og dens Y til 47.
ColorPicker er en flott liten komponent som lar brukerne velge en farge. Du kan også definere hvilke farger du vil ha tilgjengelig i ColorPicker.
ScrollPane-komponenten viser DisplayObjects, JPEG, GIF og PNG-filer, samt SWF-filer, i et rullbart område. Når innholdet du laster inn er for stort til filmen, er dette en ideell komponent å bruke.
Opprett en ny ActionScript-fil og gi den navnet Main.as. Vi vil erklære komponentene våre i Main.as, så vi må slå av "auto deklarere scenevaner"; Fordelen med å gjøre dette er at du får koden hinting for forekomsten.
Gå til Meny> Fil> Publiser innstillinger og klikk på Innstillinger ved siden av Skript [Actionscript 3.0]
Fjern merket for "Oppgi automatisk forekomst av forekomster".
Deretter åpner vi pakkeerklæringen i Main.as og importerer klassene vi skal bruke.
Legg til følgende til Main.as:
pakke // Vi utvider MovieClip importerer flash.display.MovieClip; // Trenger du å importere komponentene vi bruker import fl.controls.ColorPicker; importere fl.controls.Label; importere fl.containers.ScrollPane; importere fl.controls.Button; // Hendelsene vi trenger importere flash.events.MouseEvent; importere flash.events.Event; // Trenger du å endre farge på filmClip importer flash.geom.ColorTransform; // Trengs for å laste bilde import flash.net.URLRequest;
Legg til klassedeklarasjonen, la den utvide filmklippet og sett opp vår konstruktørfunksjon. Her erklærer vi våre variabler og ringer våre funksjoner i hovedkonstruksjonen.
Legg til følgende til Main.as
offentlig klasse Main utvider MovieClip // Våre Onstage Components public var customLabel: Etikett; offentlig var normalLabel: Etikett; offentlig var customColorPicker: ColorPicker; offentlig var normalColorPicker: ColorPicker; public var square: DisplayObject; offentlig var imageScrollPane: ScrollPane; offentlig var loadImageButton: Button; offentlig funksjon Main () setupLabels (); setupColorPickers (); setupButton ();
Her definerer vi funksjonene som brukes i vår konstruktør.
I setupLabels funksjon vi setter teksten på etikettene. I setupColorPickers Vi setter fargene for vår customColorpicker; Disse fargene er en rekke farger som bruker Flash-syntaks for heksadesimale farger. Vi legger også til en hendelselytter til våre fargeplukkere, slik at når en bruker velger en farge, brann vi av den aktuelle funksjonen.
I setupButton funksjon vi setter egenskapen til Knappens etikett og legger til en hendelselytter for når brukeren klikker på knappen.
Legg til følgende til Main.as:
private funksjon setupLabels (): void // Setter the Labels 'text customLabel.text = "Custom Color Picker"; normalLabel.text = "Normal Color Picker" Private Funksjon SetupColorPickers (): void // Her setter vi fargene for fargeplukker customColorPicker.colors = [0x000FF, 0xFF0000,0x00FF00, 0xFFFF00,0xFF33FF]; // Når brukeren velger en farge, kaller vi changeColor-funksjonen customColorPicker.addEventListener (Event.CHANGE, changeColor); normalColorPicker.addEventListener (Event.CHANGE, changeColor); Private Function SetupButton (): void // Setter Knappens etikett (Teksten på knappen) loadImageButton.label = "Last inn bilde"; // Når brukeren klikker på knappen, kaller vi loadImage funksjon loadImageButton.addEventListener (MouseEvent.CLICK, loadImage);
Her kodes vi for hendelseslytterne vi har lagt til ovenfor.
De changeColor funksjonen bruker a ColorTransform objekt slik at vi kan endre farge på rektangelet på scenen. Vi setter ColorTransforms farge til fargen brukeren valgte ved å bruke e.target.selectedColor. Målet er ColorPicker hvis farger bare ble endret. Så bruker vi forvandle eiendom av torget filmklipp og sett inn colorTransform til den valgte fargen.
Accentsconagua
privat funksjon changeColor (e: Event): void // Trenger du å sette opp et ColorTransform Object for å endre MovieClip's Color var farge: ColorTransform = new ColorTransform (); // sett fargenTransform farge til farger brukeren hentet i colorPicker color.color = e.target.selectedColor; // Endre filmklippets farge ved hjelp av ColorTransform square.transform.colorTransform = color; privat funksjon loadImage (e: Event): void // Laster bildet i scrollPane imageScrollPane.load (ny URLRequest ("image.jpg")); // lukk ut klassen // lukk pakken Du vil legge merke til i Komponentparametre panel (som kan åpnes fra Window-menyen) som du kan sjekke og velge bestemte egenskaper.
Bildet ovenfor er for ColorPicker-komponenten.
Egenskapene er som følger for ColorPicker-komponenten:
Egenskapene for ScrollPane er
ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO.ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO. Hjelpefilene er et flott sted å lære mer om disse egenskapene.
Hvis du vil vite mer om egenskapene for etiketter og knapper, må du sjekke ut Hurtig Tips på knappene og etikettkomponentene
