Flash 打造酷炫 3D 環狀旋轉相冊：縮略圖圓形分佈、遮罩裁切、AS 控制自轉與互動

本教學示範如何將 8 張圖片排列成環狀縮略圖帶，滑鼠懸停暫停自轉、點擊切換大圖，核心技術：三角函數圓形排列、遮罩圓形裁切、enterFrame 持續旋轉、attachMovie 動態掛載大圖。

製作流程

1. 文檔設定與素材準備：修改舞台屬性，準備 8 張原圖與對應縮略圖。
   
2. 建立相冊主元件：Ctrl+F8 新增影片剪輯「Gallery」，內部圖層結構：
   
   • bg：背景底圖
   • images：大圖顯示容器 (空影片剪輯 imageHolder)
   • mask：正圓形狀，作為縮略圖環遮罩
   • thumbs：縮略圖容器 thumbHolder，內含 8 個縮略圖實例 thumb0~thumb7
3. 縮略圖製作與圓形排列：
   • 每個縮略圖：載入圖片 → 轉為影片剪輯 → 套用圓形遮罩（mask 圖層）。
     
   • 利用對齊面板「水平/垂直分佈」快速將 8 個縮略圖等間距排列成環。
     
4. Loading 機制：第 1 幀 stop()，第 2 幀初始化變數與事件。
   

核心 ActionScript (AS2) 代碼（第 2 幀框架層）

stop();

var positions:Array = [];
var imageTotal:Number = 8;
var pauseGallery:Boolean = false;
var current:MovieClip;

// 初始化 8 個縮略圖
for (var i = 0; i < imageTotal; i++) {
    var t:MovieClip = gallery.thumbHolder["thumb"+i];
    t.image = "image"+i; // 關聯大圖連結名稱

    t.onPress = function():Void {
        removeMovieClip(current); // 移除舊大圖
        current = gallery.imageHolder.attachMovie(this.image, this.image, i); // 掛載新大圖
        pauseGallery = false;
    };

    t.onRollOver = function():Void { pauseGallery = true; };  // 懸停暫停自轉
    t.onRollOut  = function():Void { pauseGallery = false; }; // 移出恢復自轉
}

// 預設顯示第一張
current = gallery.imageHolder.attachMovie("image0", "image0", 1000);

// 持續旋轉邏輯
this.onEnterFrame = function():Void {
    if (!pauseGallery) {
        for (var j = 0; j < imageTotal; j++) {
            gallery.thumbHolder["thumb"+j]._rotation -= 0.5; // 縮略圖逆時針自轉
        }
    }
    gallery.thumbHolder._rotation += 0.5; // 整個環順時針公轉
};

效果解析

• 雙重旋轉：縮略圖自身逆時針自轉 (模擬齒輪) + 整體容器順時針公轉 (環狀軌道)，視覺極具動感。
• 互動暫停：滑鼠進入縮略圖觸發 onRollOver 暫停公轉，方便點擊選擇。
• 動態掛載：attachMovie 從庫實例化大圖，深度管理避免殘留。
• 遮罩裁切：圓形遮罩限制縮略圖顯示區域，形成「圓環窗口」視覺。

測試發布

Ctrl+Enter 測試：環狀縮略圖持續旋轉，滑鼠懸停暫停，點擊切換中央大圖，體驗流暢互動。