TextArea 구성 요소 사용자 정의

스타일 및 TextArea 구성 요소
TextArea 구성 요소에 스킨 사용

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

TextArea 구성 요소의 크기를 조절하면 테두리 크기가 새 경계 상자에 맞게 조절됩니다. 필요하면 스크롤 막대가 아래쪽과 오른쪽 가장자리에 배치되고 나머지 영역 안에 텍스트 영역의 크기가 조절됩니다. TextArea 구성 요소에 있는 모든 요소의 크기는 고정되어 있지 않습니다. TextArea 구성 요소 폭이 텍스트 크기에 비해 너무 좁으면 텍스트가 잘립니다.

스타일 및 TextArea 구성 요소

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

다음 예제에서는 disabledTextFormat 스타일을 설정하여 TextArea가 비활성 상태일 때의 텍스트 모양을 변경하지만 동일한 절차를 사용하여 활성 상태의 TextArea에 대한 textFormat 스타일도 설정할 수 있습니다.

새 Flash 파일을 만듭니다.
TextArea 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 myTa 로 지정합니다.

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

var tf:TextFormat = new TextFormat(); 
tf.color = 0xCC99FF; 
tf.font = "Arial Narrow"; 
tf.size = 24; 
myTa.setStyle("disabledTextFormat", tf); 
myTa.text = "Hello World"; 
myTa.setSize(120, 50); 
myTa.move(200, 50); 
myTa.enabled = false;

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

TextArea 구성 요소에 스킨 사용

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

TextArea 스킨

참고: 한 구성 요소에서 ScrollBar 스킨을 변경하면 해당 ScrollBar를 사용하는 다른 구성 요소에서도 해당 스킨이 모두 변경됩니다.

다음 절차에서는 TextArea에 포커스가 있으며 Normal 스킨 상태일 때 나타나는 Focus Rect 스킨의 테두리 색상을 변경합니다.

새 Flash 파일을 만듭니다.
TextArea 구성 요소를 스테이지로 드래그하고 두 번 클릭하여 스킨 아이콘 패널을 엽니다.
Focus Rect 스킨을 두 번 클릭합니다.
Focus Rect 스킨의 테두리를 클릭하여 선택합니다. 그러면 막대 색상이 속성 관리자의 [채움 색상] 선택기에 표시됩니다.
속성 관리자의 [채움 색상] 선택기를 클릭하여 열고 #CC0000 색상을 선택하여 테두리에 적용합니다.
스테이지 위의 편집 막대 왼쪽에 있는 [뒤로] 버튼을 클릭하여 문서 편집 모드로 돌아갑니다.
TextArea 구성 요소를 두 번 클릭하여 스킨 아이콘 패널을 엽니다.
Normal 스킨을 두 번 클릭합니다.
Normal 스킨 테두리의 각 가장자리를 한 번에 하나씩 선택하여 색상을 #990099로 설정합니다.
스테이지 위의 편집 막대 왼쪽에 있는 [뒤로] 버튼을 클릭하여 문서 편집 모드로 돌아갑니다.
[컨트롤] > [무비 테스트]를 선택합니다.

TextArea를 선택하고 텍스트 입력을 시작하면 테두리가 다음 그림과 같이 나타나야 합니다.

바깥쪽 테두리는 Focus Rect 스킨이며 안쪽 테두리는 Normal 스킨의 테두리입니다.

UIScrollBar 스킨 편집에 대한 자세한 내용은 UIScrollBar 구성 요소 사용자 정의 을 참조하십시오.