Uso do componente ColorPicker

O componente ColorPicker permite que o usuário selecione uma cor em uma lista de amostras. O modo padrão do ColorPicker mostra uma única cor em um botão quadrado. Quando um usuário clica no botão, a lista de cores disponíveis aparece em um painel de amostras juntamente com um campo de texto que exibe o valor hexadecimal da seleção de cor atual.

Você pode definir as cores que aparecem no ColorPicker definindo sua propriedade colors com os valores de cor a serem exibidos.

Interação do usuário com o componente ColorPicker

Um ColorPicker permite que um usuário selecione uma cor e a aplique a outro objeto no aplicativo. Por exemplo, se você deseja permitir que o usuário personalize elementos do aplicativo, como uma cor de fundo ou a cor do texto, inclua um ColorPicker e aplique a cor selecionada pelo usuário.

O usuário escolhe uma cor clicando em sua amostra no painel ou digitando seu valor hexadecimal no campo de texto. Depois que o usuário selecionar uma cor, use a propriedade selectedColor do ColorPicker para aplicar a cor ao texto ou a outro objeto no aplicativo.

Uma ocorrência de ColorPicker receberá o foco se um usuário mover o ponteiro sobre ela ou acessá-la por meio da tecla tab. Quando o painel de amostras de um ColorPicker for aberto, você poderá usar as seguintes teclas para controlá-lo:

Tecla

Descrição

Início

Move a seleção para a primeira cor no painel de amostras.

Seta para cima

Move a seleção uma linha acima no painel de amostras.

Seta para baixo

Move a seleção uma linha abaixo no painel de amostras.

Seta para direita

Move a seleção uma cor para a direita no painel de amostras.

Seta para esquerda

Move a seleção uma cor para a esquerda no painel de amostras.

End

Move a seleção para a última cor no painel de amostras.

Parâmetros do componente ColorPicker

Você pode definir os seguintes parâmetros de criação no Inspetor de propriedades ou no Inspetor de componentes para cada ocorrência de ColorPicker: selectedColor e showTextField . Cada um desses parâmetros tem uma propriedade ActionScript correspondente de mesmo nome. Para obter informações sobre os possíveis valores desses parâmetros, consulte a classe ColorPicker na Referência do ActionScript 3.0 para Flash Professional .

Criar um aplicativo com o componente ColorPicker

O exemplo a seguir adiciona um componente ColorPicker a um aplicativo durante a criação. Neste exemplo, cada vez que você altera a cor no ColorPicker, a função changeHandler() chama a função drawBox() para desenhar um nova caixa com a cor selecionada no ColorPicker.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste um ColorPicker do painel Componentes para o centro do Palco e atribua a ele o nome de ocorrência aCp .

  3. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

    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. Selecione Controlar > Testar filme.

  5. Clique no ColorPicker e selecione uma cor para colorir a caixa.

Criar um ColorPicker por meio do ActionScript

Este exemplo usa o construtor ColorPicker() e o método addChild() para criar um ColorPicker no Palco. Ele define a propriedade colors para os valores de cor vermelho (0xFF0000), verde (0x00FF00) e azul (0x0000FF) a fim de especificar as cores que o ColorPicker exibirá. Ele também cria uma TextArea e, cada vez que você selecionar uma cor diferente no ColorPicker o exemplo alterará a cor do texto na TextArea para que seja correspondente.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste o componente ColorPicker do painel Componentes para o painel Biblioteca.

  3. Arraste o componente TextArea do painel Componentes para o painel Biblioteca.

  4. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

    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. Selecione Controlar > Testar filme.