探析Flash時鐘的設計過程

Flash 是由 Adobe 公司推出的互動式向量圖和 Web 動畫的標準， 以其優秀的動態性和向量性而深受全世界閃客的喜愛[1]。

在此之前， 網頁是基於 Web1.0 開發， 頁面為靜態而且枯燥乏味。 為了增加網站的多媒體表現形式以吸引使用者， 開發者可謂絞盡腦汁。 比如 Flash ActionScript 超級強大功能[2]， 可 以製作一款效果逼真的 Flash 時鐘用於模擬顯示時間並具有整點報時功能， 還可以定時提醒， 以免長時間使用電腦和網路對身體造成傷害。 下面就 Flash 時鐘的設計過程進行闡述， 以期能夠起到拋磚引玉的作用。

1、功能描述

Flash 時鐘既可以用數字方式準確地顯示當前 的年月日和具體時間， 也可以用指標動態地指示時間， 而且整點會自動報時。 此外， 還可以根據使用者的需要進行定時設定， 時間一到， Flash 時鐘立刻會發出提醒。

2、Flash 時鐘的設計和製作

設計環境為 Flash CS6， 主要是設計時鐘的樣式， 製作時鐘的錶盤、 指標和文字框。 利用 ActionScript 來呼叫系統時間並以數字方式顯示於動態文字框中， 最後可以通過輸入文字框來進行定時。

2.1、製作 Flash 時鐘

（1） 開啟 Flash CS6， 新建一個 fla 文件 （ActionScript2.0），設定畫面大小為 300*350， 背景顏色為預設。

（2） 打 開庫面板 ， 新建一個名為 “ 時鐘 ” 的影片剪輯 。選中圖層 1， 在舞臺上畫一個圓形錶盤， 再畫上時鐘的刻度（詳細過程略 ）。 在錶盤中心正中心新增兩個動態文字框 ， 在屬性面板中分別設定其變數名為 “timebox” 和” datebox”。 同樣， 在錶盤正下方寫上文字 “定時設定”、 “時” 和 “分”，在緊隨 “時” 和 “分” 後分別新增兩個輸入文字框， 其變數名分別為 “sethour” 和 “setminute”。

（3） 回到場景設計視窗 ， 修改當前時間上的圖 層名為“時鐘”， 將庫中的 “時鐘” 影片剪輯拖入舞臺建立一個例項 ，設定其狀態為水平和垂直居中對齊， 並在 “屬性” 面板中為其取例項名 “clock”。

（4） 回 到庫面板 ， 分別新建 3 個 “ 時 針 ” 、 “ 分針 ” 和“秒針” 的影片剪輯 （詳細過程略 ， 注意旋轉中心必須在 3 顆指標的末端）。 在場景視窗同樣新建 3 個對應的層並將它們拖入建立例項， 將 3 者的旋轉中心對齊時鐘的'中央。 在屬性面板中分別為 3 顆指標取例項名為 “hourpoint”、 “minutepoint”和 “secondpoint”。

2.2、匯入聲音素材

匯入兩個聲音檔案 3 和 3 到庫中。 特別注意， 只有位元率小於 128KB/s 的 MP3 檔案才能匯入。 分別右鍵單擊兩個聲音檔案， 開啟其屬性， 把 “ActionScript 連結” 選項下的識別符號分別取名為 “baoshi” 和 “dingshi” ,並且勾選 “為 ActionScript 匯出” 和 “在第一幀中匯出”， 以便後續程式呼叫。

2.3、ActionScript 設定

選中場景中的例項 “秒針”， 調出動作面板， 在寫入下面的 代 碼 ： onClipEvent (enterFrame) {secondangle = _nd * 6;setProperty ( " _ndpoint" , _rotation, secon-dangle) ;}。 說 明 ， 秒針轉動一圈跳動 60 次 ， 因此每跳動一下轉過的角度為 6。 設當前秒數為 second， 則角度 （Angle） 與second 的 關係為 ： secondangle =second*6。 “_root” 表 示主場景， 所有程式碼均為半形下的英文 （下同）。

選中場景中的例項 “分針”， 調出動作面板， 寫入下面的程 序 ： onClipEvent ( enterFrame) {minuteangle = _te*6;setProperty (" _tepoint" , _rotation, minutean-gle) ;}。 說 明 ， 分針轉動一圈也是跳動 60 次 ， 因 此每跳動一下轉過的角度為 6。 設當前分鐘數為 minute， 則角度 （Angle）與 minute 的關係為： minuteAngle=minute*6。

