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 に表示されます。

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

  2. 2 つの RadioButton コンポーネントをコンポーネントパネルからステージまでドラッグします。

  3. 1 番目のラジオボタンを選択します。 プロパティインスペクターで、インスタンス名を yesRb、グループ名を rbGroup にします。

  4. 2 番目のラジオボタンを選択します。 プロパティインスペクターで、インスタンス名を noRb、グループ名を rbGroup にします。

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

  6. アクションパネルを開いて、メインタイムライン内でフレーム 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; 
    }
  7. 制御/ムービープレビューを選択して、アプリケーションを実行します。

ActionScript を使用した RadioButton の作成

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

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

  2. RadioButton コンポーネントをライブラリパネルにドラッグします。

  3. アクションパネルを開いて、メインタイムライン内でフレーム 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();         
    }
  4. 制御/ムービープレビューを選択して、アプリケーションを実行します。

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