萬盛學電腦網

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

Flash 卷軸動畫製作實戰:模糊濾鏡、遮罩與形狀補間打造書法展卷效果

效果預覽

畫卷從右向左緩緩展開,前景清晰、背景虛化,邊緣有光影過渡,極具中國書法展卷儀式感。核心技術:**模糊濾鏡景深**、**形狀補間展開**、**遮罩限制顯示範圍**、**漸層疊加光影**。

圖層架構總覽(6 圖層,自上而下)

圖層名稱內容關鍵技術
6光影疊加白色漸層矩形(透明度 0%→44%→0%→33%→0%)形狀補間移動 + 遮罩
5光影遮罩矩形遮罩區塊遮罩層,限制光影範圍
4背面畫卷畫卷翻轉複製,透明度 40%→100%水平翻轉、對稱定位、透明度動畫
3展開遮罩舞台大小矩形 X:0→550形狀補間控制可視寬度
2背景虛化畫卷 + 模糊濾鏡 (15px)模糊濾鏡 + 靜態
1前景清晰畫卷原圖靜態基準層

詳細製作步驟

步驟 1:前景基準層

  • 新建文件,匯入書法圖片到第 1 幀
  • 調整大小 → F8 轉「影片剪輯」(為了加濾鏡)
  • 第 90 幀插入一般幀(F5),總長 90 幀 ≈ 3.75 秒@24fps

步驟 2:背景虛化層(景深感)

  • 新圖層 2,複製圖層 1 第 1 幀貼上(Ctrl+C → Ctrl+Shift+V 原位貼上)
  • 選中實例 → 濾鏡面板 → 新增「模糊」→ X/Y 設 15(視解析度調整)
  • 第 90 幀插入一般幀

步驟 3:展開遮罩層(控制顯示寬度)

  • 新圖層 3,矩形工具畫舞台等大矩形 (550×400),位置 (0,0)
  • 第 90 幀插入關鍵幀(F6),X 改為 550(右移出舞台)
  • 1→90 幀建立形狀補間
  • 效果:矩形從左向右「推開」,露出下層畫卷

步驟 4:背面畫卷(立體厚度感)

  • 新圖層 4,複製圖層 1 第 1 幀貼上
  • 第 90 幀插入關鍵幀
  • 第 1 幀:選中實例 → 修改 → 變形 → 水平翻轉 → 以卷軸左側為軸對稱
  • 第 90 幀:同樣以紅線(卷軸中心線)對稱
  • 第 1、90 幀透明度先設 40%(方便對齊),對齊後改回 100%

步驟 5:光影漸層與遮罩(邊緣過渡)

  • 新圖層 5,矩形工具:無邊框、線性漸層填充
    • 色標 1:白、Alpha 0%
    • 色標 2:白、Alpha 44%
    • 色標 3:白、Alpha 0%
    • 色標 4:白、Alpha 33%
    • 色標 5:白、Alpha 0%
  • 畫矩形:寬=卷軸寬、高=舞台高、位置 (0,0)
  • 第 90 幀關鍵幀,X=550,形狀補間(同步展開)

步驟 6:光影遮罩(限制光影範圍)

  • 新圖層 6,複製圖層 5 所有幀(右鍵「複製幀」→ 圖層 6 第 1 幀「貼上幀」)
  • 回圖層 5,右鍵圖層名 → 「遮罩」
  • 圖層 6 成為遮罩層,限制光影只在卷軸寬度內顯示

步驟 7:最終調整

  • 關閉圖層 2、3、5、6(只開 1、4)
  • 檢查圖層 1、4 邊緣對齊、透明度 100%
  • Ctrl+Enter 測試完整動畫

關鍵技術點解析

模糊濾鏡產生景深

前景清晰、背景模糊,模擬真實鏡頭景深,畫卷更有厚度感。濾鏡數值視圖片解析度:72dpi 建議 10-20px,300dpi 建議 30-50px。

形狀補間控制展開

矩形 X:0→550 的形狀補間,比動作補間更自然——邊緣是「推開」而非「平移」,符合卷軸物理展開邏輯。

背面翻轉對稱

水平翻轉 + 以左緣對稱,模擬卷軸背面文字反向書寫。透明度 100% 但疊加在模糊背景上,產生「紙張半透光」質感。

多層漸層疊加光影

5 個色標的複雜漸層:模擬卷軸邊緣卷曲的高光、陰影、反光交替,隨展開動態變化,極大提升真實感。

延伸應用

  • 古籍翻頁:雙頁對稱、中間縫線、頁碼動態
  • 捲軸地圖:地圖內容隨展開顯示、路徑動畫同步
  • 時間軸卷軸:歷史事件按時間順序展開
  • 互動控制:AS 拖曳控制展開進度、點擊跳轉章節

常見問題

  1. 展開不順暢:檢查形狀補間是否套用在「形狀」而非「群組/元件」
  2. 背面對齊偏移:參考「卷軸左緣」而非舞台左緣做對稱
  3. 光影超出範圍:確認遮罩層(圖層 6)確實遮罩圖層 5
  4. 匯出視訊截斷:主場景幀數 ≥ 90 幀,MC 設為「圖形」行為
copyright © 萬盛學電腦網 all rights reserved