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

메리테크 펌웨어 개발자분이 제게 보내온 기술 문서를 정리해서 포스팅 합니다.

이 내용은 11월 20일자 V1.0.3.6 펌웨어에 이미 적용되었지만 외부로 공개되지 않은 API 입니다.
플래시 UI가 로드된 상황에서 함수를 호출하여 M35T의 내부의 다른 swf 파일을 로드하고 메인 플래시 UI는 언로드 되도록 하는 내용 입니다.

언뜻 보기에 최상단에 loadMovie() 하는게 더 낫지 않냐? 하시겠지만,
실제 휴대용 디바이스의 플래시를 제작하다보면 가장 먼저 느끼는 점이 “퍼포먼스가 정말 안나온다” 라는 점입니다.
약간만 복잡한 모션이거나 움직임이있는 무비클립의 면적이 약간만 넓어져도 속도저하가 확 느껴질 정도 입니다.
그래서 onEnterFrame 같은건 너무나 당연히 delete 시켜줘야 하고, 데스크탑(윈도우) 상에서는 전혀 신경쓰지 않아도 되는, 심지어는 사용하지 않는 변수를 삭제시키는 등의 메모리 확보에 신경을 써야 합니다.
이런 환경이니 swf를 하나이상 loadMovie 하는것은 굉장한 부담이 되는 일입니다.
혼자만 사용하는거라면 뭐 상관 없을수도 있지만, 공개되어 배포되는 애플리케이션인 경우에는 이야기가 달라지죠.

뭐 그렇다는 이야기고…

사용 방법은 다음과 같습니다.

1. 메인 UI에서 다른 플래시 파일 호출
ext_fscommand2(arg1, arg2, arg3)
arg1: API의 종류( 무조건 “PLATFORM”)
arg2: 함수명( “excuteFlash”)
arg3: 플래시의 경로

1
2

//메인 UI 상태에서 다른 swf을 호출하고 메인 UI는 메모리에서 삭제.
ext_fscommand2("PLATFORM", "excuteFlash", "C:\\Config\\test.swf");

위의 코드에서 주의할 점이 경로 인데,
M35T의 기본 메모리 영역은 C 드라이브이고, sd카드는 D 드라이브 입니다.
그리고 디렉토리 구분 표시는 이스케이프 문자를 “\\” 이렇게 두개 겹쳐 써야합니다.(한글폰트에서는 “\\” 가 되겠죠.)
M35T 운영체제의 특성인듯 한데, 이것을 메리테크 개발진에서는 버그로 인식하고 다음번 펌웨어 패치때 수정할 계획인 모양입니다.

2. 다른 플래시가 화면에 표시된 상태에서 메인 UI로 복귀
ext_fscommand2(arg1, arg2)
arg1: API의 종류( 무조건 “PLATFORM”)
arg2: 함수명(“runMainMenu”)

1
2

//다른 swf 가 불러와 있는 상태에서 메인 UI로 돌아간다
ext_fscommand2("PLATFORM", "runMainMenu");

그렇다면 이걸로 무엇을 할 수 있냐…

별도의 플래시 애플리케이션을 메인 UI에서 불러 사용할 수 있는 강력한 기능의 확장이라고 할 수 있습니다.
현재의 M35T의 메뉴는 setting 까지 포함해서 10가지 인데 이것이 무한대수로 증가할 수 있는 가능성이 열린 것이죠.
예컨대, 메모장 이라던가, 달력 이라던가(이건 메인 UI 위젯 형태로 개발되는것이 더 맞긴하겠지만), 플래시 갤러리 라던가, 간단한 그림판 같은 기능이 추가될 수 있다는 것입니다.

사용된 코드는 크게 두 부분으로 나뉩니다.
M35T의 펌웨어와 통신, 이벤트 수신, 프로그램 실행을 하는 펌웨어 통신 부분과…
사용자 인터랙션을 받아 화면을 표현하는… 즉, 디자인 부분입니다.

아래의 코드는 그중 펌웨어 통신 부분만을 나타낸 것입니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

/************************************************
//Meritech M35Touch Main UI Development & Design
//메리테크 M35Touch 메인 UI 개발, 디자인
//Slide type Flash User Interface
//슬라이드 타입 플래시 유저 인터페이스
//제작자 : 세계의끝(원종선)
//http://www.ufx.kr/blog
//cuebrick@naver.com (UI 수정에 대한 메일 문의는 답변해드리지 않습니다. 홈페이지의 블로그를 이용해주십시오.)
*************************************************/
 
