Create en Custom Color Picker i Flash
Del
Del
en
Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

En Color Picker er et program, vanligvis funnet innenfor grafikk programvare og online, som brukes i forbindelse med fargestyring, lage fargevalg, plukke farger, og mer.

I denne opplæringen, vil jeg lære deg hvordan du oppretter en egendefinert fargevelgeren i Flash bruker Actionscript 3.0

Trinn 1:. Kort oversikt

Ved hjelp av et eksisterende bilde, vil vi trekke ut fargeverdiene ved hjelp av ColorTransform klasse og mus stilling, så vi kan bruke den returnerte verdien til noen Displayobject

Trinn 2:. Starter

Åpne Flash og opprette en ny Flash-fil (Actionscript 3)

Sett scenen størrelsen til 600x300 og sette bakgrunnsfargen til # D2D1D0

Red.anm:.. Nice skjermbilde Carlos: P

Trinn 3: Color Picker Box

Vi vil opprette en boks som skal inneholde alle elementer av fargevelgeren

Tegn en 217x174 px rektangel og fylle det. med denne fargen. # A6A6A6

Nå duplisere rektangel (Cmd + D) gjør det 215x172 px og fylle den med. #FAFAFA

Gjenta prosessen og fylle den nye rektangel med: . # E0E0E0

Dette vil være bakgrunnen for fargevelgeren

Trinn 4:. Farge Indikatorer

Denne fargevelger har to fargeindikatorer, viser en aktiv farge og den andre fargen som er under returnert av musen bevegelse.

Velg rektangelverktøyet (R) og opprette to 50x23 px rektangler som bruker hvilken som helst farge, brukte jeg svart til kontrast mot bakgrunnen. Konvertere hver rektangel til MovieClip (F8) og sette forekomstnavn for å "farge" og "selectedColor"

Trinn 5:. Tekst Indikatorer

Vi ønsker å vite den heksadesimale verdien av de fargene som vises av fargevelgeren, vil dynamiske textfields gjøre jobben.

Velg Text Tool (T) og opprette to dynamiske textfields ved siden av hver farge rektangel. Jeg brukte denne tekstformat: Helvetica Neue 11pt, # 353535. Husk å legge inn tallene og "#" skilt i properies menyen.

navn feltene "colorHex" for den venstre, og "sColor" for den rette.

Trinn 6 : Color Spectrum

Vi trenger en fargespekteret for å lage fargevelgeren. I mitt eksempel brukte jeg dette bildet fra ColorTools.

Resize bildet til 200x130 px og tegne en lineær gradient fra svart til hvitt på siden for å legge til en grå skala.

Konverter hele spekteret . til en MovieClip og gi den navnet "spektrum"

Konverter alle klippene til en enkelt MovieClip og sette forekomsten navn til "ColorPicker"

Trinn 7:. Target

Nå trenger vi en gjenstand for å bruke data fra fargevelgeren. Enhver Displayobject vil fungere, i dette tilfellet vil jeg bruke litt tekst

Textfield forekomstnavnet er "txt"

Trinn 8:.. Action

Opprett en ny Actionscript dokument og lagre det som "Main.as"

Trinn 9:. Må Classes

Dette er klasser som vi skal bruke i denne klassen. For spesifikk hjelp på hver klasse kan du se Flash Hjelp (F1)
pakke {import flash.display.Sprite.; import flash.display.BitmapData; import flash.geom.ColorTransform; import flash.events.MouseEvent;
Trinn 10: Erklærte og Utvide Class

Denne koden vil erklære og utvide klassen, utvider vi bruker Sprite klasse siden vi bruker noen av sine egenskaper og metoder.
public class Hoved strekker Sprite {
Trinn 11: Variabler

Vi bruker tre variabler, forklarte i kode kommentarer
Var bitmapData. BitmapData = new BitmapData (202 132); //En Bitmap dataobjekt, er størrelsen basert på fargespekteret sizevar colorTransform: ColorTransform = new ColorTransform (); Var hexColor: *; . //Denne variabelen vil lagre bitmap fargedata
Trinn 12: Main Funksjon

Dette er den viktigste funksjonen
offentlig funksjon main (): void {bitmapData.draw (colorPicker.spectrum); //Sender bitmap data av spekteret til de variable /* Funksjon lyttere * /colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_MOVE, updateColorPicker); colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_UP, SetValue);}
Trinn 13: Oppdatering Color Picker

Denne funksjonen vil håndtere fargeendringer når brukeren beveger musen
privat funksjon updateColorPicker (. e: MouseEvent): void {/* Gets fargen fra pixel der musen er og sender verdien til colorTransform variabel * /hexColor = "0x" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker.spectrum.mouseY ) .toString (16); colorTransform.color = hexColor; /* Setter farge omforme data til "farge" klipp og "colorHex" feltet i ColorPicker * /colorPicker.color.transform.colorTransform = colorTransform; colorPicker.colorHex.text = "#" + bitmapData.getPixel(colorPicker.spectrum.mouseX,colorPicker.spectrum.mouseY).toString(16).toUpperCase();}
Step 14: Sett verdien

Denne funksjonen setter verdien til activeColor MovieClip og sColor Textfield i fargevelgeren, så vel som brukeren valgte målet
privat funksjon SetValue (e: MouseEvent):. Void { txt.textColor = hexColor; //Dette er målet colorPicker.selectedColor.transform.colorTransform = colorTransform; colorPicker.sColor.text = colorPicker.colorHex.text;}
Trinn 15: Dokument Class

Gå tilbake til FLA filen og i Properties Panel legge til "Main" i Class-feltet for å gjøre dette Dokument Class.

Konklusjon

Nå kan du velge din favoritt fargepalett eller fargespekter og implementere det i en tilpasset fargevelgeren utviklet med Actionscript 3.0. Prøv det!

Jeg håper du likte denne tut, takk for lesing!