세계의끝과 플래시 원더랜드

하나의 다이나믹 텍스트 필드에서 두개 이상의 포맷을 지정하고 싶은 경우 htmlText 설정하여 태그로 설정하는 방법 이외에 setTextFormat() 메서드를 이용하는 방법이 있습니다.

htmlText 에서 지원하지 않는 속성으로 표현되어야 하거나, htmlText 속성을 줄 수 없는 경우에 이 방법을 사용하면 됩니다. 기본적으로 htmlText 보다는 TextFormat 이 좀 더 강력하다고 할 수 있습니다.

0
1
2
3
4
5
6
7
8

var _tf:TextField = new TextField();
_tf.text = "세계의끝과 플래시 원더랜드";
_tf.autoSize = "left";
addChild(_tf);
 
var format:TextFormat = new TextFormat();
format.color = 0xff0000;
format.bold = true;
_tf.setTextFormat( format, 6, 9 );

컴파일한 결과는 아래와 같습니다. (계속 읽기…)

이번에 소개해 드릴 내용은 UIComponent 의 아주 익숙한 fl.controls.Button 클래스 입니다.

F1 레퍼런스를 뒤적이다보면 가끔 “이 클래스에 이런 속성도 있었네?” 하면서 다시보게되는 클래스들이 있습니다. Button 클래스에도 이런것이 있는데 바로 윗단계 LabelButton 에서 상속한(확장한) labelPlacement 속성이 이 포스트의 주인공 되겠습니다.

간단하게 말하면, Button 내부에 있는 label 텍스트 필드 옆에 아이콘을 달 수 있는 속성 입니다.

0
1
2
3
4
5
6
7

import fl.controls.Button;
import fl.controls.ButtonLabelPlacement;
 
var iconButton:Button = new Button();
iconButton.labelPlacement = ButtonLabelPlacement.RIGHT; // 아이콘에 대한 label 의 상대 위치
iconButton.label = "이미지 아이콘 버튼";
iconButton.setStyle("icon", docIcon); // docIcon 은 라이브러리에서 class로 정의한 무비클립 이름
addChild(iconButton);

이렇게 labelPlacement 속성을 주고 setStyle 을 적용하면 평범한 Button이 산뜻한 아이콘 Button 으로 변신하게 됩니다.

주석에도 써 놓았지만 아이콘에 대한 label의 위치를 정하는 것이라 ButtonLabelPlacement.LEFT 로 속성을 주면 label 이 왼쪽으로 설정되므로 아이콘이 오른쪽으로 붙습니다. 기본값이 RIGHT 이므로 속성을 주지 않으면 아이콘이 왼쪽에 붙게 됩니다.

아이콘이 될 무비클립은 아래 그림과 같이 라이브러리 패널에서 클래스 이름으로 정의해 줍니다. 이미지의 편집 중심점은 왼쪽 위로 해야 정렬이 맞습니다.

그리고 위의 라이브러리 패널에서 보이듯이 Button 컴포넌트를 라이브러리에 하나 넣어줘야 되겠죠?
이렇게 설정을 하고 테스트 무비를 해 보았습니다.

이렇게 멋지게 Button 에 아이콘이 붙어 나옵니다.

참고로 labelPlacement 속성은 ButtonLabelPlacement.RIGHT 와 같이 상수를 대입해도 되고 “right” 와 같이 소문자 문자열로 입력해도 동일하게 동작합니다. 단, 문자열로 속성을 입력했을때는 오타를 내더라도 기본값인 “right” 로 동작하게 되므로 컴파일 타임에 에러 체크가 되지 않는 단점이 있습니다.

관련 레퍼런스는 여기.

위의 테스트 무비에 사용하기 위해 아래와 같이 간단하게 함수로 만들었습니다.

(계속 읽기…)