CheckBox コンポーネントのカスタマイズ

CheckBox コンポーネントは、オーサリング時および実行時に、縦横に変形できます。 オーサリング時には、ステージ上でコンポーネントを選択して、自由変形ツールを使用するか、修正/変形でいずれかのコマンドを使用します。実行時には、 setSize() メソッドを使用するか、CheckBox クラスの適切なプロパティを使用します。例えば、CheckBox のサイズを変更するには、その height プロパティと width プロパティ、および scaleX プロパティと scaleY プロパティを設定します。CheckBox のサイズを変更しても、ラベルやチェックボックスアイコンのサイズは変化しません。境界ボックスのサイズが変化するだけです。

CheckBox インスタンスの境界ボックスは不可視ですが、そのインスタンスのヒット領域を表しています。 インスタンスのサイズを拡大すると、ヒット領域も広くなります。 境界ボックスが小さすぎてラベル全体が収まらない場合は、境界ボックスに合わせてラベルが切り詰められます。

CheckBox でのスタイルの使用

一連のスタイルプロパティを設定して、CheckBox インスタンスの外観を変更できます。 例えば、次の手順では CheckBox ラベルのサイズとカラーを変更します。

  1. CheckBox コンポーネントをコンポーネントパネルからステージまでドラッグし、インスタンス名を myCb にします。

  2. プロパティインスペクターの「パラメーター」タブをクリックし、label パラメーターの値として「 $500 以下 」を入力します。

  3. メインタイムラインのフレーム 1 で、アクションパネルに次のコードを入力します。

    var myTf:TextFormat = new TextFormat(); 
    myCb.setSize(150, 22); 
    myTf.size = 16; 
    myTf.color = 0xFF0000; 
    myCb.setStyle("textFormat", myTf);

    詳しくは、 スタイルの設定 を参照してください。コンポーネントのアイコンおよびスキンを変更するためのスタイルのプロパティの設定について詳しくは、 スキンの新規作成 および CheckBox でのスキンの使用 を参照してください。

CheckBox でのスキンの使用

CheckBox コンポーネントには次のスキンがあり、これらを編集して外観を変更することができます。

CheckBox のスキン

この例では、コンポーネントの up 状態および selectedUp 状態のアウトラインカラーと背景色を変更します。他の状態のスキンを変更する場合も、同様の手順に従います。

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

  2. CheckBox コンポーネントをステージまでドラッグします。コンポーネントは、そのアセットのフォルダーと共に、ライブラリにも配置されます。

  3. CheckBox コンポーネントをステージ上でダブルクリックして、スキンアイコンのパネルを開きます。

  4. selected_up アイコンをダブルクリックして、シンボル編集モードで開きます。

  5. ズームコントロールを 800% に設定して、編集のためにアイコンを大きくします。

  6. CheckBox の境界線をクリックして選択します。 プロパティインスペクターの塗りカラーピッカーでカラー #0033FF を選択して、境界線に適用します。

  7. CheckBox の背景をダブルクリックして選択し、再び塗りカラーピッカーで背景色を #00CCFF に設定します。

  8. CheckBox のアップ状態スキンに対して手順 4 ~ 8 を繰り返します。

  9. 制御/ムービープレビューを選択します。