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