|
昨天看見(jiàn)的一個(gè)站，上面有一個(gè)用js做的跟隨鼠標(biāo)的時(shí)鐘，蠻有趣，想想用FLASH應(yīng)該也做得出，試了一下，效果還不錯(cuò)，正好心情不錯(cuò)，寫(xiě)了個(gè)教程，與大家探討。
先看看效果
現(xiàn)在我們一步一步的來(lái)做。
1、新建一個(gè)文件，背景白色，新建一個(gè)mc，就叫clock吧。進(jìn)入編輯。先做一個(gè)鐘面，在一個(gè)層上分別做1~12的12個(gè)數(shù)字，都單獨(dú)做成MC，實(shí)體名（instance name）分別命名為b1,b2...b12，排列成圓環(huán)狀（這不很難吧，可以加圓形及十字輔助線做），關(guān)鍵在這里--每一個(gè)數(shù)字MC的中心點(diǎn)并非與數(shù)字重合！從clock的角度看，這12個(gè)數(shù)字MC的中心點(diǎn)全部重疊在鐘面的中心。
具體做時(shí)，可以增加一個(gè)輔助層，把鐘面數(shù)字原樣復(fù)制到輔助層上，并完全打散（與數(shù)字MC脫離干系），鎖定。然后分別對(duì)b1,b2...進(jìn)行編輯，把中心點(diǎn)都放置在十字輔助線的中央，而數(shù)字放在圓環(huán)上，對(duì)齊輔助層上的數(shù)字。--這個(gè)辦法是不是有點(diǎn)笨��？呵呵，不過(guò)mch我還是為此方法整整考慮了33分鐘哦。
2、現(xiàn)在來(lái)做指針，一共有3根。（廢話�。┫茸龇轴槪廊辉赾lock里面做，新加一層，用直線工具，用點(diǎn)線的線形畫(huà)豎線，畫(huà)好了把它轉(zhuǎn)MC--line，注意，中心點(diǎn)放在豎線下端。
回到clock，再按F8，做指針轉(zhuǎn)圈的動(dòng)畫(huà)，還是要注意：line的下端對(duì)齊中心點(diǎn)，這都是為了保證指針能在鐘面中心旋轉(zhuǎn)。在21幀、41幀、61幀按F6插入關(guān)鍵幀，打開(kāi)transform面板，21幀處旋轉(zhuǎn)120度，41幀處旋轉(zhuǎn)240度，然后全部加motion tween，在60幀處按F6加關(guān)鍵幀，并刪除61幀。
同樣的方法做時(shí)針，當(dāng)然做的比分針短一點(diǎn)（又是廢話�。�。秒針呢，我還是想了一個(gè)笨辦法，讓它按部就班的走吧--先按做分針的做法做好，然后從1到60全部加關(guān)鍵幀，然后去掉motion。因?yàn)槭敲棵?2幀，所以，我在每2個(gè)關(guān)鍵幀之間加11個(gè)普通幀（連按11個(gè)F5羅，mch我按的手酸死了。）
3、把三根指針在clock中對(duì)好中心位置放好，其實(shí)不對(duì)準(zhǔn)也沒(méi)關(guān)系拉，因?yàn)橄旅嫖以贏S里面會(huì)把它放在它應(yīng)該呆的地方拉。把時(shí)、分、秒針?biāo)趍c分別命名為b13,b14,b15
4、現(xiàn)在我們來(lái)加AS
回到主場(chǎng)景，點(diǎn)選clock，寫(xiě)以下代碼
onClipEvent (enterFrame) {
// 設(shè)定時(shí)間變量,確定指針位置
timedate = new date();
hour = timedate.getHours();
minutes = timedate.getMinutes();
if (hour>=12){
hour=hour-12;
}
hourPos = hour*5+int(minutes/12);
b13.gotoAndStop(hourPos+1);
b14.gotoAndStop(minutes+1);
// 讓第一個(gè)符號(hào)跟著鼠標(biāo)移動(dòng)
b1._x = _xmouse;
b1._y = _ymouse+120;
// 讓其他符號(hào)跟著前一個(gè)符號(hào)移動(dòng)
for (var i = 2; i<=15; i++) {
Temp = eval("b"+i);
Temp.xdis = (eval("b"+(i-1))._x-Temp._x)/2+Temp.xdis*0.3;
Temp.ydis = (eval("b"+(i-1))._y-Temp._y)/2+Temp.ydis*0.3;
Temp._x += Temp.xdis;
Temp._y += Temp.ydis;
}
}
解釋一下：
--因?yàn)槲覀円粩鄠刹毂镜貦C(jī)的系統(tǒng)時(shí)間，所以用了onClipEvent (enterFrame)
--timedate = new date();....以下若干行，是建立一個(gè)日期對(duì)象，讀取系統(tǒng)小時(shí)、分時(shí)，以及把過(guò)12點(diǎn)的小時(shí)轉(zhuǎn)12進(jìn)制。根據(jù)讀取的數(shù)字來(lái)確定幾個(gè)指針mc的播放位置，也即指定指針的位置；
b13.gotoAndStop(hourPos+1);這里hourPos+1就是當(dāng)零點(diǎn)時(shí)能使指針指在12位置，即b13指向第一幀。至于秒針，嘻嘻~~我偷下懶了，讓它自己從頭走到底了，沒(méi)有參照系統(tǒng)時(shí)間，有興趣的朋友可以完善它。
--b1._x = _xmouse;...這里開(kāi)始的代碼是做鼠標(biāo)跟隨的。首先讓b1跟著鼠標(biāo)動(dòng)，（Y方向讓鼠標(biāo)和鐘面拉開(kāi)了120）。然后其他mc跟著前一個(gè)mc移動(dòng)。為使代碼簡(jiǎn)潔，設(shè)了臨時(shí)變量Temp，用來(lái)指定當(dāng)前移動(dòng)的mc。
至于那個(gè)移動(dòng)公式的意思，用大白話說(shuō)就是：當(dāng)前mc的移動(dòng)距離=（前一mc的X坐標(biāo)-當(dāng)前mc的X坐標(biāo)）/2+二者之間的距離*0.3。Y同。這公式的參數(shù)是從哪里來(lái)的呢，這個(gè)...這個(gè)...就當(dāng)它是一個(gè)經(jīng)驗(yàn)公式吧，反正“鼠標(biāo)甩動(dòng)”的效果關(guān)鍵就是它的功勞。 [相關(guān)文章：運(yùn)動(dòng)緩沖效果解析]
總結(jié)一下，這個(gè)實(shí)例的關(guān)鍵是鐘面上的所有東西：指針、數(shù)字的中心點(diǎn)一定都要重合在一個(gè)點(diǎn)，所以在制作他們時(shí)一定要注意；鼠標(biāo)移動(dòng)后，所有的mc都會(huì)一個(gè)跟著一個(gè)走，最后中心依然是重疊的。
出處：藍(lán)色理想
責(zé)任編輯：qhwa
◎進(jìn)入論壇Flash專(zhuān)欄版塊參加討論
|
