Flash動態(tài)緩沖圖片導(dǎo)航制作詳解_Flash教程
推薦:Photoshop與Flash合作制作模糊漸變動畫在一些片頭動畫里我們經(jīng)常能看到很炫的模糊效果,極具視覺沖擊。高質(zhì)量的模糊效果大多利用Photoshop處理后才導(dǎo)入flash中進(jìn)行制作。其實,在Flash中也可以利用其
緩沖公式在制作特效中非常有用,聞名的三星導(dǎo)航菜單就用到了此公式。現(xiàn)在許多網(wǎng)站出盡風(fēng)頭,其中緩沖導(dǎo)航是其一大亮點。本文以一德國網(wǎng)站的導(dǎo)航為例,詳解緩沖導(dǎo)航的制作。這個效果是我和溶劑共同完成的,他提供坐標(biāo)的算法,我提供縮放的算法。
本例效果演示
鼠標(biāo)劃過的部分圖片會變大
制作思路
- 圖片縮放控制
利用緩沖公式設(shè)置圖片的縮放比例,假如鼠標(biāo)滑過某圖片,放大1.8倍。假如其它圖片的序號與此圖片的序號相差1,就是此圖片兩邊的圖片,放大1.4倍,其它的為原始大小。 - 圖片坐標(biāo)控制
當(dāng)某圖片放大時,相鄰的圖片的坐標(biāo)等于此圖片的坐標(biāo)加上這兩張圖片的寬度的一半,實現(xiàn)圖片無間距排列。 - 線條和文字控制
線條用畫線函數(shù)實現(xiàn),文字的坐標(biāo)和縮放比例與對應(yīng)的圖片相同。
制作過程
1、啟動Flash,新建一個影片,設(shè)置影片大小為600px*200px。
預(yù)備好如圖中的素材,圖片的實例名分別為zjs0到zjs4,文字的實例名分別為z0到z4。
把中間的圖片坐標(biāo)設(shè)為(300,130),選中全部的圖片,按CTRL+K調(diào)出排列面板,設(shè)置為頂部對齊,使圖片的y坐標(biāo)相同,圖片的x坐標(biāo)通過AS來控制。用同樣的方法使方字的y坐標(biāo)相同,并調(diào)整好文字和圖片的間距。
2、在主場景中的第一幀上添加下列代碼
//獲取中間圖片的x坐標(biāo)
for (var i = 0; i<5; i ) {
this["zjs" i].n = i;
//每個圖片MC下定義一個變量
this["zjs" i].onRollOver = function() {
control = true;
//鼠標(biāo)滑過圖片時為真
};
this["zjs" i].onRollOut = function() {
control = false;
//鼠標(biāo)移出圖片時為假
};
}
onEnterFrame = function () {
for (var k = 0; k<5; k ) {
this["z" k]._x = this["zjs" k]._x;
// 說明文字的x坐標(biāo)等于本應(yīng)圖片的x坐標(biāo)
this["z" k]._xscale = this["zjs" k]._xscale;
this["z" k]._yscale = this["zjs" k]._yscale;
// 說明文字的縮放比例與圖片相同
}
if (control) {
mouse_in();
} else {
mouse_out();
}
// 條件真或假時調(diào)用函數(shù)
};
//坐標(biāo)設(shè)置函數(shù)
function setX() {
for (var k = -2; k<3; k ) {
this["zjs" (k 2)]._x = myx this["zjs" 2]._width*k;
//以中間圖片為準(zhǔn)無間距排列
}
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;
//設(shè)置這些圖片的x坐標(biāo),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坐標(biāo)設(shè)置
myLine();
//圖片下方的線條
}
//比例縮放函數(shù)
function move_scale(x, obj) {
speed = (x-obj._xscale)*.65 speed*0.6;
obj._xscale = speed;
obj._yscale = speed;
//緩沖公式,x為圖片的縮放比例,obj為MC
}
//鼠標(biāo)滑過圖片時,圖片的縮放、x坐標(biāo)設(shè)置函數(shù)
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);
//假如鼠標(biāo)位于圖片的上方,圖片放大1.8倍
temp1 = mc.n;
//把此圖片下的變量賦給變量temp1
} else if (Math.abs(mc.n-temp1) == 1) {
move_scale(140, mc);
//兩側(cè)的圖片比例放大1.4倍
} else {
move_scale(100, mc);
//其它的圖片為原始大小
}
}
setX();
//設(shè)置圖片的x坐標(biāo)
}
//鼠標(biāo)移出圖片時,圖片的縮放、x坐標(biāo)設(shè)置函數(shù)
function mouse_out() {
for (var i = 0; i<5; i ) {
move_scale(100, this["zjs" i]);
//縮放比例為1,恢復(fù)原始大小
}
setX();
//坐標(biāo)復(fù)原
}
//線條函數(shù)
function myLine() {
createEmptyMovieClip("line", 1);
//創(chuàng)建一個空影片
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);
//左邊垂直的直線
}
}
分享:Flash實例教程:星星跟我走實例說明在FlashMX當(dāng)中鼠標(biāo)的跟蹤的制作方法有很多種,為你介紹其中的一種可以有多種變化方式的鼠標(biāo)跟蹤。讓星星緊隨你的鼠標(biāo)轉(zhuǎn)動。有關(guān)知識繪制實例,star
- 相關(guān)鏈接:
- 教程說明:
Flash教程-Flash動態(tài)緩沖圖片導(dǎo)航制作詳解
。