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

NumericStepper コンポーネントのスタイルプロパティを設定すると、その外観を変更できます。 スタイルは、コンポーネントが描画されるときのスキン、パディングおよびテキストフォーマットの値を指定します。 textFormat スタイルを使用すると、NumericStepper の値のサイズと外観を変更できます。様々なスキンスタイルを使用することで、スキンに使用する様々なクラスを指定できます。 スキンスタイルの使用について詳しくは、 スキンについて を参照してください。

この手順では、 textFormat スタイルを使用して、NumericStepper で表示される値の外観を変更します。

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

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

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

   var tf:TextFormat = new TextFormat(); 
   myNs.setSize(100, 50); 
   tf.color = 0x0000CC; 
   tf.size = 24; 
   tf.font = "Arial"; 
   tf.align = "center"; 
   myNs.setStyle("textFormat", tf);

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

NumericStepper コンポーネントには、ボタンのアップ、ダウン、無効、および選択の各状態を表すスキンがあります。

ステッパーが有効状態のとき、マウスポインターが上下の矢印ボタン上に移動すると、そのボタンはオーバー状態で表示されます。 クリックすると、ボタンはダウン状態で表示されます。 ユーザーがマウスボタンを離すと、ボタンはオーバー状態に戻ります。 ボタン上でマウスボタンを押し下げ、そのままの状態でマウスポインターをボタンの範囲外に移動すると、そのボタンは最初の状態に戻ります。

無効状態のステッパーは、ユーザーの操作に関係なく無効状態の外観で表示されます。

NumericStepper コンポーネントには次のスキンがあります。

1. FLA ファイルを新規作成します。

2. NumericStepper コンポーネントをステージにドラッグします。

3. ズームコントロールを 400% にして、編集のためにイメージを大きくします。

4. 「グループ」レベルまでドリルダウンし、プロパティインスペクターの塗りカラーピッカーに背景色が表示されるまで、スキンパネルの TextInput スキンの背景をダブルクリックします。

5. プロパティインスペクターの塗りカラーピッカーでカラー #9999FF を選択し、TextInput スキンの背景に適用します。

6. ステージの上の編集バーの左側にある「戻る」ボタンをクリックし、ドキュメント編集モードに戻ります。

7. 再度 NumericStepper をダブルクリックしてスキンパネルをもう一度開きます。

8. 背景が選択され、そのカラーがプロパティインスペクターの塗りカラーピッカーに表示されるまで、「Up」グループの上矢印ボタンの背景をクリックします。

9. カラー #9966FF を選択し、上矢印ボタンの背景に適用します。

10. 「Up」グループの下矢印ボタンに対して手順 8 および 9 を繰り返します。

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

    NumericStepper インスタンスは次の図のように表示されます。