Flash動態緩衝圖片導航製作詳解

緩衝公式在製作特效中非常有用,著名的三星導航菜單就用到了此公式。現在許多網站出盡風頭,其中緩衝導航是其一大亮點。本文以一德國網站的導航爲例,詳解緩衝導航的製作。這個效果是我和溶劑共同完成的,他提供座標的算法,我提供縮放的算法。
  本例效果演示
鼠標劃過的部分圖片會變大
 
  [1b]製作思路[/1b]
圖片縮放控制
利用緩衝公式設置圖片的縮放比例,如果鼠標滑過某圖片,放大1.8倍。如果其它圖片的序號與此圖片的序號相差1,就是此圖片兩邊的圖片,放大1.4倍,其它的爲原始大小。
圖片座標控制
當某圖片放大時,相鄰的圖片的座標等於此圖片的座標加上這兩張圖片的寬度的一半,實現圖片無間距排列。
線條和文字控制
線條用畫線函數實現,文字的座標和縮放比例與對應的圖片相同。   [1b]製作過程[/1b]
  1、啓動Flash,新建一個影片,設置影片大小爲600px*200px。
  準備好如圖中的素材,圖片的實例名分別爲zjs0到zjs4,文字的實例名分別爲z0到z4。
  把中間的圖片座標設爲(300,130),選中全部的圖片,按CTRL+K調出排列面板,設置爲頂部對齊,使圖片的y座標相同,圖片的x座標通過AS來控制。用同樣的方法使方字的y座標相同,並調整好文字和圖片的間距。
  2、在主場景中的第一幀上添加下列代碼

//獲取中間圖片的x座標
for (var i = 0; i-1; k--) {
var mc1 = this["zjs"+k];
var mc2 = this["zjs"+(k+1)];
mc1._x = mc2._x-(mc2._width+mc1._width)/2+1;
}
//縮放比例最大的圖片的左邊的圖片的x座標設置
myLine();
//圖片下方的線條
}
//比例縮放函數
function move_scale(x, obj) {
speed = (x-obj._xscale)*.65+speed*0.6;
obj._xscale += speed;
obj._yscale += speed;
//緩衝公式,x爲圖片的縮放比例,obj爲MC
}
//鼠標滑過圖片時,圖片的縮放、x座標設置函數
function mouse_in() {
for (var i = 0; i按CTRL+ENTER測試,本例製作完成。掌握原理後,加上好的創意,相信你能做出更好的特效。
本文轉自:http://www.5uflash.com/flashjiaocheng/Flashdonghuajiaocheng/2027.html
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章