|
原文地址：http://flash8.net/dispbbs.asp?boardID=10&ID=70443
前言：
前不久又逛了一些flash做的網(wǎng)站，看到有的網(wǎng)站導(dǎo)航菜單的效果確實(shí)不錯(cuò)，即萌發(fā)了嘗試寫一些關(guān)于這方面的一系列教程。菜單的表現(xiàn)方式可以說是千姿百態(tài)，充滿個(gè)性，但透過現(xiàn)象看本質(zhì)，其技術(shù)的核心卻有著相通或相似之處，比如今天所要講的運(yùn)動(dòng)的緩沖效果，其在這方面的運(yùn)用是非常的多，當(dāng)然，一個(gè)好的導(dǎo)航菜單決不僅僅只是運(yùn)動(dòng)緩沖的效果，它還包括很多方面，比如創(chuàng)意。今天所寫的東西其實(shí)并沒有多大的技術(shù)含量，都是很基本的東西，但是如果你真正掌握了一些基本的知識(shí)，那么你才有可能發(fā)揮自己的聰明才智去設(shè)計(jì)一些更酷炫的東西，而不僅僅是簡(jiǎn)單的把別人的代碼copy到自己的作品之中，或者改改別人的原文件就用，這對(duì)你的學(xué)習(xí)并沒有什么好處，如果你同意我的觀點(diǎn)，那么請(qǐng)接著看下去.....
正題：
主場(chǎng)景中只有一幀、一個(gè)MC（MovieClip），如果我要的效果是點(diǎn)一下鼠標(biāo)，MC就出現(xiàn)在鼠標(biāo)所點(diǎn)擊的位置，該如何實(shí)現(xiàn)呢。通常我們可以給MC加這樣的代碼：
onClipEvent(load){
_x=300;
_y=200;
}
//設(shè)置MC的初始坐標(biāo)，如果不需要設(shè)置以上代碼可省。此代碼（↑）只運(yùn)行一次。
onClipEvent(mouseDown){
targetx=_root._xmouse;
targety=_root._ymouse;
}
//鼠標(biāo)按下，把其坐標(biāo)分別賦值給兩個(gè)變量：targetx、targety
onClipEvent(enterFrame){
_x=targetx;
_y=targety;
}
//把targetx、targety的值分別賦值給MC的_x _y
//〖當(dāng)然你也可以這樣寫：
onClipEvent(load){
_x=300;
_y=200;
}
onClipEvent(enterFrame){
if(Key.isDown(1)){//如果鼠標(biāo)左鍵按下
_x=_root._xmouse;
_y=_root._ymouse;
}
}
但為了表述方便，以下將采用第一種寫法
ctrl+Enter測(cè)試一下效果，當(dāng)點(diǎn)擊鼠標(biāo)左鍵，MC就會(huì)出現(xiàn)在鼠標(biāo)點(diǎn)擊的位置，但并沒有出現(xiàn)MC的運(yùn)動(dòng)過程，那么，如果要出現(xiàn)MC的運(yùn)動(dòng)緩沖過程又該如何設(shè)置代碼？
OK，我們先試著給MC加這樣的代碼：
onClipEvent(load){
vx=1;
vy=1;
//你可以試著改變vx、vy的值，然后看看效果.
}
onClipEvent(enterFrame){
_x+=vx;//或者_(dá)x-=vx;
_y+=vy;//或者_(dá)y-=vy;
}
Ctrl+Enter觀看效果，我們將看到MC運(yùn)動(dòng)了，
這是因?yàn)閑nterFrame 以影片幀頻不斷地觸發(fā)此動(dòng)作：
_x+=vx;（等效于_x=_x+vx）
_y+=vy;
使MC的x、y坐標(biāo)不斷的在原來的基礎(chǔ)上加上vx、vy，這個(gè)你得用心體會(huì)。MC雖然運(yùn)動(dòng)了，但速度是恒定的，因?yàn)镸C的x、y坐標(biāo)每次增加的量（步長(zhǎng)）是個(gè)定值vx、vy，如果vx、vy不是定值，那很顯然MC的運(yùn)動(dòng)就是變速的。
基于以上的思想，為了實(shí)現(xiàn)MC的運(yùn)動(dòng)緩沖過程，我們可以這樣設(shè)置代碼：
onClipEvent(load){
_x=300;
_y=200;
}
onClipEvent(mouseDown){
targetx=_root._xmouse;
targety=_root._ymouse;
}
onClipEvent(enterFrame){
distx=targetx-_x;
disty=targety-_y;
//算出鼠標(biāo)點(diǎn)擊的位置到MC的距離
movex=distx/10;
movey=disty/10
_x+=movex;
_y+=movey;
}
在這里我們使用了
_x+=movex;
_y+=movey;
首先我們得注意，movex和movey并不是一個(gè)固定不變的數(shù)值，在MC的運(yùn)動(dòng)過程中，其x、y坐標(biāo)是不斷變化的，所以movex和movey也是不斷變化的（movex=distx/10;movey=disty/10;而distx=targetx-_x;disty=targety-_y;）。
你可以看看下面這張圖（x方向）以幫助理解。
以上代碼我們可以精簡(jiǎn)為：
onClipEvent(load){
_x=300;
_y=200;
}
onClipEvent(mouseDown){
targetx=_root._xmouse;
targety=_root._ymouse;
}
onClipEvent(enterFrame){
_x+=(targetx-_x)/10;
_y+=(targety-_y)/10;
}
我想你可能注意到了，為什么(targetx-_x)、(targety-_y)還要除以10？
你可以把它去掉，變成 ：
_x+=targetx-_x;
_y+=targetx-_x;
Ctrl+Enter看看效果，這時(shí)你只要一點(diǎn)擊鼠標(biāo)，MC馬上就出現(xiàn)在點(diǎn)擊的位置，根本就看不到MC的運(yùn)動(dòng)過程，這是因?yàn)镸C的x、y坐標(biāo)的增量過大，為鼠標(biāo)點(diǎn)擊的位置到MC的距離，正因?yàn)槿绱�，鼠�?biāo)一點(diǎn)擊，MC就會(huì)馬上出現(xiàn)在點(diǎn)擊的位置。所以我們要使MC的x、y坐標(biāo)的增量要比鼠標(biāo)點(diǎn)擊的位置到MC的距離小。當(dāng)然“10”這個(gè)數(shù)字你也可以改成其它的數(shù)字，比如8、9、12、2等等。
我們?cè)賮砗?jiǎn)單講講為什么MC運(yùn)動(dòng)會(huì)出現(xiàn)緩沖效果�？瓷蠄D，MC向B點(diǎn)運(yùn)動(dòng)不斷靠近B點(diǎn)時(shí)，B點(diǎn)與MC的距離（targetx-_x）變得越來越小，所以MC x坐標(biāo)每次增加的量（步長(zhǎng)）會(huì)變得越來越小，因而出現(xiàn)緩沖效果。
以上代碼我們還可以寫得更規(guī)范一些，以便于修改：
onClipEvent(load){
_x=300;
_y=200;
speed=10;
}
onClipEvent(mouseDown){
targetx=_root._xmouse;
targety=_root._ymouse;
}
onClipEvent(enterFrame){
_x+=(targetx-_x)/speed;
_y+=(targety-_y)/speed;
}
總結(jié)：
今天講的這種效果你可以應(yīng)用于MC的屬性：_rotation, _alpha, scale 趕快試試吧。
請(qǐng)記住這樣的式子：property = (target - property)/speed;
常用的彈性緩沖效果還有： x = disx-(disx-x)/a;
y = disy-(disy-y)/a;
===============
dx=dx*.a+(_root._xmouse-_x)*.b;
dy=dy*.a+(_root._ymouse-_y)*.b;
出處：閃吧
責(zé)任編輯：qhwa
◎進(jìn)入論壇Flash專欄版塊參加討論
|
