Componente ColorPicker
El componente ColorPicker (disponible a partir del Flash CS3, versión 3.0 de ActionScript), al hacer click sobre él, nos muestra un conjunto de colores de los cuales el usuario puede seleccionar uno de ellos. Con este componente podremos hacer que el usuario cambie de color un MovieClip, un texto, etc. Además, nos permite indicarle qué colores el usuario podrá seleccionar, ideal para cuando queremos que el objeto a cambiar de color vaya acorde a un estilo definido o a una gama de colores.
Este componente tiene las siguientes propiedades:
- enabled: Valor booleano para establecer si el componente está habilitado o no.
- selectedColor: Con esta propiedad podemos establecer el color que estará seleccionado al inicio. También podemos, por medio de ActionScript, determinar el color que está seleccionad actualmente.
- showTextField: Este componente tiene por default un campo de texto donde se muestra el valor hexadecimal del color seleccionado y donde el usuario puede escribir el valor hexadecimal del color que quiere seleccionar.
- visible: Valor booleano. Si es true el componente ColorPicker se mostrará, si es false el ColorPicker no se verá.
Para conocer todos los métodos, propiedades y eventos que conforman la clase ColorPicker, ingresa a la siguiente página.
Tutorial
En este tutorial mostraremos tres ejemplos prácticos del uso del ColorPicker. En el primero cambiaremos el color de un rectángulo usando el ColorPicker. En el segundo, rellenaremos un rectángulo con degradado (dos colores) utilizando la función beginGradientFill; los colores pasados como parámetros a esta función serán obtenidos de dos componentes ColorPicker. Además, por medio de un Slider, el usuario podrá cambiar la rotación del degradado. En el último, cambiaremos el color de un texto dinámico.
Para este tutorial usaremos el Flash CS4. Abre el programa y crea un nuevo documento de Flash.
En el panel Components (Ctrl + F7), dentro de la sección User Interface, busca el componente ColorPicker y arrastra tres de ellos al área de trabajo. Selecciona el primer ColorPicker que tienes en el área de trabajo y dentro del panel Properties asígnale el nombre de instancia de picker1. A los otros componentes asígnales como nombre de instancia picker2 y picker3, respectivamente. Dentro del mismo panel de Components -> User Interface selecciona un componente Slider y arrástralo al área de trabajo. Ponle como nombre de instancia slider. Además, crea dos textos dinámicos con nombres de instancia color_txt y texto_txt.
Ordena los componentes de tu área de trabajo, de tal forma que te quede como en la siguiente imagen:
Nota: El orden de los ColorPicker(s) va de arriba hacia abajo y de izquierda a derecha, de tal forma que el ColorPicker de hasta arriba es picker1. El texto dinámico que está más arriba es color_txt y el texto dinámico de abajo es texto_txt.
Es momento de pasar al código de nuestra aplicación. Renombra la capa donde se encuentran nuestros componentes (generalmente Layer 1) y ponle de nombre Componentes. Agrega una capa con el nombre de Acciones, dentro de esta capa estará todo nuestro código. A continuación explicaré parte por parte el código; recuerda bajar el archivo del tutorial, el cual se encuentra al final de este post.
En nuestra aplicación necesitaremos detectar cuando el usuario seleccionó otro color en alguno de los ColorPicker, o bien cuando desplazó la barra del Slider. Para lo anterior es necesario importar las librerías ColorPickerEvent y SliderEvent.
-
import fl.events.ColorPickerEvent;
-
import fl.events.SliderEvent;
Para que podamos pintar con degradado el segundo rectángulo de nuestro ejercicio, haremos uso de las librerías geom y display. Del primero usaremos la clase Matrix; para el segundo usaremos la clase Graphics.
-
import flash.geom.Matrix;
-
import flash.display.Graphics;
Además, declararemos una variable llamada radianes, en la cual guardaremos el valor de la rotación del degradado. Para este valor debemos usar radianes y no grados, por lo que ten en cuenta que 1° = PI radianes / 180 (profundizaremos sobre este tema más adelante). Por default, el valor de esta variable será cero.
-
var radianes:Number = 0;
Primer ejercicio
Ahora veremos el código de nuestro primer ejercicio. Primero crearemos un MovieClip llamado cuadrado; el color de inicio de este cuadrado será el negro (0x000000), el cual lo pasaremos como parámetro a nuestra función dibujaCuadrado (del cual mostraré su código más adelante). Además, le asignamos el texto “0x000000” a nuestro campo dinámico color_txt y llamamos la función addChild para agregar el MovieClip al contenedor y visualizarlo.
-
var cuadrado:MovieClip = new MovieClip();
-
dibujaCuadrado(cuadrado, 0x000000);
-
color_txt.text = "#000000";
-
addChild(cuadrado);
A continuación veremos el código de la función dibujaCuadrado:
-
function dibujaCuadrado(clipo:MovieClip, color:uint):void
-
{
-
clipo.graphics.beginFill(color, 1);
-
clipo.graphics.drawRect(150, 59, 75, 75);
-
clipo.graphics.endFill();
-
}
En el código anterior, la función dibujaCuadrado recibe como parámetro el MovieClip donde queremos dibujar el cuadrado y color de relleno de éste. El tipo de dato del color es uint (unsigned integer – entero sin signo), este tipo de dato es utilizado en gran medida para el valor de los colores, ya que su máximo valor es el doble que el del tipo de dato int. Para conocer más sobre uint visita esta página.
La primera línea de código de la función dibujaCuadrado establece el color de llenado del cuadrado por medio de la función beginFill. Esta función recibe como primer parámetro el color de relleno y como segundo parámetro el valor del alfa (transparencia). Recuerda que desde el AS3, los valores de alfa van de 0 a 1 y no de 0 a 100.
La segunda línea dibuja el cuadrado en la coordenada x = 100 y y = 150, y con un ancho (width) y alto (height) de 75 pixeles, usando la función drawRect.
La última línea se encarga de aplicar el relleno al MovieClip.
Si corres la aplicación con lo que llevamos ahorita, verás que aparece un cuadrado de color negro del lado izquierdo del primer ColorPicker. Sin embargo, si haces click en picker1 y seleccionas un color verás que no cambia el color del cuadrado. Esto es porque no hemos ligado los eventos del ColorPicker al color del cuadrado, para lograrlo estableceremos dos listeners, uno sobre el evento ITEM_ROLL_OVER y otro sobre el evento CHANGE. El evento ITEM_ROLL_OVER es accionado cuando el usuario se posiciona sobre cualquier color de la paleta de color (valga la redundancia) del ColorPicker. Este evento lo usaremos debido a que en nuestra aplicación queremos mostrar el cambio de color sobre el MovieClip en el momento de posicionarnos en algún color y no al tener que hacerle click. El evento CHANGE es accionado cuando el usuario hace click sobre un color; utilizaremos este evento para mostrar el valor del color seleccionado en el texto dinámico color_txt.
-
picker1.addEventListener(ColorPickerEvent.ITEM_ROLL_OVER, overHandler);
-
picker1.addEventListener(ColorPickerEvent.CHANGE, changeHandler);
Al producirse el evento ITEM_ROLL_OVER, se llamará a la función overHandler.
Al producirse el evento CHANGE, se llamára a la función changeHandler.
A continuación, veremos el código de estas dos funciones:
-
function overHandler(event:ColorPickerEvent):void
-
{
-
var numero:uint = event.target.selectedColor;
-
dibujaCuadrado(cuadrado, numero);
-
}
-
function changeHandler(event:ColorPickerEvent):void
-
{
-
var numero:uint = event.target.selectedColor;
-
var color:String = event.target.hexValue.toString();
-
color_txt.text = "#" + color.toUpperCase();
-
dibujaCuadrado(cuadrado, numero);
-
}
No olvides que, por tratarse de eventos, estas dos funciones reciben como parámetro el evento generado.
En la función overHandler, obtenemos el color seleccionado del componente que generó el evento (en este caso, picker1). Ese color lo almacenamos en una variable local llamada numero la cual es de tipo uint. Después, llamamos a la función dibujaCuadrado (cuyo código lo vimos más arriba) pasándole como parámetro el MovieClip del cuadrado y el color seleccionado.
En la función changeHandler, al igual que en la función anterior, obtenemos el color seleccionado del componente que generó el evento (picker1). En esta función, además de guardar el valor del color seleccionado en formato uint, obtenemos el valor hexadecimal del color seleccionado para mostrarlo en nuestro campo dinámico color_txt (para el usuario es más fácil hacer uso del valor hexadecimal de un color que su valor uint). Posteriormente hacemos la llamada a la función dibujaCuadrado.
Si corres la aplicación verás que al posicionarte encima de un color de la gama de picker1, el MovieClip del cuadrado cambia de color. Además, si seleccionas alguno de los colores, el texto dinámico color_txt muestra el valor del color seleccionado.
Segundo ejercicio
Como lo comenté más arriba, en este segundo ejercicio veremos cómo aplicar un degradado a otro MovieClip cuadrado. Este degradado estará formado por dos colores, los cuales serán obtenidos de los ColorPicker picker2 y picker3. Primero estableceremos el color por default (el cual estará seleccionado desde un inicio) del picker2 y picker3.
-
picker2.selectedColor = 0x0000CC;
-
picker3.selectedColor = 0x66FF00;
Para este ejercicio vamos a crear otro MovieClip en el cual dibujaremos un cuadrado. El MovieClip se llamará cuadraodDeg:
-
var cuadradoDeg:MovieClip = new MovieClip();
-
dibujaCuadradoDegradado(cuadradoDeg, 0x0000CC, 0x66FF00);
-
addChild(cuadradoDeg);
Hasta ahora, el único cambio es que mandamos a llamar la función dibujaCuadradoDegradado, la cual recibirá la referencia del MovieClip y los dos colores que formarán el degradado.
El código de la función dibujaCuadradroDegradado es el siguiente:
-
function dibujaCuadradoDegradado(clipo:MovieClip, color1:uint, color2:uint)
-
{
-
var matriz:Matrix = new Matrix();
-
matriz.createGradientBox(80, 80, radianes, 150, 165);
-
clipo.graphics.beginGradientFill(GradientType.LINEAR, [color1, color2], [1, 1], [1, 255], matriz, SpreadMethod.PAD, InterpolationMethod.LINEAR_RGB);
-
clipo.graphics.drawRect(150, 165, 80, 80);
-
clipo.graphics.endFill();
-
}
Para crear el degradado necesitamos la función createGradientBox, la cual recibe cómo parámetros el ancho y alto del degradado, el valor de rotación del degradado (en radianes) y la distancia en pixeles para trasladar el degradado hacia la izquierda (tx) y hacia abajo (ty). Esta función pertenece a la clase Matrix, por lo tanto declaramos la variable matriz para usar la función.
Posteriormente hacemos uso de la función beginGradientFill. Esta función recibe los siguientes parámetros:
- type: Especifica el tipo de degradado que se va a utilizar (lineal o radial). GradientType.LINEAR, GradientType.RADIAL.
- colors: Arreglo con el valor de los colores que formarán parte del degradado.
- alphas: Arreglo con los valores del alfa (transparencia) de cada uno de los colores del parámetro anterior. El valor del alfa va de 0 a 1.
- ratios: Arreglo con los valores de la proporción de distribución. Este valor define el porcentaje del ancho (width) donde el color se muestra al 100%. El valor puede ir de 0 a 255, donde el 0 representa la posición de hasta la izquierda y 255 representa la posición de hasta la derecha de la caja del degradado.
- matrix: La variable de la clase Matrix que definimos con anterioridad y con la cual utilizamos el método createGradientBox.
- spreadMethod: Especifica el método de propagación (spread) a utilizar. Este valor puede ser PAD (rellenar), REFLECT (reflejo) y REPEAT (repite el degradado a lo ancho de la caja).
- interpolationMethod: Método de interpolación. Su valor puede ser linearRGB y RGB.
Por último dibujamos nuestro cuadrado y usamos el método endFill para aplicar el relleno.
Al igual que en el ejercicio anterior, debemos establecer listeners para el picker2 y picker3. Estos listeners se ejecutarán cuando se presente el evento CHANGE en los ColorPicker y llamarán a la función cambiaDegradado.
-
picker2.addEventListener(ColorPickerEvent.CHANGE, cambiaDegradado);
-
picker3.addEventListener(ColorPickerEvent.CHANGE, cambiaDegradado);
La función cambiaDegradado llamará a su vez a la función dibujaCuadradoDegradado, cuyos parámetros son el MovieClip al cual se le aplicará el degradado y los colores seleccionados del picker1 y picker2.
-
function cambiaDegradado(event:ColorPickerEvent)
-
{
-
dibujaCuadradoDegradado(cuadradoDeg, picker2.selectedColor, picker3.selectedColor);
-
}
Si corres la aplicación verás que aparece un cuadrado con degradado azul y verde. Si seleccionas otro color de cualquiera de los ColorPicker picker2 y picker3, el degradado cambiará. Ahora solo nos falta programar la función del Slider slider para cambiar la rotación del degradado. A este slider le agregaremos un listener cuando se ejecute el evento THUMB_DRAG, es decir, cuando el slider es presionado y movido por el mouse.
-
slider.addEventListener(SliderEvent.THUMB_DRAG, cambiarRotacion);
Selecciona el componente Slider que está en tu área de trabajo y en el Inspector de Componentes (Shift + F7) ponle las siguientes propiedades:
Inspector de Componentes del Slider
De la imagen anterior se observa que el valor mínimo del Slider será 0 mientras que el máximo es de 180. Esto es porque queremos que el rango del valor de rotación sea de 0° a 180°. En el momento en que nosotros obtenemos el valor del Slider (cuando se ejecuta el listener) debemos cambiar el valor de grados a radianes, por medio de la fórmula (Math.PI / 180) * grados.
-
function cambiarRotacion(event:SliderEvent)
-
{
-
var grados:Number = event.value;
-
var rads:Number = (Math.PI / 180) * grados;
-
radianes = rads;
-
dibujaCuadradoDegradado(cuadradoDeg, picker2.selectedColor, picker3.selectedColor);
-
}
La última línea de la función cambiarRotacion llama a la función dibujaCuadradoDegradado, la cual al ser llamada utilizará el nuevo valor de la variable radianes.
Tercer ejercicio
En este tercer ejercicio cambiaremos el color de un texto dinámico de acuerdo al color seleccionado del ColorPicker picker4. Además, estableceremos el arreglo de colores que queremos mostrar en el picker4.
Primero vamos a ocultar el campo de texto del picker4 para evitar que el usuario introduzca el valor de un color distinto a los mostrados en el arreglo:
-
picker4.showTextField = false;
Para establecer los colores a mostrar dentro de este componente utilizamos la propiedad colors, la cual recibe un arreglo de colores:
-
picker4.colors = [0xFFFFFF, 0x004070, 0x4b8cdb, 0xa1c8f7, 0x6fb543,
-
0xddb0cf, 0xf8ccd5, 0xffe8a1, 0xfdd382, 0xf2ec87,
-
0x307ec7, 0x57a3de, 0xcbe8f5, 0x4781b3, 0x1c5485];
Ahora establecemos el número de colores que queremos mostrar por fila, es decir, la cantidad de columnas de colores a mostrar dentro del ColorPicker. En nuestro caso queremos que sea de 5 en 5.
-
picker4.setStyle("columnCount", 5);
El color por default de nuestro texto dinámico será negro, por lo tanto seleccionamos el color negro en el picker4.
-
picker4.selectedColor = 0x000000;
Para poderle cambiar el color a un texto dinámico, debemos crear una variable de tipo TextFormat. Recuerda que el nombre de instancia de nuestro texto dinámico es texto_txt, y para aplicarle el formato debemos utilizar el método setTextFormat.
-
var formato:TextFormat = new TextFormat();
-
formato.bold = true;
-
formato.color = 0x000000;
-
formato.size = 16;
-
formato.font = "Arial";
-
texto_txt.setTextFormat(formato);
Por último solo nos queda añadirle un listener al picker4 y establecer la función que cambiará el color:
-
picker4.addEventListener(ColorPickerEvent.CHANGE, cambiaTexto);
-
-
function cambiaTexto(event:ColorPickerEvent)
-
{
-
formato.color = picker4.selectedColor;
-
texto_txt.setTextFormat(formato);
-
}
 |
» Clase Matrix
» Función createGradientBox
» Función beginGradientFill
» Clase Slider
Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.
[...] a utilizar mediante un componente, que sirve para modificar las propiedades de los colores, llamado ColorPicker. Primero, luego de crear el documento debemos arrastrar desde el panel de componentes el llamdo [...]