Button コンポーネントの使用

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

Button コンポーネントは、サイズ変更可能な矩形のボタンです。ユーザーは、アプリケーション内でマウスやスペースバーを使用してこのボタンを押すことで、特定のアクションを開始できます。Button には、カスタムアイコンを追加できます。また、Button の動作をプッシュボタンからトグルボタンに変更することもできます。トグルボタンにした Button は、ユーザーが一度クリックすると押し込まれた状態になり、もう一度クリックすると元の状態に戻ります。

Button は、多くのフォームと Web アプリケーションに使用される基本的な要素です。ユーザーの操作でイベントを起動するような場所ならば、どこにでもボタンを配置できます。例えば、ほとんどのフォームには「送信」ボタンがあります。また、プレゼンテーションのアプリケーションでは「前」ボタンや「次」ボタンを使用します。

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

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

キー	説明
Shift+Tab	フォーカスを前のオブジェクトに移動します。
スペースバー	ボタンを押して（または離して）、 `click` イベントをトリガーします。
Tab	フォーカスを次のオブジェクトに移動します。
Enter/Return	ボタンが FocusManager のデフォルト Button として設定されている場合は、フォーカスを次のオブジェクトに移動します。

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

ライブプレビューでは、オーサリング時にプロパティインスペクターまたはコンポーネントインスペクターで各 Button インスタンスのパラメーターに加えた変更が反映されます。

注意：アイコンがボタンよりも大きい場合は、ボタンの境界線からはみ出します。

ボタンをアプリケーションのデフォルトプッシュボタン（ユーザーが Enter キーを押したときにクリックイベントを受け取るボタン）として指定するには、 FocusManager.defaultButton を設定します。例えば、次のコードでは、 submitButton という Button インスタンスがデフォルトボタンに設定されます。

FocusManager.defaultButton = submitButton;

Button コンポーネントをアプリケーションに追加する際に、次の ActionScript コード行を追加することで、そのコンポーネントをスクリーンリーダーが読み取れるように設定できます。

import fl.accessibility.ButtonAccImpl; 
 
ButtonAccImpl.enableAccessibility();

1 つのコンポーネントに対してアクセシビリティ機能を有効化する処理は、インスタンスをいくつ作成するかに関係なく、一度だけ実行します。

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

プロパティインスペクター（ウィンドウ／プロパティ／プロパティ）またはコンポーネントインスペクター（ウィンドウ／コンポーネントインスペクター）で Button の各インスタンスに設定できるオーサリングパラメーターは、 emphasized 、 label 、 labelPlacement 、 selected および toggle です。これらの各パラメーターには、対応する同名の ActionScript プロパティがあります。これらのパラメーターに値を割り当てると、アプリケーション内でプロパティの初期状態が設定されます。 ActionScript で設定したプロパティは、パラメーターで設定した値よりも優先されます。これらのパラメーターに設定できる値については、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド  」の Button クラスを参照してください。

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

次の手順は、オーサリング時に Button コンポーネントをアプリケーションに追加する方法を示しています。この例では、Button をクリックしたときに ColorPicker コンポーネントの状態が変わります。

新しい Flash (ActionScript 3.0) ドキュメントを作成します。
Button コンポーネントをコンポーネントパネルからステージにドラッグし、プロパティインスペクターで次の値を入力します。
- インスタンス名として aButton と入力します。
- label パラメーターに Show と入力します。
ステージに ColorPicker を追加し、インスタンス名を aCp にします。
アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の ActionScript コードを入力します。
```
aCp.visible = false; 
 
aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
     
    switch(event.currentTarget.label) { 
        case "Show": 
            aCp.visible = true; 
            aButton.label = "Disable"; 
            break; 
        case "Disable": 
            aCp.enabled = false; 
            aButton.label = "Enable"; 
            break; 
        case "Enable": 
            aCp.enabled = true; 
            aButton.label = "Hide"; 
            break; 
        case "Hide": 
            aCp.visible = false; 
            aButton.label = "Show"; 
            break; 
    } 
}
```
コードの 2 行目では、 clickHandler() 関数を MouseEvent.CLICK イベントのイベントハンドラー関数として登録します。ユーザーが Button をクリックしてイベントが発生すると、 clickHandler() 関数が Button の値に応じて次のいずれかのアクションを実行します。
- Show の場合は ColorPicker を表示し、Button のラベルを「無効」に変更します。
- Disable の場合は ColorPicker を無効にし、Button のラベルを「有効」に変更します。
- Enable の場合は ColorPicker を有効にし、Button のラベルを「非表示」に変更します。
- Hide の場合は ColorPicker を非表示にし、Button のラベルを「表示」に変更します。
制御／ムービープレビューを選択して、アプリケーションを実行します。

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

次の手順では、ActionScript を使用してトグルボタンにした Button を作成し、Button をクリックしたときに出力パネルにイベントタイプを表示します。この例では、クラスのコンストラクターを呼び出して Button インスタンスを作成し、 addChild() メソッドを呼び出してそのインスタンスをステージに追加します。

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

これにより、ライブラリにコンポーネントが追加されます。ただし、アプリケーションには表示されません。
アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次のコードを入力して Button インスタンスを作成します。
```
import fl.controls.Button; 
 
var aButton:Button = new Button(); 
addChild(aButton); 
aButton.label = "Click me"; 
aButton.toggle =true;  
aButton.move(50, 50);
```
move() メソッドにより、ステージ上の 50（X 座標）、50（Y 座標）の位置にボタンが配置されます。

ここで、次の ActionScript を追加して、イベントリスナとイベントハンドラー関数を作成します。

aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    trace("Event type: " + event.type); 
}

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

ボタンをクリックすると、出力パネルに「イベントタイプ : click」というメッセージが表示されます。