NumericStepper コンポーネントの使用

NumericStepper コンポーネントのユーザー操作
NumericStepper コンポーネントのパラメーター
NumericStepper を使用したアプリケーションの作成

NumericStepper コンポーネントを使用すると、ユーザーが一定の間隔で増減する数値を選択できます。このコンポーネントは、小さな上下の矢印ボタンの隣に表示されるテキストボックス内の数値で構成されています。ユーザーがボタンを押すと、そのボタンを離すまで、または数値が最大値または最小値に到達するまで、 stepSize パラメーターで単位として指定した値ずつ数値が増減します。NumericStepper コンポーネントのテキストボックスに表示されるテキストは、編集することもできます。

各 NumericStepper インスタンスのライブプレビューでは、プロパティインスペクターまたはコンポーネントインスペクターで指定した value パラメーターの設定が反映されます。ただし、ライブプレビューでは NumericStepper の矢印ボタンをマウスやキーボードで操作することはできません。

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

NumericStepper コンポーネントは、ユーザーに数値を選択させる場合に使用します。例えば、フォームでクレジットカードの有効期限の年月日を設定する場合などに NumericStepper コンポーネントを使用できます。ユーザーがフォントサイズを増減できるようにする場合にも、NumericStepper コンポーネントを使用できます。

NumericStepper コンポーネントは数値データのみを扱います。また、2 桁より大きな数値 (例えば 5246 や 1.34 など) を表示するには、オーサリング時にサイズを変更する必要があります。

NumericStepper は、アプリケーション内で有効または無効にすることができます。無効状態のときは、マウスやキーボードからの入力を受け付けません。有効状態のときは、ユーザーがクリックするか Tab キーで移動すると、フォーカスを取得します。このとき、内部フォーカスはテキストボックスに設定されます。フォーカスを取得している NumericStepper コンポーネントのインスタンスでは、次のキーを使用した操作が可能です。

キー	説明
下向き矢印	値を 1 単位ずつ変化させます。
左向き矢印	挿入ポインターをテキストボックス内で左に移動します。
右向き矢印	挿入ポインターをテキストボックス内で右に移動します。
Shift+Tab	フォーカスを前のオブジェクトに移動します。
Tab	フォーカスを次のオブジェクトに移動します。
上向き矢印	値を 1 単位ずつ変化させます。

フォーカスの制御について詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の FocusManager クラスおよび FocusManager の操作を参照してください。

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

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

NumericStepper を使用したアプリケーションの作成

次の手順は、オーサリング時に NumericStepper コンポーネントをアプリケーションに追加する方法を示しています。次の例では、NumericStepper コンポーネントと Label コンポーネントをステージ上に配置し、NumericStepper インスタンスの Event . CHANGE イベントのリスナを作成します。数値ステッパーの値が変わると、新しい値を Label インスタンスの text プロパティに表示します。

NumericStepper コンポーネントをコンポーネントパネルからステージまでドラッグします。
プロパティインスペクターで、インスタンス名として aNs と入力します。
Label コンポーネントをコンポーネントパネルからステージまでドラッグします。
プロパティインスペクターで、インスタンス名として aLabel と入力します。
アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の ActionScript コードを入力します。
```
import flash.events.Event; 
 
aLabel.text = "value = " + aNs.value; 
 
aNs.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event) :void { 
    aLabel.text = "value = " + event.target.value; 
};
```
この例では、ラベルの text プロパティを NumericStepper の値に設定します。NumericStepper インスタンスの値が変わるたびに、 changeHandler() 関数によってラベルの text プロパティが更新されます。
制御／ムービープレビューを選択します。

ActionScript を使用した NumericStepper の作成

この例では、ActionScript コードを使用して 3 つの NumericSteppers を作成します。それぞれ、ユーザーの誕生日の年、月および日を入力するためのものです。また、各 NumericSteppers のプロンプトや識別子として使用する Label も追加します。

新しい Flash (ActionScript 3.0) ドキュメントを作成します。
Label をライブラリパネルにドラッグします。
NumericStepper コンポーネントをライブラリパネルにドラッグします。

アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の ActionScript コードを入力します。

import fl.controls.Label; 
import fl.controls.NumericStepper; 
 
var dobPrompt:Label = new Label(); 
var moPrompt:Label = new Label(); 
var dayPrompt:Label = new Label(); 
var yrPrompt:Label = new Label(); 
 
var moNs:NumericStepper = new NumericStepper(); 
var dayNs:NumericStepper = new NumericStepper(); 
var yrNs:NumericStepper = new NumericStepper(); 
 
addChild(dobPrompt); 
addChild(moPrompt); 
addChild(dayPrompt); 
addChild(yrPrompt); 
addChild(moNs); 
addChild(dayNs); 
addChild(yrNs); 
 
dobPrompt.setSize(65, 22); 
dobPrompt.text = "Date of birth:"; 
dobPrompt.move(80, 150); 
 
moNs.move(150, 150); 
moNs.setSize(40, 22); 
moNs.minimum = 1; 
moNs.maximum = 12; 
moNs.stepSize = 1; 
moNs.value = 1; 
 
moPrompt.setSize(25, 22); 
moPrompt.text = "Mo."; 
moPrompt.move(195, 150); 
 
dayNs.move(225, 150); 
dayNs.setSize(40, 22); 
dayNs.minimum = 1; 
dayNs.maximum = 31; 
dayNs.stepSize = 1; 
dayNs.value = 1; 
 
dayPrompt.setSize(25, 22); 
dayPrompt.text = "Day"; 
dayPrompt.move(270, 150); 
 
yrNs.move(300, 150); 
yrNs.setSize(55, 22); 
yrNs.minimum = 1900; 
yrNs.maximum = 2006; 
yrNs.stepSize = 1; 
yrNs.value = 1980; 
 
yrPrompt.setSize(30, 22); 
yrPrompt.text = "Year"; 
yrPrompt.move(360, 150);

制御／ムービープレビューを選択して、アプリケーションを実行します。