How to implement User RectBorder

vkimone — Sat, 20 Jan 2007 20:14:34 +0000

플래시에서 제공되는 component 들은 종류에 비해 디자인적인 확장성에서 제약이 있기 때문에 많이 사용되지 않고 있다. 물론 나도 특별한 경우를 제외하고는 사용하지 않는 편이다.
나름대로 디자인에 큰 영향이 없다면 제공되는 기본 component 를 사용하지만 간혹가다 뜻하지 않는 문제점에 부딛히게 되면 여간 힘든게 아니다. 많이 사용해 보지 않는 문제점을 해결하는 것이 만만치 않다. 특히 기본 component 를 사용할때 가장 문제가 되는것이 바로 border 처리 문제일것이다.
halo theme 에서 제공되는 border를 쓰자니 디자인에 걸릴때가 참 많이 발생하게 된다.
물론 theme 파일을 수정하여 요소들을 수정할 수 있지만 여간 손이 많이 가는게 아닐 뿐더러 자칫하면 내장 클래스를 건드리게 되어 플래시 전체의 component 의 UI 가 뜻하지 않게 될수도 있다.

이런 저런 문제로 그동안 사용을 극도로 꺼려했지만 이번에 러퍼런스를 보고 가장 손쉽게 border 를 사용자가 맞게 구성하는 방법을 찾아내어 소개해 본다.

기본적인 방법은 내장 component 에서 사용하는 RectBorder 을 편집하여 사용자가 만든 border 를 사용할 수 있게 하는 것이다.

1. 플래시가 설치되어 있는 폴더에서 Class/mx/skins 폴더에 사용자 정의 테두리에 사용할 사용자 정의 패키지 이름으로 새 폴더를 만든다.
ex: C:\Program Files\Macromedia\Flash 8\en\First Run\Classes\mx\skins
2. 이폴더에 RectBorder.as 이름으로 사용자 정의 클래스를 만든다.
3.다음 코드를 삽입한다.

import mx.core.ext.UIObjectExtensions;
class mx.skins.myTheme.RectBorder extends mx.skins.RectBorder {
static var symbolName:String = "RectBorder";
static var symbolOwner:Object = RectBorder;
var className:String = "RectBorder";
#include "../../core/ComponentVersion.as"
// All of these borders have the same size edges, 1 pixel.
var offset:Number = 4;
function init(Void):Void {
super.init();
}
function drawBorder(Void):Void {
// The graphics are on the symbol's timeline,
// so all you need to do here is size the border.
_width = __width;
_height = __height;
}
// Register the class as the RectBorder for all components to use.
static function classConstruct():Boolean {
UIObjectExtensions.Extensions();
_global.styles.rectBorderClass = RectBorder;
_global.skinRegistry["RectBorder"] = true;
return true;
}
static var classConstructed:Boolean = classConstruct();
static var UIObjectExtensionsDependency = UIObjectExtensions;
}

위코드는 사용자 정의 Symbol 을 사용하여 사용자가 정의한 RectBorder을 사용하여 border를 설정하는 것이다.

4. 새로운 Symbol 을 생성한 후 linkage property 에서 아래와 같이 설정한다.
Identifier : RectBorder
As 2.0 Class : mx.skins.myTheme.RectBorder

5. 조금전에 생성한 RectBorder symbol 을 편집해 원하는 border 를 그린다.
단지 좌표값을 0,0 에 맞추어 속이 빈 사각형 박스를 그리기만 하면 된다.

6. RectBorder를 사용하는 여러 component 요소를 스테이지로 드래그합니다.
예를 들어 List, TextArea 및 TextInput component
7. export movie 를 통해 확인해 보면 자신이 만든 border 사용하여 그려진 것을 볼 수 있다.

이런 방법을 사용하면 전체적으로 borderStyle 에 영향받지 않고 자신이 원하는 border 를 구성할 수 있을 것이다.

Kimkijeung.com » component

How to implement User RectBorder