1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. Flash
  6. »
  7. [AS2]滑動式圖片選單

[AS2]滑動式圖片選單

2010/03/18

梅問題-flash教學-flash AS2-滑動式圖片

  梅干已經很久沒寫Flash了,更別說是Actionscript2.o,但最近有網友問到,如何利用AS2.0作出滑動式的圖片選單,正巧梅干有點空檔時間,便花了點時間,找回先前的片段記憶,拼拼湊湊終於完成了此範例,梅干也盡量將寫法簡單化,也讓該範例能不用改太多就可直接來套用,現在就來看一下這個AS2的滑動圖片選單。


Step1
開啟Flash,依照下圖完成各元件的製作與命名。


Step2
新增一個as圖層,並對著影格1按F9,輸入下方的語法。
基本版:

//取遮罩的寬度
var w=mask._width;
//取遮罩的x、y
var xx=mask._x;
var yy=mask._y;

//將所有圖片的y與遮罩對齊
allimg_mc._y=yy;

//所有的按鈕事件
btn01.onRollOver = function() {
xx=37;
};
btn02.onRollOver = function() {
xx=-(w*1)+37;
};
btn03.onRollOver = function() {
xx=-(w*2)+37;
};
btn04.onRollOver = function() {
xx=-(w*3)+37;
};

//所有圖片當載入時滑動效果
allimg_mc.onEnterFrame = function () {
allimg_mc._x = allimg_mc._x+(xx-allimg_mc._x)0.45;
}


簡化版:

//取遮罩的寬度
var w=mask._width;
//取遮罩的x、y
var xx=mask._x;
var yy=mask._y;

//滑動的速度0~1之間,數值愈小速度愈慢
var movev=0.25;

//將所有圖片的y與遮罩對齊
allimg_mc._y=yy;

//所有的按鈕事件
for (i=1;i<=4;i++){ btn = eval(“btn0”+i);
btn.onRollOver = function() {
_i=this._name.substring(4)-1; xx=-(w
_i)+37; };

}

//所有圖片當載入時滑動效果 allimg_mc.onEnterFrame = function () { allimg_mc._x = allimg_mc._x+(xx-allimg_mc._x)*movev;
}


  這邊大概沒有什麼需要調整,若要增減圖片,只需直接加到allimg_mc影片元件中,若要改變照片的大小,mask與allimg_mc二個都要要一樣喔!這樣在跑的時候才不會出現問題,至於滑的快慢直接修改movev這數值就可以了。

  還是建議各位,若可以的話,放棄Actionscript2.0改用Actionscript3.0吧!依目前的Flash的發展,未來應該會慢慢的犧牲掉AS2.0了,所以還是趁早改用AS3.0吧!


[滑動圖片1-範例預覽] [滑動圖片1-範例下載]
[滑動圖片2-範例預覽] [滑動圖片2-範例下載]