스타일 설정

스타일 설정 이해
구성 요소의 기본 스타일 액세스
구성 요소 인스턴스의 스타일 설정 및 가져오기
- TextFormat을 사용하여 텍스트 속성 설정
구성 요소의 모든 인스턴스에 하나의 스타일 설정
모든 구성 요소에 하나의 스타일 설정

Flash에서 다양한 상태의 구성 요소를 그릴 때 사용되는 스킨, 아이콘, 텍스트 서식 및 패딩은 일반적으로 구성 요소의 스타일에 따라 결정됩니다. 예를 들어, Flash에서는 마우스 버튼으로 Button을 클릭할 때 발생하는 다운 상태를 업 또는 보통 상태와는 다르게 표시하기 위해 다른 스킨을 사용하여 Button을 그립니다. 또한 Button의 enabled 속성을 false 로 설정하여 버튼이 비활성 상태가 된 경우에도 다른 스킨을 사용합니다.

문서, 클래스 및 인스턴스 수준에서 구성 요소의 스타일을 설정할 수 있습니다. 또한 일부 스타일 속성은 부모 구성 요소로부터 상속받을 수 있습니다. 예를 들어, List 구성 요소는 BaseScrollPane에서 상속되는 ScrollBar 스타일을 상속받습니다.

다음과 같은 방식으로 스타일을 설정하여 구성 요소를 사용자 정의할 수 있습니다.

구성 요소 인스턴스에 스타일을 설정합니다. 단일 구성 요소 인스턴스의 색상과 텍스트 속성을 변경할 수 있습니다. 특정 상황에서는 이 방법이 효율적일 수 있지만 문서 내에 있는 모든 구성 요소에 대해 속성을 개별적으로 설정하려면 너무 많은 시간이 소요될 수 있습니다.
문서에서 특정 유형의 모든 구성 요소에 스타일을 설정합니다. 특정 유형의 모든 구성 요소(예: 문서의 모든 CheckBox 또는 모든 Button)에 일관된 모양을 적용하려면 구성 요소 수준에서 스타일을 설정합니다.

컨테이너에 설정된 스타일 속성 값은 포함된 구성 요소에 상속됩니다.

Flash에서는 실시간 미리 보기 기능을 사용하여 스테이지에서 구성 요소를 볼 때 스타일 속성의 변경 내용이 표시되지 않습니다.

스타일 설정 이해

다음은 스타일 사용에 대한 몇 가지 주요 사항입니다.

상속

자식 구성 요소는 부모 구성 요소로부터 스타일을 상속받도록 설정되어 있습니다. ActionScript 내에서는 스타일 상속을 설정할 수 없습니다.

우선 순위

구성 요소 스타일이 여러 가지 방법으로 설정된 경우 우선 순위에 따라 첫 번째 스타일이 사용됩니다. Flash에서는 값을 발견할 때까지 다음 순서로 스타일을 찾습니다.

구성 요소 인스턴스에서 스타일 속성을 찾습니다.
스타일이 상속되는 스타일에 속하면 부모 계층에서 상속된 값을 찾습니다.
구성 요소에서 스타일을 찾습니다.
StyleManager에서 전역 설정을 찾습니다.
아직 속성이 정의되지 않은 경우 속성의 값은 undefined 입니다.

구성 요소의 기본 스타일 액세스

구성 요소 클래스의 정적 getDefaultStyles() 메서드를 사용하여 구성 요소의 기본 스타일에 액세스할 수 있습니다. 예를 들어, 다음 코드는 ComboBox 구성 요소의 기본 스타일을 검색하여 buttonWidth 및 downArrowDownSkin 속성의 기본값을 표시합니다.

import fl.controls.ComboBox; 
var styleObj:Object = ComboBox.getStyleDefinition(); 
trace(styleObj.buttonWidth); // 24 
trace(styleObj.downArrowDownSkin); // ScrollArrowDown_downSkin

구성 요소 인스턴스의 스타일 설정 및 가져오기

모든 UI 구성 요소 인스턴스는 setStyle() 및 getStyle() 메서드를 호출하여 직접 스타일을 설정하거나 검색할 수 있습니다. 다음 구문은 구성 요소 인스턴스의 스타일과 값을 설정합니다.

instanceName.setStyle("styleName", value);

