本教程展示一個巧妙的「偽 3D」技法：利用 Photoshop 預處理圖層分離（杯體、牛奶液面），在 Flash 中通過遮罩層限制顯示區域配合形狀補間動畫液面變形，極低成本實現牛奶在杯中隨搖晃流動的逼真效果。無需複雜物理引擎，純時間軸動畫即可完成。

效果預覽

核心思路：PS 分層 + Flash 遮罩 + 形狀補間

1. PS 預處理：將杯子圖片分離為「杯體外殼」(含高光/陰影/透明玻璃質感)與「牛奶液面」兩層，均導出透明背景 PNG。
2. Flash 遮罩：杯體外殼作為遮罩層，限制牛奶液面只在杯口區域顯示。
3. 形狀補間：牛奶液面元件內部做形狀補間，模擬搖晃時液面傾斜、波動、貼邊效果。
4. 整體補間：將「杯體+遮罩+液面」組合為一元件，主時間軸做旋轉/位移補間模擬搖晃。

詳細制作步驟

階段 1：Photoshop 圖層分離（關鍵前置）

1. 尋找高清玻璃杯素材圖片。
2. 降低對比度/明度，增強玻璃通透感。
3. 抠圖：提取杯子輪廓，去除背景。
4. 用蒙版工具「挖空」杯子內部，得到只有杯壁/杯底/高光/陰影的透明 PNG（杯體外殼）。
5. 新建圖層，用漸變工具拉出牛奶液面效果（白/淡黃漸變，模擬液體厚度），導出牛奶液面 PNG。
6. 保存兩張 PNG：cup_shell.png（有杯無奶）、milk_surface.png（純液面橢圓漸變）。

階段 2：Flash 組裝與遮罩設置

1. 導入兩張 PNG 到庫。
2. Ctrl+F8 新建影片剪輯「milkCup」，內建三層（自下而上）：
   • 第 1 層（底層）：放置 cup_shell.png（無奶狀態底圖）。
   • 第 2 層（中層）：放置 milk_surface.png 實例（命名 milk_mc），轉換為影片剪輯以便內部做形狀補間。
   • 第 3 層（頂層/遮罩層）：再放一份 cup_shell.png，與底層完美對齊。
3. 設置遮罩：右鍵第 3 層 → 選擇「遮罩」。第 2 層自動成為被遮罩層（圖標縮進）。現在牛奶液面只會在杯口透明區域顯示，完美貼合杯壁內緣。

階段 3：液面動態形狀補間

1. 雙擊第 2 層 milk_mc 進入編輯模式。
2. 新建元件「milkSurfaceAnim」（圖形或影片剪輯），繪製液面變形序列：
   • 第 1 幀：水平橢圓（靜止液面）。
   • 第 5 幀：左高右低傾斜橢圓（向左傾斜）。
   • 第 10 幀：右高左低傾斜橢圓（向右傾斜）。
   • 第 15 幀：帶波浪邊緣的橢圓（劇烈晃動）。
   • 第 20 幀：回到水平橢圓。
3. 各關鍵幀間添加形狀補間（Shape Tween），調整 Ease 緩動。
4. 將「milkSurfaceAnim」實例放入 milk_mc 內部時間軸循環播放。

階段 4：主時間軸搖晃動畫

1. 回到主場景，拖入「milkCup」實例置中。
2. 第 1 幀到第 60 幀（或更長）添加經典補間，設置關鍵幀旋轉角度：-15° → +15° → -10° → +10° → 0°，模擬手搖晃動的阻尼衰減過程。
3. 同步添加位移補間：略微左右/上下位移，增強真實感。
4. 可在「milkCup」元件內部，讓液面動畫播放速度隨搖晃幅度變化（AS3 控制或多個動畫片段交換）。

技術要點深度解析

為什麼要「杯體外殼」雙層（底層+遮罩層）？

• 底層：提供杯子靜態外觀（玻璃質感、高光、陰影、厚度感）。
• 遮罩層：只保留杯口內部透明區域，其餘不透明區域遮擋液面。由於遮罩層與底層圖像完全一致，視覺上杯子完整，液面卻被精確限制在杯內。
• 若只用單層遮罩，杯子外觀（高光/陰影）會被遮罩邏輯破壞（遮罩層只看 Alpha 通道）。雙層方案完美分離「顯示」與「裁剪」職責。

形狀補間 vs 經典補間 選擇指南

特性	形狀補間	經典補間
適用對象	繪圖對象/合併繪圖模式形狀	元件實例 (MovieClip/Graphic/Button)
變形能力	任意頂點級變形（液面波動、變形）	剛體變換（位移/旋轉/縮放/傾斜/顏色）
本案例用途	液面內部形狀變化	杯子整體搖晃、液面元件整體移動

進階擴展

• 真實流體模擬：在液面元件內部用 AS3 實現簡易 2D 流體（如基於位置動力學 PDE），每幀繪製 Graphics 替代形狀補間。
• 加入氣泡：液面元件內層疊加細小圓形元件，隨機上浮、縮放、Alpha 衰減補間。
• 杯壁凝結水珠：底層杯體外殼上層疊加水珠元件，隨搖晃位移（需預製多角度水珠分佈圖）。
• 互動控制：滑鼠拖拽/手機重力感應控制杯子傾斜角度，液面即時響應（需 AS3 實時計算液面幾何）。

常見問題

問題	原因	解決
液面超出杯口顯示	遮罩層未正確設置、或遮罩層圖形未覆蓋杯口區域	確認頂層為遮罩層、中層被遮罩、遮罩層圖形杯口區域 Alpha=0
形狀補間失效/提示「不能對象」	對象未打散為繪圖對象、或包含群組/元件	進入元件編輯模式，全選 → Ctrl+B 打散至繪圖對象
液面顏色異常/漸變消失	遮罩層影響了填充顏色渲染	確保遮罩層僅包含純 Alpha 遮罩形狀，無顏色填充
搖晃動畫機械感強	關鍵幀角度/時間間距均勻	參考阻尼振動曲線設置關鍵幀：幅度遞減、頻率不變、相位自然

總結

「PS 分層導出 PNG → Flash 遮罩雙層結構 → 液面形狀補間 → 整體經典補間」這套組合拳，用純時間軸動畫以極低成本實現了極具說服力的流體動態效果。其核心洞見是：將「容器外觀」與「內容物動態」解耦，用遮罩實現空間約束，用形狀補間實現形態演化。此模式可直接遷移至「水壺倒水」、「試管振蕩」、「油箱燃料晃動」等所有容器流體場景，是 Flash/Animate 2D 動畫模擬 3D 物理效果的經典範式。