RadioButton 구성 요소 사용

RadioButton 구성 요소를 사용하면 사용자가 선택 항목 집합 내에서 하나를 선택하도록 강제할 수 있습니다. 이 구성 요소는 RadioButton 인스턴스가 두 개 이상 있는 그룹에 사용해야 합니다. 항상 그룹의 한 멤버만 선택할 수 있습니다. 그룹의 한 라디오 버튼을 선택하면 그룹에서 현재 선택된 라디오 버튼은 선택 취소됩니다. 라디오 버튼이 속한 그룹을 나타내려면 groupName 매개 변수를 설정합니다.

라디오 버튼은 많은 웹 양식 응용 프로그램에서 기본이 되는 요소입니다. 사용자가 옵션 그룹에서 한 항목만 선택하도록 하려면 라디오 버튼을 사용합니다. 예를 들어, 고객이 사용할 신용 카드를 묻는 양식에 라디오 버튼을 사용할 수 있습니다.

RadioButton 구성 요소와 사용자의 상호 작용

라디오 버튼은 활성화하거나 비활성화할 수 있습니다. 비활성화된 상태에서 라디오 버튼은 마우스 또는 키보드 입력을 받지 못합니다. 사용자가 RadioButton 구성 요소 그룹을 클릭하거나 Tab 키를 눌러 선택하면 선택된 라디오 버튼만 포커스를 받습니다. 그러면 사용자가 다음 키를 사용하여 해당 인스턴스를 제어할 수 있습니다.

키

설명

위쪽 화살표/왼쪽 화살표

라디오 버튼 그룹 안의 이전 라디오 버튼을 선택합니다.

아래쪽 화살표/오른쪽 화살표

라디오 버튼 그룹 안의 다음 라디오 버튼을 선택합니다.

탭

라디오 버튼 그룹에서 다음 구성 요소로 포커스를 이동합니다.

포커스 제어에 대한 자세한 내용은 Flash Professional용 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 속성이 있습니다. 이러한 매개 변수의 가능한 값에 대한 자세한 내용은 ActionScript 3.0 Reference for Flash Professional 에서 RadioButton 클래스를 참조하십시오.

ActionScript를 작성하면 RadioButton 클래스의 메서드, 속성 및 이벤트를 사용하여 RadioButton 인스턴스에 대한 추가 옵션을 설정할 수 있습니다.

RadioButton 구성 요소를 사용하여 응용 프로그램 만들기

다음 절차에서는 제작하는 동안 응용 프로그램에 RadioButton 구성 요소를 추가하는 방법을 설명합니다. 이 예제에서는 RadioButtons를 사용하여 예/아니요로 답할 수 있는 질문을 표현합니다. 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 속성은 해당 버튼과 연결된 색상의 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 Reference for Flash Professional 에서 RadioButton 클래스를 참조하십시오.