UI [ 1 ] UI? UI !

應該有人會看不懂這個標題，首先呢~ UI是什麼?
可能之前，一般人知道UI的並不多，UI是User Interface的縮寫，
也就是人機介面，也有人解釋成User Interaction，人機互動。

最先開始出現這個名詞，主要是指硬體的操作介面，
只要是人會接觸到的， 都可以稱為人機介面。

研究UI很有名的Donald A. Norman，在The psychology of everyday things，
有中文翻譯的版本，翻成設計心理學。
書中拿日常生活中常接觸的事物~ 門把，
來說明人機介面的設計重點之一 : 要讓使用者知道要做什麼。

門把的樣式有很多種，有所謂的喇叭鎖，也有像是安全門的門把。
每種設計除了門把的基本功能外，還暗示使用者操作的方式，
當你看到圓圓的喇叭鎖，你的直覺會告訴你，
這個門要用手握的方式，也許需要旋轉才能開啟，
安全門做成橫條的方式，你就會覺得應該是用推的。

不同的門把設計，也需要考慮如何讓使用者，
就算是沒有用過，亦可以判斷要如何使用，
一個好的人機介面設計，就需要具備這個特性，
要讓使用者可以判斷如何操作，了解使用者的想法，
進而符合使用者的期望，才能完成一個基本循環。

想要=>決定方法=>執行=>收到回饋=>完成/失敗

如果沒有完成的話，人就會不斷的執行這個過程，
直到成功為止，當然也有人試了幾次就放棄囉~

所以這世界上，跟"人"有關的事物，是最複雜的，
因為每個人都是不同的個體，不同的文化背景，
不同的生活經驗，不同的學習環境，造就了每個人的認知都會有所不同，
很多介面設計的人，會希望能做出一個符合每個人需求的設計，
但畢竟這是個理想值，在執行上有相當的困難，
只好利用一些方法，一些研究，找到能符合大部分人的設計囉!

Flash Lite [15] Error message

手機跑FlashLite如果出現problem with content:6，表示Bad JPEG data。

下面是對應的狀況，給大家參考囉~
1. Out of memory
2. Stack limit reached
3. Corrupt SWF data
4. ActionScript stuck
5. Infinite AS loop
6. Bad JPEG data
7. Bad sound data
8. Cannot find host
9. ActionScript error
10. URL too long

Flash Lite [14] Input Text

在Flash Lite中，如果要使用Input text很簡單，
只要將文字欄位設定為Input text即可，
有些手機廠商會限制文字欄位，
必須設定最大字元數才可以使用，
那就要給Maximum characters的值，
才能正常使用。

但是目前有個比較麻煩的問題，
就是一開啟，不會直接Focus在Input text的攔位上，
必須要按了上下鍵之後，才會Focus(如下面右邊的圖)，
如果是左邊的狀態，按下Enter鍵，
是不會開啟手機文字輸入的畫面。

另外，利用程式可以將Focsu的狀態不顯示，
但還是具備Input text的屬性，
很簡單，在第一格影格寫入下列程式即可
_focusrect = false;

所以在介面設計上，就要利用別的方式，
讓使用者了解目前哪個是Focus的項目。

Flash Lite [13] Include fonts

Flash Lite的Dynamic text跟Input text，還是具有將字型包入的功能，
但使用時要注意，會增加檔案的大小，所以中文還是比較吃虧。

使用的方式很簡單，只需要在屬性視窗中，
選擇Character，將所需要的字輸入即可，
也可以點選Auto Fill，會將你文字欄位裡的內容加入，
如果是動態會給內容的， 就得自己手動加囉~~

下圖表示將數字跟":", "/"加入，測試的結果，檔案大約會增加2-3KB


PS.同一個字型，同一個字只會加入一次，但是需要每個文字欄位都設定喔!

Flash Lite [12] Scroll Text

上次有跟大家說明，利用Dynamic文字欄位，加上指令可設定捲動，
設定一個Dynamic文字欄位，選擇Multiline，
點選下拉式選單Text，選擇Scrollable，
在文字欄位貼入一段文章，
將var設為content，

