[AS] Flash ActionScript 3.0의 Component 에 대해...

 

 

=================================

=================================

=================================

 

 

 

출처: http://wrice.egloos.com/4554325

Flash ActionScript 3.0의 Component 에 대해...

여전히 Flash9 을 공부하는 중입니다.

이번에는 Component 에 대해 적어보겠습니다.

Component 분석...

Component 라는 것은 흔히 말하는 Ui 컨트롤들입니다. 콤보박스, 리스트 박스, 스크롤바, 이런것들을 통칭합니다.

1. 스타일
2. 스킨
3. Class 상속 구조


1. 스타일

우선 스타일이라는 개념이 등장하는데요.
저는 요게 단어 선택이 좀 부적절하다고 생각합니다.
Flash에서 말하는 스타일이라는 것은 해당 인스턴스 각각이 갖을 수 있는 속성값들을 말합니다.
말하자면 Class 구성으로 생각하면 member variable 같은 것입니다.
다만 그 변수들을 정적으로 고정하지 않고, 사용자가 동적으로 추가하거나 제거 할수 있도록 만들어 둔것입니다.
간단히 생각하면 이런식입니다.

public class MyButton {
    public map< string, void * > style;
};

그래서 각각의 Component들의 instance들이 각기 다른 값의 속성 값을 동적으로 갖을수 있게 됩니다.

화면 상의 Ui 는 이런식입니다.

위의 스크린 샷에서 '매개 변수' 탭 아래에 우측에 보이는 리스트 박스가 스타일입니다. 현재 5개의 스타일이 한개의 버튼 Component instance 에 (기본값으로) 저장되어있는 화면입니다.
*PS: 여기에서 한가지 주의해서 볼점은, 우측의 리스트 박스는 동적으로 추가 삭제가 가능한 스타일들인 반면에, 좌측 화면에 보이는 몇가지 요소(인스턴스 이름, 너비, 높이, X 좌표, Y 좌표)는 정적으로 항상 고정되어있는 값들입니다. 이렇게 구현된 이유는 아마도 클래스 상속과 관련해서 polymorphism 기능을 사용하기 위해서, 필수적인 몇몇 항목에 대해서 정적으로 고정한것 같습니다.

한가지 흥미로운 점은 내부 구현과 관련된 스타일들이 더 있는데, 화면 Ui에는 보여지지 않고 있다는 점입니다.
이때문에 Component와 관련된 style은 다시 Component Manager Panel 을 열어서 거기에서 추가적인 것들을 설정할수가 있습니다.

위의 스크린샷을 보시면 그 앞의 것에 비해 2개의 스타일이 더 보여지고 있음을 확인할수 있습니다.
왜 이렇게 번거롭고 중복되게 만들었는지는 이해가 안됩니다만 아무튼 그렇게 되어있네요.

근데 더 복잡해지는 느낌이 드는 것은, 이것 말고도 숨겨져 있는 스타일이 더 많다는 점입니다.
예 를 들어, 버튼이 화면상에 그려질때 어떤 '스킨'을 사용할 것인지를 기억하고 있어야 하는데 그 정보들이 스타일의 형태로 저장되어있고, 화면상에서는 감춰져서 보이지 않는 다는 점입니다. 이것은 ActionScript 를 사용해서 확인하거나 변경할수 있습니다.

결국 스타일에 대한 정보는 3가지 방법을 통해서 접근할수 있는 것인데요. 제가  Ui툴을 다시 만들게 되면 이것들은 그냥 깔끔하게 한가지로 통일 시킬것 같습니다.


2. 스킨

스킨은 화면상에 보여질때 어떤 그림을 사용할것인지를 따로 모아둔 것입니다.
해당 Component를 더블클릭하면 '스킨 편집기'라는 것이 열린다는데, 보기에는 심볼 편집기와 구분이 잘 안갑니다.

 

화면 구성은 직관적으로 따로 설명이 필요없을듯 합니다. 디자이너가 바꾸기를 원하는 그림을 선택해서 더블클릭하면 해당 버튼을 편집할수 있게 됩니다.

한가지 개인적으로 인상적이었던 것은
스킨에 대한 정보를 스타일 형태로 저장한다는 점입니다.

예를 들어, 버튼의 경우, 버튼의 일반 모양은 "upSkin"이라는 이름으로 "Button_upSkin"이라는 값이 스타일에 저장됩니다.
마찬가지로 버튼이 눌렸을때의 모양은 "downSkin"이라는 이름으로 "Button_downSkin"이라는 값이 저장됩니다.

여기에서 Button_upSkin 이라는 값과 Button_downSkin 이라는 값은 '라이브러리' 상에 실제 존재하는 '무비클립'의 이름입니다.
그 래서 디자이너가 버튼의 모양을 바꾸고 싶은 경우에, 새 버튼 이미지를 그린 다음에 (예를 들어) Button_upSkin_new 라는 이름의 무비 클립으로 저장한뒤에, 해당 버튼의 스타일 값들중 upSkin 정보를 Button_upSkin에서 Button_upSkin_new 로 바꾸면, 그때부터는 그 버튼의 보통 상태 그림이 Button_upSkin 이 아니라 Button_upSkin_new 가 되는 것입니다.

 

