萬盛學電腦網

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

Flash 火焰跟隨滑鼠:duplicateMovieClip 粒子系統入門實作

效果演示

滑鼠移動軌跡留下閃爍、漸變透明的火焰粒子,極具動態美感。

素材準備(三個元件)

1. 圖形元件「火苗」

  • 橢圓工具無填充畫橢圓 → 選擇工具調整:一側凸弧、一側凹入。
  • 放射漸變:左色標紅橙、右色標透明 (Alpha 0%)。
  • 新層置底:橢圓工具畫圓,淡紅放射漸變 (左 Alpha 20%、右 0%),填充變形工具將中心點對準火苗底部。

2. 影片剪輯「煙」

  • 7 幀逐幀動畫:放射漸變白 (左 Alpha 20%、右 0%),形狀從小變大、上升擴散。
  • 開啟洋蔥皮,調整 7 幀位置形成上升擴散軌跡。

3. 影片剪輯「閃動的火苗」

  • 拖入「火苗」,第 2 幀關鍵幀 → 水平翻轉 (修改→變形→水平翻轉) → 形成左右搖擺。
  • 新層:黃色橢圓放射漸變 (左 Alpha 80%、右 50%) 置於火苗底部(強化核心亮度)。
  • 新層拖入「煙」元件置於火苗上方。

主場景代碼控制(AS2 風格,邏輯通用)

  1. 主場景拖入「閃動的火苗」實例,命名 `hm_mc`,_visible = false(隱藏模板)。
  2. 時間軸 3 幀循環結構:
    - **第 1 幀**:初始化變量。
    var i = 1;
    hm_mc._visible = false;
    - **第 2 幀**:核心生成邏輯。
    if (i < 7) {
        hm_mc.duplicateMovieClip("hm" + i, i); // 複製 7 個實例
        var fzhm = eval("hm" + i);
        fzhm._x = _xmouse + random(5);        // 滑鼠 X ±5 隨機
        fzhm._y = _ymouse - random(5);        // 滑鼠 Y ±5 隨機
        fzhm._alpha = random(100);            // 隨機透明度
        i++;
    } else {
        i = 1; // 重置循環
    }
    - **第 3 幀**:`gotoAndPlay(2);` 形成無限循環。

原理解析

  • duplicateMovieClip:動態克隆模板實例,賦予唯一名稱/深度。
  • 隨機偏移:`_xmouse ± random(5)` 產生自然抖動分佈。
  • 隨機透明度:`_alpha = random(100)` 模擬火焰明滅。
  • 三幀循環:第 2 幀生成、第 3 幀跳回、第 1 幀初始化,構成持續發射器。
  • **7 個實例池**循環復用,避免無限創建導致效能下降。

AS3 遷移建議

// AS3 粒子池模式
var pool:Vector. = new Vector.();
for (var i:int = 0; i < 7; i++) {
    var p:Sprite = new FlameParticle(); // 關聯類
    p.visible = false;
    pool.push(p);
    addChild(p);
}
var idx:int = 0;
addEventListener(Event.ENTER_FRAME, emit);
function emit(e:Event):void {
    var p:Sprite = pool[idx];
    p.x = mouseX + Math.random()*10 - 5;
    p.y = mouseY - Math.random()*10 - 5;
    p.alpha = Math.random();
    p.visible = true;
    p.gotoAndPlay(1); // 內部時間軸動畫
    idx = (idx + 1) % 7;
}

核心思想一致:**對象池 + 隨機屬性 + 時間軸/代碼動畫**。

copyright © 萬盛學電腦網 all rights reserved