Hurtig Innledning: Flash ScrollPane og ColorPicker Components

Quick Innledning: Flash ScrollPane og ColorPicker Components
Del
Del
Del
Del
Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne rask innføring i Flash Professional komponentene vi kommer til å se på ScrollPane og ColorPicker. La oss dykke i ..




kort oversikt

Sjekk ut demoen. I det, på venstre side, ser du to fargevelgeren komponenter, to etiketter merket "Custom Color Picker" og "Normal Color Picker" og en blå firkant.

Custom Color Picker bruker farger hentet utelukkende fra et utvalg av våre valg. Normal Color Picker har alle fargene på en vanlig fargevelgeren og når en bruker velger en farge vi endre rektangelet til fargen de har valgt.

På høyre side av SWF det er en ScrollPane, der vi legger et bilde, og en knapp som vi bruker til å starte lasting av bildet.



Trinn 1: Sette opp Document

Åpne en ny Flash dokument og angi følgende egenskaper:

Dokumentstørrelse: 550x400px

Bakgrunnsfarge: #FFFFFF



Trinn 2: Legg Komponenter til Stage

Åpne komponenter vinduet ved å gå til Meny > Vindu > Komponenter eller trykk CTRL + F7

Drag to ColorPickers, to etiketter, en ScrollPane og en knapp til scenen.

I Egenskaper-panelet gir den første Etikett forekomstnavnet custom. Anmeldelser

Hvis Properties panelet ikke vises gå til Meny > Vindu > Egenskaper eller trykk CTRL + F3

Sett Merkelappens X til 16 og dens Y til 12.

Gi andre Etikett forekomstnavnet "normalLabel".; satt sin X til 16 og dens Y til 176.

Gi den første ColorPicker forekomstnavnet "customColorPicker"; satt sin X til 16 og dens Y til 41.

Gi andre ColorPicker forekomstnavnet "normalColorPicker"; satt sin X til 16 og dens Y til 206.

Gi andre ScrollPane forekomstnavnet "imageScrollPane"; satt sin X til 277 og dens Y til 29.

Gi Button forekomstnavnet "loadImageButton"; satt sin X til 354 og dens Y til 332.

Ved hjelp av rektangel verktøyet tegne et rektangel på scenen. Jeg trakk meg med en blå farge. Velg rektangelet og gå til Meny > Endre > Konverter til Symbol plakater (eller trykk på F8); sette navn til "firkantet" og sørge for at "Type" er satt til MovieClip.

Neste, gi den en forekomst navn kvadrat som vi gjorde med komponentene ovenfor. Satt sin størrelse til 143x97px, setter sin X til 90, og dens Y til 47.



Forklare Components

ColorPicker er en stor liten komponent som lar brukerne velge en farge . Du kan også definere hvilke farger du vil ha tilgjengelig i ColorPicker.

De ScrollPane komponent viser DisplayObjects, JPEG, GIF og PNG-filer, samt SWF-filer, i en rulleområdet. Når innholdet du legger i, er for stor for filmen dette er en ideell komponent for å bruke



Trinn 3:. Klar AS File

Opprett en ny Actionscript-fil og gi den navnet Main.as. Vi skal erklære våre komponenter i Main.as så vi må slå av "auto erklære scene forekomster"; . fordelen av å gjøre dette er at du får kode antydet for eksempel

Gå til Meny > Fil > Publish Settings Hotell og klikk på Innstillinger ved siden av Script [Actionscript 3.0]

Fjern haken ved «erklære automatisk scene forekomster".

Neste, i Main.as, vi vil åpne pakken erklæringen og importere klassene vi skal bruke

