Share
En Color Picker er et program som vanligvis finnes i grafikkprogramvare og på nettet, brukes til fargestyring, skaper fargeskjemaer, plukker farger og mer.
I denne opplæringen lærer jeg deg hvordan du lager en egendefinert Color Picker i Flash ved hjelp av ActionScript 3.0.
Ved å bruke et eksisterende bilde, trekker vi ut fargeværdiene ved hjelp av ColorTransform-klassen og Mus-posisjonen, så kan vi bruke den returnerte verdien til noen DisplayObject.
Åpne Flash og opprett en ny Flash-fil (ActionScript 3).
Still scenestørrelsen til 600x300 og sett bakgrunnsfargen til # D2D1D0.
Redaktørens notat: Fint skjermbilde Carlos: P
Vi lager en boks som inneholder alle elementene i Color Picker.
Tegn en 217x174 px rektangel og fyll den med denne fargen: # A6A6A6.
Nå duplikere rektangelet (Cmd + D) gjør det 215x172 px og fyll det med: #FAFAFA.
Gjenta prosessen og fyll det nye rektangelet med: # E0E0E0.
Dette vil være bakgrunnen til Color Picker.
Denne fargevalgeren har to farger, en viser den aktive fargen og den andre fargen som for øyeblikket blir returnert av musebevegelsen.
Velg Rectangle Tool (R) og opprett to 50x23 px rektangler med en hvilken som helst farge, jeg brukte svart til å kontrast til bakgrunnen. Konverter hvert rektangel til MovieClip (F8) og sett forekomstnavnene til "color" og "selectedColor".
Vi ønsker å vite den heksadesimale verdien av fargene som vises av fargeplukkeren, dynamiske tekstfelt vil gjøre jobben.
Velg tekstverktøyet (T) og opprett to Dynamic TextFields ved siden av hvert fargerektangel. Jeg brukte dette tekstformatet: Helvetica Neue 11pt, # 353535. Husk å legge inn tallene og "#" -tegnet i properies-menyen.
Navngi feltene "colorHex" for den venstre og "sColor" for den rette.
Vi trenger et fargespektrum for å lage fargeplukkeren. I mitt eksempel brukte jeg dette bildet fra ColorTools.
Endre størrelse på bildet til 200x130 px og tegne en lineær gradient fra svart til hvit på siden for å legge til en gråskala.
Konverter hele spekteret til en MovieClip og nevner det "spektrum".
Konverter alle klippene til en enkelt MovieClip og sett forekomstnavnet til "colorPicker".
Nå trenger vi et objekt å bruke dataene hentet fra Color Picker. Noen DisplayObject vil fungere, i dette tilfellet vil jeg bruke litt tekst.
TextField-forekomstnavnet er "txt".
Opprett et nytt ActionScript-dokument og lagre det som "Main.as".
Dette er klassene vi skal bruke i denne klassen. For spesifikk hjelp på hver klasse, vennligst se Flash Help (F1).
pakke import flash.display.Sprite; importer flash.display.BitmapData; importer flash.geom.ColorTransform; importer flash.events.MouseEvent;
Denne koden vil deklarere og forlenge klassen, vi strekker oss ved hjelp av Sprite-klassen, siden vi bruker noen av dens egenskaper og metoder.
offentlig klasse Main utvider Sprite
Vi bruker tre variabler, forklart i kodens kommentarer.
var bitmapData: BitmapData = ny BitmapData (202,132); // En Bitmap Data objekt, størrelsen er basert på fargespektrumstørrelsen var colorTransform: ColorTransform = new ColorTransform (); var hexColor: *; // Denne variabelen lagrer bitmap-fargedataene
Dette er hovedfunksjonen.
offentlig funksjon Main (): void bitmapData.draw (colorPicker.spectrum); // Passerer bitmapdataene til spekteret til variabelen / * Funksjonslyttere * / colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_MOVE, updateColorPicker); colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_UP, setValue);
Denne funksjonen håndterer fargeendringene når brukeren beveger musen.
private funksjon updateColorPicker (e: MouseEvent): void / * Får fargen fra pikselet hvor musen er og overfører verdien til fargetransformvariabelen * / hexColor = "0x" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker .spectrum.mouseY) .toString (16); colorTransform.color = hexColor; / * Setter fargetransformasjonsdataene til "farge" klippet og feltet "colorHex" i ColorPicker * / colorPicker.color.transform.colorTransform = colorTransform; colorPicker.colorHex.text = "#" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker.spectrum.mouseY) .toString (16) .toUpperCase ();
Denne funksjonen setter verdien til ActiveColor MovieClip og sColor TextField i Color Picker, så vel som den valgte brukerens mål.
privat funksjon setValue (e: MouseEvent): void txt.textColor = hexColor; // Dette er målet colorPicker.selectedColor.transform.colorTransform = colorTransform; colorPicker.sColor.text = colorPicker.colorHex.text;
Gå tilbake til .Fla-filen og i Egenskapspanelet legg til "Hoved" i Klassefeltet for å gjøre dette til Dokumentklassen.
Nå kan du velge favorittfargepaletten eller fargespektret og implementere det i en tilpasset fargepiktor utviklet med ActionScript 3.0. Prøv det!
Jeg håper du likte denne tut, takk for å lese!
Accentsconagua