時(shí)鐘是日常生活中必備的物品,有了它我們才可以有計(jì)劃的進(jìn)行學(xué)習(xí)和工作.這次我們用Flash來(lái)制作一個(gè)精美的小時(shí)鐘,你可以把它拖到電腦屏幕的一角,使工作中的你可以方便的查看當(dāng)前時(shí)間和日期.

　　本實(shí)例最終效果如圖1所示;


圖1 時(shí)鐘的最終效果

　　1.首先啟動(dòng)Flash,新建一個(gè)影片,設(shè)置影片舞臺(tái)大小為270px*320px(單位為象素),背景顏色為灰色,顏色代碼為#CCCCCC.

　　2.首先制作時(shí)鐘里的時(shí)針.新建一個(gè)影片剪輯元件,命名為hours,進(jìn)入元件的編輯區(qū)后,使用矩形工具繪制一個(gè)細(xì)長(zhǎng)的無(wú)邊框的矩形,填充色為灰色,顏色代碼為#999999,如圖2所示;


圖2 制作時(shí)針

　　3.然后制作時(shí)鐘里的分針.新建一個(gè)影片剪輯元件,命名為minutes,進(jìn)入元件的編輯區(qū)后,使用矩形工具繪制一個(gè)細(xì)長(zhǎng)的無(wú)邊框的矩形,填充色為深灰色,顏色代碼為#666666,如圖3所示;


圖3 制作分針

　　4.最后制作時(shí)鐘里的秒針.新建一個(gè)影片剪輯元件,命名為seconds,進(jìn)入元件的編輯區(qū)后,使用矩形工具繪制一個(gè)細(xì)長(zhǎng)的無(wú)邊框的矩形,填充色為紅色,顏色代碼為#FF0000,如圖4所示;


圖4 制作秒針

　　5.新建一個(gè)圖形元件,命名為outeregde,進(jìn)入元件的編輯區(qū)后,使用前面實(shí)例中介紹的方法制作一個(gè)圓環(huán),填充色為灰色,顏色代碼為#999999,用作時(shí)鐘的邊框,如圖5所示;


圖5 制作時(shí)鐘的邊框

　　6.回到主場(chǎng)景中,將影片默認(rèn)的圖層Layer1重命名為outeredge,然后將元件outeregde拖到舞臺(tái)上,調(diào)整其位置到舞臺(tái)的中央.

　　7.新建一個(gè)圖層numbers,使用文本工具分別輸入從1到12這12個(gè)數(shù)字,并繞著時(shí)鐘邊框排列其位置,如圖6所示;


圖6 添加時(shí)間數(shù)字

　　8.新建一個(gè)圖層clockhands,分別將元件Hours, minutes和Seconds拖到場(chǎng)景中,然后使用橢圓工具繪制一個(gè)黑色無(wú)邊框的正圓,將其放置在表盤(pán)的中心,然后分別將時(shí)針,分針和秒針?lè)诺奖肀P(pán)的中心,使三個(gè)表針的下部和中心位置對(duì)齊,如圖7所示;


圖7 在表盤(pán)中添加表針

　　9.添加圖層pagetitle,使用工具分別繪制一個(gè)靜態(tài)文本框和一個(gè)動(dòng)態(tài)文本框,在靜態(tài)文本框中輸入時(shí)鐘的標(biāo)簽:flash時(shí)鐘,設(shè)置動(dòng)態(tài)文本框的文本變量名為time,用來(lái)動(dòng)態(tài)顯示年,月,日和星期.

　　10.最后添加一個(gè)圖層命名為Action,設(shè)置控制時(shí)鐘運(yùn)行的Action腳本.

　　在第1幀添加如下Action:

time = new Date();//定義time為Date日期對(duì)象

hours = time.getHours();//取得當(dāng)前系統(tǒng)的小時(shí),并賦給變量hours

minutes = time.getMinutes();//取得當(dāng)前系統(tǒng)的分鐘,并賦給變量minutes

seconds = time.getSeconds();//取得當(dāng)前系統(tǒng)的秒鐘,并賦給變量seconds

if (hours>12) {

hours = hours-12;

}

if (hours<1) {

hours = 12;

}

hours = hours*30+int(minutes/2);

minutes = minutes*6+int(seconds/10);

seconds = seconds*6;

　　在第2幀添加如下Action:

gotoAndPlay(1);

　　11.最后一步是給三個(gè)表針添加各自的Action,使其可以按照自己的規(guī)律進(jìn)行旋轉(zhuǎn)

給時(shí)針添加如下Action:

onClipEvent (enterFrame) {

setProperty(this, _rotation, _root.hours);

}

　　給分針添加如下Action;

onClipEvent (enterFrame) {

setProperty(this, _rotation, _root.minutes);

}

　　給秒針添加如下Action:

onClipEvent (enterFrame) {

setProperty(this, _rotation, _root.seconds);

}