源文件下載
>點擊查看動畫效果<實例2-6時鐘
基本思路
?、?作 3 個指針 MC ,分別按不同的速度旋轉(zhuǎn),實現(xiàn)時鐘效果。
②若 要拖拽效果,則要把 12 個數(shù)字分別作成 MC 。然后作鼠標跟隨。
新知識點 ① Date 類的方法的應(yīng)用:
MY Date= new Date()// 構(gòu)造一個新的 Date 對象
Date.getHours()// 按照本地時間返回小時值。
Date.getMinutes()// 按照本地時間返回分鐘值。
Date.getSeconds()// 按照本地時間返回秒數(shù)。
Date.getMilliseconds()// 按照本地時間返回毫秒值。
②一種緩沖公式應(yīng)用
實例說明
?、俅藭r鐘實例是由數(shù)字和指針共 15 個 MC 組成,并又是嵌套在 MC “ biao” 中,各 MC 的注冊點一定要確定準確,
?、?分別將 MC “ biao” 放在主時間軸的 3 個幀上,為各幀上的 MC 編寫不同的腳本。
?、?設(shè)一按鈕用于各幀之間的跳轉(zhuǎn)
編寫動作腳本 ?、?在第 1 幀到第 2 幀的 MC 上輸入:
onClipEvent (enterFrame) {// 以影片剪輯幀頻不斷觸發(fā)的動作
s = new Date();// 創(chuàng)健日期對象
Hours = s.getHours();// 讀取系統(tǒng)時間 - 時
if (12<Hours) {
Hours = Hours-12;
}// 把 24 小時制轉(zhuǎn)換為 12 小時制
this.b13._rotation = ((Hours*30)+(s.getMinutes()/2)); // 把時和分轉(zhuǎn)換為旋轉(zhuǎn)角度
this.b14._rotation = (6*s.getMinutes()); // 把獲取的系統(tǒng)時間分轉(zhuǎn)換為旋轉(zhuǎn)角度
this.b15._rotation = (6*s.getSeconds()); // 把獲取的系統(tǒng)時間秒轉(zhuǎn)換為旋轉(zhuǎn)角度
}
?、?在第 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 度,用本地時間的小時數(shù)乘于 30 就是指針指向的度數(shù)。,如 3 點就是 3*30 ,指針在 90 度位置,但這樣只能是按小時發(fā)生動作,要顯示中間的指針變化還需加上 (s.getMinutes()/2) ,這個表達式是計算的當前分鐘乘于每分鐘在一個小時刻度內(nèi)走的度數(shù)( 0.5 度),這兩個表達式相加就是以小時和分鐘計算出的時針旋轉(zhuǎn)度數(shù)。
② 緩沖公式: this["b"+i].xl = (this["b"+(i-1)]._x-this["b"+i]._x)/2+this["b"+i].xl*0.3;
為便于觀看首先把數(shù)值具體化: b2.xl=( b1._x-b2._x)/2+b2.xl*0.3; 其中的 ( b1._x-b2._x)/2 ,我們在導航條那課已經(jīng)用過類似的方法,這里是取兩個 MC 坐標值的差的二分之一,這個表達式的結(jié)果在不斷的由大到小直至為 0 ,其中的 b2.xl*0.3 , 是有意增加的偏差值, 有叫抖動率的,也是由大到小變化最后到 0 ,這兩個表達式計算的結(jié)果賦給變量 b2.xl ,有了這樣的公式,鼠標跟隨就會有延時和抖動效果。
小結(jié) 本講學習的目的是掌握時鐘的運動原理,此外還學習 一種緩沖公式的運用,也是很有實用價值的內(nèi)容,希望課下能用數(shù)字代入加深理解。
課后練習 不要秒針跳躍式旋轉(zhuǎn),而要平緩連貫地旋轉(zhuǎn),范例效果:
>點擊查看動畫效果<練習2-6
>點擊查看動畫效果<練習2-6-2
查看全套"Flash AS 實例進階教程"