效果預覽圖：

圖0(播放效果請點擊這里)

相關下載：

　　源文件下載：點擊這里下載(103K, winzip壓縮文件)

　　效果預覽：點擊這里預覽

設計步驟：

一、 設計鐘盤

　　1．設計鐘面

　　1). 新建一個Flash文檔，單擊“屬性”面板中的“尺寸”按鈕，打開“文檔屬性”面板設置場景大小為400px*400px，背景為墨藍色（#00659C），幀頻為12fps。

　　2). 按快捷鍵Ctrl+F8打開“新建元件”面板，創建一個“鐘盤”圖形元件，如圖1所示。雙擊“鐘盤”元件中的“圖層1”三字，將其名改為“鐘盤”。這樣做方便對元件的管理和修改，提高工作效率。

圖01

　　3). 點選工具欄中的“橢圓工具”并去掉填充色，如圖2所示。按住Shift鍵和鼠標左鍵在“鐘盤”元件的場景中拉出一個空心圓來。用“箭頭工具”點選剛才繪制的空心圓后，如圖3所示設置其“屬性”面板。在點選空心圓后也可以按快捷鍵Ctrl+I打開“信息面板”進行設置。現在“信息面板”的用處就是設置元件的原點——以場景的左頂點為原點或以場景的中心點為原點。

圖02，圖03

　　4). 按快捷鍵Shift+F9打開“混色器”面板，在下拉菜單里選擇“放射”選項。如圖4所示設置，左面滑塊的顏色為#880000，右邊滑塊的顏色為#650101。

圖04

　　5). 點選“顏料桶工具”，在空心圓中心單擊一下鼠標左鍵著色。

　　6). 點選剛才繪制的空心圓，按快捷鍵Ctrl+C（復制），和快捷鍵Ctrl+V（粘貼）復制出一個空心圓。緊接著在“屬性面板”中將其大小設成280px*280px，X軸，Y軸的值設為-140px，線寬為2px。這樣使兩個空心圓的圓心重合。刪除圓最外的邊線。內圓線寬為2px可以顯示出鐘盤的層次感。

　　7). 按快捷鍵Ctrl+A全選場景中的元素，按快捷鍵Ctrl+G把它們組合。到這里，一個具有立體感的鐘盤就完成了。最終效果如圖5所示。

圖05

　　2．設計時鐘刻度

　　1). 點選“線條工具”拉出一條橫線（長于鐘面外圓的直徑），用“箭頭工具”點選它，按快捷鍵Ctrl+G組合它。在“屬性”面板里把該橫線的Y軸值設為0 px（穿過圓心）。同樣方法繪制一條穿過圓心的豎線，按快捷鍵Ctrl+G組合。

　　2). 點選橫線，按快捷鍵Ctrl+C復制，再按快捷鍵Ctrl+V粘貼出一條橫線。按快捷鍵Ctrl+T打開“變形”面板。在彈出的“變形”面板里，把“旋轉”選項里將線條的角度改為30o。然后敲擊Enter確定。再分別制作出角度為60o、120o、150o的三條斜線。最終設置如圖6所示。

圖06

　　3). 單擊“時間軸”面板里的“插入圖層”圖標新建一層，將層改名為“刻度”。

　　4). 點選“文本工具”，如圖7所示設置“屬性”面板，“文本填充色”為黑色。在“鐘盤”各刻度的位置寫下12個數字。點選“橢圓工具”，在鐘盤的中心繪制一個直徑為8px的盤心，最后刪除刻度線。在整個設計中，刻度線的作用是很重要的，有了刻度線，不但操作起來方便，標出的刻度也很精確。

圖07

　　5). 按快捷鍵Ctrl+A全選所有刻度，按快捷鍵Ctrl+G將它們組合。這樣，一個具有立體感的鐘盤就完成了。最終效果如圖8所示。

圖08

二、設計旋轉指針

　　1．設計指針

　　按快捷鍵Ctrl+F8打開“新建元件”面板，分別創建名為“時針”、“分針”、“秒針”的影片剪輯元件。指針的形狀大家隨便設計，美觀大方即可。不過，有個技術上的問題大家一定要注意：指針在由程序控制轉動后，是圍繞元件場景中心“╬”旋轉的。所以設計時，指針的尾部一定要“╬”上，如圖9所示。

圖09

　　2．旋轉指針

　　下面我們來設計一段控制指針旋轉的代碼。

　　1). 按快捷鍵Ctrl+E回到“場景1”，新建四個層，分別改名為“鐘盤”、“時針”、“分針”、“秒針”。

　　2). 按快捷鍵Ctrl+L打開“庫”面板，把庫中的“鐘盤”、“時針”、“分針”、“秒針”元件拖入相應的層。注意：每個元件的尾部“╬”都要附在鐘面的盤心上；層的順序不要顛倒；鎖定或隱藏設計好的層，以便設計其它層。如圖10所示。

圖10

