效果描述

畫面初始模糊，隨著時間逐漸變清晰，極具視覺衝擊，常用於片頭、場景轉場、聚焦敘事。

核心原理

準備兩張同尺寸圖片：
1. **清晰圖** — 底層。
2. **模糊圖** — 中層（PS 高斯模糊製成），轉為 MovieClip，實例名 `blurred`。
3. **AS 層** — 最上層，控制 `blurred` 的色彩變換，將 alpha 通道從不透明漸變至透明，實現「模糊蓋住清晰 → 模糊消失露出清晰」。

實作步驟

1. 導入兩張圖，建立三層：底層「清晰」、中層「模糊」、頂層「AS」。
2. 選中模糊圖 → F8 轉為 MovieClip → 屬性面板實例名輸入 `blurred`。
   
3. 「AS」層第 1 幀按 F9 打開動作面板，輸入：
   

   var myColor:Color = new Color(blurred);
   var white:Object = {ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:255};
   myColor.setTransform(white);
   setc();
   
   function setc(){
       onEnterFrame = function(){
           white.rb -= 5;
           white.gb -= 5;
           white.bb -= 5;
           white.ab -= 5;
           myColor.setTransform(white);
       }
   }

4. Ctrl+Enter 測試：模糊圖逐幀透明化，清晰圖浮現。

代碼解析

• `Color` 類（AS2）控制 MovieClip 色彩變換，`setTransform` 接收包含 `ra/rb/ga/gb/ba/bb/aa/ab` 的對象（紅/綠/藍/Alpha 的乘數/加數）。
• 初始 `white` 設置：所有通道乘數 100%、加數 255（白色化、完全不透明）。
• `onEnterFrame` 每幀遞減 `rb/gb/bb/ab`（各通道加數），使模糊圖顏色向透明過渡，`ab` 控制 Alpha 通道加數，從 255 降至 0 即完成淡出。
• 步長 5 控制速度，可改為基於時間的插值更平滑。

AS3 遷移提示

// AS3 使用 ColorTransform
var ct:ColorTransform = blurred.transform.colorTransform;
ct.redOffset = ct.greenOffset = ct.blueOffset = 255;
ct.alphaOffset = 255;
blurred.transform.colorTransform = ct;

addEventListener(Event.ENTER_FRAME, fade);
function fade(e:Event):void {
    ct.alphaOffset -= 5;
    if (ct.alphaOffset <= 0) { ct.alphaOffset = 0; removeEventListener(Event.ENTER_FRAME, fade); }
    blurred.transform.colorTransform = ct;
}

擴展應用

• 反向操作：清晰 → 模糊（`alphaOffset` 從 0 增至 255）。
• 配合 `BlurFilter` 動態模糊半徑，實現「聚焦/散焦」電影級轉場。
• 應用於圖片畫廊懸停放大、地圖區域高亮等交互。