이 구문은 구성 요소 인스턴스의 스타일을 검색합니다.

var a_style:Object = new Object(); 
a_style = instanceName.getStyle("styleName");

getStyle() 메서드는 데이터 유형이 각기 다른 여러 스타일을 반환할 수 있으므로 Object 유형을 반환합니다. 예를 들어, 다음 코드는 TextArea 인스턴스( aTa )의 글꼴 스타일을 설정한 다음 getStyle() 메서드를 사용하여 글꼴 스타일을 검색합니다. 이 예제에서는 반환값을 TextFormat 객체로 변환하여 TextFormat 변수에 지정합니다. 형 변환을 하지 않을 경우 Object 변수를 TextFormat 변수로 강제 형 변환하는 과정에서 컴파일러 오류가 발생합니다.

import flash.text.TextFormat; 
 
var tf:TextFormat = new TextFormat(); 
tf.font = "Georgia"; 
aTa.setStyle("textFormat",tf); 
aTa.text = "Hello World!"; 
var aStyle:TextFormat = aTa.getStyle("textFormat") as TextFormat; 
trace(aStyle.font);

TextFormat을 사용하여 텍스트 속성 설정

TextFormat 객체를 사용하여 구성 요소 인스턴스의 텍스트 서식을 지정할 수 있습니다. TextFormat 객체에는 bold , bullet , color , font , italic , size 등의 텍스트 특성을 지정할 수 있는 속성이 있습니다. TextFormat 객체에서 이러한 속성을 설정한 다음 setStyle() 메서드를 호출하여 구성 요소 인스턴스에 적용할 수 있습니다. 예를 들어, 다음 코드는 TextFormat 객체의 font , size 및 bold 속성을 설정하여 Button 인스턴스에 적용합니다.

/* Create a new TextFormat object to set text formatting properties. */ 
var tf:TextFormat = new TextFormat(); 
tf.font = "Arial"; 
tf.size = 16; 
tf.bold = true; 
a_button.setStyle("textFormat", tf);

다음은 Submit 레이블이 지정된 버튼에 이러한 설정을 적용한 결과를 나타낸 그림입니다.

setStyle() 을 통해 구성 요소 인스턴스에 설정한 스타일 속성은 우선 순위가 가장 높기 때문에 다른 모든 스타일 설정은 무시됩니다. 그러나 단일 구성 요소 인스턴스에 setStyle() 을 사용하여 설정한 속성이 많을수록 런타임에 구성 요소의 렌더링 속도가 느려집니다.

구성 요소의 모든 인스턴스에 하나의 스타일 설정

StyleManager 클래스의 정적 setComponentStyle() 메서드를 사용하면 구성 요소 클래스의 모든 인스턴스에 하나의 스타일을 설정할 수 있습니다. 예를 들어, Button을 스테이지로 드래그한 후 타임라인의 프레임 1에 있는 [액션] 패널에 다음 ActionScript 코드를 추가하여 모든 Button의 텍스트 색상을 빨강으로 설정할 수 있습니다.

import fl.managers.StyleManager; 
import fl.controls.Button; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setComponentStyle(Button, "textFormat", tf);

이후 스테이지에 추가하는 모든 Button은 빨강 레이블을 가지게 됩니다.

모든 구성 요소에 하나의 스타일 설정

StyleManager 클래스의 정적 setStyle() 메서드를 사용하여 모든 구성 요소에 하나의 스타일을 설정할 수 있습니다.

List 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 aList 로 지정합니다.
Button 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 aButton 으로 지정합니다.
[액션] 패널이 열려 있지 않은 경우 F9 키를 누르거나 [윈도우] 메뉴에서 [액션]을 선택하여 [액션] 패널을 열고 타임라인의 프레임 1에 다음 코드를 입력하여 모든 구성 요소의 텍스트 색상을 빨강으로 설정합니다.
```
import fl.managers.StyleManager; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setStyle("textFormat", tf);
```

[액션] 패널에 다음 코드를 추가하여 List를 텍스트로 채웁니다.

aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.allowMultipleSelection = true;

[컨트롤] > [무비 테스트]를 선택하거나 Ctrl+Enter를 눌러 코드를 컴파일하고 내용을 테스트합니다. 버튼 레이블과 목록의 텍스트가 모두 빨간 색이어야 합니다.