RadioButton コンポーネントの使用

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

RadioButton コンポーネントを使用すると、複数の選択肢の中から 1 つだけをユーザーに選択させることができます。このコンポーネントを使用する場合は、少なくとも 2 つの RadioButton インスタンスが含まれるグループを構成して使用します。グループ内のメンバーは一度に 1 つしか選択できません。 1 つのラジオボタンを選択すると、同じグループ内でそれまで選択されていたラジオボタンは選択解除されます。各ラジオボタンが所属するグループは、 groupName パラメーターによって設定します。

ラジオボタンは、Web 上の多くのフォームアプリケーションに使用される基本的な要素です。いくつかの選択肢から 1 つをユーザーに選択させる場合に、ラジオボタンを使用します。例えば、フォームでユーザーが使用するクレジットカードを選択させる場合などはラジオボタンを使用します。

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

ラジオボタンは有効または無効にすることができます。無効なラジオボタンは、マウスおよびキーボードからの入力を受け付けません。ユーザーが RadioButton コンポーネントグループをクリックするか、Tab キーで移動すると、選択されているラジオボタンだけがフォーカスを取得します。これにより、ユーザーは次のキーを使用した操作が可能になります。

キー	説明
上向き矢印、左向き矢印	そのラジオボタングループ内で、選択を前のラジオボタンに移動します。
下向き矢印、右向き矢印	そのラジオボタングループ内で、選択を次のラジオボタンに移動します。
Tab	フォーカスを現在のラジオボタングループから次のコンポーネントに移動します。

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

ライブプレビューでは、オーサリング時にプロパティインスペクターまたはコンポーネントインスペクターでパラメーターに加えた変更が、ステージ上の各 RadioButton インスタンスに反映されます。ただし、一度に 1 つしか選択できないという動作はライブプレビューでは再現されません。同じグループ内にある 2 つのラジオボタンについて selected パラメーターを true に設定した場合、両方が選択状態になったように見えますが、実行時には後に作成したインスタンスだけが選択状態になります。詳しくは、 RadioButton コンポーネントのパラメーターを参照してください。

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

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

1 つのコンポーネントに対してアクセシビリティ機能を有効化する処理は、そのコンポーネントのインスタンスをいくつ使用するかに関係なく、一度だけ実行します。詳しくは、『Flash ユーザーガイド』の第 18 章「アクセシビリティコンテンツの作成」を参照してください。

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

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

ActionScript を記述すれば、RadioButton クラスのメソッド、プロパティ、イベントを使用して、RadioButton インスタンスのその他のオプションを設定できます。

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

次の手順は、オーサリング時に RadioButton コンポーネントをアプリケーションに追加する方法を示しています。この例では、「はい」または「いいえ」で回答する質問を表示するために RadioButton を使用します。 RadioButton のデータは TextArea に表示されます。

新しい Flash (ActionScript 3.0) ドキュメントを作成します。
2 つの RadioButton コンポーネントをコンポーネントパネルからステージまでドラッグします。
1 番目のラジオボタンを選択します。プロパティインスペクターで、インスタンス名を yesRb 、グループ名を rbGroup にします。
2 番目のラジオボタンを選択します。プロパティインスペクターで、インスタンス名を noRb 、グループ名を rbGroup にします。
TextArea コンポーネントをコンポーネントパネルからステージまでドラッグし、インスタンス名を aTa にします。

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

yesRb.label = "Yes"; 
yesRb.value = "For"; 
noRb.label = "No"; 
noRb.value = "Against"; 
 
yesRb.move(50, 100); 
noRb.move(100, 100); 
aTa.move(50, 30); 
noRb.addEventListener(MouseEvent.CLICK, clickHandler); 
yesRb.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    aTa.text = event.target.value; 
}

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

ActionScript を使用した RadioButton の作成

この例では、ActionScript を使用して、赤、青、緑の各カラーの 3 つの RadioButton を作成し、灰色のボックスを描画します。各 RadioButton の value プロパティは、ボタンに関連付けられたカラーの 16 進数値を指定します。ユーザーがいずれかの RadioButton をクリックすると、 clickHandler() 関数で drawBox() が呼び出され、RadioButton の value プロパティからカラーが渡されて、ボックスにカラーが適用されます。

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

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

import fl.controls.RadioButton; 
import fl.controls.RadioButtonGroup; 
 
var redRb:RadioButton = new RadioButton(); 
var blueRb:RadioButton = new RadioButton(); 
var greenRb:RadioButton = new RadioButton(); 
var rbGrp:RadioButtonGroup = new RadioButtonGroup("colorGrp"); 
 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xCCCCCC); 
 
addChild(redRb); 
addChild(blueRb); 
addChild(greenRb); 
addChild(aBox); 
 
redRb.label = "Red"; 
redRb.value = 0xFF0000; 
blueRb.label = "Blue"; 
blueRb.value = 0x0000FF; 
greenRb.label = "Green"; 
greenRb.value = 0x00FF00; 
redRb.group = blueRb.group = greenRb.group = rbGrp; 
redRb.move(100, 260); 
blueRb.move(150, 260); 
greenRb.move(200, 260); 
 
rbGrp.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    drawBox(aBox, event.target.selection.value); 
} 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(125, 150, 100, 100); 
            box.graphics.endFill();         
}

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

詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の RadioButton クラスを参照してください。