|
NumericStepper コンポーネントは、オーサリング時および実行時に、縦横に変形できます。 オーサリング時には、ステージ上でコンポーネントを選択して、自由変形ツールを使用するか、修正／変形でいずれかのコマンドを使用します。実行時には、
setSize()
メソッドを使用するか、NumericStepper クラスの任意の適切なプロパティおよびメソッド（
width
、
height
、
scaleX
、
scaleY
など）を使用します。
NumericStepper コンポーネントのサイズを変更しても、上下の矢印ボタンの幅は変化しません。 ステッパーの高さをデフォルトよりも大きくすると、デフォルトの動作により、矢印ボタンはコンポーネントの上端と下端に配置されます。 それ以外の場合は、9 スライスの拡大 / 縮小によってボタンの描画方法が決定されます。 矢印ボタンは常にテキストボックスの右側に表示されます。
スタイルと NumericStepper コンポーネント
NumericStepper コンポーネントのスタイルプロパティを設定すると、その外観を変更できます。 スタイルは、コンポーネントが描画されるときのスキン、パディングおよびテキストフォーマットの値を指定します。
textFormat
スタイルを使用すると、NumericStepper の値のサイズと外観を変更できます。様々なスキンスタイルを使用することで、スキンに使用する様々なクラスを指定できます。 スキンスタイルの使用について詳しくは、
スキンについて
を参照してください。
この手順では、
textFormat
スタイルを使用して、NumericStepper で表示される値の外観を変更します。
-
新しい Flash ドキュメント (ActionScript 3.0) を作成します。
-
NumericStepper コンポーネントをコンポーネントパネルからステージまでドラッグし、インスタンス名を
myNs
にします。
-
メインタイムラインのフレーム 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);
-
制御／ムービープレビューを選択します。
スキンと NumericStepper コンポーネント
NumericStepper コンポーネントには、ボタンのアップ、ダウン、無効、および選択の各状態を表すスキンがあります。
ステッパーが有効状態のとき、マウスポインターが上下の矢印ボタン上に移動すると、そのボタンはオーバー状態で表示されます。 クリックすると、ボタンはダウン状態で表示されます。 ユーザーがマウスボタンを離すと、ボタンはオーバー状態に戻ります。 ボタン上でマウスボタンを押し下げ、そのままの状態でマウスポインターをボタンの範囲外に移動すると、そのボタンは最初の状態に戻ります。
無効状態のステッパーは、ユーザーの操作に関係なく無効状態の外観で表示されます。
NumericStepper コンポーネントには次のスキンがあります。
-
FLA ファイルを新規作成します。
-
NumericStepper コンポーネントをステージにドラッグします。
-
ズームコントロールを 400% にして、編集のためにイメージを大きくします。
-
「グループ」レベルまでドリルダウンし、プロパティインスペクターの塗りカラーピッカーに背景色が表示されるまで、スキンパネルの TextInput スキンの背景をダブルクリックします。
-
プロパティインスペクターの塗りカラーピッカーでカラー #9999FF を選択し、TextInput スキンの背景に適用します。
-
ステージの上の編集バーの左側にある「戻る」ボタンをクリックし、ドキュメント編集モードに戻ります。
-
再度 NumericStepper をダブルクリックしてスキンパネルをもう一度開きます。
-
背景が選択され、そのカラーがプロパティインスペクターの塗りカラーピッカーに表示されるまで、「Up」グループの上矢印ボタンの背景をクリックします。
-
カラー #9966FF を選択し、上矢印ボタンの背景に適用します。
-
「Up」グループの下矢印ボタンに対して手順 8 および 9 を繰り返します。
-
制御／ムービープレビューを選択します。
NumericStepper インスタンスは次の図のように表示されます。
|
|
|