//fscommand 의 _param 에 들어갈 각 기능 호출 String이 들어 있는 배열 (펌웨어에 지정되어 있는 명령어 이름)
//*****중요 : 이 배열의 순서(=명령어의 순서)를 바꾸려면 라이브러리에 있는 icon_mc 의 프레임 순서도 동일하게 변경해야 합니다. (그래야 명령어와 아이콘 그림이 일치)
var command_array:Array = [
			"dmb",
			"movie",
			"music",
			"radio",
			"game",
			"dic",
			"photo",
			"voicerec",
			"text",
			"setting"
			];
 
//핵심 함수 - fscommand 실행 함수 (M35T에게 명령을 내리는 부분)
function getExec (fid:Number){
	//배열의 명령어를 fid 의 파라미터를 이용해 로컬 변수에 저장
	var _param:String = command_array[fid];
 
	//M35T 에 명령을 내리는 부분
	ext_fscommand2("PLATFORM", "executeApp", _param);	
 
	//실제 명령어가 찍히는 모습을 확인
	//trace(fid +" : "+ _param)
}
 
//M35T 상태체크를 위한 setInterval 과 변수
var batteryCheckTime:Number = 1000;//배터리 체크 타임 1000 = 1초
var batteryID:Number = setInterval(getM35Tstat, batteryCheckTime)
var id_cnt:Number = 0;
var battery;
var lcdlocked;
var sdcard;
 
//M35T 상태체크
function getM35Tstat (){
	//배터리 상태수준을 가져와 battery 변수에 저장
	ext_fscommand2("PLATFORM","getBatteryLevel", "battery");
 
	//LCD상태가 잠겨 있는지 여부를 가져온 후 lcdlocked 변수에 저장, lcdlocked = 0 잠기지 않은 상태, lcdlocked = 1 잠긴상태
	ext_fscommand2("PLATFORM","isLCDLocked","lcdlocked");
 
	//micro SD 카드의 상태를 가져와 sdcard 변수에 저장
	ext_fscommand2("PLATFORM","isExistSDCard","sdcard");
 
	//sd카드의 상태 변수에 따라 아이콘 표시
	sdcard_mc.gotoAndStop(Number(sdcard) + 1);
 
	//기기 상태체크 초기 3번 이후에 메모리 확보를 위한 clearInterval
	if (id_cnt >= 3) {
		clearInterval(batteryID);
	}
	id_cnt++;
}
 
//M35T로부터 이벤트가 발생하면 해당 동작을 화면에 표시합니다
//화면에 표시하는 것만을 담당하는 부분입니다. 이것으로 기능을 제어할수는 없습니다
//이미 발생해 있는 상태는 체크되지 않습니다. (이미 발생해 있는 기기 상태는 getM35Tstat() 함수로 체크합니다)
messageEvent = new Object();
messageEvent.onEvent = function() {
	if (arguments[0] == "STAT_EVENT_BATTERY") {
		//배터리 레벨표시 아이콘 프레임 변경, arguments[1] = 0~4 까지
		battery_mc.gotoAndStop(arguments[1])
	} else if(arguments[0] == "STAT_EVENT_LCDLOCKED") {
		//화면 잠김 애니메이션 추가 arguments[1] = 0: 잠기지 않은 상태, 1: 잠긴 상태
		lock_mc.gotoAndStop(Number(arguments[1])+1)
	} else if(arguments[0] == "STAT_EVENT_SDCARD") {
		//sd card 있음 없음 표시 아이콘 추가, arguments[1] = 0: sd 없음, 1: sd 있음
		sdcard_mc.gotoAndStop(Number(arguments[1])+1)
	} else {
		outputDebugMsg("Unkown Event Error");
	}
}
ExtendedEvents.OnM35TPlatformEvent.addListener(messageEvent);

fla  파일 다운로드

이 fla 파일에 작성된 액션 스크립트는 일반 유저들에게 배포될 예정이었기 때문에, 주석에 상세한 설명을 넣어놓았습니다.
(메리테크를 통해 공식 배포된 파일과 약간 다릅니다. 이 글을 작성하면서 다시 코드를 보니 사용하지 않는 변수가 있어 수정하였습니다.)

이 펌웨어 통신부 코드는 다시 두가지 역할로 나뉘는데

1. 펌웨어에 명령을 내리는 함수
2. 이벤트를 받아 화면에 처리하는 함수

입니다.

1. 펌웨어에 명령을 내리는 함수

유저가 버튼을 클릭할때 (실제로는 화면을 터치)
getExec() 함수를 실행해서 해당 기능이 시작되도록 만드는 것입니다.
예컨대 스테이지에 무비클립을 하나 만들어 아래와 같이 속성 창의 인스턴스 이름 항목에 dmb_btn 이라고 입력하고,

