Flash AS 實例進階制作時鐘實現代碼

2020-07-17 13:14:03

字體：大中小

來源：轉載

供稿：網友

　　源文件下載

　　>點擊查看動畫效果<實例2-6時鐘

　　基本思路

　　① 作 3 個指針 MC ，分別按不同的速度旋轉，實現時鐘效果。

　?、谌?要拖拽效果，則要把 12 個數字分別作成 MC 。然后作鼠標跟隨。

新知識點

　?、?Date 類的方法的應用：

復制代碼

代碼如下:

MY Date= new Date()// 構造一個新的 Date 對象
Date.getHours()// 按照本地時間返回小時值。
Date.getMinutes()// 按照本地時間返回分鐘值。
Date.getSeconds()// 按照本地時間返回秒數。
Date.getMilliseconds()// 按照本地時間返回毫秒值。

②一種緩沖公式應用

　　實例說明

　?、俅藭r鐘實例是由數字和指針共 15 個 MC 組成，并又是嵌套在 MC “ biao” 中，各 MC 的注冊點一定要確定準確，

　　② 分別將 MC “ biao” 放在主時間軸的 3 個幀上，為各幀上的 MC 編寫不同的腳本。

　?、?設一按鈕用于各幀之間的跳轉

編寫動作腳本

　?、?在第 1 幀到第 2 幀的 MC 上輸入：

復制代碼

代碼如下:

onClipEvent (enterFrame) {// 以影片剪輯幀頻不斷觸發的動作
　　 s = new Date();// 創健日期對象
　　 Hours = s.getHours();// 讀取系統時間 - 時
　　 if (12<Hours) {
　　　　 Hours = Hours-12;
　　 }// 把 24 小時制轉換為 12 小時制
　　 this.b13._rotation = ((Hours*30)+(s.getMinutes()/2)); // 把時和分轉換為旋轉角度
　　 this.b14._rotation = (6*s.getMinutes()); // 把獲取的系統時間分轉換為旋轉角度
　　 this.b15._rotation = (6*s.getSeconds()); // 把獲取的系統時間秒轉換為旋轉角度
　　 }

　　② 在第 3 幀的 MC 上輸入：

復制代碼

代碼如下:

onClipEvent (load) {變量初始化
for (i=1; i<16; i++) {
this["b"+i].xl = 0;
this["b"+i].yl = 0;
}
}
onClipEvent (enterFrame) {
　　 s = new Date();
　　 Hours = s.getHours();
　　 if (12<Hours) {
　　　　 Hours = Hours-12;
　　 }
　　 this.b13._rotation = ((Hours*30)+(s.getMinutes()/2));
　　 this.b14._rotation = (6*s.getMinutes());
　　 this.b15._rotation = (6*s.getSeconds());
　　 this.b1._x = _xmouse;
　　 this.b1._y = _ymouse+120; // 讓第一個 MC 跟隨鼠標移動 ,并要MC低于鼠標120個像素。
　　 for (i=2; i<=15; i++) {
　　　　　 this["b"+i].xl = (this["b"+(i-1)]._x-this["b"+i]._x)/2+this["b"+i].xl*0.3;// 變量 bi.xl 在趨于 0 的過程中不斷被賦新值
　　　　　 this["b"+i].yl = (this["b"+(i-1)]._y-this["b"+i]._y)/2+this["b"+i].yl*0.3;// 變量 bi.yl 在趨于 0 的過程中不斷被賦新值
　　　　 this["b"+i]._x += this["b"+i].xl;//MC “ bi ”的坐標 x 值
　　　　 this["b"+i]._y += this["b"+i].yl;//MC “ bi ”的坐標 y 值
　　　 }
　　 }

③ 在第 1 幀上輸入：

stop();

　　 ④ 在第 2 幀上輸入：
biao.startDrag(true);

　　 ⑤在第 1 幀到第 2 幀的按鈕上輸入：
on (release) {　　 nextFrame();}

　?、菰诘?3 幀的按鈕上輸入：

on (release) {　　 gotoAndStop(1);}

要點分析

　?、?時針： this.b13._rotation = ((Hours*30)+(s.getMinutes()/2))

　　首先看 ((Hours*30) ，因為走一周 12 小時是 360 度，那每小時就是走 30 度，用本地時間的小時數乘于 30 就是指針指向的度數。，如 3 點就是 3*30 ，指針在 90 度位置，但這樣只能是按小時發生動作，要顯示中間的指針變化還需加上 (s.getMinutes()/2) ，這個表達式是計算的當前分鐘乘于每分鐘在一個小時刻度內走的度數（ 0.5 度），這兩個表達式相加就是以小時和分鐘計算出的時針旋轉度數。

　?、?緩沖公式： this["b"+i].xl = (this["b"+(i-1)]._x-this["b"+i]._x)/2+this["b"+i].xl*0.3;

　　為便于觀看首先把數值具體化： b2.xl=( b1._x-b2._x)/2+b2.xl*0.3; 其中的 ( b1._x-b2._x)/2 ，我們在導航條那課已經用過類似的方法，這里是取兩個 MC 坐標值的差的二分之一，這個表達式的結果在不斷的由大到小直至為 0 ，其中的 b2.xl*0.3 ，是有意增加的偏差值，有叫抖動率的，也是由大到小變化最后到 0 ，這兩個表達式計算的結果賦給變量 b2.xl ，有了這樣的公式，鼠標跟隨就會有延時和抖動效果。

小結

　　本講學習的目的是掌握時鐘的運動原理，此外還學習一種緩沖公式的運用，也是很有實用價值的內容，希望課下能用數字代入加深理解。

課后練習

　　不要秒針跳躍式旋轉，而要平緩連貫地旋轉，范例效果：

　　>點擊查看動畫效果<練習2-６　　　

　　>點擊查看動畫效果<練習2-６-2

　　查看全套"Flash AS 實例進階教程"