?在送上教程之前,我想先感謝一位經典的網友,他介紹了一個數學公式編輯軟件MATHTYPE,對我這次寫教程有了很大的幫助.但是是誰一時想不起來,又找不到.如果找到的話,我一定會把他的大名公布出來,以示感激.
這是兩個月前答應一位網友寫的教程,但是當初沒有時間,所以拖到現在.而且這個效果還是有相當一部分的人曾經在論壇上問過怎么做的.現在筆者擠出了點時間,給大家送上這個教程.
[1b]
[url=/Files/BeyondPic/2006-9/15/mousewave.swf][1b]
效果預覽
[/1b][/url]
?(點擊觀看)[/1b]
這基本上是用AS實現的.主要用了MovieClip對象的lineTo和curveTo方法,此外還有很多人都很熟悉的韓式彈性菜單的算法.
在這里,先給大家介紹比較簡單的韓式彈性菜單算法.框架彈性動作就是通過這種算法實現的.它要達到的效果就是讓一個物體在目標位置兩側振動,而且振幅越來越小,最終停止在目標位置.
[1b]它的算法如下:[/1b]
ObjPos=targetPos-deceleration*(ObjPos-targetPos)
你嘗試讓ObjPos是任意的一個數,然后讓deceleration取0~1(不包括0,1),然后targetPos取一個跟ObjPos相差比較大的數,不斷地代入上式算一下,你會發現ObjPos會在targetPos兩側振動,并且當前一次大于targetPos時候,這一次將小于targetPos,而且無限接近于targetPos,于是就達到彈性振動的目的了.
當然明眼人一觀察就出結果.不過這個認識是感性的,如果有興趣的話,可以看下我對這條式子的證明過程(對數學沒興趣的可以跳過)
在證明之前,先解釋一點,上式兩邊的ObjPos是不一樣的,在AS里,它并不代表相等,而是先把ObjPos當前的值代到右邊,算出結果后重新對ObjPos賦值.因此,假設ObjPos原始值為a1,該式子運行一次后左邊的ObjPos的值記為a2,依此類推,執行到n次后左邊ObjPos的值記為an+1,所以,在數學上,實際上是進行這么一個數列的遞推運算:
[1b]an=t-d(an-1-t)(其中d,t是常數)[/1b]
當代碼執行n次時,物體的位置就位于數列{an}的第n+1項.
因此,我們需要證明數列當a1!=t的時候,an兩個相鄰項之間的數值跟t的差的符號相反,并且當n趨向于無窮的時候,an=t

由此可知,如果把這段代碼用setInterval調用,或者在onEnterFrame里調用的話,ObjPos的值將在targetPos兩邊振動,并且無限接近targetPos.這個式子用到我的鼠標效果里,這里要控制的點就是整個框的最高點.最高點的變動帶動整個形狀的變動,當然帶動形狀變動是后面的事情,我們當前先要把最高點振動的效果實現.因此,targetPos就是框架最高點最終停留的位置,而ObjPos則是框架最高點當前的位置.
下面筆者介紹的將是如何根據算出的最高點把圖形描繪出來：
首先,矩形的四個頂點都是常量,而且有三條邊都是直線,因此,這里用lineTo就可以實現了.
[1b]lineTo(x,y)[/1b]方法比較簡單,對MC調用該方法時,lineTo將在點x,y和當前MC的畫圖標記點連一直線,一開始默認為(0,0),所以第一次對該MC調用lineTo的時候,將在該MC上畫一條從(0,0)到(x,y)的直線,然后畫圖標記點就改為(x,y)了.如果不希望一開始畫上這條線的話,或者畫完一根線以后,希望再畫一根,并且不要跟現在的線連在一起的話,可以先用moveTo(x,y)方法改變畫圖標記點.
[1b]curveTo(controlX,controlY,anchorX, anchorY)方法[/1b]則是該教程的一個重點,因為波形的繪制都是通過該方法實現的.而且過兩點有無數條曲線,所以,如何保證波形曲線的平滑性,是個很重要的問題.
[1b]下面先做一個小測試:[/1b]
新建一個Flash文檔,在幀上添加下面的代碼:
var initX = 100;
var inity = 200;
var controlX;
var controlY;
var anchorX = 50;
var anchorY = 50;
this.onMouseMove = function() {
this.createEmptyMovieClip("curve", 1);
with (curve) {
lineStyle(1, 000000, 50);
moveTo(initX, initY);
ControlX = _xmouse;
ControlY = _ymouse;
lineTo(controlX, controlY);
lineTo(anchorX, anchorY);
moveTo(initX, inity);
curveTo(controlX, controlY, anchorX, anchorY);
}
updateAfterEvent(this.onMouseMove)
};
?
然后,測試影片,在舞臺上移動鼠標,觀察曲線的變化(其中,鼠標所在的點是控制點)
也可以直接在這里預覽:
[url=/Files/BeyondPic/2006-9/15/test.swf][1b]
效果預覽
[/1b][/url]
[1b](點擊觀看)[/1b]
你會發現,不管控制點怎樣變化,畫出來的曲線都有一個特點,就是控制點跟曲線兩個頂點的連線都和曲線相切,并且弧線總是C形,不是S形.這就是指導我們畫出平滑曲線的重要結論.
本文轉自：http://www.5uflash.com/flashjiaocheng/Flashdonghuatexiao/1046.html

鼠標特效--彈性框架的制作