Crear un selector de color personalizado en Flash

Spanish (Español) translation by Esther (you can also view the original English article)

Un Color Picker (selector de color) es una aplicación, generalmente encontrada dentro de un software de gráficos y en línea, utilizada con el propósito de administrar el color, crear esquemas de color, escoger colores y más.

En este tutorial, te enseñaré a crear un selector de colores personalizado en Flash usando ActionScript 3.0.

Paso 1: Breve descripción

Usando una imagen existente, extraeremos los valores de color usando la clase ColorTransform y la Mouse position (posición del ratón), luego podemos aplicar el valor devuelto a cualquier DisplayObject.

Paso 2: Comienzo

Abre Flash y crea un nuevo Flash File (archivo Flash) (ActionScript 3).

Pon el stage size (tamaño del escenario) a 600x300 y el background (color de fondo) a #D2D1D0.

Nota del editor: Bonita captura de pantalla Carlos :P

Paso 3: Color Picker Box (Caja de selector de color)

Crearemos una caja que contendrá todos los elementos del Color Picker (selector de color).

Dibuja un rectángulo de 217x174 px y rellénalo con este color: #A6A6A6.

Ahora duplica el rectángulo (Cmd + D) hazlo 215x172 px y llénalo con: #FAFAFA.

Repite el proceso y rellena el nuevo rectángulo con: #E0E0E0.

Este será el fondo del selector de color.

Paso 4: Indicadores de color

Este selector de color tiene dos indicadores de color, uno muestra el color activo y el otro el color que está siendo devuelto por el movimiento del Mouse (Ratón).

Selecciona la Rectangle Tool (herramienta Rectángulo) (R) y crea dos rectángulos de 50x23 px usando cualquier color, yo usé el negro para contrastar con el fondo. Convierte cada rectángulo en MovieClip (F8) y establece los nombres de las instancias en "color" y "selectedColor".

Paso 5: Indicadores de texto

Queremos saber el valor hexadecimal de los colores mostrados por el selector de color, los campos de texto dinámicos harán el trabajo.

Selecciona la Text Tool (Herramienta de Texto) (T) y crea dos Dynamic TextFields (Campos de Texto Dinámicos) al lado de cada rectángulo de color. He usado este formato de texto: Helvetica Neue 11pt, #353535. Recuerda incrustar los números y el signo "#" en el menú de propiedades.

Nombra los fields (campos) "colorHex" para el izquierdo y "sColor" para el derecho.

Paso 6: Espectro de colores

Necesitaremos un espectro de colores para crear el selector de colores. En mi ejemplo usé esta imagen de ColorTools (Herramientas de colores).

Cambia el tamaño de la imagen a 200x130 px y dibuja un degradado lineal de negro a blanco en el lateral para añadir una escala de grises.

Convierte el espectro completo en un MovieClip y llámalo "espectro".

Convierte todos los clips en un solo MovieClip y pon el nombre de la instance (instancia) en "colorPicker".

Paso 7: Objetivo

Ahora necesitamos un objeto para aplicar los datos obtenidos del selector de color. Cualquier DisplayObject funcionará, en este caso usaré algún texto.

El nombre de la instancia de TextField es "txt".

Paso 8: ActionScript

Crea un new document (nuevo documento) ActionScript y guárdalo como "Main.as".

Paso 9: Clases requeridas

Estas son las clases que usaremos en esta clase. Para obtener ayuda específica sobre cada clase, por favor, consulta la Flash Help (Ayuda Flash) (F1).

package 
{
	import flash.display.Sprite;
	import flash.display.BitmapData;
	import flash.geom.ColorTransform;
	import flash.events.MouseEvent;

Paso 10: Declarar y extender la clase

Este código declarará y extenderá la clase, nosotros extendemos usando la clase Sprite ya que estamos usando algunas de sus propiedades y métodos.

1	public class Main extends Sprite
2	{

Paso 11: Variables

Utilizamos tres variables, explicadas en los comentarios del código.

var bitmapData:BitmapData = new BitmapData(202,132); //A Bitmap Data object, the size is based on the color spectrum size

var colorTransform:ColorTransform = new ColorTransform();

var hexColor:*; //This variable will store the bitmap color data

Paso 12: Función principal

Esta es la Main function (función principal).

public function Main():void
{
	bitmapData.draw(colorPicker.spectrum); //Passes the bitmap data of the spectrum to the variable

	/* Function listeners */

	colorPicker.spectrum.addEventListener(MouseEvent.MOUSE_MOVE, updateColorPicker);
	colorPicker.spectrum.addEventListener(MouseEvent.MOUSE_UP, setValue);
}

Paso 13: Actualizar el selector de colores

Esta función se encargará de los cambios de color cuando el usuario mueva el Mouse (ratón).

private function updateColorPicker(e:MouseEvent):void
{
	/* Gets the color from the pixel where the mouse is and passes the value to the colorTransform variable */

	hexColor = "0x" + bitmapData.getPixel(colorPicker.spectrum.mouseX,colorPicker.spectrum.mouseY).toString(16);
	colorTransform.color = hexColor;

	/*Sets the color transform data to the "color" clip and the "colorHex" field in the ColorPicker */

	colorPicker.color.transform.colorTransform = colorTransform;
	colorPicker.colorHex.text = "#" + bitmapData.getPixel(colorPicker.spectrum.mouseX,colorPicker.spectrum.mouseY).toString(16).toUpperCase();
}

Paso 14: Establecer el valor

Esta función establece el Value (valor) del MovieClip activo y del sColor TextField en el Color Picker (selector de color), así como el objetivo seleccionado por el usuario.

private function setValue(e:MouseEvent):void
{
	txt.textColor = hexColor; //This is the target
	colorPicker.selectedColor.transform.colorTransform = colorTransform;
	colorPicker.sColor.text = colorPicker.colorHex.text;
}

Paso 15: Clase de documento

Vuelve al archivo .Fla y en el Properties Panel (Panel de Propiedades) agrega "Main (Principal)" en el Class field (campo Clase) para que sea la Clase del Documento.

Conclusión

Ahora puedes elegir tu paleta de colores o espectro de colores favoritos e implementarlo en un selector de colores personalizado desarrollado con ActionScript 3.0.¡Pruébalo!

Espero que te haya gustado este tutorial, ¡gracias por leer!