NumericStepper 구성 요소 사용

NumericStepper 구성 요소와 사용자의 상호 작용
NumericStepper 구성 요소 매개 변수
NumericStepper를 사용하여 응용 프로그램 만들기

NumericStepper 구성 요소를 사용하면 사용자가 정렬된 숫자 집합에서 순서대로 이동할 수 있습니다. 이 구성 요소는 위쪽 및 아래쪽 화살표 버튼 옆에 표시되는 텍스트 상자의 숫자로 구성됩니다. 버튼을 누르면 버튼을 놓거나 최대값 또는 최소값에 도달할 때까지 stepSize 매개 변수에 지정된 단위에 따라 점증적으로 숫자가 올라가거나 내려갑니다. NumericStepper 구성 요소의 텍스트 상자에 있는 텍스트를 편집할 수도 있습니다.

각 NumericStepper 인스턴스의 실시간 미리 보기에는 속성 관리자나 [구성 요소 관리자]에서 지정한 값 매개 변수의 설정이 반영됩니다. 그러나 실시간 미리 보기의 NumericStepper 화살표 버튼으로 마우스 또는 키보드를 사용할 수는 없습니다.

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

사용자가 숫자 값을 선택하도록 할 모든 위치에 NumericStepper 구성 요소를 사용할 수 있습니다. 예를 들어, 양식에 NumericStepper 구성 요소를 사용하여 신용 카드 만료일(년, 월, 일)을 설정할 수 있습니다. 사용자가 글꼴 크기를 늘리거나 줄이게 하는 데에도 NumericStepper 구성 요소를 사용합니다.

NumericStepper 구성 요소는 숫자 데이터만 처리합니다. 또한 제작하는 동안 스태퍼의 크기를 조절하여 세 자리 이상의 숫자가 표시되도록 해야 합니다(예: 5246 또는 1.34).

응용 프로그램에서 NumericStepper를 활성화하거나 비활성화할 수 있습니다. NumericStepper가 비활성화된 상태에서는 마우스 또는 키보드 입력을 수신하지 못합니다. 활성화된 상태에서 NumericStepper를 클릭하거나 Tab 키를 눌러 선택하면 NumericStepper로 포커스가 이동하고 텍스트 상자로 내부 포커스가 설정됩니다. NumericStepper 인스턴스가 포커스를 받으면 다음 키를 사용하여 해당 인스턴스를 제어할 수 있습니다.

키	설명
아래쪽 화살표	한 단위씩 값을 변경합니다.
왼쪽 화살표	텍스트 상자 안에서 삽입점을 왼쪽으로 이동합니다.
오른쪽 화살표	텍스트 상자 안에서 삽입점을 오른쪽으로 이동합니다.
Shift+Tab	이전 객체로 포커스를 이동합니다.
탭	다음 객체로 포커스를 이동합니다.
위쪽 화살표	한 단위씩 값을 변경합니다.

포커스 제어에 대한 자세한 내용은 Flash Professional용 ActionScript 3.0 참조 설명서 의 FocusManager 클래스 및 FocusManager를 사용한 작업 을 참조하십시오.

NumericStepper 구성 요소 매개 변수

속성 관리자나 구성 요소 관리자에서 각 NumericStepper 인스턴스에 대해 maximum , minimum , stepSize , value 등의 매개 변수를 설정할 수 있습니다. 이러한 매개 변수에는 각각 같은 이름의 해당 ActionScript 속성이 있습니다. 이러한 매개 변수의 가능한 값에 대한 자세한 내용은 ActionScript 3.0 Reference for Flash Professional 에서 NumericStepper 클래스를 참조하십시오.

NumericStepper를 사용하여 응용 프로그램 만들기

다음 절차에서는 제작하는 동안 응용 프로그램에 NumericStepper 구성 요소를 추가하는 방법을 설명합니다. 이 예제에서는 NumericStepper 구성 요소와 Label 구성 요소를 스테이지에 배치하고, NumericStepper 인스턴스의 Event . CHANGE 이벤트에 대한 리스너를 만듭니다. NumericStepper의 값이 변경되면 Label 인스턴스의 text 속성에 새 값이 표시됩니다.

[구성 요소] 패널의 NumericStepper 구성 요소를 스테이지로 드래그합니다.
속성 관리자에서 인스턴스 이름으로 aNs 를 입력합니다.
[구성 요소] 패널의 Label 구성 요소를 스테이지로 드래그합니다.
속성 관리자에서 인스턴스 이름으로 aLabel 을 입력합니다.
[액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다.
```
import flash.events.Event; 
 
aLabel.text = "value = " + aNs.value; 
 
aNs.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event) :void { 
    aLabel.text = "value = " + event.target.value; 
};
```
이 예제에서는 레이블의 text 속성을 NumericStepper 값으로 설정합니다. changeHandler() 함수는 NumericStepper 인스턴스 값이 변경될 때마다 레이블의 text 속성을 업데이트합니다.
[컨트롤] > [무비 테스트]를 선택합니다.

ActionScript를 사용하여 NumericStepper 만들기

다음 예제에서는 ActionScript 코드를 사용하여 사용자 출생일의 년, 월, 일을 각각 입력하는 세 개의 NumericStepper를 만듭니다. 또한 각 NumericStepper의 식별자 및 프롬프트에 사용할 Label을 추가합니다.

새 Flash(ActionScript 3.0) 문서를 만듭니다.
Label을 [라이브러리] 패널로 드래그합니다.
NumericStepper를 [라이브러리] 패널로 드래그합니다.

[액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다.

import fl.controls.Label; 
import fl.controls.NumericStepper; 
 
var dobPrompt:Label = new Label(); 
var moPrompt:Label = new Label(); 
var dayPrompt:Label = new Label(); 
var yrPrompt:Label = new Label(); 
 
var moNs:NumericStepper = new NumericStepper(); 
var dayNs:NumericStepper = new NumericStepper(); 
var yrNs:NumericStepper = new NumericStepper(); 
 
addChild(dobPrompt); 
addChild(moPrompt); 
addChild(dayPrompt); 
addChild(yrPrompt); 
addChild(moNs); 
addChild(dayNs); 
addChild(yrNs); 
 
dobPrompt.setSize(65, 22); 
dobPrompt.text = "Date of birth:"; 
dobPrompt.move(80, 150); 
 
moNs.move(150, 150); 
moNs.setSize(40, 22); 
moNs.minimum = 1; 
moNs.maximum = 12; 
moNs.stepSize = 1; 
moNs.value = 1; 
 
moPrompt.setSize(25, 22); 
moPrompt.text = "Mo."; 
moPrompt.move(195, 150); 
 
dayNs.move(225, 150); 
dayNs.setSize(40, 22); 
dayNs.minimum = 1; 
dayNs.maximum = 31; 
dayNs.stepSize = 1; 
dayNs.value = 1; 
 
dayPrompt.setSize(25, 22); 
dayPrompt.text = "Day"; 
dayPrompt.move(270, 150); 
 
yrNs.move(300, 150); 
yrNs.setSize(55, 22); 
yrNs.minimum = 1900; 
yrNs.maximum = 2006; 
yrNs.stepSize = 1; 
yrNs.value = 1980; 
 
yrPrompt.setSize(30, 22); 
yrPrompt.text = "Year"; 
yrPrompt.move(360, 150);

[컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 실행합니다.