鼠標跟隨的效果可謂千變萬(wàn)化,但是萬(wàn)變不離其宗,掌握了最基本的做法,再做其它更復雜的,也就相對容易了。當然,要做出真正漂亮的作品,豐富的想象力也是必不可少的。在下面的幾節中,我們就由淺入深的討論一下鼠標跟隨的具體實(shí)現方法。
先來(lái)看看鼠標跟隨的理論基礎。最基本的就是獲取跟隨物體和鼠標的位置。
一、獲取跟隨物體的位置
用_x和_y這對屬性來(lái)獲取場(chǎng)景中實(shí)例的當前位置,這個(gè)大家應該非常熟悉了,_x和_y的值表示以場(chǎng)景的左上角為原點(diǎn),向右為X軸正向,向下為Y軸正向的坐標系中,實(shí)例的坐標值。這里提到的,就是Flash的主坐標系統。而對于影片剪輯,它們還有各自獨立的,以自己的中心為原點(diǎn)的坐標系統。弄清楚這一點(diǎn),對于以后的編程很重要。如圖1所示。
圖1
二、獲取鼠標的位置
鼠標的位置,可以用_xmouse和_ymouse這對屬性來(lái)獲取。這時(shí)就要注意坐標系統的區別了。對于某個(gè)影片剪輯的_xmouse和_ymouse屬性,其值是以其自身的坐標系統為基礎的。例如圖1中,影片剪輯“mc”的位置是(200,200),當鼠標位于A(yíng)點(diǎn)(100,100)時(shí),mc._xmouse= -100,mc._ymouse= -100。
三、鼠標跟隨的算法
有了上面的這些理論基礎,接下來(lái)就是實(shí)現跟隨的算法了。介紹一種最常用的算法:帶有加速度的跟隨。大概的思路是這樣,算出當前實(shí)例和鼠標之間的距離,比如是100,設定一個(gè)百分比,比如50%,使該實(shí)例向鼠標移動(dòng)這段距離的50%,100*50%=50,這樣它和鼠標的距離就還有50。接著(zhù),再讓它移動(dòng)當前距離的50%,這次是50*50%=25。重復這樣做,最后實(shí)際的結果就是,第一次,移動(dòng)了50,第二次是25,第三次是12.5,……這樣就模擬了物體向著(zhù)目標開(kāi)始快、越靠近越慢的減速運動(dòng)的過(guò)程。
我們就用這個(gè)算法做個(gè)簡(jiǎn)單的跟隨效果。
制作步驟
一、制作跟隨圖案
打開(kāi)Flash MX,新建文件,新建一個(gè)影片剪輯,設計制作一個(gè)圖案放入第一幀。如圖2所示。
圖2
二、編寫(xiě)動(dòng)作
點(diǎn)選這一幀,打開(kāi)動(dòng)作面板,加入如下語(yǔ)句:
A = 8; // 調節A的值可改變跟隨速度
this._x = this._x+_xmouse/A;
this._y = this._y+_ymouse/A;
注意,因為這段語(yǔ)句是加在影片剪輯中的,所以這里的_xmouse和_ymouse的值就等于影片剪輯和鼠標之間的矢量距離。為什么?再回過(guò)頭去看看關(guān)于影片剪輯自身的坐標系統的理論就明白了。this._x = this._x+_xmouse/A就使MC向鼠標移動(dòng)了它們之間X軸方向距離的八分之一,同理,this._y = this._y+_ymouse/A一句控制Y軸方向的運動(dòng)。好,程序就是這么簡(jiǎn)單!
三、制作循環(huán)
接下來(lái),在第二幀,按F6增加一個(gè)關(guān)鍵幀。這一幀主要是在影片剪輯內構成一個(gè)循環(huán),使第一幀的程序能夠不斷的被執行。
最后,把做好的影片剪輯拖入場(chǎng)景中就行了。按Ctrl+Enter測試一下,是不是很有成就感?
圖3
小結
本節討論了鼠標跟隨的理論基礎,并介紹了一種最常用的跟隨算法,加速度使最終效果更具真實(shí)感。如果把網(wǎng)站的圖標做成這種跟隨,會(huì )給人留下比較深刻的印象。建議讀者朋友們熟練的掌握這種算法,因為許多復雜的效果都是以它為基礎的,例如下一節我們將要介紹的“游動(dòng)的魚(yú)”。
現在再想一下上一節給大家提出的問(wèn)題,是不是很簡(jiǎn)單了?只要把本例中模擬加速度的部分去掉,改成類(lèi)似下面的語(yǔ)句就行了:
this._x = _root._xmouse;
this._y = root._ymouse;
好,休息一下,準備進(jìn)入下一節的學(xué)習。
源文件下載