Usare il componente ColorPicker

Il componente ColorPicker consente all'utente di selezionare un colore da un elenco di campioni. La modalità predefinita del componente ColorPicker mostra un singolo colore all'interno di un pulsante quadrato. Quando l'utente fa clic sul pulsante, viene visualizzato l'elenco dei colori disponibili in un pannello di campioni insieme a un campo di testo con il valore esadecimale del colore attualmente selezionato.

Per impostare i colori che saranno visualizzati nel componente ColorPicker, impostate la relativa proprietà colors con i valori di colore che desiderate visualizzare.

Interazione dell'utente con il componente ColorPicker

Un componente ColorPicker consente all'utente di selezionare un colore e di applicarlo a un altro oggetto nell'applicazione. Ad esempio, se desiderate consentire all'utente di personalizzare gli elementi dell'applicazione, come il colore dello sfondo o del testo, potete includere un componente ColorPicker e applicare il colore selezionato dall'utente.

L'utente sceglie un colore selezionando il relativo campione nel pannello o inserendo il valore esadecimale del colore nel campo di testo. Dopo che l'utente ha selezionato un colore, potete usare la proprietà selectedColor di ColorPicker per applicare il colore al testo o a un altro oggetto nell'applicazione.

Un'istanza ColorPicker viene attivata quando l'utente si sposta su di essa mediante il puntatore del mouse o il tasto Tab. Quando il pannello dei campioni di un componente ColorPicker è aperto, potete usare i seguenti tasti per controllarlo:

Chiave

Descrizione

Home

Sposta la selezione al primo colore nel pannello dei campioni.

Freccia su

Sposta la selezione di una riga verso l'alto nel pannello dei campioni.

Freccia giù

Sposta la selezione di una riga verso il basso nel pannello dei campioni.

Freccia destra

Sposta la selezione di un colore verso destra nel pannello dei campioni.

Freccia sinistra

Sposta la selezione di un colore verso sinistra nel pannello dei campioni.

Fine

Sposta la selezione all'ultimo colore nel pannello dei campioni.

Parametri del componente ColorPicker

Per ogni istanza ColorPicker potete impostare i parametri di creazione selectedColor e showTextField nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti. Ciascuno di questi parametri ha una proprietà ActionScript corrispondente con lo stesso nome. Per informazioni sui valori che potete impostare per questi parametri, vedete la classe ColorPicker nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

Creare un'applicazione con il componente ColorPicker

Nell'esempio seguente viene aggiunto un componente ColorPicker a un'applicazione durante la creazione. In questo esempio, ogni volta che cambiate il colore nel componente ColorPicker, la funzione changeHandler() chiama la funzione drawBox() per disegnare una nuova casella con il colore selezionato in ColorPicker.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate un componente ColorPicker dal pannello Componenti al centro dello stage e assegnategli il nome di istanza aCp .

  3. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente: 

    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. Selezionare Controllo > Prova filmato.

  5. Fate clic sul componente ColorPicker e selezionate un colore da applicare alla casella.

Creare un componente ColorPicker mediante ActionScript

Nell'esempio seguente vengono usati la funzione di costruzione ColorPicker() e il metodo addChild() per creare un componente ColorPicker sullo stage. Per specificare i colori che saranno visualizzati nel componente ColorPicker, viene impostata la proprietà colors sui valori di colore rosso (0xFF0000), verde (0x00FF00) e blu (0x0000FF). In questo esempio, viene inoltre creato un componente TextArea e ogni volta che selezionate un colore diverso in ColorPicker, il colore del testo nel componente TextArea viene modificato di conseguenza.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate il componente ColorPicker dal pannello Componenti al pannello Libreria.

  3. Trascinate il componente TextArea dal pannello Componenti al pannello Libreria.

  4. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente: 

    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. Selezionare Controllo > Prova filmato.