ColorPicker コンポーネントの使用

ColorPicker コンポーネントを使用すると、ユーザーが色見本からカラーを選択できます。ColorPicker のデフォルトモードでは、四角形のボタンに単一のカラーが表示されます。 ユーザーがボタンをクリックすると、現在選択されているカラーの 16 進数値を示すテキストフィールドと共に、利用できるカラーの一覧が色見本パネルに表示されます。

ColoPicker に表示するカラーは、カラー値を ColoPicker の colors プロパティに設定することで指定できます。

ColorPicker コンポーネントのユーザー操作

ColorPicker を使用すると、ユーザーがカラーを選択して、アプリケーション内の別のオブジェクトに適用できます。 例えば、ユーザーが背景色やテキストの色などのアプリケーションのエレメントをパーソナライズできるようにする場合は、ColorPicker を組み込むと、ユーザーが選択したカラーを適用できます。

ユーザーがカラーを選択するには、パネルでそのカラーの色見本をクリックするか、テキストフィールドにそのカラーの 16 進数値を入力します。 ユーザーがいずれかのカラーを選択すると、ColorPicker の selectedColor プロパティを使用して、アプリケーション内のテキストなどのオブジェクトにそのカラーを適用できます。

ColorPicker インスタンスは、ユーザーがポインターをその上に移動するか Tab キーで移動すると、フォーカスを取得します。 ColorPicker の色見本パネルが表示されているときは、次のキーを使用した操作が可能です。

キー

説明

Home

色見本パネルで先頭のカラーを選択します。

上向き矢印

色見本パネルで 1 行上のアイテムを選択します。

下向き矢印

色見本パネルで 1 行下のアイテムを選択します。

右向き矢印

色見本パネルで 1 つ右のカラーを選択します。

左向き矢印

色見本パネルで 1 つ左のカラーを選択します。

End

色見本パネルで最後のカラーを選択します。

ColorPicker コンポーネントのパラメーター

プロパティインスペクターまたはコンポーネントインスペクターで ColorPicker の各インスタンスに設定できるオーサリングパラメーターは、 selectedColor および showTextField です。これらの各パラメーターには、対応する同名の ActionScript プロパティがあります。 これらのパラメーターに設定できる値については、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の ColorPicker クラスを参照してください。

ColorPicker コンポーネントを使用したアプリケーションの作成

次の例では、オーサリング時に、アプリケーションに ColorPicker コンポーネントを追加します。 この例では、ColorPicker でカラーを変更するたびに、 changeHandler() 関数が drawBox() 関数を呼び出し、ColorPicker で選択されたカラーの新しいボックスを描画します。

  1. 新しい Flash (ActionScript 3.0) ドキュメントを作成します。

  2. ColorPicker をコンポーネントパネルからステージの中央までドラッグし、インスタンス名を aCp にします。

  3. アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の 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. 制御/ムービープレビューを選択します。

  5. ColorPicker をクリックし、ボックスに塗るカラーを選択します。

ActionScript を使用した ColorPicker の作成

この例では、 ColorPicker() コンストラクターと addChild() を使用して、ステージに ColorPicker を作成します。ColorPicker で表示するカラーを指定するために、 colors プロパティを、赤色(0xFF0000)、緑色(0x00FF00)および青色(0x0000FF)のカラー値に設定しています。さらに TextArea を作成して、ColorPicker で別のカラーを選択するたびに、その TextArea 内のテキストが同じカラーになるように変更します。

  1. 新しい Flash (ActionScript 3.0) ドキュメントを作成します。

  2. ColorPicker コンポーネントをコンポーネントパネルからライブラリパネルにドラッグします。

  3. TextArea コンポーネントをコンポーネントパネルからライブラリパネルにドラッグします。

  4. アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の 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. 制御/ムービープレビューを選択します。