flash UI component v.2 스키닝

플래시 컴포넌트를 스키닝(skining)하기 위한 방법에 대한 몇 가지 생각. 플래시 2004 pro 기준. accordion, loader, alert 컴포넌트를 간단하게 스키닝한 후에 느낀 점들이다. alert 컴포넌트의 경우 여러 컴포넌트들 중에서 가장 유용하고 손쉽게 써먹고 있는 컴포넌트이기도 하다.

1.전체 theme 파일을 작성하고 이를 원하는 파일에 덮어 씌운다.
바꿀 게 많을 때는 이게 효율적이겠지만 겨우 컴포넌트 몇 개 쓰고 폰트나 색 조금 바꾸는 거라면 이 짓은 안 하는 게 낫다. 생각보다 바꿔야할 무비 클립이 많고 정확히 어떤 무비클립이 어떤 컴포넌트의 어디에 쓰이는 지 한 번에 정리된 문서가 없다. 매크로미디어에서 제공하는 레퍼런스에는 이 부분에 대한 언급이 많지 않고 대부분은 개별 컴포넌트의 몇몇 요소의 스키닝 방법에 대해서만 각각의 컴포넌트 사전의 해당 항목에 설명을 써 놓고 있다.
mx.skins.SkinElements 클래스에 속한 무비클립을 재정의 하는 일이 이 theme를 재정의 하는 일의 핵심인 듯 하다. 그러나 뭘 알아야 바꾸던지 말던지 하지. ㅡ ㅡ;

2. 스타일을 이용하는 방법.
v2 컴포넌트는 기본적으로 스타일 적용을 가능하게 해 두었다. setStyle(‘styleID‘, value) 메써드를 통해 컴포넌트의 스타일에 접근하는 방버인데 두 가지 부류로 나눌 수 있다.
CSS1에서 지원하는 항목과 동일한 항목을 조절하는 방법이 그 첫 번째이다. 하지만 CSS1 자체가 확장성이 좁기 때문에 아무래도 많은 제약이 있다. (현재 웹브라우저가 통상적으로 지원하는 안정화 버전의 CSS버전은 CSS2이다) 다른 방법은 컴포넌트 고유의 항목을 통해 정의할 수 있다. 여기에는 themeColor 이나 modalTransparency 등이 해당된다.
스타일을 이용하는 방법은 가장 기초적인 시각 요소를 간략한 AS 코딩만으로 바꾸고자 할 때 유용하다. 하지만 정말 맘 먹고 제대로 바꾸려고 하는 이에게는 그다지 큰 도움이 안 되는 것 같다.

3. 따로 클래스 파일을 만드로 이를 임포트 하는 방법이 컴포넌트 레퍼런스에 나와 있는데 아무리 생각해도 클래스 파일을 새로 짜는 건 내키지 않아서(솔직히 귀찮아서!) 아직 안 해봤다. 감행해보신 분들이 있다면 조언을 .. . .

그리하여 버전 UI 컴포넌트 v2의 스키닝에 대한 나의 결론은, 어떤 식으로 스키닝하려고 하던지 간에 원하는 정도의 시각적 결과물을 얻으려면 엄청난 작업량을 감수해야 하는 것 아닌가라는 점이다. 또한 아무리 생각해도 UI 컴포넌트의 활용도를 높이려면 따로 매크로미디어에서 스키닝과 관련된 레퍼런스를 하나 내놓는 것이 어떨까라는 생각도 해본다.

import mx.styles.CSSStyleDeclaration;
_global.styles.Alert.setStyle('fontFamily', 'AGBEcn');
_global.styles.Alert.setStyle('embedFonts', true);
_global.styles.Alert.setStyle('borderStyle', 'solid');
_global.styles.Alert.setStyle('borderColor', '0x000000');
_global.styles.Alert.setStyle('themeColor', '0x000000');
_global.styles.Alert.setStyle('fontSize', '15');
_global.styles.Alert.setStyle('backgroundColor', '0xC9F0CD');
_global.styles.Button.setStyle('borderStyle', 'none');
_global.style.setStyle('modalTransparency', 60);
titleStyles = new CSSStyleDeclaration();
titleStyles.setStyle("fontWeight", "bold");
titleStyles.setStyle("fontStyle", "italic");
titleStyles.setStyle('fontFamily', 'AGBEcn');
titleStyles.setStyle('embedFonts', true);
titleStyles.setStyle('color', '0xffffff');
titleStyles.setStyle('themeColor', '0x000000');
titleStyles.setStyle('titleBackground', '0x000000');
titleStyles.setStyle('fontSize', '17');
Alert.titleStyleDeclaration = titleStyles;

위의 코드는 지금 짜고 있는 웹사이트를 위해 짠 몇 가지 코드다. 허허허접하지만 일단 참고로. 아래의 두 글이 큰 도움이 되었다.