用AS3代碼實現濾鏡動畫效果

在這個教程中，我們將添加模糊和斜角濾鏡給圖片。所有的動畫都是用 Actionscript 3.0制作。在圖片上移動你的鼠標看看效果。當你掌握了這些你將同樣能創建另一些濾鏡效果。好吧，打開你的flash我們開始吧。

設置環境

1. 創建一個新的文檔，大小為500x250
2. 導入兩張圖片到舞台（大約200x200）。你可以象我一樣導入一張方的和一張園的圖片。
3. 將兩張圖片轉換為MC，你可以這它們取上你喜歡的名字；將注冊點移到中心。
4. 給它們取上實例名稱分別為：“apple01”和“apple02”

進入AS3打開你的動作面板輸入下面的代碼：
//使用動畫濾鏡
var blurSpeed:Number = 1;
var bevelSpeed:Number = 5;
//為兩個蘋果添加MOUSE_OVER 事件偵聽
appleapple01.addEventListener(MouseEvent.MOUSE_OVER,mouseOverApple01);
apple02.addEventListener (MouseEvent.MOUSE_OVER, mouseOverApple02);
//這兩個蘋果添加MOUSE_OUT 事件偵聽
appleapple01.addEventListener(MouseEvent.MOUSE_OUT,mouseOutApple01);
apple02.addEventListener (MouseEvent.MOUSE_OUT, mouseOutApple02);
/*為兩個蘋果添加ENTER_FRAME，這樣我們就能每隔一幀的時間繪制它們*/
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, 0xffffff,1,0, 0, 0, BitmapFilterQuality.HIGH,BitmapFilterType.INNER,false);
apple02.filters = [bevelFilter];
//設置省缺值（鼠標沒移動到蘋果上時）
var mouseIsOverApple01:Boolean = false;
var mouseIsOverApple02:Boolean = false;
//當鼠標移到apple01上時調用
function mouseOverApple01 (event:MouseEvent):void {
mouseIsOverApple01 = true;
}
//當鼠標移到apple02上時調用
function mouseOverApple02 (event:MouseEvent):void {
mouseIsOverApple02 = true;
}
//當鼠標移出apple01 時調用
function mouseOutApple01 (event:MouseEvent):void {
mouseIsOverApple01 = false;
}
//當鼠標移出apple02 時調用
function mouseOutApple02 (event:MouseEvent):void {
mouseIsOverApple02 = false;
}
//這個函數繪制apple01 的動畫
function enterFrameApple01 (event:Event):void {
//如果鼠標在蘋果上移動減少模糊
if (mouseIsOverApple01 == true) {
blur.blurX -= blurSpeed;
blur.blurY -= blurSpeed;
}
/* 如果鼠標移出蘋果,並且模糊沒超過20，我們增加模糊。*/
if (mouseIsOverApple01 == false && blur.blurX <= 20) {
blur.blurX = blurSpeed;
blur.blurY = blurSpeed;
}
/*在改變模糊濾鏡後我需要重新分配濾鏡*/
apple01.filters = [blur];
}
//這個函數繪制apple02的動畫
function enterFrameApple02 (event:Event):void {
//如果鼠標移到這個蘋果上，我們增加模糊濾鏡直到100
if (mouseIsOverApple02 == true && bevelFilter.blurX < 100) {
bevelFilter.blurX = bevelSpeed;
bevelFilter.blurY = bevelSpeed;
//我們需要分配一個力度給斜角讓它可見
bevelFilter.strength = 5;
}
//如果鼠標移出apple02, 減少模糊
if (mouseIsOverApple02 == false) {
bevelFilter.blurX -= bevelSpeed;
bevelFilter.blurY -= bevelSpeed;
}
/*如果我們確定模糊濾鏡正被使用，我們讓整個斜角不可見。(strength is 0).否則我們會看到一些難看的曲線。*/
if(bevelFilter.blurX == 0) {
bevelFilter.strength = 0;
}
/*當我們改變了斜角濾鏡時，我們需要重新分配一次濾鏡*/
apple02.filters = [bevelFilter];
}
你已經完了！測試影片，如果你有什麼問題，請訪問論壇！快樂的一天！

下面附代碼供研究var blurSpeed:Number = 1;
var bevelSpeed:Number = 5;
appleapple01.addEventListener(MouseEvent.MOUSE_OVER,mouseOverApple01);
apple02.addEventListener (MouseEvent.MOUSE_OVER, mouseOverApple02);
appleapple01.addEventListener(MouseEvent.MOUSE_OUT,mouseOutApple01);
apple02.addEventListener (MouseEvent.MOUSE_OUT, mouseOutApple02);
apple01.addEventListener(Event.ENTER_FRAME,enterFrameApple01);
apple02.addEventListener (Event.ENTER_FRAME, enterFrameApple02);
var blur:BlurFilter = new BlurFilter();
blur.blurX = 20;
blur.blurY = 20;
blur.quality = BitmapFilterQuality.HIGH;
apple01.filters = [blur];
var bevelFilter:BevelFilter=new BevelFilter(10, 45,0x000000,1, 0xffffff,1,0, 0, 0, BitmapFilterQuality.HIGH,BitmapFilterType.INNER,false);
apple02.filters = [bevelFilter];
var mouseIsOverApple01:Boolean = false;
var mouseIsOverApple02:Boolean = false;
function mouseOverApple01 (event:MouseEvent):void {
mouseIsOverApple01 = true;
}
function mouseOverApple02 (event:MouseEvent):void {
mouseIsOverApple02 = true;
}
function mouseOutApple01 (event:MouseEvent):void {
mouseIsOverApple01 = false;
}
function mouseOutApple02 (event:MouseEvent):void {
mouseIsOverApple02 = false;
}
function enterFrameApple01 (event:Event):void {
if (mouseIsOverApple01 == true) {
blur.blurX -= blurSpeed;
blur.blurY -= blurSpeed;
}
if (mouseIsOverApple01 == false && blur.blurX <= 20) {
blur.blurX = blurSpeed;
blur.blurY = blurSpeed;
}
apple01.filters = [blur];
}
function enterFrameApple02 (event:Event):void {
if (mouseIsOverApple02 == true && bevelFilter.blurX < 100) {
bevelFilter.blurX = bevelSpeed;
bevelFilter.blurY = bevelSpeed;
bevelFilter.strength = 5;
}
if (mouseIsOverApple02 == false) {
bevelFilter.blurX -= bevelSpeed;
bevelFilter.blurY -= bevelSpeed;
}
if(bevelFilter.blurX == 0) {
bevelFilter.strength = 0;
}
apple02.filters = [bevelFilter];
}