萬盛學電腦網

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

Flash 經典特效:ActionScript 打造漫天飛雪視覺效果

透過 AS 複製單一雪花影片剪輯並隨機化位置、大小、下落速度,以極少代碼實現大雪紛飛的逼真效果,展示「程式化動畫」的高效與靈活。

製作步驟

1. 建立雪花元件

  • 新建文件:450×180px,背景 #00105A(深藍夜空),18 fps。
  • Ctrl+F8 新增圖形元件 雪片:橢圓工具按 Shift 畫 5px 白圓,微調形狀似雪花。
  • 新增影片剪輯 雪花運動:將 雪片 拖入,添加引導層畫曲線路徑,第 1 幀與第 40 幀雪片吸附曲線兩端,第 20 幀吸附中點,建立補間動畫形成左右擺動飛落路徑。

2. 主場景佈局

  • 回場景 1,拖入 雪花運動 實例命名 雪花,第 3 幀 F5 延長。
  • 新增 腳本 圖層,第 1、2、3 幀分別按 F7 插入空白關鍵幀。

3. 三幀循環邏輯代碼

第 1 幀:初始化

n = 1;
flakes = 100;          // 雪花總數(密度)
雪花._visible = false; // 隱藏母本

第 2 幀:主迴圈——移動現有雪花 + 複製新雪花

i = 1;
while (i <= flakes) {
    // 現有雪花下落
    this["雪花" + i]._y += Math.random() * 2 + 2; // 速度 2-4 px/幀
    i++;
}

if (n == flakes) {
    n = 1; // 重置計數器
} else {
    ssize = Math.random() * 50 + 30; // 隨機縮放 30%-80%
    duplicateMovieClip("雪花", "雪花" + n, n); // 複製新雪花
    this["雪花" + n]._x = Math.random() * 500; // 隨機水平位置
    this["雪花" + n]._xscale = ssize;
    this["雪花" + n]._yscale = ssize;
    n++;
}

第 3 幀:循環回第 2 幀

gotoAndPlay(2);

4. 原理解析

  • 三幀循環:第 2 幀執行邏輯,第 3 幀跳回第 2 幀,形成每幀執行一次的遊戲迴圈。
  • duplicateMovieClip 動態建立實例,深度 n 避免重疊覆蓋。
  • this["雪花"+i] 動態存取實例,控制每片雪花獨立屬性。
  • 隨機化 _x、_xscale/_yscale、下落速度,營造自然亂數感。

5. 效能優化建議

  • 雪花數量 flakes 視裝置效能調整(手機建議 50-80)。
  • 可改用 cacheAsBitmap = true 加速渲染。
  • AS3 版本建議改用 Array 管理粒子、Event.ENTER_FRAME 驅動、對象池復用實例。

此經典範例展示了 Flash 早期「程式碼動畫」的核心思想:以極少資源創造豐富視覺複雜度。

copyright © 萬盛學電腦網 all rights reserved