Legg til følgende Main.as:
pakken {//Vi utvider MovieClip import flash.display.MovieClip;. //Trenger du å importere komponentene vi bruker import fl.controls.ColorPicker; import fl.controls.Label; import fl.containers.ScrollPane; import fl.controls.Button; //Hendelsene vi trenger import flash.events.MouseEvent; import flash.events.Event; //Trengs for å endre fargen på MovieClip import flash.geom.ColorTransform; //Trengs for å laste bilde import flash.net.URLRequest;



Trinn 4: Sett opp hoved Class

Legg klassedeklarasjonen, gjør det utvide filmklipp, og sette opp vår konstruktør funksjon . Her erklærer vi våre variabler og ringe våre funksjoner i hoved Constructor

Legg til følgende Main.as
public class Hoved strekker MovieClip {//Våre scenen Components offentlig Var custom. Etikett; offentlig Var normalLabel: Etikett; offentlig Var customColorPicker: ColorPicker; offentlig Var normalColorPicker: ColorPicker; offentlig Var torget: Displayobject; offentlig Var imageScrollPane: ScrollPane; offentlig Var loadImageButton: Button; offentlig funksjon main () {setupLabels (); setupColorPickers (); setupButton (); }



Trinn 5: Hoved Constructor Funksjoner

Her kan vi definere funksjonene som brukes i vår konstruktør

I setupLabels funksjon vi setter teksten på etikettene.. I setupColorPickers satt vi farger for vår customColorpicker; disse fargene er en rekke farger ved hjelp av Flash er syntaksen for heksadesimale farger. Vi legger også til en hendelse lytteren til våre fargevelgere, slik at når en bruker velger en farge vi fyre av den aktuelle funksjonen.

I setupButton funksjon vi setter knappens etikett eiendom og legge til en hendelse lytteren for når brukeren klikk på knappen

Legg til følgende i Main.as:
private funksjons setupLabels ():. void {//Setter Etiketter 'tekst customLabel.text = "Custom Color Picker"; normalLabel.text = "Normal Color Picker"} private funksjons setupColorPickers (): void {//Her har vi satt farger for fargevelgeren customColorPicker.colors = [0x000FF, 0xFF0000,0x00FF00, 0xFFFF00,0xFF33FF]; //Når brukeren plukker en farge vi kaller changeColor funksjon customColorPicker.addEventListener (Event.CHANGE, changeColor); normalColorPicker.addEventListener (Event.CHANGE, changeColor);} private funksjon setupButton (): void {//Setter Knapper Etikett (Teksten på knappen) loadImageButton.label = "Load Image"; //Når brukeren klikker på knappen vi kaller loadImage funksjon loadImageButton.addEventListener (MouseEvent.CLICK, loadImage);}



Trinn 6: Code vårt arrangement Lyttere

Her vi kode funksjonene for hendelsen lyttere vi lagt over.

changeColor funksjonen bruker et ColorTransform objektet slik at vi kan endre fargen på rektangelet på scenen. Vi setter ColorTransform farge til fargen brukeren valgt ved hjelp e.target.selectedColor. Målet er ColorPicker som har fargen ble bare endret. Deretter bruker vi forvandle eiendommen til torget MovieClip og sett colorTransform til fargen valgt
privat funksjon changeColor. (E: Hendelses): void {//Trenger du å sette opp en ColorTransform Object å endre MovieClip Color Var farge : ColorTransform = new ColorTransform (); //setter colorTransform farge til farge bruker plukket i ColorPicker color.color = e.target.selectedColor; //Endre MovieClip farge bruker ColorTransform square.transform.colorTransform = farge; } Private funksjon loadImage (e: Hendelses): void {//Laster inn bildet i scrollPane imageScrollPane.load (ny URLRequest ("bilde.jpg")); }} //Lukke ut klassen} //lukke pakken



Konklusjon

Du vil merke i Component Parametere
panel (som kan åpnes fra Vindu-menyen) som du kan sjekke og velge visse egenskaper

Bildet over er for ColorPicker komponent

Eiendommene er som følger for ColorPicker komponent..
< li> aktivert: en boolsk verdi som angir om komponenten kan godta brukerundersøkelser

selectedColor:.. En heksadesimal verdi som setter den valgte fargen på ColorPicker

showTextField: en boolsk verdi som indikerer om den interne tekstfeltet i ColorPicker komponent vises

synlige:.. en boolsk verdi som angir hvorvidt komponenten er synlig på scenen

egenskaper for ScrollPane er

aktivert: en boolsk verdi som angir om komponenten kan godta brukerundersøkelser

horizontalLineScrollSize. en verdi som beskriver hvor mye innhold som skal rulles, horisontalt, når en bokrull pil klikkes

horizontalPageScrollSize. han telle piksler ved å flytte rulle tommelen på den horisontale rullefeltet når rullefeltet spor trykkes

horizontalScrollPolicy: a. verdi som angir staten av den horisontale rullefeltet. Kan være:. ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO

scrollDrag. En boolsk verdi som angir om rulling oppstår når en bruker drar på innholdet i boken ruten

verticalLineScrollSize: en verdi som beskriver hvor mange piksler å rulle vertikalt når en rullepil klikkes

verticalPageScrollSize:.. greven av piksler ved å flytte rulle tommelen på den loddrette rullefeltet når rullefeltet spor trykkes

verticalScrollPolicy: en verdi som indikerer tilstanden i vertikale rullefeltet. Kan være: ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO

synlig.. En boolsk verdi som angir hvorvidt komponenten er synlig på scenen

Hjelpen filer er et flott sted å lære mer om disse egenskapene.

Hvis du vil vite mer om egenskapene for etiketter og Button bør du sjekke ut Quick Tips på knappen og Merk komponenter