本教學示範如何利用「影片剪輯作為圖片容器」+「按鈕事件控制幀跳轉」，製作滑鼠移過縮略圖即顯示大圖、移出恢復提示的互動相簿效果。邏輯清晰，無需複雜代碼，適合入門互動設計練習。

效果預覽

• 預設顯示「請選擇圖片」提示
• 滑鼠移過縮略圖 → 大圖區顯示對應圖片
• 滑鼠移出 → 恢復提示文字
• 點擊縮略圖 → 鎖定顯示該圖（可選增強）

製作步驟

1. 文件設定

新建 ActionScript 2.0 文件，舞台 300×360，幀率 12 fps。

2. 建立大圖顯示容器

• 矩形工具畫 300×300 白邊框矩形。
• 右鍵→轉換為元件→類型「影片剪輯」，名稱自訂，**實例名稱務必設為 viewer**（關鍵）。

3. 容器內部時間軸佈局

雙擊進入 viewer 內部編輯：

• 第 1 幀：文字工具寫「please select an image」，動作面板加 stop();。
• 第 2~6 幀：各插入空白關鍵幀（F7），每幀放入一張導入程式庫的圖片（共 5 張）。

導入圖片至程式庫

時間軸：第 1 幀提示，第 2~6 幀各放一張圖

第 1 幀提示文字 + stop()

第 2~6 幀放入圖片

4. 製作縮略圖按鈕

返回主場景，從程式庫拖出圖片縮小為 60×60，排列於 viewer 下方。每張縮略圖轉為按鈕元件（F8→按鈕）。

5. 核心互動代碼（按鈕動作）

為每個縮略圖按鈕添加對應幀號的跳轉代碼（假設第 1 張對應第 2 幀，以此類推）：

// 滑鼠移入 → 顯示對應圖
on (rollOver) {
    _root.viewer.gotoAndStop(2); // 第 1 張按鈕用 2，第 2 張用 3...
}

// 滑鼠移出 → 恢復提示（第 1 幀）
on (rollOut) {
    _root.viewer.gotoAndStop(1);
}

// 點擊鎖定（可選）
on (release) {
    _root.viewer.gotoAndStop(2);
}

關鍵點： _root.viewer 以絕對路徑定位主時間軸上的容器實例，gotoAndStop(幀號) 精準控制顯示內容。

6. 測試發布

Ctrl+Enter 測試，驗證懸停切換、移出重置、點擊鎖定功能。

擴展應用

• 增加淡入淡出過渡：在 viewer 內部幀間加入 Alpha 運動補間。
• 動態載入外部圖片：配合 loadMovie 替換內部時間軸靜態圖片。
• 鍵盤導航：添加鍵盤事件控制上一張/下一張。