- 相關(guān)推薦
探析Flash時鐘的設(shè)計過程
Flash 是由 Adobe 公司推出的交互式矢量圖和 Web 動畫的標(biāo)準(zhǔn)， 以其優(yōu)秀的動態(tài)性和矢量性而深受全世界閃客的喜愛[1]。
在此之前， 網(wǎng)頁是基于 Web1.0 開發(fā)， 頁面為靜態(tài)而且枯燥乏味。 為了增加網(wǎng)站的多媒體表現(xiàn)形式以吸引用戶， 開發(fā)者可謂絞盡腦汁。 比如 Flash ActionScript 超級強大功能[2]， 可 以制作一款效果逼真的 Flash 時鐘用于模擬顯示時間并具有整點報時功能， 還可以定時提醒， 以免長時間使用電腦和網(wǎng)絡(luò)對身體造成傷害。 下面就 Flash 時鐘的設(shè)計過程進行闡述， 以期能夠起到拋磚引玉的作用。
1、功能描述
Flash 時鐘既可以用數(shù)字方式準(zhǔn)確地顯示當(dāng)前 的年月日和具體時間， 也可以用指針動態(tài)地指示時間， 而且整點會自動報時。 此外， 還可以根據(jù)用戶的需要進行定時設(shè)置， 時間一到， Flash 時鐘立刻會發(fā)出提醒。
2、Flash 時鐘的設(shè)計和制作
設(shè)計環(huán)境為 Flash CS6， 主要是設(shè)計時鐘的樣式， 制作時鐘的表盤、 指針和文本框。 利用 ActionScript 來調(diào)用系統(tǒng)時間并以數(shù)字方式顯示于動態(tài)文本框中， 最后可以通過輸入文本框來進行定時。
2.1、制作 Flash 時鐘
�。�1） 打開 Flash CS6， 新建一個 fla 文檔 （ActionScript2.0），設(shè)置畫面大小為 300*350， 背景顏色為默認(rèn)。
�。�2） 打 開庫面板 ， 新建一個名為 “ 時鐘 ” 的影片剪輯 。選中圖層 1， 在舞臺上畫一個圓形表盤， 再畫上時鐘的刻度（詳細過程略 ）。 在表盤中心正中心添加兩個動態(tài)文本框 ， 在屬性面板中分別設(shè)置其變量名為 “timebox” 和” datebox”。 同樣， 在表盤正下方寫上文字 “定時設(shè)置”、 “時” 和 “分”，在緊隨 “時” 和 “分” 后分別添加兩個輸入文本框， 其變量名分別為 “sethour” 和 “setminute”。
�。�3） 回到場景設(shè)計窗口 ， 修改當(dāng)前時間上的圖 層名為“時鐘”， 將庫中的 “時鐘” 影片剪輯拖入舞臺創(chuàng)建一個實例 ，設(shè)置其狀態(tài)為水平和垂直居中對齊， 并在 “屬性” 面板中為其取實例名 “clock”。
�。�4） 回 到庫面板 ， 分別新建 3 個 “ 時 針 ” 、 “ 分針 ” 和“秒針” 的影片剪輯 （詳細過程略 ， 注意旋轉(zhuǎn)中心必須在 3 顆指針的末端）。 在場景窗口同樣新建 3 個對應(yīng)的層并將它們拖入創(chuàng)建實例， 將 3 者的旋轉(zhuǎn)中心對齊時鐘的中央。 在屬性面板中分別為 3 顆指針取實例名為 “hourpoint”、 “minutepoint”和 “secondpoint”。
2.2、導(dǎo)入聲音素材
導(dǎo)入兩個聲音文件 sound1.mp3 和 sound2.mp3 到庫中。 特別注意， 只有比特率小于 128KB/s 的 MP3 文件才能導(dǎo)入。 分別右鍵單擊兩個聲音文件， 打開其屬性， 把 “ActionScript 鏈接” 選項下的標(biāo)識符分別取名為 “baoshi” 和 “dingshi” ,并且勾選 “為 ActionScript 導(dǎo)出” 和 “在第一幀中導(dǎo)出”， 以便后續(xù)程序調(diào)用。
2.3、ActionScript 設(shè)置
選中場景中的實例 “秒針”， 調(diào)出動作面板， 在寫入下面的 代 碼 ： onClipEvent (enterFrame) {secondangle = _root.clock.second * 6;setProperty ( " _root.secondpoint" , _rotation, secon-dangle) ;}。 說 明 ， 秒針轉(zhuǎn)動一圈跳動 60 次 ， 因此每跳動一下轉(zhuǎn)過的角度為 6。 設(shè)當(dāng)前秒數(shù)為 second， 則角度 （Angle） 與second 的 關(guān)系為 ： secondangle =second*6。 “_root” 表 示主場景， 所有代碼均為半角下的英文 （下同）。
選中場景中的實例 “分針”， 調(diào)出動作面板， 寫入下面的程 序 ： onClipEvent ( enterFrame) {minuteangle = _root.clock.minute*6;setProperty (" _root.minutepoint" , _rotation, minutean-gle) ;}。 說 明 ， 分針轉(zhuǎn)動一圈也是跳動 60 次 ， 因 此每跳動一下轉(zhuǎn)過的角度為 6。 設(shè)當(dāng)前分鐘數(shù)為 minute， 則角度 （Angle）與 minute 的關(guān)系為： minuteAngle=minute*6。
選中場景中的實例 “時針”， 調(diào)出動作面板， 編寫程序如下： onClipEvent (enterFrame) {hourangle = _root.clock.hour *30 + _root.clock.minute * 0.5;setProperty ( " _root.hourpoint" ,_rotation, hourangle) ;}。 說明， 時針轉(zhuǎn)動一圈有 12 大格， 因此整點位置的角度間隔為 30， 則角度 （Angle） 與 hour 的關(guān)系為： hourAngle=houre*30。 實際上， 時鐘的時針不僅是在整點時才會跳動， 而是隨著分針的變化也在慢慢走動， 因此， 還應(yīng)將當(dāng)前分鐘數(shù)對時針角度的影響加以考慮。 分析得知， 時針 角 度 與 當(dāng) 前 時 間 的 函 數(shù) 關(guān) 系 為 ： hourAngle =hour*30 +minute*0.5。
選中場景中的實例 “clock”， 調(diào)出動作面板， 編寫程序如下： onClipEvent (load) {weekArray = new Array (' 周日 ', '周一 ', ' 周二 ', ' 周三 ', ' 周 ', ' 周五 ', ' 周六 ') ;monthArray =new Array ('1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12') ;timedate = new Date() ;}。 說 明 ， 定義了兩個數(shù)組型變量 ，即 weekArray = new Array() 表示星期變量， monthArray= newArray() 表示月份變量 ， 設(shè)定了兩個數(shù)組元素的初始值 。 time-date = new Date() 表示定義了一個日期型變量 ， 它 是一個結(jié)構(gòu)型變量， 其中包含有系統(tǒng)當(dāng)前的日期和時間等信息， 通過對它的讀取， 可以獲得相應(yīng)內(nèi)容。 繼續(xù)添加以下代碼：
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;}。
測試動畫效果的時候， 發(fā)現(xiàn)可以顯示時間和日期， 但瑕疵在于無法動態(tài)和實時地顯示系統(tǒng)當(dāng)前時間， 還有就是時分秒小于 10 的時候僅顯示一位數(shù)字， 不符合平時的顯示習(xí)慣。
需要對進行優(yōu)化處理。 因此， 在程序的最后添加兩條代碼 timedate 和 timedate = new Date() 即可。 前者用于刪除日期型變量 timedate， 后者用來重新定義日期型變量 timedate,這樣可以讓變量 timedate 自動更新， 實現(xiàn)了同步和動態(tài)地顯示系統(tǒng)當(dāng)前日期和時間。 另外， 在 timebox = hour + " :" + minute+ " :" + second 后添加代碼實現(xiàn)時分秒的兩位數(shù)顯示：
f (hour < 10){hour = "0" + hour;}，if (minute < 10){minute = "0" + minute;}，
if (second < 10){second= "0" + second;}
2.4、設(shè)置整點報時和定時鬧鐘
在 “onClipEvent (load) { }” 事件中添加 3 條賦值語句mysound = new Sound() ;baoshi = 0;dingshi = 0; 其 中 mysound =new Sound() 表示定義了一個聲音型變量， 借助此變量可以實現(xiàn)對聲音文件的調(diào)用和播放， baoshi 和 dingshi 是兩個 ActionScript調(diào)用的標(biāo)志變量。 在 “onClipEvent (enterFrame) { }” 事件中添加以下代碼： if (minute == 0 && baoshi ==) {mysound.attach-Sound (" baoshi") ;mysound.start() ;baoshi = 1;}， else if (minute<> 0) {baoshi = 0;} 。 說明 ， mysound.attachSound (" baoshi")表示在聲音對象上綁定了一個標(biāo)識名為 “baoshi” 的聲音， 即sound1.mp3 文 件 。 mysound.start () 表示播放聲音對 象上綁定的聲音文件。 上述程序?qū)崿F(xiàn)了分針指向 12 點開始整點報時(下 同)。 繼續(xù)在上述代碼后面添加程序 ： 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;}。 說 明 ， 這段程序的意思是 ， 當(dāng)主場景中的設(shè)置時間變量 sethour 與調(diào)用系統(tǒng)時間變量 hour 相等，且主場景中的設(shè)置時間變量 setminute 與調(diào)用系統(tǒng)時間變量minute 相 等 ， 且從未設(shè)置過定時 ， 則調(diào)用標(biāo)識符為 “dingshi”的聲音文件并且開始播放。
3、結(jié)語
與簡單的 Flash 動畫模擬， 這樣設(shè)計和制作的 Flash 時鐘不僅具有實時和同步效果， 而且最重要的是基于 ActionScript的 Flash 時鐘還具有良好的人機交互性， 即可以動態(tài)顯示系統(tǒng)時間和整點報時， 而且用戶可以按需設(shè)置鬧鐘。
參考文獻
[1] 蔡 麗娟 ， 曲國先 . 關(guān) 于 Flash 動畫中交互性設(shè)計的 研究[J] . 藝術(shù)與設(shè)計 (理論)， 2007.
[2] 胡奇光 ， 吳蓉暉. 基于 Flash ActionScript 3.0 的動畫設(shè)計的研究 [J] . 計算機與數(shù)字工程， 2010.
[3] 王 珍珍 ， 楊雪 ， 傅健. 基 于 Flash Lite 的移動學(xué)習(xí)資源開發(fā)研究 [J] . 現(xiàn)代教育技術(shù)， 2009.
【探析Flash時鐘的設(shè)計過程】相關(guān)文章：
[網(wǎng)頁設(shè)計]FLASH路上的快樂07-03
flash設(shè)計崗位職責(zé)11-18
flash原畫設(shè)計師工資07-11
flash動畫設(shè)計中的色彩文化07-03
五種基本flash動畫設(shè)計類別07-03
機械加工過程中的機械振動的探析論文07-03