附錄二 介面的模擬與設計 陳冠竹

作者註：本附錄商請陳冠竹先生為文，探討如何實務運用 Flash 來模擬界面。由於

坊間的 Flash 工具書大多專注在動畫或網路特效，而非介面的原型製作，相信此專

文將對本書讀者將有極大的助益。陳冠竹先生是我的學生之中的佼佼者，他是少數

幾個真正投入新經濟浪潮的設計師，曾任職於元碁、宏碁戲谷、第三波任職多媒體

設計。他精研 Flash 在動畫與網路的應用，著有上奇出版的 Flash MX 動態網頁 easy

go、十分創意 FLASH MX 及 corelDRAW11 等軟體教學書(預計 2003 年一月出版)。

在各位設計師精心設計下的產品外觀下，是否覺得在產品內的應用軟
體和你的設計格格不入？在你算計許久，符合人體工學按鈕或操作介
面下，產品中的軟體流程卻使你的設計打了些折扣？本篇章的目的在
探討如何利用當紅的多媒體軟體，Macromedia Flash MX，來模擬軟
體流程及軟體介面，來和軟體設計及程式設計師做溝通。

本篇章分成以下幾個部份，來讓設計師的各位熟悉模擬軟體的流程：

Flash MX 的環境介紹與設定；

Action，基本的 Flash MX 程式；

簡易模擬操作的實例；

第一節 Flash MX 的環境與設定

Flash MX 是 Macromedia 所設計出來針對網路多媒體的解決方案

 軟體，目前的 MX 是 FLASH 的 6.0 版本。在這個新的版本中，
Macromedia 將其公司當下用來解決網路製作的軟體整合成為一個
MX 家族，計有 Flash MX、Dream weaver MX、Firework MX 及
FreeHand MX。為什麼會在這邊提及這一些軟體呢？因為這些軟體有
著一個 Macromedia 為使用者設計的整合性面版，在我們使用 Flash
時，靈活運用這些面版可以使我們用的更方便。使用者可以根據自己
的使用習慣來分散或是組合自己專用的使用介面，或是可以依據自己
的族群屬性來選擇設定好的面版。

5
< images/fang-0.tif>

透過以下的圖，我們先來大概的了解一下使用的環境：

1. 工具列：一般的畫直線畫圓等畫圖工具都歸在一個浮動面版中，
由於工具的講解並非這個本書及這個章節的重點，故略過不做細
部介紹。

2. 時間軸與圖層：控制圖層(layer)及時間軸(Timeline)的地方。圖
 層的觀念就如同設計師常用的 PhotoShop 等軟體一樣的觀念，
愈在下方的圖層就會被上方的圖層遮住，Flash 中的圖層共計分
有三類：一般圖層、遮照層及導線層。而時間軸則是 Flash 裡最
重要的一個觀念及工具，在 Flash 動畫中出現的物件，會以這個
時間軸做為出現的依據。

<
images/fang3.tif>

3. 浮動面版區：各類細項控制的面版所集合的區域。Flash 可以自
己拆　或組合的面版主要就是指這一些工具區的區塊組合。你也
可以從『視窗→面版集』中依你的使用屬性挑選 Macromedia 定
義好的使用面版集。

< images/fang1.tif>
設計師型的面版集，著重在色彩控制及繪圖控制面版的組合，並將時
間軸及場景區域做為主要的活動區域。

<
images/fang-0.tif>

開發人員適用的面版集，著重在 script 的查詢及撰寫，場景及時間軸

只是用來比對物件的區域，而將程式撰寫區擺在第一位。右方面版區
的組合著重在物物屬性的查詢及組件的應用面版上。
 <
images/fang-2.tif>

4. 場景：物件出現的的主要地方。

5. 屬性面版：當按了工具列的工具，若有其細部的選項會在此出
現。

< images/fang-4.tif>
第二節 Action，基本的 Flash MX 程式

Flash MX 中，將所有的指令歸為八大類，分別是動作、運算子、函式、
常數、屬性、物件、不支援、Flash UI 元件，而這一小節中主要來簡
單說明動作相關指令裡面及較常用的介紹。

影片控制 goto 跳到指定的場景及影格

on 當某特定滑鼠事件發生時，執行
動作

play 開始播放影片

stop 停止播放影片

stopAllSounds 停止播放所有的聲音

瀏覽器/網路 Fscommand 送出 Fscommand 到影片容器

getURL 連結到 Html 檔或是某一網址

loadMovie 從 URL 載入影片片段

loadVariables 從 URL 載入變數

unloadMovie 取消載入已經使用
loadVariables 命令載入的影片
片段

影片片段控 duplicateMovieClip 複製一段影片片段

制
制 onClipEvent 當某特定滑事件發生時，執行動
作

removeMovieClip 移除被複製的電影元件

setProperty 設定屬性

startDrag 開始拖曳

stopDrag 停止拖曳

變數 delete 刪除某變數或物件

set variable 設定變數

var 宣告區域變數

with 在特定的物件中運作的動作

判斷式條件/ If 如果判斷條件為 true，則執行動

迴圈 作

else if 在 if 陳述式中，如果判斷條件為
true，則執行動作

else 在 if 陳述式中，如果判斷條件為
false，則執行動作

for for 迴圈

◎goto（前進至某影格）

跳到指定的場景（Scene）及影格（Frame）。有前往並播放及前往
並停止二種類型。
 ◎stop：停止播放

