RadioButton コンポーネントの使用



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

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

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

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

キー

説明

上向き矢印、左向き矢印

そのラジオボタングループ内で、選択を前のラジオボタンに移動します。

下向き矢印、右向き矢印

そのラジオボタングループ内で、選択を次のラジオボタンに移動します。

Tab

フォーカスを現在のラジオボタングループから次のコンポーネントに移動します。

フォーカスの制御方法について詳しくは、『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 プロパティがあります。 これらのパラメータに指定できる値については、『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. 制御/ムービープレビューを選択してアプリケーションを実行します。

    詳細については、『ActionScript 3.0 言語およびコンポーネントリファレンス』の RadioButton クラスを参照してください。