效果預覽

雨滴從天空落下，擊中地面產生水波擴散，雨量可控、自然隨機。考試高頻考點，核心技術：**影片剪輯嵌套**、**遮罩限制區域**、**duplicateMovieClip 粒子系統**、**setInterval 定時生成**。

製作流程

一、建立「雨滴」影片剪輯元件（巢狀結構）

圖層 1：雨滴下落

• 直線工具：灰色、1px，畫短線段
• 選取工具移至舞台上方外
• 第 15 幀插入關鍵幀（F6），向下移動至舞台底部外
• 1→15 幀建立形狀補間（雨滴加速下落感）
• 第 16 幀插入空白關鍵幀（F7）
• 第 36 幀插入空白關鍵幀，加 stop()（間隔期，控制雨密度）

圖層 2：水波擴散（鎖定圖層 1）

• 第 15 幀插入空白關鍵幀
• 橢圓工具：灰色筆觸、無填色，雨滴落點畫小橢圓
• 第 15 幀移至第 16 幀（對齊雨滴落地瞬間）
• 第 35 幀插入關鍵幀，自由變形放大橢圓
• 選中橢圓 → 屬性面板 → 色彩效果 → Alpha 5%
• 15→35 幀建立形狀補間（水波擴散淡出）

二、主場景佈置

• 回場景 1，Ctrl+L 開啟資源庫，拖入「雨滴」MC 到圖層 1
• 調整位置 → 第 170 幀插入關鍵幀（總時長）
• 屬性面板設實例名：mc

三、AS2 粒子生成程式碼

新增圖層「AS」，第 1 幀：

c = 1;

第 2 幀插入空白關鍵幀（F7），貼上：

function ee() {
    duplicateMovieClip("mc", "mc" + c, c);
    setProperty("mc" + c, _x, random(550));
    setProperty("mc" + c, _y, random(200));
    updateAfterEvent();
    c++;
    if (c > 300) {
        clearInterval(kk);
    }
}

kk = setInterval(ee, 120);  // 每 120ms 生成一顆雨滴，共 300 顆

程式碼邏輯解析

程式碼	功能
duplicateMovieClip("mc", "mc"+c, c)	複製實例 mc，新名稱 mc1/mc2...，層級遞增
setProperty(..., _x, random(550))	隨機 X 座標（舞台寬 550）
setProperty(..., _y, random(200))	隨機 Y 座標（上方 200px 範圍，雨從天降）
updateAfterEvent()	強制立即重繪，提高滑鼠/定時器回應流暢度
c > 300 清除定時器	限制總雨滴數，防記憶體洩漏/效能下降
setInterval(ee, 120)	每 120ms 執行一次 ee 函式

進階優化版（作者改良版）

• 雨滴元件內新增「水波」圖層，雨滴擊地即時產生水波（原版分離）
• 雨滴線條顏色調整：淡藍灰漸層，更有水感
• 水波擴散速度與透明度微調，視覺更自然
• 背景圖層加入遠景建築/樹木，配合視差滾動增強纵深

AS3 重寫版（現代專案）

package {
    import flash.display.*;
    import flash.events.*;
    import flash.utils.Timer;
    import flash.utils.getTimer;

    public class RainScene extends Sprite {
        private var rainDrops:Array = [];
        private var spawnTimer:Timer;
        private const MAX_DROPS:int = 300;
        private const STAGE_W:Number = 550;
        private const STAGE_H:Number = 400;

        public function RainScene() {
            spawnTimer = new Timer(120, MAX_DROPS);
            spawnTimer.addEventListener(TimerEvent.TIMER, spawnDrop);
            spawnTimer.start();
            addEventListener(Event.ENTER_FRAME, updateRain);
        }

        private function spawnDrop(e:TimerEvent):void {
            var drop:RainDropMC = new RainDropMC();  // 庫中連結類別
            drop.x = Math.random() * STAGE_W;
            drop.y = -Math.random() * 200;  // 從畫面上方外開始
            addChild(drop);
            rainDrops.push(drop);
        }

        private function updateRain(e:Event):void {
            for (var i:int = rainDrops.length - 1; i >= 0; i--) {
                var drop:RainDropMC = rainDrops[i];
                drop.y += 8 + Math.random() * 4;  // 下落速度
                drop.x += (Math.random() - 0.5) * 1.5;  // 風飄
                
                if (drop.y > STAGE_H + 50) {
                    drop.removeEventListener(Event.ENTER_FRAME, arguments.callee);
                    if (drop.parent) drop.parent.removeChild(drop);
                    rainDrops.splice(i, 1);
                }
            }
        }
    }
}

考試重點速記

1. 雨滴 MC 結構：兩層（雨滴下落 + 水波），形狀補間
2. 主場景：實例名 mc、總幀 170
3. AS 圖層：第 1 幀 c=1、第 2 幀 setInterval 迴圈
4. duplicateMovieClip 三參數：原名、新名、層級
5. random(550) 產生 0-549 隨機整數
6. clearInterval 必須配合變數儲存 ID（kk）

延伸變化

• 下雪：雨滴改白圓、減速、加左右擺動、無水波
• 櫻花飄落：花瓣 MC、旋轉縮放、地面堆疊
• 流星雨：長條粒子、高速、尾焰漸層、點擊許願
• 酸雨/彩色雨：隨機賦予色相、配合劇情