De component ColorPicker gebruiken

Met de component ColorPicker kan de gebruiker een kleur uit een staallijst te kiezen. In de standaardmodus van de ColorPicker wordt een enkele kleur in een vierkante knop weergegeven. Wanneer de gebruiker op de knop klikt, wordt een lijst met beschikbare kleuren in een staallijst weergegeven, samen met een tekstveld dat de hexadecimale waarde van de huidige kleurselectie weergeeft.

U kunt de kleuren die in ColorPicker worden weergegeven instellen door zijn eigenschap colors op de kleurwaarden in te stellen die u wilt laten weergegeven.

Gebruikersinteractie met de component ColorPicker

In een ColorPicker kan de gebruiker een kleur selecteren en deze op een ander object in de toepassing toepassen. Als u de gebruiker bijvoorbeeld wilt toestaan elementen in de toepassing aan te passen, zoals de achtergrondkleur of tekstkleur, kunt u een ColorPicker opnemen en de kleur toepassen die de gebruiker selecteert.

Een gebruiker kiest een kleur door op de staalkleur in het deelvenster te klikken of door de hexadecimale waarde in het tekstveld in te voeren. Wanneer de gebruiker een kleur kiest, kunt u de eigenschap selectedColor van ColorPicker gebruiken om de kleur op tekst of een ander object in de toepassing toe te passen.

Een instantie ColorPicker ontvangt focus als de gebruiker er met de muis overheen beweegt of er met Tab naartoe gaat. Wanneer het deelvenster Stalen van ColorPicker is geopend, kunt u de volgende toetsen gebruiken om het te beheren:

Toets

Beschrijving

Startpagina

Hiermee wordt de selectie naar de eerste kleur in het deelvenster Stalen verplaatst.

Pijl-omhoog

Hiermee wordt de selectie een rij hoger in het deelvenster Stalen geplaatst.

Pijl-omlaag

Hiermee wordt de selectie een rij lager in het deelvenster Stalen geplaatst.

Pijl-rechts

Hiermee wordt de selectie een kleur naar rechts in het deelvenster Stalen geplaatst.

Pijl-links

Hiermee wordt de selectie een kleur naar links in het deelvenster Stalen geplaatst.

End

Hiermee wordt de selectie naar de laatste kleur in het deelvenster Stalen geplaatst.

Parameters van de component ColorPicker

U kunt de volgende ontwerpparameters in Eigenschapcontrole of Componentcontrole voor elke instantie CheckBox instellen: selectedColor en showTextField . Elk van deze parameters heeft een bijbehorende ActionScript-eigenschap met dezelfde naam. Zie de klasse ColorPicker in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor informatie over de mogelijk waarden voor deze parameters.

Een toepassing maken met de component ColorPicker

Het volgende voorbeeld laat zien hoe u een component ColorPicker tijdens het ontwerpen aan een toepassing toevoegt. Elke keer dat u in dit voorbeeld de kleur in de ColorPicker wijzigt, roept de functie changeHandler() de functie drawBox() aan om een nieuw vak te tekenen met de kleur die u hebt geselecteerd in de ColorPicker.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep een ColorPicker van het deelvenster Componenten naar het midden van het werkgebied en geef deze de instantienaam aCp .

  3. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe: 

    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. Selecteer Besturing > Film testen.

  5. Klik op de ColorPicker en selecteer een kleur waarmee het vak moet worden gekleurd.

Een ColorPicker maken met ActionScript

Het volgende voorbeeld gebruikt de constructor ColorPicker() en addChild() om een ColorPicker in het werkgebied te maken. Deze stelt de eigenschap colors in op de kleurwaarden voor rood (0xFF0000), groen (0x00FF00) en blauw (0x0000FF) om de kleuren op te geven die de ColorPicker moet weergegeven. Er wordt ook een TextArea gemaakt en elke keer dat u een andere kleur in de ColorPicker selecteert, wijzigt het voorbeeld de kleur van de tekst in de TextArea om met deze kleur overeen te komen.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep de component ColorPicker van het deelvenster Componenten naar het deelvenster Bibliotheek.

  3. Sleep de component TextArea van het deelvenster Componenten naar het deelvenster Bibliotheek.

  4. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe: 

    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. Selecteer Besturing > Film testen.