　　3). 分別點選“時針”、“分針”、“秒針”三個影片元件，在“屬性”面板里分別設置其實例名為“時針”、“分針”、“秒針”。如圖11所示。

圖11

　　4). 新建一個“代碼”層，點選該層的第1幀，按快捷鍵F9彈出“動作”面板，輸入如下代碼。

function ClockFun() {
    // 聲明一個名為時間對象
    time = new Date();
    // 時針每小時旋轉30度
    hour = time.getHours()*30;
    // 分針，秒針每分鐘旋轉6度
    minute = time.getMinutes()*6;
    second = time.getSeconds()*6;
    // 每過10秒分針度數加1，增加真實性
    minute += time.getSeconds()/10;
    // 每過2分鐘,時針度數加1
    hour += time.getMinutes()/2;
    // _rotation是影片的角度屬性，用來控制影片實例旋轉
    秒針._rotation = second;
    分針._rotation = minute;
    時針._rotation = hour;
}
// 每隔1000毫秒執行一次ClockFun函數
setInterval(ClockFun,1000);

　　5). 注意：以下的代碼都書寫在代碼function ClockFun() 之間。

　　代碼設計好了，快按快捷鍵Ctrl+Enter測試一下吧。怎么樣，看到轉動的指針是不是很開心，很HA啊，是不是很想接著再往下做啊！那好吧，讓我們繼續動起來吧。

三、設計日期顯示

　　1). 鎖定其它層。單擊“插入圖層”圖標新建一層，改名為“日期”層。

　　2). 點選“文本工具”，“屬性”面板設置見圖12所示，“文本填充色”為黑色。

　　3). 按住鼠標左鍵在鐘盤6點的位置正上方拉出一個動態文本框。將該動態文本框命名為“日期”。最終設置如圖12所示。

圖12

　　4). 點選“代碼”層的第1幀，打開“動作”面板，再輸入如下代碼。

// 把系統當前月數值賦給變量months
months = time.getMonth();
// 如果月數值是個位數，在其前面顯示一個零
if (length(months) == 1) {
    months = "0"+months;
}
// 把系統當前日數值賦給變量dates
dates = time.getDate();
// 如果日數值是個位數，在其前面顯示一個零
if (length(dates) == 1) {
    dates = "0"+dates;
}
// 在“日期”文本框內顯示系統日期
日期 = time.getFullYear()+"."+months+"."+dates;

　　注意：因為日期對象的月份是從0開始編號的，所以要將其加1才能得到真實的月份值。按快捷鍵Ctrl+Enter測試一下，如果操作正確，應該可以看見日期顯示。

四、設計星期顯示

　　同日期顯示的設計方法。新建一個“星期”層。再建一個名為“星期”的動態文本框，字體為宋體，大小為12。將該文本框放在“日期”文本框的下方。點選“代碼”層的第1幀，打開“動作”面板后輸入如下代碼。

// 定義一個數組
days = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
// 把系統的星期值賦給變量day（如星期五時，day的值就是5）
day = time.getDay();
// 在“星期”文本框內顯示系統星期
星期 = days[day];

　　注意：getDay()方法傳回的星期值是從0開始的，為了便于理解，所以對應的元素為星期日。按快捷鍵Ctrl+Enter測試一下。

五、設計時間顯示

　　同以上步驟，新建一個“時間”層。再建一個名為“時間”的動態文本框。將該文本框放在鐘盤的上方。點選“代碼”層的第1幀，打開“動作”面板，再輸入如下代碼。

// 將系統當前小時的值賦給變量hours
hours = time.getHours();
minutes = time.getMinutes();
seconds = time.getSeconds();
// 到零點時，顯示兩個0
hours = (time.getHours()==0)?
"0"+hours:
time.getHours();
// 如果分鐘的值為個位數，就在前面多顯示一個零
minutes = (length(minutes) == 1)?
"0"+time.getMinutes():
time.getMinutes();
// 如果秒種值是一位數，就在前面多顯示一個零
seconds = (length(seconds) == 1)?
"0"+seconds:
time.getSeconds();
// 顯示時間
時間 = hours+":"+minutes+":"+seconds;

　　按快捷鍵Ctrl+Enter測試一下，如無法正常顯示系統時間，則檢查再試。

六、指針旋轉聲音

　　沒有聲音的實例總是讓人覺得有點沉悶，乏味。下面設計的一段程序，可以在時鐘走動時，發出滴答的聲音。這樣，效果就被延伸到聽覺范圍了。

　　1．單擊【窗口】菜單->【其他面板】->【公共庫】->“聲音”選項打開“聲音”庫。按快捷鍵Ctrl+L打開本例的“庫”面板。用鼠標左鍵按住“聲音”庫中的聲音文件Switch Toggle，將其拖入本例的庫中。

　　2．右鍵單擊“庫”面板中的聲音文件，在彈出的菜單中選擇“鏈接...”命令，打開“鏈接屬性”面板，如圖13進行設置。創建聲音標識符為“滴答聲”。