stop 下在時間軸中，會讓時間停滯在這個時間上，但是若是場景上的
是實體的影片片段的話，則會在這一時間點上繼續地獨立播放

◎Play：從目前的 Frame 開始播放動畫

◎on：滑鼠事件的開頭

滑鼠動作判別指令的開頭，意思是當游標移到這個 instance 上時，滑

鼠按鍵的功能設定。在 Flash MX 中，只要將「on」這個指令設定在
你要設定的 instance 上時，該 instance 就會有滑鼠的功能即反應，所
以不限定只能設定 Button Symbol 上。

在這麼短的篇章中要挑選要講解的 Action Script 指令實在不是

一件簡單的事，Flash MX 在這一個版本，其實已經定位在軟體開發平
台，所以其中的 Action Script 已經是愈來愈多，愈來愈詳細，但是若
就動畫表現而言，上面的幾個控制影片的指令，勉強夠用了。若對
Action Script 有興趣再鑽研的讀者，可以再去坊間看看一些專門講述
Action Script 的書。

第三節 簡易模擬操作的實例

在這一個小節中，我先假設讀者已經知道如何用 Flash 繪製物

件、而且對一些簡單的 Action Script 有一定的了解，而用 Flash 來模
擬一些手機的簡易操作動作。首先我們先來模擬手機撥號的情形。
Step1、在場景中準備好表現的物件：將繪製的手機按鈕、手機螢幕
做好排列，這一個範例中我們需要用的有數字鍵及發話鍵。

< images/fang-5.tif>

Step2、接下來在按鈕上設定 action scripts，讓各個數字按鈕有相對

應的作用。當按了數字鍵後，螢幕會出現對應的數字。

先用文字工具 <btn/btn003.tif>在畫面上放置一個動態的文字欄

位，取名為 numText。

<
images/fang-6.tif>
接著按一下 1 號數字鍵，並按一下 F9 叫出 Script 的編寫視窗。輸入
以下 Action Script：

on (release, keyPress "1") {

_root.numText = _root.numText add "1";

第一行的意思是當滑鼠放開這個按鈕或是按下鍵盤上的數字鍵 1 時，
便會執行二個大括弧間的程式。
第二行的意思是 numText 這個自訂的變數，為現有 numText 的數值
或字串再加上字串內容為 1 的字串(_root.是路徑的表示方法，指主場
景中的變數，通常也用來將變數指定成全域變數)。
其他的數字鍵也依同樣方法輸入，只要改變 Action Script 中相對應的
數字即可。
< images/fang-7.tif>

清除號碼的寫法：清除號碼的寫法很簡單，只要將代表播號號碼的變
數 numText 變成空字串即可。
on (release) {

_root.numText = "";

現在你可以按下 Ctrl + Enter 來測試一下按鈕的作用，是不是按了各

數字鍵都有依照相對應的數字顯現號碼呢?

< images/fang-8.tif>

Step3、接下來製作一段動畫，來當作當按下播號鍵時的反應：按下
播號鍵時→播號中的燈號亮起→號碼做放大縮小的動作提示

繪製一個電話被拿起來的 icon，並將它選取，按下 F8 製作成 movie

Clip。

< images/fang-9.tif>

進入 movie Clip 中編輯這個 icon 的位置，讓它有動態的感覺。

< images/fang-10.tif>

接著將這個 movie clip 取一個 instance name，callingM，然後主場景

中的第一個 Frame 輸入 action script，讓這個 instance 一進來時就看
不見。
_root.callingM._visible = 0

接著複製一個文字欄位，也將它製作成 movie clip，並在這個 movie

Clip 中編輯：每隔五個 Frame 放置一個關鍵影格，共放二個關鍵影格，
並將其中一個關鍵影格中的文字欄位的字元級數縮小一點點，因此在
播放這個 movie Clip 時，會因為字級的大小不同而有跳動的視覺動畫
生成。

將這個 movie clip 取一個 instance name，callingT，然後主場景中的

第一個 Frame 輸入 action script，讓這個 instance 一進來時就看不見。
_root.callingT._visible = 0
然後要處理的就是按鈕上的程式了，我們首先來看看播放按鈕要放入
什麼樣的 action script

on (release) {

_root.callingM._visible = 1;

_root.callingT._visible = 1;

_root.callingT.numText=_root.numText

_root.numText = "";

第一行，定義此 script 為當滑鼠放開時所做的動作；

第二行，將電話會抖動的那個動畫，callingM，的 visible 屬性設為 1，
就是讓它從本來看不見變成看得見。
第三行，同第二行的原理，將 callingT 的這個文字動畫變成看得見。

第四行，將所播的電話號碼的變數，放入文字動畫的變數中

第五行，將場景中本來顯現號碼的欄位變數變成空字串，不然我們所
播的號碼會持續存在場景上，會很文字動畫重疊。

停止撥號按鈕上的 script 的改寫：原本的按鈕上只有讓文字欄位的變

數變為空字串的指令，現在我們再加上二個指令，讓動畫還原成看不
見的狀態。

on (release) {

_root.callingM._visible = 0;
 _root.callingT._visible = 0;

_root.numText = "";

這樣一來，簡單的撥號及停止撥號的粗淺模擬就完成了。
當然，你可以再多花點時間，多費點巧思，讓整個介面及流程更有創
意及更有商品化的可能性，相信 Flash 可以幫助你不少。

< images/fang-11.tif>
< images/fang-12.tif>