Korzystanie ze składnika ColorPicker

Składnik ColorPicker umożliwia wybieranie koloru z listy próbek. Domyślny tryb składnika ColorPicker wyświetla pojedynczy kolor w kwadratowym przycisku. Po kliknięciu przycisku w panelu próbek pojawia się lista dostępnych kolorów razem z polem tekstowym, w którym wyświetlana jest heksadecymalna wartość dla bieżącego zaznaczenia koloru.

Kolory składnika ColoPicker można ustawić przez ustawienie ich właściwości colors na wartości kolorów, które mają być wyświetlane.

Posługiwanie się składnikiem ColorPicker

Składnik ColorPicker umożliwia wybranie koloru i zastosowanie go w innym obiekcie aplikacji. Na przykład, aby zezwolić na personalizację elementów aplikacji np. koloru tła lub tekstu, można dołączyć składnik ColorPicker i zastosować wybrany przez użytkownika kolor.

Użytkownik wybiera kolor przez kliknięcie jego próbki w panelu lub przez wprowadzenie do pola tekstowego jego wartości heksadecymalnej. Po wybraniu koloru właściwość selectedColor składnika ColorPicker można użyć w celu zastosowania koloru do tekstu lub innego obiektu w aplikacji.

Instancja ColorPicker jest aktywowana po przesunięciu nad nią wskaźnika lub przejściu do niej za pomocą klawisza Tab. Jeśli panel próbek składnika ColorPicker jest otwarty, można nim sterować za pomocą następujących klawiszy:

Klucz

Opis

Home

Przesuwa zaznaczenie do pierwszego koloru w panelu próbek.

Strzałka w górę

Przesuwa zaznaczenie w górę o jeden wiersz w panelu próbek.

Strzałka w dół

Przesuwa zaznaczenie w dół o jeden wiersz w panelu próbek.

Strzałka w prawo

Przesuwa zaznaczenie w panelu próbek o jeden kolor w prawo.

Strzałka w lewo

Przesuwa zaznaczenie w panelu próbek o jeden kolor w lewo.

End

Przesuwa zaznaczenie do ostatniego koloru w panelu próbek.

Parametry składnika ColorPicker

W Inspektorze właściwości lub w Inspektorze składników można ustawić następujące parametry tworzenia dla każdej instancji składnika ColorPicker: selectedColor i showTextField . Każdy z parametrów posiada odpowiadającą mu właściwość ActionScript o tej samej nazwie. Więcej informacji na temat możliwych wartości tych parametrów zawiera opis klasy ColorPicker w Skorowidzu języka ActionScript 3.0 dla programu Flash Professional .

Tworzenie aplikacji ze składnikiem ColorPicker

W poniższym przykładzie podczas tworzenia do aplikacji dodawany jest składnik ColorPicker. W tym przykładzie za każdym razem, gdy zmieniany jest kolor w składniku ColorPicker, w funkcji changeHandler() wywoływana jest funkcja drawBox() w celu narysowania nowego pola z kolorem wybranym w składniku ColorPicker.

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik ColorPicker z panelu Składniki na środek stołu montażowego i nadaj instancji nazwę aCp .

  3. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod 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. Wybierz polecenie Sterowanie > Testuj film.

  5. Kliknij składnik ColorPicker i wybierz kolor, aby wypełnić pole kolorem.

Tworzenie składnika ColorPicker przy użyciu kodu ActionScript

W tym przykładzie do utworzenia na stole montażowym składnika ColorPicker używany jest konstruktor ColorPicker() oraz metoda addChild() . Właściwość colors ustawiana jest na wartości kolorów: dla czerwonego (0xFF0000), zielonego (0x00FF00) i niebieskiego (0x0000FF) w celu określenia kolorów, które będą wyświetlane w składniku ColorPicker. Tworzony jest także składnik TextArea i za każdym razem, gdy w składniku ColorPicker wybrany zostanie inny kolor, w celu uzgodnienia w przykładzie zmieniony zostanie kolor tekstu składnika TextArea.

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik ColorPicker z panelu Składniki do panelu Biblioteka.

  3. Przeciągnij składnik TextArea z panelu Składniki do panelu Biblioteka.

  4. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod 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. Wybierz polecenie Sterowanie > Testuj film.