Actionscript2.0, Flash, 網頁設計

[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-範例下載]