探析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、導入聲音素材

　　導入兩個聲音文件 sound1.mp3 和 sound2.mp3 到庫中。 特別注意， 只有比特率小于 128KB/s 的 MP3 文件才能導入。 分別右鍵單擊兩個聲音文件， 打開其屬性， 把 “ActionScript 鏈接” 選項下的標識符分別取名為 “baoshi” 和 “dingshi” ,并且勾選 “為 ActionScript 導出” 和 “在第一幀中導出”， 以便后續程序調用。

　　2.3、ActionScript 設置

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

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

　　選中場景中的實例 “時針”， 調出動作面板， 編寫程序如下： onClipEvent (enterFrame) {hourangle = _root.clock.hour *30 + _root.clock.minute * 0.5;setProperty ( " _root.hourpoint" ,_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 = timedate.getDay ();week = weekArray [week]; year = timedate.getFullYear ();monthnum = timedate.getMonth ();month = monthArray[monthnum];day = timedate.getDate();hour = timedate.getH-ours(); minute = timedate.getMinutes();second = timedate.getSeconds(); 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 ==) {mysound.attach-Sound (" baoshi") ;mysound.start() ;baoshi = 1;}， else if (minute<> 0) {baoshi = 0;} 。 說明 ， mysound.attachSound (" baoshi")表示在聲音對象上綁定了一個標識名為 “baoshi” 的聲音， 即sound1.mp3 文 件 。 mysound.start () 表示播放聲音對 象上綁定的聲音文件。 上述程序實現了分針指向 12 點開始整點報時(下 同)。 繼續在上述代碼后面添加程序 ： if (Number (hour) ==_root.clock.sethour&&Number ( minute) == root.clock.setminute&& dingshi== 0) {mysound.attachSound (" dingshi") ; mysound.start () ;dingshi= 1;} ， else if (Number (minute) <> _root.clock.setminute) {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.

【探析Flash時鐘的設計過程】相關文章：

《機械設計》課程教改實施過程探析論文07-03

[網頁設計]FLASH路上的快樂07-03

flash設計崗位職責11-18

flash動畫設計優點07-03

flash原畫設計師工資07-11

flash設計崗位職責6篇11-18

flash設計崗位職責(6篇)11-18

flash動畫設計中的色彩文化07-03

五種基本flash動畫設計類別07-03

機械加工過程中的機械振動的探析論文07-03