教你用Flash制作可以定時鬧鐘
我要評論這篇教程是教大家利用Flash制作可以定時的鬧鐘，在文中，讀者將學(xué)習(xí)到一些基本設(shè)計(jì)方法和時間對象的使用以及AS的一些基本語法。這個鬧鐘有顯示時間，日期，星期；整點(diǎn)報時；定時鬧鈴等功能。教程很實(shí)用，希望大家認(rèn)真學(xué)習(xí)
效果預(yù)覽圖：
設(shè)計(jì)步驟
一、 設(shè)計(jì)鐘盤
1．設(shè)計(jì)鐘面
1). 新建一個Flash文檔，單擊“屬性”面板中的“尺寸”按鈕，打開“文檔屬性”面板設(shè)置場景大小為400px*400px，背景為墨藍(lán)色（#00659C），幀頻為12fps。
2). 按快捷鍵Ctrl+F8打開“新建元件”面板，創(chuàng)建一個“鐘盤”圖形元件，如圖1所示。雙擊“鐘盤”元件中的“圖層1”三字，將其名改為“鐘盤”。這樣做方便對元件的管理和修改，提高工作效率。
圖01
3). 點(diǎn)選工具欄中的“橢圓工具”
并去掉填充色，如圖2所示。按住Shift鍵和鼠標(biāo)左鍵在“鐘盤”元件的場景中拉出一個空心圓來。用“箭頭工具”
點(diǎn)選剛才繪制的空心圓后，如圖3所示設(shè)置其“屬性”面板。在點(diǎn)選空心圓后也可以按快捷鍵Ctrl+I打開“信息面板”進(jìn)行設(shè)置?，F(xiàn)在“信息面板”的用處就是設(shè)置元件的原點(diǎn)——以場景的左頂點(diǎn)為原點(diǎn)或以場景的中心點(diǎn)為原點(diǎn)
。
圖02，圖03
4). 按快捷鍵Shift+F9打開“混色器”面板，在下拉菜單里選擇“放射”選項(xiàng)。如圖4所示設(shè)置，左面滑塊的顏色為#880000，右邊滑塊的顏色為#650101。
圖04
5). 點(diǎn)選“顏料桶工具”
，在空心圓中心單擊一下鼠標(biāo)左鍵著色。
6). 點(diǎn)選剛才繪制的空心圓，按快捷鍵Ctrl+C（復(fù)制），和快捷鍵Ctrl+V（粘貼）復(fù)制出一個空心圓。緊接著在“屬性面板”中將其大小設(shè)成280px*280px，X軸，Y軸的值設(shè)為-140px，線寬為2px。這樣使兩個空心圓的圓心重合。刪除圓最外的邊線。內(nèi)圓線寬為2px可以顯示出鐘盤的層次感。
7). 按快捷鍵Ctrl+A全選場景中的元素，按快捷鍵Ctrl+G把它們組合。到這里，一個具有立體感的鐘盤就完成了。最終效果如圖5所示。
圖05
2．設(shè)計(jì)時鐘刻度
1). 點(diǎn)選“線條工具”
拉出一條橫線（長于鐘面外圓的直徑），用“箭頭工具”點(diǎn)選它，按快捷鍵Ctrl+G組合它。在“屬性”面板里把該橫線的Y軸值設(shè)為0 px（穿過圓心）。同樣方法繪制一條穿過圓心的豎線，按快捷鍵Ctrl+G組合。
2). 點(diǎn)選橫線，按快捷鍵Ctrl+C復(fù)制，再按快捷鍵Ctrl+V粘貼出一條橫線。按快捷鍵Ctrl+T打開“變形”面板。在彈出的“變形”面板里，把“旋轉(zhuǎn)”選項(xiàng)里將線條的角度改為30o。然后敲擊Enter確定。再分別制作出角度為60o、120o、150o的三條斜線。最終設(shè)置如圖6所示。
圖06
3). 單擊“時間軸”面板里的“插入圖層”圖標(biāo)
新建一層，將層改名為“刻度”。
4). 點(diǎn)選“文本工具”
，如圖7所示設(shè)置“屬性”面板，“文本填充色”為黑色。在“鐘盤”各刻度的位置寫下12個數(shù)字。點(diǎn)選“橢圓工具”，在鐘盤的中心繪制一個直徑為8px的盤心，最后刪除刻度線。在整個設(shè)計(jì)中，刻度線的作用是很重要的，有了刻度線，不但操作起來方便，標(biāo)出的刻度也很精確。
圖07
5). 按快捷鍵Ctrl+A全選所有刻度，按快捷鍵Ctrl+G將它們組合。這樣，一個具有立體感的鐘盤就完成了。最終效果如圖8所示。
圖08
二、設(shè)計(jì)旋轉(zhuǎn)指針
1．設(shè)計(jì)指針
按快捷鍵Ctrl+F8打開“新建元件”面板，分別創(chuàng)建名為“時針”、“分針”、“秒針”的影片剪輯元件。指針的形狀大家隨便設(shè)計(jì)，美觀大方即可。不過，有個技術(shù)上的問題大家一定要注意：指針在由程序控制轉(zhuǎn)動后，是圍繞元件場景中心“╬”旋轉(zhuǎn)的。所以設(shè)計(jì)時，指針的尾部一定要“╬”上，如圖9所示。
圖09
2．旋轉(zhuǎn)指針
下面我們來設(shè)計(jì)一段控制指針旋轉(zhuǎn)的代碼。
1). 按快捷鍵Ctrl+E回到“場景1”，新建四個層，分別改名為“鐘盤”、“時針”、“分針”、“秒針”。
2). 按快捷鍵Ctrl+L打開“庫”面板，把庫中的“鐘盤”、“時針”、“分針”、“秒針”元件拖入相應(yīng)的層。注意：每個元件的尾部“╬”都要附在鐘面的盤心上；層的順序不要顛倒；鎖定或隱藏設(shè)計(jì)好的層，以便設(shè)計(jì)其它層。如圖10所示。
圖10
3). 分別點(diǎn)選“時針”、“分針”、“秒針”三個影片元件，在“屬性”面板里分別設(shè)置其實(shí)例名為“時針”、“分針”、“秒針”。如圖11所示。
圖11
4). 新建一個“代碼”層，點(diǎn)選該層的第1幀，按快捷鍵F9彈出“動作”面板，輸入如下代碼。// 聲明一個名為時間對象
time = new Date();
// 時針每小時旋轉(zhuǎn)30度
hour = time.getHours()*30;
// 分針，秒針每分鐘旋轉(zhuǎn)6度
minute = time.getMinutes()*6;
second = time.getSeconds()*6;
// 每過10秒分針度數(shù)加1，增加真實(shí)性
minute += time.getSeconds()/10;
// 每過2分鐘,時針度數(shù)加1
hour += time.getMinutes()/2;
// _rotation是影片的角度屬性，用來控制影片實(shí)例旋轉(zhuǎn)
秒針._rotation = second;
分針._rotation = minute;
時針._rotation = hour;
}
// 每隔1000毫秒執(zhí)行一次ClockFun函數(shù)
setInterval(ClockFun,1000);
5). 注意：以下的代碼都書寫在代碼function ClockFun() 之間。
代碼設(shè)計(jì)好了，快按快捷鍵Ctrl+Enter測試一下吧。怎么樣，看到轉(zhuǎn)動的指針是不是很開心，很HA啊，是不是很想接著再往下做??！那好吧，讓我們繼續(xù)動起來吧。
三、設(shè)計(jì)日期顯示
1). 鎖定其它層。單擊“插入圖層”圖標(biāo)
新建一層，改名為“日期”層。
2). 點(diǎn)選“文本工具”，“屬性”面板設(shè)置見圖12所示，“文本填充色”為黑色。
3). 按住鼠標(biāo)左鍵在鐘盤6點(diǎn)的位置正上方拉出一個動態(tài)文本框。將該動態(tài)文本框命名為“日期”。最終設(shè)置如圖12所示。
圖12
4). 點(diǎn)選“代碼”層的第1幀，打開“動作”面板，再輸入如下代碼。
months = time.getMonth();
// 如果月數(shù)值是個位數(shù)，在其前面顯示一個零
if (length(months) == 1) {
months = "0"+months;
}
// 把系統(tǒng)當(dāng)前日數(shù)值賦給變量dates
dates = time.getDate();
// 如果日數(shù)值是個位數(shù)，在其前面顯示一個零
if (length(dates) == 1) {
dates = "0"+dates;
}
// 在“日期”文本框內(nèi)顯示系統(tǒng)日期
日期 = time.getFullYear()+"."+months+"."+dates;
注意：因?yàn)槿掌趯ο蟮脑路菔菑?開始編號的，所以要將其加1才能得到真實(shí)的月份值。按快捷鍵Ctrl+Enter測試一下，如果操作正確，應(yīng)該可以看見日期顯示。
四、設(shè)計(jì)星期顯示
同日期顯示的設(shè)計(jì)方法。新建一個“星期”層。再建一個名為“星期”的動態(tài)文本框，字體為宋體，大小為12。將該文本框放在“日期”文本框的下方。點(diǎn)選“代碼”層的第1幀，打開“動作”面板后輸入如下代碼。
// 定義一個數(shù)組
days = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
// 把系統(tǒng)的星期值賦給變量day（如星期五時，day的值就是5）
day = time.getDay();
// 在“星期”文本框內(nèi)顯示系統(tǒng)星期
星期 = days[day];
注意：getDay()方法傳回的星期值是從0開始的，為了便于理解，所以對應(yīng)的元素為星期日。按快捷鍵Ctrl+Enter測試一下。
五、設(shè)計(jì)時間顯示
同以上步驟，新建一個“時間”層。再建一個名為“時間”的動態(tài)文本框。將該文本框放在鐘盤的上方。點(diǎn)選“代碼”層的第1幀，打開“動作”面板，再輸入如下代碼。
hours = time.getHours();
minutes = time.getMinutes();
seconds = time.getSeconds();
// 到零點(diǎn)時，顯示兩個0
hours = (time.getHours()==0)?
"0"+hours:
time.getHours();
// 如果分鐘的值為個位數(shù)，就在前面多顯示一個零
minutes = (length(minutes) == 1)?
"0"+time.getMinutes():
time.getMinutes();
// 如果秒種值是一位數(shù)，就在前面多顯示一個零
seconds = (length(seconds) == 1)?
"0"+seconds:
time.getSeconds();
// 顯示時間
時間 = hours+":"+minutes+":"+seconds;
按快捷鍵Ctrl+Enter測試一下，如無法正常顯示系統(tǒng)時間，則檢查再試。
六、指針旋轉(zhuǎn)聲音
沒有聲音的實(shí)例總是讓人覺得有點(diǎn)沉悶，乏味。下面設(shè)計(jì)的一段程序，可以在時鐘走動時，發(fā)出滴答的聲音。這樣，效果就被延伸到聽覺范圍了。
1．單擊【窗口】菜單->【其他面板】->【公共庫】->“聲音”選項(xiàng)打開“聲音”庫。按快捷鍵Ctrl+L打開本例的“庫”面板。用鼠標(biāo)左鍵按住“聲音”庫中的聲音文件Switch Toggle，將其拖入本例的庫中。
2．右鍵單擊“庫”面板中的聲音文件，在彈出的菜單中選擇“鏈接...”命令，打開“鏈接屬性”面板，如圖13進(jìn)行設(shè)置。創(chuàng)建聲音標(biāo)識符為“滴答聲”。
圖13
3．點(diǎn)選“代碼”層的第1幀，打開“動作”面板，再輸入如下代碼。
dida = new Sound();
// 把滴答聲附加到新對象中
dida.attachSound("滴答聲");
// 播放聲音
dida.start();
七、整點(diǎn)報時功能
1．單擊【文件】菜單->【導(dǎo)入】->“導(dǎo)入到庫”選項(xiàng)。在彈出的“導(dǎo)入到庫”面板中選擇一個報時的音樂導(dǎo)入（建議導(dǎo)入.mp3格式的音樂）。
2．打開“庫”面板，右鍵單擊面板中報時聲音文件，在彈出的菜單中選擇“鏈接...”命令，打開“鏈接屬性”面板，創(chuàng)建聲音標(biāo)識符為“報時聲”。
3．點(diǎn)選“代碼”層的第1幀，打開“動作”面板，再輸入如下代碼。
gugu = new Sound();
// 把報時聲附加到新對象中
gugu.attachSound("報時聲");
if (seconds == 0 && minutes == 0)
有了以上這段代碼，當(dāng)整點(diǎn)的時候，整點(diǎn)報時的聲音就會響起來了。
八、定時鬧鈴功能
1．在“場景1”中新建一層，命名為“鬧鈴”。
2．在鐘盤的右側(cè)放置兩個“輸入”文本框，分別設(shè)置其變量名為“時鐘”和“分鐘”。“屬性” 面板的設(shè)置隨意，文本框的位置參見最終效果圖。在兩個“輸入”文本框中放置一個“靜態(tài)”文本框，輸入冒號。
注意：確定“屬性”面板中的“文本”范圍圖標(biāo)
要被選中。設(shè)置允許最大輸入字符數(shù)為2（圖14）。單擊“字符按鈕”
，如圖15所示進(jìn)行設(shè)置。這樣，設(shè)置好的“動態(tài)文本”框里只允許輸入2個數(shù)字。
圖14
圖15
3．單擊【文件】菜單->【導(dǎo)入】->“導(dǎo)入到庫”選項(xiàng)。在彈出的“導(dǎo)入到庫”面板中選擇一個鬧鈴聲導(dǎo)入（建議導(dǎo)入.mp3格式的音樂）。
4．打開“庫”面板，右鍵單擊剛才導(dǎo)入的聲音文件，同上步驟，在彈出的菜單中選擇“鏈接...”命令，打開“鏈接屬性”面板。為了簡化文章，筆者在這里還使用“報時聲”。
5．點(diǎn)選“代碼”層的第1幀，打開“動作”面板，再輸入如下代碼。
if((時鐘 == time.getHours()) && (分鐘 == time.getMinutes()) && (time.getSeconds()%10 == 0)) {
gugu.start();
}
相關(guān)文章
flash cs6鼠標(biāo)跟隨效果實(shí)現(xiàn)代碼分享
flash cs6想要實(shí)現(xiàn)鼠標(biāo)跟隨效果？該怎么制作呢？今天我們就來看看使用as2.0實(shí)現(xiàn)鼠標(biāo)跟隨效果的教程，需要的朋友可以參考下2019-05-19
Flash cs6怎么使用代碼輸入中英文文本？Flash cs6中可以使用文字工具直接輸入文本，也可以使用代碼來輸入文本，該怎么使用代碼輸入文本呢？請看下文詳細(xì)的教程，需要的朋友2018-03-11
flash as3.0抽象類怎么定義？ as3.0中有很多抽象類，該怎么定義抽象類和抽象方法呢？下面我們就來看看簡單的例子，需要的朋友可以參考下http://www.fzitv.net/softs/408402.2018-02-28
flash cs6中怎么使用ActionScript3.0?
flash cs6中怎么使用ActionScript3.0？flash cs6中想要使用ActionScript3.0功能，該怎么使用呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-25
Flash中怎么實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊決定圖像位置？
本教程給大家分享一個Flash小教程，教大家在Flash CS6中怎么實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊決定圖像位置？方法很簡單，感興趣的朋友歡迎前來一起分享學(xué)習(xí)2018-01-12
本教程教腳本之家的ActionScript教程學(xué)習(xí)者在Flash中如何用代碼將圖片放在自己想要的舞臺位置，教程講解的詳細(xì)，感興趣的朋友歡迎前來分享學(xué)習(xí)2017-11-20
在Flash CS6中使用with函數(shù)繪制背景圖教程
本教程教腳本之家的ActionScript教程學(xué)習(xí)者如何在Flash CS6中使用with函數(shù)繪制背景圖？教程一步步講解的挺詳細(xì)，方法也不難，非常適合Flash新手入門學(xué)習(xí)2017-11-18
Flash怎么設(shè)置元件坐標(biāo)?flash使用代碼設(shè)置元件的坐標(biāo)的教程
Flash怎么設(shè)置元件坐標(biāo)？flash中導(dǎo)如的元件需要添加坐標(biāo)，該怎么定位元件坐標(biāo)呢？下面我們就來看看flash使用代碼設(shè)置元件的坐標(biāo)的教程，需要的朋友可以參考下2017-10-11
Flash怎么制作來回?fù)u擺的花朵的動畫？Flash中想要給花朵制作一段搖擺的動畫效果，該怎么制作呢？下面我們就來看看詳細(xì)的教程，很簡單，需要的朋友可以參考下2017-05-23
Flash怎么制作流動七彩色的文字？想要讓文字動起來，該怎么使用flash給文字制作一個流動七彩色的動畫呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2017-04-23
