Uso del componente ColorPicker

El componente ColorPicker permite que el usuario seleccione un color en una lista de muestras. El modo predeterminado de ColorPicker muestra un solo color en un botón cuadrado. Cuando un usuario hace clic en el botón, aparece la lista de colores disponibles en un panel de muestras, además de un campo de texto que muestra el valor hexadecimal de la selección de color actual.

Se pueden definir los colores que aparecen en ColorPicker estableciendo su propiedad colors con los valores de color que se quieran mostrar.

Interacción del usuario con el componente ColorPicker

Un componente ColorPicker permite que el usuario seleccione un color y lo aplique a otro objeto de la aplicación. Por ejemplo, si se desea que el usuario pueda personalizar los elementos de la aplicación, como el color de fondo o el color del texto, se puede incluir un componente ColorPicker y aplicar el color que selecciona el usuario.

El usuario elige un color haciendo clic en su lista de muestras en el panel o introduciendo su valor hexadecimal en el campo de texto. Una vez que el usuario selecciona un color, se puede utilizar la propiedad selectedColor de ColorPicker para aplicar el color al texto, o bien otro objeto de la aplicación.

Una instancia de ColorPicker se selecciona si el usuario mueve el puntero sobre ella o se desplaza hasta la misma mediante el tabulador. Si está abierto un panel de muestras de ColorPicker, se pueden utilizar las teclas siguientes para controlarlo:

Tecla

Descripción

Inicio

Mueve la selección al primer color del panel de muestras.

Flecha arriba

Mueve la selección una fila arriba en el panel de muestras.

Flecha abajo

Mueve la selección una fila abajo en el panel de muestras.

Flecha derecha

Mueve la selección del panel de muestras un color a la derecha.

Flecha izquierda

Mueve la selección del panel de muestras un color a la izquierda.

Fin

Mueve la selección al último color del panel de muestras.

Parámetros del componente ColorPicker

A continuación se indican los parámetros de edición que se pueden definir para cada instancia del componente ColorPicker en el inspector de propiedades o en el inspector de componentes: selectedColor y showTextField Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Para obtener información sobre los valores posibles de estos parámetros, consulte la clase ColorPicker en la Referencia de ActionScript 3.0 para Flash Professional .

Creación de una aplicación con el componente ColorPicker

En el ejemplo siguiente se añade un componente ColorPicker a una aplicación durante la edición. En este ejemplo, cada vez que cambia el color en ColorPicker, la función changeHandler() llama a la función drawBox() para dibujar un nuevo cuadro con el color seleccionado en ColorPicker.

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre un componente ColorPicker del panel Componentes al centro del escenario y asígnele el nombre de instancia aCp .

  3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente: 

    import fl.events.ColorPickerEvent; 
 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xFF0000);    //draw a red box 
addChild(aBox); 
 
aCp.addEventListener(ColorPickerEvent.CHANGE,changeHandler); 
 
function changeHandler(event:ColorPickerEvent):void { 
    drawBox(aBox, event.target.selectedColor); 
} 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1); 
            box.graphics.drawRect(100, 150, 100, 100); 
            box.graphics.endFill();         
}

  4. Seleccione Control > Probar película.

  5. Haga clic en ColorPicker y seleccione un color para el cuadro.

Creación de un componente ColorPicker con ActionScript

Este ejemplo utiliza el constructor ColorPicker() y addChild() para crear un componente ColorPicker en el escenario. Establece la propiedad colors en los valores de color rojo (0xFF0000), verde (0x00FF00) y azul (0x0000FF) a fin de especificar los colores que mostrará ColorPicker. Asimismo, crea TextArea y, cada vez que se seleccione un color diferente en ColorPicker, el ejemplo cambia el color del texto en el componente TextArea con el que debe coincidir.

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre el componente ColorPicker del panel Componentes al panel Biblioteca.

  3. Arrastre el componente TextArea del panel Componentes al panel Biblioteca.

  4. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente: 

    import fl.controls.ColorPicker; 
import fl.controls.TextArea; 
import fl.events.ColorPickerEvent; 
 
var aCp:ColorPicker = new ColorPicker(); 
var aTa:TextArea = new TextArea(); 
var aTf:TextFormat = new TextFormat(); 
 
aCp.move(100, 100); 
aCp.colors = [0xff0000, 0x00ff00, 0x0000ff]; 
aCp.addEventListener(ColorPickerEvent.CHANGE, changeHandler); 
 
aTa.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus quis nisl vel tortor nonummy vulputate. Quisque sit amet eros sed purus euismod tempor. Morbi tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur diam. Suspendisse at purus in ipsum volutpat viverra. Nulla pellentesque libero id libero."; 
aTa.setSize(200, 200); 
aTa.move(200,100); 
 
addChild(aCp); 
addChild(aTa); 
 
function changeHandler(event:ColorPickerEvent):void { 
    if(TextFormat(aTa.getStyle("textFormat"))){ 
        aTf = TextFormat(aTa.getStyle("textFormat")); 
    } 
    aTf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", aTf); 
}

  5. Seleccione Control > Probar película.