Share
Un Color Picker è un'applicazione, solitamente presente all'interno di software di grafica e online, utilizzata ai fini della gestione del colore, creando combinazioni di colori, selezionando colori e altro.
In questo tutorial, ti insegnerò come creare un selettore colori personalizzato in Flash utilizzando ActionScript 3.0.
Usando un'immagine esistente, estraiamo i valori del colore usando la classe ColorTransform e la posizione del mouse, quindi possiamo applicare il valore restituito a qualsiasi DisplayObject.
Apri Flash e crea un nuovo file Flash (ActionScript 3).
Imposta le dimensioni dello stage su 600x300 e imposta il colore di sfondo su # D2D1D0.
Nota dell'editore: Bello screenshot Carlos: P
Creeremo una scatola che conterrà tutti gli elementi del Color Picker.
Disegna un rettangolo di 217x174 px e riempilo con questo colore: # A6A6A6.
Ora duplica il rettangolo (Cmd + D) rendilo 215x172 px e riempilo con: #FAFAFA.
Ripeti il processo e riempi il nuovo rettangolo con: # E0E0E0.
Questo sarà lo sfondo del Color Picker.
Questo selettore di colori ha due indicatori di colore, uno visualizza il colore attivo e l'altro il colore che viene attualmente restituito dal movimento del mouse.
Seleziona lo strumento Rettangolo (R) e crea due rettangoli di 50x23 px usando qualsiasi colore, ho usato il nero per contrastare lo sfondo. Converti ciascun rettangolo in MovieClip (F8) e imposta i nomi delle istanze su "color" e "selectedColor".
Vogliamo conoscere il valore esadecimale dei colori visualizzati dal Color Picker, i campi di testo dinamici faranno il lavoro.
Seleziona lo strumento di testo (T) e crea due campi di testo dinamici accanto a ciascun rettangolo di colore. Ho usato questo formato di testo: Helvetica Neue 11pt, # 353535. Ricordarsi di incorporare i numeri e il segno "#" nel menu delle proprietà.
Denominare i campi "colorHex" per quello di sinistra e "sColor" per quello di destra.
Avremo bisogno di uno spettro di colori per creare il selettore di colori. Nel mio esempio ho usato questa immagine da ColorTools.
Ridimensiona l'immagine a 200x130 px e disegna una sfumatura lineare dal nero al bianco sul lato per aggiungere una scala di grigi.
Converti l'intero spettro in un MovieClip e chiamalo "spettro".
Converti tutti i clip in un singolo MovieClip e imposta il nome dell'istanza su "colorPicker".
Ora abbiamo bisogno di un oggetto per applicare i dati ottenuti dal Color Picker. Qualsiasi DisplayObject funzionerà, in questo caso userò del testo.
Il nome dell'istanza TextField è "txt".
Crea un nuovo documento ActionScript e salvalo come "Main.as".
Queste sono le classi che useremo in questa classe. Per assistenza specifica su ciascuna classe, fare riferimento alla Guida di Flash (F1).
pacchetto import flash.display.Sprite; import flash.display.BitmapData; import flash.geom.ColorTransform; import flash.events.MouseEvent;
Questo codice dichiarerà ed estenderà la classe, estendiamo usando la classe Sprite poiché stiamo usando alcune delle sue proprietà e metodi.
public class Main estende Sprite
Utilizziamo tre variabili, spiegate nei commenti al codice.
var bitmapData: BitmapData = new BitmapData (202,132); // Un oggetto Bitmap Data, la dimensione si basa sulla dimensione dello spettro del colore var colorTransform: ColorTransform = new ColorTransform (); var hexColor: *; // Questa variabile memorizzerà i dati del colore bitmap
Questa è la funzione principale.
public function Main (): void bitmapData.draw (colorPicker.spectrum); // Passa i dati bitmap dello spettro alla variabile / * Function listeners * / colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_MOVE, updateColorPicker); colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_UP, setValue);
Questa funzione gestirà i cambiamenti di colore quando l'utente sposta il mouse.
funzione privata updateColorPicker (e: MouseEvent): void / * Ottiene il colore dal pixel in cui si trova il mouse e passa il valore alla variabile colorTransform * / hexColor = "0x" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker .spectrum.mouseY) .toString (16); colorTransform.color = hexColor; / * Imposta i dati di trasformazione del colore sulla clip "colore" e sul campo "colorHex" in ColorPicker * / colorPicker.color.transform.colorTransform = colorTransform; colorPicker.colorHex.text = "#" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker.spectrum.mouseY) .toString (16) .toUpperCase ();
Questa funzione imposta il valore su activeColor MovieClip e sColor TextField nel Color Picker, così come la destinazione selezionata dall'utente.
funzione privata setValue (e: MouseEvent): void txt.textColor = hexColor; // Questo è il target colorPicker.selectedColor.transform.colorTransform = colorTransform; colorPicker.sColor.text = colorPicker.colorHex.text;
Torna al file .Fla e nel pannello Proprietà aggiungi "Main" nel campo Class per renderlo la Document Class.
Ora puoi scegliere la tavolozza dei colori o lo spettro dei colori preferiti e implementarla in un Color Picker personalizzato sviluppato con ActionScript 3.0. Provalo!
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Accentsconagua