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