每個人都要會的Actionscript Tweener(三)-Filter(濾鏡)效果

在上一篇 每個人都要會的Actionscript Tweener(二)-影片連續動作 中已經可以經由Tweener來控制影片的連續移動，但這樣的移動效果雖然不錯，但其實在做動畫中都會再做的更精細一點，像加上移動會有模糊效果或光暈陰影等。

所以接下我們來使用Tweener Filter(濾鏡)的功能

底下是Tweener Filter常用的濾鏡效果

//斜角濾鏡
BevelFilter
_Bevel_angle:角度
_Bevel_blurX:x軸
_Bevel_blurY:y軸
_Bevel_distance:距離
_Bevel_type:類型

//模糊濾鏡
BlurFilter
_Blur_blurX:x模糊
_Blur_blurY:y模糊

//陰影濾鏡
DropShadowFilter
_DropShadow_alpha:透明度
_DropShadow_angle:角度
_DropShadow_blurX:x軸
_DropShadow_blurY:y軸
_DropShadow_color:顏色
_DropShadow_distance:距離

//光暈濾鏡
GlowFilter
_Glow_alpha
_Glow_blurX
_Glow_blurY
_Glow_color
_Glow_knockout:去底色
_Glow_inner:內光暈

//漸層斜角濾鏡
Gradient Bevel Filter

///漸層光暈濾鏡
GradientGlowFilter

上面列出的是常用的濾鏡效果，需要更詳細的介紹可以參考 Tweener Documentation

下面的範例是用這幾種濾鏡做出來的效果


code1:

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts; //濾鏡class

//使用濾鏡初始化
FilterShortcuts.init();

Tweener.addTween( a_mc, {_Bevel_angle:45,
                          _Bevel_blurX:5,
                         _Bevel_blurY:5,
                         _Bevel_distance:5,
                         time:0
                         });

Tweener.addTween( b_mc, {_Blur_blurX:60,
                          _Blur_blurY:60,
                         time:0
                         });

Tweener.addTween( c_mc, {_DropShadow_alpha:80,
                         _DropShadow_angle:60,
                         _DropShadow_blurX:5,
                         _DropShadow_blurY:5,
                         _DropShadow_distance:10,
                         _DropShadow_color:"0xcccccc",
                         time:0
                         });

Tweener.addTween( d_mc, {_Glow_alpha:80,
                         _Glow_blurX:30,
                         _Glow_blurY:30,
                         _Glow_color:"0xff0000",
                         _Glow_knockout:false,
                         _Glow_inner:false,
                         time:0
                         });

接下來我們就把模糊的效果套上影片的連續動作中


code2:

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;

FilterShortcuts.init();

/**
 * motinXY:連續動作的作標
 * currentMotion:目前的作標位置
 * @author Jim
 */
var motionXY:Array = [[400, 200], [400,50], [100, 300], [80, 80]];
var currentMotion:int = 0;

/**
 * 完成動作後呼叫的function 
 */
function onCom():void
{
    currentMotion++;
    
    //跑完要回到第一個
    if( currentMotion >= motionXY.length ){
        currentMotion = 0;
    }
    
    var X:int = motionXY[currentMotion][0];
    var Y:int = motionXY[currentMotion][1];
    Tweener.addTween(a_mc, {_Blur_blurX:0,_Blur_blurY:0,time:0});
    Tweener.addTween(a_mc, {x:X, 
                             y:Y,
                            _Blur_blurX:30,
                            _Blur_blurY:30,
                            transition:"easeInExpo",
                            time:1, onComplete:onCom});
}

//開始動作
Tweener.addTween(a_mc, {x:motionXY[currentMotion][0], 
                         y:motionXY[currentMotion][1], 
                        _Blur_blurX:30,
                        _Blur_blurY:30,
                        transition:"easeInExpo",//加上transition效果看更真實
                        time:1,
                        onComplete:onCom});

Source Download