TextInput 구성 요소 사용자 정의

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

TextInput 구성 요소의 크기를 조절하면 테두리 크기가 새 경계 상자에 맞게 조절됩니다. TextInput 구성 요소는 스크롤 막대를 사용하지 않지만 사용자가 텍스트와 상호 작용하면 삽입점이 자동으로 스크롤됩니다. 나머지 영역 안에 텍스트 필드의 크기가 조절됩니다. TextInput 구성 요소에 있는 모든 요소의 크기는 고정되어 있지 않습니다. TextInput 구성 요소가 너무 작으면 텍스트가 잘립니다.

스타일 및 TextInput 구성 요소

TextInput 구성 요소의 스타일에 따라 구성 요소를 그릴 때 사용되는 스킨, 패딩 및 텍스트 서식 값이 결정됩니다. texFormat 및 disabledTextFormat 스타일에 따라 구성 요소에 표시되는 텍스트의 스타일이 달라집니다. 스킨 스타일 속성에 대한 자세한 내용은 스킨 및 TextInput 구성 요소 을 참조하십시오.

다음 예제에서는 textFormat 스타일을 설정하여 TextInput 구성 요소에 표시되는 텍스트의 글꼴, 크기 및 색상을 설정합니다. 구성 요소가 비활성 상태일 때 적용되는 disabledTextFormat 스타일도 동일한 절차로 설정할 수 있습니다.

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

  2. TextInput 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 myTi 로 지정합니다.

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

    var tf:TextFormat = new TextFormat(); 
tf.color = 0x0000FF; 
tf.font = "Verdana"; 
tf.size = 30; 
tf.align = "center"; 
tf.italic = true; 
myTi.setStyle("textFormat", tf); 
myTi.text = "Enter your text here"; 
myTi.setSize(350, 50); 
myTi.move(100, 50);

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

스킨 및 TextInput 구성 요소

TextInput 구성 요소에는 다음과 같은 스킨이 있으며, 이러한 스킨을 편집하여 모양을 변경할 수 있습니다.

TextInput 캡션

다음 절차에서는 TextInput 구성 요소의 테두리와 배경색을 변경합니다.

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

  2. TextInput 구성 요소를 스테이지로 드래그하고 두 번 클릭하여 스킨 패널을 엽니다.

  3. Normal 스킨을 두 번 클릭합니다.

  4. 확대/축소 컨트롤을 800%로 설정하여 아이콘을 편집하기 쉽게 확대합니다.

  5. Normal 스킨 테두리의 각 가장자리를 한 번에 하나씩 선택하여 해당 색상을 #993399로 설정하고 적용합니다.

  6. 배경을 두 번 클릭하여 속성 관리자의 [채움 색상] 선택기에 배경색을 표시합니다. #99CCCC 색상을 선택하여 배경색에 적용합니다.

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

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

    TextInput 구성 요소가 다음 그림과 같이 나타나야 합니다.

    테두리 색상 및 배경색이 변경된 TextInput 구성 요소