프레임에 아래와 같이 스크립트를 작성하면

dmb_btn.onPress = function (){
  ext_fscommand2(“PLATFORM”, “executeApp”, 0);  
}

DMB 를 실행시킬 수 있는 버튼이 만들어진 것입니다.
위에서 가장 마지막에 있는 숫자 0 은 command_array 배열에 있는 index 로 배열은 0,1,2,3… 과 같이 0부터 시작하므로 0번째 인덱스인 dmb 를 의미하는 것입니다.
 

2. 이벤트를 받아 화면에 처리하는 함수

이벤트 리스너를 이용한 화면 처리 입니다.
리스너 객체를 만들고 이벤트 리스너를 등록하고…블라블라~
그러나 이 글은 액션스크립트를 다룰줄 아는 분들을 대상으로 하는 것이 아니기 때문에 기술적인 설명은 거의 의미가 없을것 같습니다.
게다가 그냥 저 상태로 놔두면 알아서 동작하니까, 굳이 이해하실 필요는 없겠죠.

아마 화면에서 배터리, lock, sd card 아이콘의 디자인을 바꾸는 방법을 궁금해하실 것 같습니다.

M35T에서 이벤트 발생하는 이벤트는 위의 아이콘에 의해 표시되는 3가지 라고 이해하시면 됩니다.
화면이 꺼졌을 경우 터치하면 화면이 나타나는 이벤트도 있지만 플래시와는 직접적인 관련이 없습니다.

이벤트에 의해 움직이는 아이콘의 위치는 아래 그림과 같은데…

이 무비클립을 더블클릭하고 들어가서 타임라인의 2프레임으로 재생 헤드를 옮겨보면

아래와 같이 lock 아이콘이 보입니다.

배터리 무비클립의 경우 그림이 4단계 이므로 프레임이 4까지 있다는것만 제외하면 모두 동일합니다.

일단 이정도가 펌웨어와 통신하고 화면에 표시하는 부분에 대한 내용 전부라 보시면 되겠습니다.
간단하죠?
펌웨어 통신 부분은 모든 UI에 공통으로 적용되는 사항이므로 이해할 필요 없이 가져다 쓰시면 되겠습니다.

메리테크의 개발 담당자의 말에 의하면 M35T에 탑재되어있는 Flash Player 는 7.0 버전 입니다.
8.0 버전의 기능이 일부 들어가 있다고 했지만, 기본적으로 7.0으로 생각하고 작업해야 합니다.
플레이어가 7.0 이다보니 액션스크립트도 당연히 2.0 이하로 제작해야 하고, 필터도 사용할 수 없습니다.
필터를 사용했다고해서 컴파일 에러가 뜨거나 하지는 않지만, M35T는 필터를 가볍게 무시합니다.

파일>제작설정(Ctrl+Shift+F12) 에서 아래와 같이 세팅하시기 바랍니다.

swf 의 프레임 속도는 애니메이션 되는 무비클립의 면적에 다라 약간씩 차이가 있지만, 대체로 20프레임 이하라고 생각하시면 됩니다.
썩 만족스러운 프레임 속도는 아니지만.. 모바일 디바이스에서 돌아가는 플래시 치고는 느리지 않은 속도에 속합니다. (사이언 오즈폰의 최신 플래시 UI도 드래그 하면 터치펜 한참 후에 무비클립이 따라오더군요.)
제가 처음 작업을 시작할 무렵에는 10프레임을 간신히 넘기는 수준이었는데, 메리테크 개발진에서 펌웨어의 플래시 플레이어를 개선한 결과 속도 향상이 이뤄진 것입니다.

그리고 line 은 가능하면 사용하지 않는것이 좋습니다.
라인을 사용하면 당연히 윈도우 상에서는 아무 문제가 없지만, M35T 내부에서는 화면 렌더링 엔진이 라인을 제대로 표현하지 못합니다.
이걸 보여드리려면 M35T에 라인이 들어간 swf 넣고 사진을 찍어야 하는데…매우 번거로우므로 패스…
궁금하신분은 직접 해보시길 바랍니다.
그래서 라인을 사용해서 드로잉 한 경우에는 수정>모양>선을 채우기로 변환을 이용하여 라인을 면으로 바꿔주시기 바랍니다.

일단 이정도 사전 지식으로 시작해보기로 하죠.
포스팅 하다가 기억나는 것들은 그때그때 새 포스팅으로 올리겠습니다.