本教學展示如何純 AS3 代碼為圖片添加 BlurFilter（模糊）與 BevelFilter（斜角/浮雕）濾鏡，並透過 ENTER_FRAME 事件配合滑鼠 MOUSE_OVER/OUT 實現動態濾鏡參數變化，打造滑鼠懸停時模糊消退/斜角浮現的互動特效。

環境準備

• 新建文件 500×250。
• 導入兩張圖片（約 200×200），轉為影片剪輯，註冊點置中，實例名分別為 apple01、apple02。

完整代碼（附詳細註釋）

// 動畫速度常數
var blurSpeed:Number = 1;
var bevelSpeed:Number = 5;

// 事件監聽：滑鼠進入/離開
apple01.addEventListener(MouseEvent.MOUSE_OVER, mouseOverApple01);
apple02.addEventListener(MouseEvent.MOUSE_OVER, mouseOverApple02);
apple01.addEventListener(MouseEvent.MOUSE_OUT, mouseOutApple01);
apple02.addEventListener(MouseEvent.MOUSE_OUT, mouseOutApple02);

// 幀更新事件：每幀調整濾鏡參數
apple01.addEventListener(Event.ENTER_FRAME, enterFrameApple01);
apple02.addEventListener(Event.ENTER_FRAME, enterFrameApple02);

// 建立模糊濾鏡套用至 apple01
var blur:BlurFilter = new BlurFilter();
blur.blurX = 20; blur.blurY = 20;
blur.quality = BitmapFilterQuality.HIGH;
apple01.filters = [blur];

// 建立斜角濾鏡套用至 apple02
var bevelFilter:BevelFilter = new BevelFilter(
    10, 45, 0x000000, 1,   // 陰影：距離10、角度45、黑色、不透明
    0xFFFFFF, 1,           // 高光：白色、不透明
    0, 0, 0,               // 模糊 X/Y、強度（初始 0 不可見）
    BitmapFilterQuality.HIGH,
    BitmapFilterType.INNER, // 內部斜角
    false                  // 不 knockout
);
apple02.filters = [bevelFilter];

// 滑鼠狀態旗標
var mouseIsOverApple01:Boolean = false;
var mouseIsOverApple02:Boolean = false;

function mouseOverApple01(e:MouseEvent):void { mouseIsOverApple01 = true; }
function mouseOverApple02(e:MouseEvent):void { mouseIsOverApple02 = true; }
function mouseOutApple01(e:MouseEvent):void  { mouseIsOverApple01 = false; }
function mouseOutApple02(e:MouseEvent):void  { mouseIsOverApple02 = false; }

// apple01：滑鼠進入→模糊減弱（變清晰）；移出→模糊恢復至 20
function enterFrameApple01(e:Event):void {
    if (mouseIsOverApple01) {
        blur.blurX -= blurSpeed;
        blur.blurY -= blurSpeed;
    }
    if (!mouseIsOverApple01 && blur.blurX <= 20) {
        blur.blurX += blurSpeed;
        blur.blurY += blurSpeed;
    }
    // 修正邊界
    blur.blurX = Math.max(0, Math.min(20, blur.blurX));
    blur.blurY = blur.blurX;
    apple01.filters = [blur]; // 必須重新賦值陣列觸發更新
}

// apple02：滑鼠進入→斜角模糊/強度增強（浮現）；移出→淡出
function enterFrameApple02(e:Event):void {
    if (mouseIsOverApple02 && bevelFilter.blurX < 100) {
        bevelFilter.blurX += bevelSpeed;
        bevelFilter.blurY += bevelSpeed;
        bevelFilter.strength = 5; // 強度歸零時斜角不可見
    }
    if (!mouseIsOverApple02) {
        bevelFilter.blurX -= bevelSpeed;
        bevelFilter.blurY -= bevelSpeed;
    }
    if (bevelFilter.blurX <= 0) {
        bevelFilter.blurX = bevelFilter.blurY = 0;
        bevelFilter.strength = 0;
    }
    apple02.filters = [bevelFilter];
}

關鍵技術解析

1. 濾鏡即時更新機制：修改濾鏡屬性後，**必須重新賦值 filters 陣列**（即使是同一引用），否則畫面不會重繪。例：apple01.filters = [blur];。
2. BlurFilter：blurX/Y 控制模糊半徑，quality 設 HIGH 保證邊緣平滑。
3. BevelFilter 參數詳解：
   distance(10)、angle(45)、shadowColor(0x000000)、shadowAlpha(1)、highlightColor(0xFFFFFF)、highlightAlpha(1)、blurX/Y(初始0)、strength(初始0)、quality(HIGH)、type(INNER)、knockout(false)。
   → strength=0 時斜角完全不可見，避免殘留難看邊緣。
4. 狀態機模式：布林旗標 mouseIsOver... 解耦事件與幀邏輯，ENTER_FRAME 統一處理參數插值。
5. 參數邊界保護：Math.max/min 確保模糊半徑不超出 [0,20]，斜角不超出 [0,100]。

擴展靈感

• 添加 GlowFilter 發光過渡、DropShadowFilter 投影動畫。
• 結合 TweenLite/GTween 等緩動庫替換手動線性插值，獲得更自然緩動曲線。
• 應用於按鈕狀態、圖片庫預覽、UI 組件聚焦反饋等場景。