설명이 좀 복잡하군요... 죄송.

아무튼 이렇게 스타일을 잘 활용해서 구현되면 Ui 디자이너가 마음대로 스킨을 수정하는게 가능해집니다. 제가 예전에 Ui툴 만들때는 이런 방식은 미처 생각을 못했는데, 정말 좋은 방법인것 같습니다.


3. Class 상속 구조

Class 상속 구조는 도움말 파일에 자세히 잘 설명되어있습니다.
( ActionScript 3.0 언어 및 구성 요소 참조 설명서 > 모든 패키지 > fl.controls. 패키지 )
여기에서는 Button과 Combo box 두가지만 간단히 살펴보겠습니다.
보다 자세한 설명은 도움말 페이지를 반듯이 참고하시기 바랍니다.
도움말 파일에는 MSDN만큼이나 자세하게 member attribute 와 member methods 그리고 event 와 스타일까지 자세하게 잘 설명되어있습니다.

이것은 Button의 상속 구조입니다.

보시는 것과 같이 최상위 클래스인 Object 부터 Sprite 까지는 지난번에 DisplayObject를 살펴 볼때 살펴본 것입니다.
그 아래로 모든 Component 들은 UIComponent 라는 클래스를 상속 받아서 구현됩니다.
버 튼의 경우 BaseButton을 상속 받고 LabelButton을 상속 받는 다는 점은 CheckBox와 같습니다. 왜 BaseButton과 LabelButton의 두개가 구분되어있는지는 이해가 안됩니다. BaseButton을 상속 하는 클래스는 LabelButton 뿐인것 같은데 말입니다.

LabelButton 은 도움말에 따르면 Grid에도 사용되고 스크롤바의 버튼에도 사용되고 체크박스, 라디오 버튼등에 사용된다고 합니다.

ComboBox를 살펴보겠습니다.

 

콤보 박스는 버튼 보다 좀 더 복잡한데요.
아시다 시피 콤보 박스는 리스트 박스와 텍스트 입력 부분, 그리고 버튼으로 구성됩니다.
도 움말에 있는 member variable 들을 살펴 보면 그 안에 list 와 textInput 이 Composite 구성으로 들어있는것을 확인할수 있습니다. 다시 말해 상속 관계로 구현된게 아닌것이죠. 그래서 상속 구조는 간단한데 소유 관계로 구성 요소들을 가지고 있어서, 이걸 구현하는 부분이 상당히 복잡할걸로 예상됩니다. (개인적으로는 상속을 별로 안좋아하고 Composite구성을 선호하기 때문에 이런식이 좋아보입니다.)


이 글은 여기서 끝입니다.

한 가지 개인적으로 덧붙이고 싶은 것은 스크롤바에 대한 것입니다. 저는 왜 스크롤바가 독립적으로 다루어질 필요가 있는지 모르겠습니다. 스크롤바가 사용되는 곳은 거의 한정적인데, Flash의 경우를 보면 스크롤바가 따로 사용되는 경우는 TextArea 우측이나 하단에 가져다 붙여 넣고 그걸 ActionScript를 사용해서 두개를 엮어주는 것입니다. 왜 이렇게 따로 구성되어있어서 수작업으로 두개를 붙여줘야하는지 모르겠습니다.
왜냐하면 언제나 TextArea는 내부 공간이 부족하게되면 ScrollBar를 항상 필요로 하는데, 아에 ScrollBar를 TextArea의 기본 속성으로 갖어도 될것 같다는 생각입니다.
그리고 저는 TextArea이외에는 ScrollBar가 어디 따로 사용될 일이 있을까 의심스럽습니다.

# by 쌀밥 | 2008/08/16 03:06 | 컴터 관련 | 트랙백 | 핑백(1) | 덧글(2)

트랙백 주소 : http://wrice.egloos.com/tb/4554325
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]

 

 Linked at 쌀밥게임 대왕 : 게임 GUI.. at 2009/06/05 13:17

... 용자들이 직접 수정할수 있도록 XML 포멧을 공개하고 있습니다. 이것도 참고가 됩니다.Flash 의 유저 인터페이스 관련 부분을 자세히 설펴보시면 그것도 도움이 됩니다. (예전글1, 예전글2 참고) GoF 의 Design Pattern 책을 참고하세요. UI 와 관련된 패턴들이 몇가지 소개됩니다.W3C 의 DOM 표준안을 참고로 하세요. OO 관점에서 인터페이스 ... more

 Commented by omni peace tee tshir at 2010/04/25 00:55 

 

Can you tell me how I sign up for an eqloos account?

 Commented by 쌀밥 at 2010/04/28 12:47 

omni peace tee tshir// I think only Koreans can get a new account by some reason.

 

 

 

 

=================================

=================================

=================================