노무현 대통령 배너

Tag: Meritech

플래시 UI 제작을 위한 API 완전 정리

by on 12.11, 2008, under M35T Flash UI

M35Touch 의 플래시 UI에서 사용할 수 있는 명령어는 다음과 같습니다.

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
/*****각 기능 실행*****/
//dmb 실행
ext_fscommand2("PLATFORM", "executeApp", "dmb");
 
//동영상 플레이어 실행
ext_fscommand2("PLATFORM", "executeApp", "movie");
 
//뮤직플레이어(mp3) 실행
ext_fscommand2("PLATFORM", "executeApp", "music");
 
//라디오 실행
ext_fscommand2("PLATFORM", "executeApp", "radio");
 
//게임 브라우져 실행
ext_fscommand2("PLATFORM", "executeApp", "game");
 
//사전 실행
ext_fscommand2("PLATFORM", "executeApp", "dic");
 
//포토뷰어 실행
ext_fscommand2("PLATFORM", "executeApp", "photo");
 
//보이스레코더 실행
ext_fscommand2("PLATFORM", "executeApp", "voicerec");
 
//텍스트 뷰어 실행
ext_fscommand2("PLATFORM", "executeApp", "text");
 
//setting 메뉴 실행
ext_fscommand2("PLATFORM", "executeApp", "setting");
 
 
 
/*****M35T 기기 상태 체크*****/
//배터리 상태수준을 가져와 battery 변수에 저장
ext_fscommand2("PLATFORM","getBatteryLevel", "battery");
 
//LCD상태가 잠겨 있는지 여부를 가져온 후 lcdlocked 변수에 저장, lcdlocked = 0 잠기지 않은 상태, lcdlocked = 1 잠긴상태
ext_fscommand2("PLATFORM","isLCDLocked","lcdlocked");
 
//micro SD 카드의 상태를 가져와 sdcard 변수에 저장, sdcard = 0 없음, sdcard = 1 있음
ext_fscommand2("PLATFORM","isExistSDCard","sdcard");
 
 
 
/*****swf 파일 로드*****/
//메인 UI 상태에서 다른 swf을 호출하고 메인 UI는 메모리에서 삭제.   
ext_fscommand2("PLATFORM", "excuteFlash", "C:\\Config\\test.swf");
 
//다른 swf 가 불러와 있는 상태에서 메인 UI로 돌아간다   
ext_fscommand2("PLATFORM", "runMainMenu");
2개의 댓글 :, , , , , more...

펌웨어 통신 부분

by on 12.10, 2008, under M35T Flash 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프레임으로 재생 헤드를 옮겨보면

2프레임 이동

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

lock 아이콘

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

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

2개의 댓글 :, , , , more...

M35Touch Flash UI Type 3 – Slide Style

by on 12.01, 2008, under M35T Flash UI


이 UI 는 예의 그 절충선상에 있는 UI입니다.
어디선가 본듯하여 사용자가 최초 접근하기에 어렵지 않고(만지작 거리다보면 금새 조작법을 터득하게 된다), 나름 적당한 디자인적 낭비 또는 허영심도 가지고 있습니다.
(사실 낭비하는 자세가 되어있지 않으면 디자인은 성립하기 힘들죠.)

결국 이 UI 가 최종 채택된 디자인이 되었습니다.
내부 코드도 정리해 놓았고, 사용자의 조작이 15초 동안 없으면 등장하는 아날로그 시계 같은 약간의 장식도 해 놓았습니다.
이곳저곳 소소한곳의 개선의 여지가 있긴 한데 필수적인 것은 아니라 현재 상태로 완료하였습니다.

아래에서 현재 버전을 받을 수있습니다.

fla 다운로드

이 디자인의  UI 에 대해서는 이 글의 댓글에서 피드백을 받도록 하겠습니다.

댓글남기기 :, , , , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Meta