Flash教程:用AS3代碼實現濾鏡動畫效果_Flash教程
推薦:Flash入門實例鼠繪教程:風車在卡通風景畫中的畫法簡介:本例為Flash鼠繪新手入門實例系列課程,今天我們來學習在Flash中繪制美麗卡通風景畫中的風車,適合新手朋友學習,感興趣的朋友可以到論壇提交作業(yè)~~ “Flash動畫鼠繪入門班”實例課教
效果演示:(請用鼠標在畫面上點擊觀看效果)
在這個教程中,我們將添加模糊和斜角濾鏡給圖片。所有的動畫都是用 Actionscript 3.0制作。在圖片上移動你的鼠標看看效果。當你掌握了這些你將同樣能創(chuàng)建另一些濾鏡效果。好吧,打開你的flash我們開始吧。
設置環(huán)境
1. 創(chuàng)建一個新的文檔,大小為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);
//創(chuàng)建并附加模糊濾鏡給apple01
var blur:BlurFilter = new BlurFilter();
blur.blurX = 20;
blur.blurY = 20;
blur.quality = BitmapFilterQuality.HIGH;
apple01.filters = [blur];
//創(chuàng)建一個斜角濾鏡給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];
}
分享:Flash新手鼠繪教程:逼真的瓢蟲本例為Flash鼠繪新手入門系列課程第十一課,教程詳細講解了如何繪制可愛的瓢蟲,適合新手朋友學習,感興趣的朋友可以到論壇提交作業(yè)。 “Flash動畫鼠繪入門班”第十一課教材——畫瓢蟲 瓢
- 相關鏈接:
- 教程說明:
Flash教程-Flash教程:用AS3代碼實現濾鏡動畫效果
。