如果要能用使用點語法，需要把文字欄位convert成一個影片片段，
設定影片片段名稱為page_mc，才能使用捲動的指令。
在Button上寫下面的指令，就可以控制文字欄位捲動，
on(keyPress "＜Up＞"){
_root.page_mc.content.scroll--;
}
on(keyPress "＜Down＞"){
_root.page_mc.content.scroll++;
}

如果不想包在影片片段裡，程式就需要改成，
on(keyPress "＜Up＞"){
tellTarget("/"){
content.scroll--;
}
}
on(keyPress "＜Down＞"){
tellTarget("/"){
content.scroll++;
}
}

但是需要注意文字欄位的高度，
如果高度太大或太小，捲動的時候，
有的區域無法更新，就會出現殘像，如右圖:

目前這個狀況，會跟手機內的字型有關，
只能直接在手機上測試及調整的方式來避免，
還找不到固定的邏輯，這個狀況在電腦上測試是不會出現的喔!

Flash Lite [11] setProperty

Flash Lite 1.1目前只支援Movie Clip的Instant name，
例如場景上有一個Instant Name為Cube的Movie Clip，
利用setProperty控制向上移動，要在Button上寫，
on (keyPress "＜Up＞") {
setProperty("/cube", _y, _root.cube._y-10);
}
可以用的Property有

_alpha
_currentframe
_droptarget
_focusrect
_framesloaded
_height
_name
_rotation
_soundbuftime
_target
_totalframes
_url
_visible
_width
_x
_xscale
_y
_yscale

Flash Lite [10] Start/StopVibrate

一般來說，遊戲一定少不了音效，
但是在Flash Lite裡面放聲音，
卻不是這麼的容易，
可能因為加了聲音，
突然檔案就大增。

這時候，適當的使用手機特有的振動，
倒是個不錯的選擇!

Flash Lite裡面有兩個與震動有關的指令，
fscommand2( "StartVibrate" , time_on , time_off , repeat );
fscommand2( "StopVibrate" );

StartVibrate是設定開始振動，time_on設定振動開啟的時間，
time_off是設定關閉的時間，單位是milliseconds，
repeat是重複的次數，可以在authoring guidelines p39看到詳細說明，

StopVirate則是在振動的狀態下，可關閉振動。

我在"CRAZY TAXI"裡，撞到東西時，加上振動，
感覺就好玩多囉~~ 大家可以試試

Flash Lite [ 9 ] Test hit

在Flash Lite裡面要做需要偵測碰撞的Game比較困難，
因為像是"hitTest"這個程式，目前是不支援的。

如果用舊有的方法，只能不斷的偵測物件的位置，
判斷在特定的範圍時，表示有碰撞到，
但是如果畫面上的物件很多的時候，
需要不斷的執行很多判斷式，
有可能會造成手機記憶體的不足，
進而發生當機的狀況。

這次試著做"CRAZY TAXI"的遊戲，
遊戲中會隨機出現不同的障礙物，

試了一種方法可以減少判斷，
而且可以比較容易增加物件，
用起來感覺還不錯， 跟大家分享一下~~

畫面中的車子，我製作了一個影片片段，
利用左右鍵控制車子轉換車道，當車子在最左邊車道時，
_root.po=1;

另外做了一個影片片段，來放出現的障礙物，
並用亂數取兩個變數，p表示障礙物出現的車道，k表示障礙物的種類，
當k為1時，並不會出現障礙物。

在製作車子的時候，僅左右移動，所以車頭的位置是固定的，
所以我在障礙物的影片片段中，當障礙物移動到靠近車頭的影格，
寫了下面的判斷式，

if(_root.po==1 and _root.obs.p==1 and _root.obs1.k!=1){
call("/:hit");
}

利用影格來決定判斷的時機，
如果此時車子跟物件出現在同車道，就會撞到。

Flash Lite [ 8 ] Bmp v.s. Vector

Flash Lite裡面，圖的部份要小心處理，
可以的話，儘量用點陣的圖檔，
向量的圖需要大量的運算，很容易就超過負荷。

舉例來說，下面的兩個檔案，











