NumericStepper 구성 요소 사용자 정의

제작하는 동안 또는 런타임에 NumericStepper 구성 요소를 가로/세로로 변형할 수 있습니다. 제작하는 동안에는 스테이지에서 구성 요소를 선택한 다음 [자유 변형 도구]나 [수정] > [변형] 명령을 사용합니다. 런타임에는 setSize() 메서드를 사용하거나 width , height , scaleX , scaleY 등의 해당 NumericStepper 클래스 속성과 메서드를 사용합니다.

NumericStepper 구성 요소의 크기를 조절해도 아래쪽 및 위쪽 화살표 버튼의 폭은 변경되지 않습니다. 스태퍼 크기를 기본 높이보다 크게 조절하면 기본적으로 화살표 버튼이 구성 요소의 위쪽과 아래쪽에 고정됩니다. 그렇지 않으면 9-슬라이스 크기 조절에 따라 버튼 그리기 방식이 결정됩니다. 화살표 버튼은 항상 텍스트 상자의 오른쪽에 표시됩니다.

스타일 및 NumericStepper 구성 요소

NumericStepper 구성 요소의 스타일 속성을 설정하여 모양을 변경할 수 있습니다. 스타일에 따라 구성 요소를 그릴 때 사용되는 구성 요소의 스킨, 패딩 및 텍스트 서식 값이 결정됩니다. textFormat 스타일을 사용하면 NumericStepper 값의 크기와 모양을 변경할 수 있습니다. 다양한 스킨 스타일을 사용하여 스킨에 사용할 여러 클래스를 지정할 수 있습니다. 스킨 스타일 사용에 대한 자세한 내용은 스킨 을 참조하십시오.

이 절차에서는 textFormat 스타일을 사용하여 NumericStepper에서 표시하는 값의 모양을 변경합니다.

  1. 새 Flash 문서(ActionScript 3.0)를 만듭니다.

  2. [구성 요소] 패널의 NumericStepper 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 myNs 로 지정합니다.

  3. 기본 타임라인의 프레임 1에서 다음 코드를 [액션] 패널에 추가합니다. 

    var tf:TextFormat = new TextFormat(); 
myNs.setSize(100, 50); 
tf.color = 0x0000CC; 
tf.size = 24; 
tf.font = "Arial"; 
tf.align = "center"; 
myNs.setStyle("textFormat", tf);

  4. [컨트롤] > [무비 테스트]를 선택합니다.

스킨 및 NumericStepper 구성 요소

NumericStepper 구성 요소에는 버튼의 업, 다운, 비활성화 및 선택 상태를 나타내는 스킨이 있습니다.

스태퍼가 활성화된 경우에는 포인터가 그 위를 이동할 때 아래쪽 및 위쪽 버튼이 오버 상태로 표시됩니다. 버튼을 누르면 다운 상태로 표시됩니다. 마우스를 놓으면 버튼은 오버 상태로 되돌아갑니다. 마우스를 누른 상태에서 포인터를 버튼 밖으로 이동하면 버튼은 원래 상태로 되돌아갑니다.

스태퍼가 비활성화된 경우에는 사용자 상호 작용과 상관없이 비활성 상태로 표시됩니다.

NumericStepper 구성 요소에는 다음과 같은 스킨이 있습니다.

전체 화면으로 그래픽 보기
NumericStepper 스킨

  1. 새 FLA 파일을 만듭니다.

  2. NumericStepper 구성 요소를 스테이지로 드래그합니다.

  3. 확대/축소 컨트롤을 400%로 설정하여 이미지를 편집하기 쉽게 확대합니다.

  4. 스킨 패널에서 TextInput 스킨의 배경을 두 번 클릭하여 그룹 수준까지 드릴다운하고 속성 관리자의 [채움 색상] 선택기에 배경색을 표시합니다.

  5. 속성 관리자의 [채움 색상] 선택기로 #9999FF 색상을 선택하여 TextInput 스킨의 배경에 적용합니다.

  6. 스테이지 위의 편집 막대 왼쪽에 있는 [뒤로] 버튼을 클릭하여 문서 편집 모드로 돌아갑니다.

  7. NumericStepper를 다시 두 번 클릭하여 스킨 패널을 다시 엽니다.

  8. [Up] 그룹에서 위쪽 화살표 버튼의 배경을 두 번 클릭하여 선택하고 속성 관리자의 [채움 색상] 선택기에 해당 색상을 표시합니다.

  9. #9966FF 색상을 선택하여 위쪽 화살표 버튼의 배경에 적용합니다.

  10. [Up] 그룹의 아래쪽 화살표에 대해서도 8~9단계를 반복합니다.

  11. [컨트롤] > [무비 테스트]를 선택합니다.

    다음 그림과 같이 NumericStepper 인스턴스가 나타나야 합니다.

    배경 및 버튼이 사용자 정의된 NumericStepper