Flash動態緩沖圖片導航制作詳解

 　　緩沖公式在制作特效中非常有用，著名的三星導航菜單就用到了此公式。現在許多網站出盡風頭，其中緩沖導航是其一大亮點。本文以一德國網站的導航為例，詳解緩沖導航的制作。這個效果是我和溶劑共同完成的，他提供坐標的算法，我提供縮放的算法。

　　圖片縮放控制

　　利用緩沖公式設置圖片的縮放比例，如果鼠標滑過某圖片，放大1.8倍。如果其它圖片的序號與此圖片的序號相差1，就是此圖片兩邊的圖片，放大1.4倍，其它的為原始大小。

　　圖片坐標控制

　　當某圖片放大時，相鄰的圖片的坐標等於此圖片的坐標加上這兩張圖片的寬度的一半，實現圖片無間距排列。

　　線條和文字控制

　　線條用畫線函數實現，文字的坐標和縮放比例與對應的圖片相同。

　　制作過程

　　1、啟動Flash，新建一個影片，設置影片大小為600px*200px。

　　准備好如圖中的素材，圖片的實例名分別為zjs0到zjs4，文字的實例名分別為z0到z4。

　　把中間的圖片坐標設為(300,130)，選中全部的圖片，按CTRL+K調出排列面板，設置為頂部對齊，使圖片的y坐標相同，圖片的x坐標通過AS來控制。用同樣的方法使方字的y坐標相同，並調整好文字和圖片的間距。

　　2、在主場景中的第一幀上添加下列代碼

　　//獲取中間圖片的x坐標

　　for (var i = 0; i<5; i++) {

　　this["zjs"+i].n = i;

　　//每個圖片MC下定義一個變量

　　this["zjs"+i].onRollOver = function() {

　　control = true;

　　//鼠標滑過圖片時為真

　　};

　　this["zjs"+i].onRollOut = function() {

　　control = false;

　　//鼠標移出圖片時為假

　　};

　　}

　　onEnterFrame = function () {

　　for (var k = 0; k<5; k++) {

　　this["z"+k]._x = this["zjs"+k]._x;

　　// 說明文字的x坐標等於本應圖片的x坐標

　　this["z"+k]._xscale = this["zjs"+k]._xscale;

　　this["z"+k]._yscale = this["zjs"+k]._yscale;

　　// 說明文字的縮放比例與圖片相同

　　}

　　if (control) {

　　mouse_in();

　　} else {

　　mouse_out();

　　}

　　// 條件真或假時調用函數

　　};

　　//坐標設置函數

　　function setX() {

　　for (var k = -2; k<3; k++) {

　　this["zjs"+(k+2)]._x = myx+this["zjs"+2]._width*k;

　　//以中間圖片為准無間距排列

　　}

　　for (var k = Number(temp1)+1; k<5; k++) {

　　//temp1為縮放比例最大的圖片下的變量值

　　var mc1 = this["zjs"+k];

　　var mc2 = this["zjs"+(k-1)];

　　//此圖片右邊的其它圖片

　　mc1._x = mc2._x+(mc2._width+mc1._width)/2-1;

　　//設置這些圖片的x坐標，1為消除圖片間的空隙

　　}

　　for (var k = Number(temp1)-1; k>-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<5; i++) {

　　var mc = this["zjs"+i];

　　//獲得實例名

　　if (mc.hitTest(_xmouse, _ymouse, true)) {

　　move_scale(180, mc);

　　//如果鼠標位於圖片的上方，圖片放大1.8倍

　　temp1 = mc.n;

　　//把此圖片下的變量賦給變量temp1

　　} else if (Math.abs(mc.n-temp1) == 1) {

　　move_scale(140, mc);

　　//兩側的圖片比例放大1.4倍

　　} else {

　　move_scale(100, mc);

　　//其它的圖片為原始大小

　　}

　　}

　　setX();

　　//設置圖片的x坐標

　　}

　　//鼠標移出圖片時，圖片的縮放、x坐標設置函數

　　function mouse_out() {

　　for (var i = 0; i<5; i++) {

　　move_scale(100, this["zjs"+i]);

　　//縮放比例為1，恢復原始大小

　　}

　　setX();

　　//坐標復原

　　}

　　//線條函數

　　function myLine() {

　　createEmptyMovieClip("line", 1);

　　//創建一個空影片

　　with (line) {

　　lineStyle(0.1, 0xff9933, 100);

　　moveTo(zjs0._x-zjs0._width/2, zjs0._y+10);

　　lineTo(zjs4._x+zjs4._width/2, zjs4._y+10);

　　//圖片下方水平的直線

　　moveTo(zjs0._x-zjs0._width/2, zjs0._y+5);

　　lineTo(zjs0._x-zjs0._width/2, zjs0._y+15);

　　//右邊垂直的直線

　　moveTo(zjs4._x+zjs4._width/2, zjs4._y+5);

　　lineTo(zjs4._x+zjs4._width/2, zjs4._y+15);

　　//左邊垂直的直線

　　}

　　}

　　按CTRL+ENTER測試，本例制作完成。掌握原理後，加上好的創意，相信你能做出更好的特效。