1. 스케일폼 UI 만들기 - 1. 윈도우 프레임 만들기

http://www.minarto.com/366 에서 이어집니다

0. 본격적으로 시작

본격적으로 UI를 만들어보죠.

일단 만들려고 하는 UI 디자인을 다시 감상해 보겠습니다.

가운데에 떠있는 Spellbook 이란 UI를 보시기 바랍니다.

UI 기획자나 디자이너에게 이런 시안을 받았다면, UI 개발자는 다음과 같이 생각해야 할 겁니다.

1. 윈도우 형태로 개발을 해야한다. (Window 컴포넌트 사용)

2. 이는 곧 닫기 버튼, 윈도우의 드래그 이동 등의 기능이 들어가야 한다. (리사이즈 기능은 없네요)

3. 윈도우 타이틀이 상단에 들어가야 한다.

4. 왼쪽에는 탭버튼이 들어간다. (눈으로 보기에는 그렇지만 MMOKit 의 소스를 보면 탭버튼이 아니고 스크롤링 리스트인 것이 함정입니다)

5. 메인컨텐츠는 슬롯 리스트들이 있고, 페이지에 의해 이동한다 (이 역시 눈으로 보기에는 리스트 컴포넌트 같지만 그렇지가 않은게 함정입니다.)

뭐 기본적으로는 이런 기능이 필요합니다.

아, 한가지 다시 상기하셔야 할 것이 제가 하려는 것은 MMOKit 의 소스 리뷰가 아닙니다.

굳이 소스 리뷰를 하는데 이런 이미지 캡처 노동(?)을 할 필요는 없어보여서요...

CLIK 으로 UI를 만들려면 어떻게 만드냐 입니다.

MMOKit 은 리소스와 몇몇 통신 방식을 가져다 사용할 뿐입니다.

그러면서 CLIK 이 제안하는 스타일에 대해서 보여드리는 겁니다.

전 윈도우의 프레임부터 만들겠습니다.

그냥 순서일 뿐이니... 다른걸 먼저 만드시겠다면 뭐 말리지는 않습니다... :^)

1. xfl 로 새문서 만들고 설정하기

그럼 Flash 를 실행하고 SkinnedWindow 라는 이름으로 새파일을 만드세요. as3 용으로 만드셔야 합니다.

전 fla 를 기본 포맷으로 사용하지 않고, xfl을 기본 포맷으로 사용합니다.

이건 뭐 안따라하셔도 됩니다. xfl 이 폴더 형태이다보니 버전관리와 붙으면 좀 까다로운 면이 있는 것도 사실이거든요...

자, 만드셨으면 SkinnedWindow.fla 대신에 SkinnedWindow 폴더가 만들어질거고 그 안에 xfl 파일이 생성됩니다.

만들어졌으면 작업을 하기 앞서 먼저 설정을 할 것이 있습니다.

Output file 의 경로를 상위폴더로 설정하세요...

기본값도 상위에 swf가 만들어지긴 합니다만, 스케일폼 런처가 기본으로 xfl 파일이 있는 폴더에서 swf를 찾도록 되어있습니다.

그래서 위처럼 "../" 을 붙여줘야 제대로 런처가 실행됩니다.

이게 파일마다 하기가 귀찮으실 테니, 런처 jsfl 파일을 고치는 방법이 있습니다... 이 포스팅이 jsfl 을 다루는 포스팅이 아니기에 일단 간단한 방법으로 말씀드리는 겁니다.

그냥 돌아가는 jsfl 은 첨부합니다. 기존 런처파일을 백업해 놓으시고, 덮어씌우면 됩니다. (제가 만든건 아니고 밑의 녀석이 만들었습니다. launchSWF 함수를 수정해서 상위폴더의 swf를 실행하도록 만든겁니다)

해당 폴더의 경로는 다음과 같습니다

C:\Users\유저이름\AppData\Local\Adobe\Flash CS6\en_US\Configuration\Scaleform\jsfl

LaunchPanel.jsfl

fla 로 작업하실거면 위의 사항은 해당없습니다.

