萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Flash 教學

Flash AS2 代碼實現圖片無縫循環輪播(數組遍歷 + 位移重置)

純 AS2 代碼實現多圖片水平無縫循環輪播:遍歷 _root 所有影片剪輯實例,每幀統一左移,超出左邊界者瞬移至右側銜接,無需手動排列關鍵幀,靈活擴展圖片數量。

實作步驟

1. 準備獨立影片剪輯元件

  • 每張圖片/內容獨立建立影片剪輯元件(元件 1、2、3…)。
  • 回主場景,依序拖入第 1 層第 1 幀,水平排列,對齊面板調整間距與高度。

2. 第 1 幀框架代碼

for (var i in _root) {
    _root.onEnterFrame = function() {
        this._x -= 5; // 每幀左移 5px
        if (this._x <= -150) { // 單張寬度 150px
            this._x += 907; // 總寬度 907px(所有圖片寬度和),瞬移至右側銜接
        }
    };
}

代碼邏輯解析

  • for (var i in _root) 遍歷 _root 所有屬性(包含實例),但僅影片剪輯實例有 _x 屬性,故實際僅影響 MC。
  • _root.onEnterFrame 每幀執行一次,所有 MC 同步左移 5px。
  • 邊界判斷:_x <= -150(圖片完全移出左側視野)。
  • 重置位置:_x += 907(總寬度),使該圖片出現在隊列最右端,形成循環。

優化與注意點

  • 遍歷效能:for..in 遍歷 _root 所有屬性(含內建屬性),建議改用陣列管理實例引用:var items:Array = [mc1, mc2, mc3...]; 迴圈遍歷 items。
  • 硬編碼寬度:150、907 應改為變數/計算屬性(mc._width、items.length * itemWidth)。
  • 速度與幀率綁定:5px/幀 @ 12fps = 60px/s;改用 Timer 或 ENTER_FRAME 計算時間差實現幀率無關速度。
  • 垂直/多行輪播:同理操作 _y,配合多行排版。

AS3 遷移版本

var items:Array = [mc1, mc2, mc3]; // 實例陣列
var itemWidth:Number = 150;
var totalWidth:Number = items.length * itemWidth;
var speed:Number = 60; // px/s

addEventListener(Event.ENTER_FRAME, function(e:Event):void {
    var dt:Number = 1/stage.frameRate; // 近似幀時間
    for each (var mc:MovieClip in items) {
        mc.x -= speed * dt;
        if (mc.x <= -itemWidth) {
            mc.x += totalWidth;
        }
    }
});

此 AS2 寫法雖簡潔但有隱患(遍歷污染、硬編碼、幀率綁定),理解其核心「位移+重置」邏輯後,建議在現代專案中採用陣列管理、時間差驅動的 AS3/JS 版本。

copyright © 萬盛學電腦網 all rights reserved