左邊的車子是用png的檔案，右邊的則是用向量的圖像。
輸出的swf檔，左邊21.6KB而右邊則是90.9KB，
更嚇人的是，如果執行後，
左邊的佔記憶體233KB，右邊則暴增成為1825KB，
右邊的在手機內，根本開不起來，
所以可以的話，記得儘量用點陣的圖檔來處理。

Flash Lite [ 7 ] Date/Time

在Flash Lite裡面不需要建立時間物件，也可以取得系統時間及日期，
利用特定的fscommand2即可，
fscommand2( "GetDateDay" );
fscommand2( "GetDateMonth" );
fscommand2( "GetDateWeekday" );
fscommand2( "GetDateYear" );
fscommand2( "GetLocalTime" , "time" );
fscommand2( "GetTimeHours" );
fscommand2( "GetTimeMinutes" );
fscommand2( "GetTimeSeconds" );
fscommand2( "GetTimeZoneOffset" , "timezoneoffset" );

後面有橘色的要使用，必須使用後面定義的變數，
例如說場景上有個文字欄位data，要放入LocalTime的值，
_root.data=_root.time;

其他的直接使用即可，例如:
_root.data=fscommand2( "GetDateMonth" );

Flash Lite [ 6 ] Text

目前在Flash Lite裡面，一樣有三種文字可使用，
Static text
Dynamic text
Input text

但是字型當然沒有像電腦上有這麼多字型可以使用，
如果要使用特殊字型的話，還是得處理成圖，
但相對的，就無法支援多語系的設計。

在小螢幕的介面設計上，
文字的處理得非常小心，
有的時候處理成圖的文字如果太小，反而會不清楚，
所以就算是用圖，建議還是不要用Alias text，

字型的部分，如果要使用系統字，就要選擇_sans，
字級的部分，就要看系統支援的字級了，
像目前所使用的手機，就支援兩個字級12及16。

另外，文字欄位也支援Multi-lines，
一樣可以用scroll++及scroll--來控制文字欄位的捲動。
但我發現如果文字欄位的尺寸，
高度如果會造成切到文字的狀況，
就會出現重疊的現象。

Flash Lite [ 5 ] load..( )

今天來談談，Flash Lite裡面的load指令，
目前Flash Lite只支援四個load指令
loadMovie( );
loadMovieNum( );
loadVariables( );
loadVariablesNum( );

使用方式跟一般相同，只要記得Target的定義方式，
要用"/InstantName"就可以了，

不過這裡有一個要提醒大家的，
就是在Flash Lite裡面，不能在同一格影格使用load的指令，
這樣後面的一個指令，就會無效，
而你在Output的視窗會看到下面的錯誤訊息，

*** Flash Lite Warning - FTPS031: More than one instance of URL Request calls found.

FTPS031
這個錯誤訊息可以在Flash_Lite_1.1_CDK裡的文件authoring_guidelines
找到對應的說明

Flash player detected more than one instance of URL (getURL( ), loadMovie( ),
loadVars( ) and fscommand( ))calls. Only one URL request per frame or event handler is allowed.

簡單來說，就是一個Frame只能執行上述指令的其中之一，
這可是我試了好多方法，才找到的這個問題ㄋㄟ....差點沒瘋掉，
所以大家可以準備這份文件，
後面有個章節說明Warning and Error Messages，
出現錯誤訊息的時候，好好查查看是什麼狀況!

CDK的檔案可以在官方網站下載
http://www.macromedia.com/devnet/devices/flashlite.html

Flash Lite [ 4 ] call( )

在Flash Lite裡也沒有Function可以用，所以要用類似的功能，
就必須用call("Frame label" )，呼叫某個影格裡面的指令來使用。

如果要使用某個影片片段裡面的指令，要用":"連接
call("MovieClipInstantName:FrameLabel");

如果在影片片段內要使用場景上的某個指令，要寫
call("/:FrameLabel");

如果要使用場景上另外一個影片片段裡的指令，要寫
call("/MovieClipInstantName:FrameLabel");

另外，在Flash Lite裡面，沒有支援多個場景，
所以就算是你在另外一個場景製作另外一段動畫，
Flash Lite會把下一個場景的畫面直接接第一個場景後面。

不過可以利用另外一個場景來寫call的指令，
這樣畫面會比較乾淨。

To be continue...