그리고 또 하나 설정할 것이 있는데 그림 오른쪽에 Script : ActionScript 3.0 우측의 ActionScript Setting 버튼을 클릭하면 나오는 윈도우에서 Stage : Automaticaly declare stage instances 의 체크박스가 선택되어져 있다면 해제하도록 하세요

그 이유는 다음의 우야꼬 군이 잘 설명해놨습니다.

http://wooyaggo.tistory.com/336

그 이외에도 필요한 설정이 있다면 해놓으시기 바랍니다.

2. 배경 만들기

이제야 본격적인 작업이네요.

디자이너분께서 만들어놓은 이미지를 부른 다음 background 라는 이름으로 무비클립을 만듭니다.

(오토데스크에서 개인적으로 MMOKit 디자인 좀 바꿔줬으면 좋겠습니다만...)

이걸 다시한번 무비클립으로 감싸서 만들어줍니다. 이번에는 SkinnedWindow 라는 이름으로 만들어주세요

(이름은 별로 중요하지 않다는거 아시죠?)

이 SkinnedWindow 무비클립을 Window 클래스를 연결해줍니다

SkinnedWindow 무비클립을 더블클릭해서 들어가면 아까 만들어놓은 background 무비클립을 선택할 수 있을 겁니다

선택하고선 프로퍼티 창에 background 라고 인스턴스명을 지어줍니다

(전 MMOKit 리소스를 가져오다보니 배경이미지가 둘로 나뉘어져 있습니다. 회사 디자인에 따라 안나눠진 분들도 있겠지만 뭐 지금은 딱히 상관없습니다)

나중에 구분짓기 편하기 위해서 레이어에 background 라고 지어줍니다.

참고로 배경 이미지에 scale9grid 기능을 사용하려면 적용해주세요... scale9grid 기능을 모르는 분은 이 문서를 참고하세요

https://gameware.autodesk.com/developer/documents/sf_4.1_scale9grid_kr.pdf

3. 타이틀 바 만들기

background 레이어 위에 새 레이어를 title(또는 titleBtn) 이라고 만듭니다. title 레이어에 텍스트필드를 만들어 textField 라고 인스턴스명을 지어줍니다

나중에 윈도우의 이름이 들어갈 곳이니 넓직하게 영역을 잡아줍니다.

(CLIK 의 Window 컴포넌트에서는 이 영역이 곧 드래그 영역이 되기 때문에 잘 늘려주세요)

참고로 눈으로 구별하기 쉽게 textField 안에 Title 이라고 써주면 작업하기 편하겠죠?

나중에 게임 상에서는 자동으로 타이틀이 바뀌니 지금은 어떤 글자가 들어가 있어도 상관없습니다.

텍스트 필드를 무비클립으로 만들어서 titleBtn 이라는 이름으로 만들어준 후 인스턴스명도 같게 지어줍니다.

(이름은 꼭 맞게 지어주시기 바랍니다. CLIK 에서는 이미 해당 인스턴스명으로 변수들이 선언되어 있기 때문입니다)

Linkage 의 Export for ActionScript 를 체크해주고선 다음과 같이 CLIK 의 Button 클래스로 연결합니다

4. 닫기 버튼 만들기

이번엔 닫기 버튼을 만들어보겠습니다

닫기 버튼 이미지를 불러서 적절히 배치한후 타이틀 버튼을 만들었 듯이 Button 클래스와 연결해줍니다.

보는 바와 같이 이름은 closeBtn 이라고 지어주세요. 만들어진 무비클립의 인스턴스 이름도 똑같이요...

자, 기본적인 작업은 다 됐습니다. 이제 스케일폼으로 컴파일해 돌려보면 

잘 뜹니다.

드래그도 잘 되고, 닫기버튼 클릭하면 실제로 윈도우가 사라지기도 하고요... 이미 연결되어진 Window 컴포넌트에서 해당 기능들이 구현되어 있기 때문입니다.

그런데 글자가 다 깨져버리네요...

추석이니 한주 건너 뛰고... (제가 큰집의 장손입니다!!! ㅡ.,ㅡ;;;)

다음 포스팅에서 폰트를 만들어 런타임 공유하는 것을 만들어보겠습니다.