選中場景中的例項 “時針”， 調出動作面板， 編寫程式如下： onClipEvent (enterFrame) {hourangle = _ *30 + _te * 0.5;setProperty ( " _point" ,_rotation, hourangle) ;}。 說明， 時針轉動一圈有 12 大格， 因此整點位置的角度間隔為 30， 則角度 （Angle） 與 hour 的關係為： hourAngle=houre*30。 實際上， 時鐘的時針不僅是在整點時才會跳動， 而是隨著分針的變化也在慢慢走動， 因此， 還應將當前分鐘數對時針角度的影響加以考慮。 分析得知， 時針 角 度 與 當 前 時 間 的 函 數 關 系 為 ： hourAngle =hour*30 +minute*0.5。

選中場景中的例項 “clock”， 調出動作面板， 編寫程式如下： onClipEvent (load) {weekArray = new Array (' 週日 ', '週一 ', ' 週二 ', ' 週三 ', ' 周 ', ' 週五 ', ' 週六 ') ;monthArray =new Array ('1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12') ;timedate = new Date() ;}。 說 明 ， 定義了兩個陣列型變數 ，即 weekArray = new Array() 表示星期變數， monthArray= newArray() 表示月份變數 ， 設定了兩個陣列元素的初始值 。 time-date = new Date() 表示定義了一個日期型變數 ， 它 是一個結構型變數， 其中包含有系統當前的日期和時間等資訊， 通過對它的讀取， 可以獲得相應內容。 繼續新增以下程式碼：

onClipEvent (enterFrame) {weekday = ay ();week = weekArray [week]; year = ullYear ();monthnum = onth ();month = monthArray[monthnum];day = ate();hour = -ours(); minute = inutes();second = econds(); timebox = hour + ":" + minute + ":" + second;datebox = year + " 年" + month + " 月" + day + " 日" + " " +weekday;}。

測試動畫效果的時候， 發現可以顯示時間和日期， 但瑕疵在於無法動態和實時地顯示系統當前時間， 還有就是時分秒小於 10 的時候僅顯示一位數字， 不符合平時的顯示習慣。

需要對進行優化處理。 因此， 在程式的最後新增兩條程式碼 timedate 和 timedate = new Date() 即可。 前者用於刪除日期型變數 timedate， 後者用來重新定義日期型變數 timedate,這樣可以讓變數 timedate 自動更新， 實現了同步和動態地顯示系統當前日期和時間。 另外， 在 timebox = hour + " :" + minute+ " :" + second 後新增程式碼實現時分秒的兩位數顯示：

f (hour < 10){hour = "0" + hour;}，if (minute < 10){minute = "0" + minute;}，

if (second < 10){second= "0" + second;}

2.4、設定整點報時和定時鬧鐘

在 “onClipEvent (load) { }” 事件中新增 3 條賦值語句mysound = new Sound() ;baoshi = 0;dingshi = 0; 其 中 mysound =new Sound() 表示定義了一個聲音型變數， 藉助此變數可以實現對聲音檔案的呼叫和播放， baoshi 和 dingshi 是兩個 ActionScript呼叫的標誌變數。 在 “onClipEvent (enterFrame) { }” 事件中新增以下程式碼： if (minute == 0 && baoshi ==) {ch-Sound (" baoshi") ;t() ;baoshi = 1;}， else if (minute<> 0) {baoshi = 0;} 。 說明 ， chSound (" baoshi")表示在聲音物件上綁定了一個標識名為 “baoshi” 的聲音， 即3 文 件 。 t () 表示播放聲音對 象上繫結的聲音檔案。 上述程式實現了分針指向 12 點開始整點報時(下 同)。 繼續在上述程式碼後面新增程式 ： if (Number (hour) ==_our&&Number ( minute) == inute&& dingshi== 0) {chSound (" dingshi") ; t () ;dingshi= 1;} ， else if (Number (minute) <> _inute) {dingshi= 0;}。 說 明 ， 這段程式的意思是 ， 當主場景中的設定時間變數 sethour 與呼叫系統時間變數 hour 相等，且主場景中的設定時間變數 setminute 與呼叫系統時間變數minute 相 等 ， 且從未設定過定時 ， 則呼叫識別符號為 “dingshi”的聲音檔案並且開始播放。

3、結語

與簡單的 Flash 動畫模擬， 這樣設計和製作的 Flash 時鐘不僅具有實時和同步效果， 而且最重要的是基於 ActionScript的 Flash 時鐘還具有良好的人機互動性， 即可以動態顯示系統時間和整點報時， 而且使用者可以按需設定鬧鐘。

參考文獻

[1] 蔡 麗娟 ， 曲國先 . 關 於 Flash 動畫中互動性設計的 研究[J] . 藝術與設計 (理論)， 2007.

[2] 胡奇光 ， 吳蓉暉. 基於 Flash ActionScript 3.0 的動畫設計的研究 [J] . 計算機與數字工程， 2010.

[3] 王 珍珍 ， 楊雪 ， 傅健. 基 於 Flash Lite 的移動學習資源開發研究 [J] . 現代教育技術， 2009.