使用 RadioButton 组件

RadioButton 组件允许您强制用户在一组选择中选择一项。该组件必须用于至少有两个 RadioButton 实例的组。在任何给定的时刻,都只有一个组成员被选中。选择组中的一个单选按钮将取消选择组内当前选定的单选按钮。您可以设置 groupName 参数,以指示单选按钮属于哪个组。

单选按钮是 Web 上许多表单应用程序的基础部分。如果您需要让用户从一组选项中做出一个选择,可以使用单选按钮。例如,在表单上询问客户要使用哪种信用卡时,您就可以使用单选按钮。

与 RadioButton 组件的用户交互

可以启用或禁用单选按钮。禁用的单选按钮不接收鼠标或键盘输入。当用户单击或使用 Tab 切换到 RadioButton 组件组时,只有选定的单选按钮会接收焦点。然后用户就可以使用以下按键来控制它:

说明

向上箭头/向左箭头

所选项会移至单选按钮组内的前一个单选按钮。

向下箭头/向右箭头

选择将移到单选按钮组的下一个单选按钮。

Tab

将焦点从单选按钮组移动到下一个组件。

有关控制焦点的详细信息,请参阅 《用于 Adobe® Flash® Professional CS5 的 ActionScript® 3.0 参考》 中的 IFocusManager 接口和 FocusManager 类以及 使用 FocusManager

每个 RadioButton 实例在舞台上的实时预览反映在创作过程中对“属性”检查器或“组件”检查器中的参数所做的更改。但是,实时预览中不会显示互斥的所选项。如果将同组的两个单选按钮的 selected 参数都设置为 true ,则它们都会显示为选中状态,但是在运行时只有最后创建的实例才显示为选中状态。有关详细信息,请参阅 RadioButton 组件参数

在将 RadioButton 组件添加到应用程序时,可以添加以下几行代码,以使其可由屏幕阅读器访问:

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

不管组件有多少实例,都只对组件启用一次辅助功能。有关详细信息,请参阅《使用 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. 将两个 RadioButton 组件从“组件”面板拖到舞台上。

  3. 选择第一个单选按钮。在“属性”检查器中,为其指定实例名称 yesRb 和组名称 rbGroup

  4. 选择第二个单选按钮。在“属性”检查器中,为其指定实例名称 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 创建三个 RadioButton,分别表示红色、蓝色和绿色,并绘制一个灰色的框。每个 RadioButton 的 value 属性指定与此按钮关联的颜色的十六进制值。当用户单击其中一个 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 类。