Använda komponenten ColorPicker

Med komponenten ColorPicker-komponenten kan en användare välja en färg i en lista med färgrutor. I standardläget för ColorPicker visas en färg på en fyrkantig knapp. När användaren klickar på knappen visas listan med färger i en färgrutepanel, tillsammans med ett textfält som visar det hexadecimala värdet på den aktuella färgen.

Du kan ställa in färgerna som visas i ColorPicker genom att ange de färgvärden som du vill visa i dess colors -egenskap.

Använda komponenten ColorPicker

Med en ColorPicker kan användaren välja en färg och använda den på ett annat objekt i programmet. Om du till exempel vill låta användaren anpassa vissa element i programmet, som bakgrundsfärg eller textens färg, kan du ta med en ColorPicker och använda den färg som användaren väljer.

Användaren väljer en färg genom att klicka på dess färgruta i panelen, eller genom att ange dess hexadecimala värde i textfältet. När användaren har valt en färg kan du använda ColorPickers egenskap selectedColor för att använda färgen på text eller andra objekt i programmet.

En ColorPicker-förekomst får fokus om användaren rör pekaren över den eller går till den med tabbtangenten. När en ColorPickers färgrutepanel är öppen kan du använda följande tangenter för att styra den:

Nyckel

Beskrivning

Hem

Markerar den första färgen i färgrutepanelen.

Uppilen

Flyttar markeringen en rad uppåt i färgrutepanelen.

Nedpilen

Flyttar markeringen en rad nedåt i färgrutepanelen.

Högerpil

Flyttar markeringen i färgrutepanelen en färg åt höger.

Vänsterpil

Flyttar markeringen i färgrutepanelen en färg åt vänster.

End

Markerar den sista färgen i färgrutepanelen.

ColorPicker-komponentparametrar

Du kan ställa in följande utvecklingsparametrar i egenskapsinspektören eller komponentinspektören för varje förekomst av ColorPicker-komponenten: selectedColor och showTextField . Var och en av de här parametrarna har en motsvarande ActionScript-egenskap med samma namn. Information om möjliga värden på de här parametrarna finns i ColorPicker-klassen i Referenshandbok för ActionScript 3.0 i Adobe Flash Professional .

Skapa ett program med komponenten ColorPicker

I följande exempel läggs en ColorPicker-komponent till i ett program under utvecklingen. Varje gång du ändrar färgen i ColorPicker i det här exemplet anropar funktionen changeHandler() funktionen drawBox() för att rita en ny ruta med den färg som du valde i ColorPicker.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra en ColorPicker från panelen Komponenter till mitten av scenen och ge den förekomstnamnet aCp .

  3. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod: 

    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. Välj Kontroll > Testa filmen.

  5. Klicka på ColorPicker och välj en färg att färglägga rutan med.

Skapa en ColorPicker med ActionScript

I det här exemplet används konstruktorn ColorPicker() och addChild() för att skapa en ColorPicker på scenen. Egenskapen colors får färgvärdena för röd (0xFF0000), grön (0x00FF00) och blå (0x0000FF) för att ange färgerna som ColorPicker ska visa. En TextArea skapas och varje gång du väljer en annan färg i ColorPicker ändrar exemplet färgen på texten i TextArea så att den matchar.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra ColorPicker-komponenten från panelen Komponenter till bibliotekspanelen.

  3. Dra TextArea-komponenten från panelen Komponenter till bibliotekspanelen.

  4. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod: 

    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. Välj Kontroll > Testa filmen.