Flash教程:用AS3代碼實(shí)現(xiàn)濾鏡動(dòng)畫效果_Flash教程
推薦:Flash入門實(shí)例鼠繪教程:風(fēng)車在卡通風(fēng)景畫中的畫法簡(jiǎn)介:本例為Flash鼠繪新手入門實(shí)例系列課程,今天我們來(lái)學(xué)習(xí)在Flash中繪制美麗卡通風(fēng)景畫中的風(fēng)車,適合新手朋友學(xué)習(xí),感興趣的朋友可以到論壇提交作業(yè)~~ “Flash動(dòng)畫鼠繪入門班”實(shí)例課教
效果演示:(請(qǐng)用鼠標(biāo)在畫面上點(diǎn)擊觀看效果)
在這個(gè)教程中,我們將添加模糊和斜角濾鏡給圖片。所有的動(dòng)畫都是用 Actionscript 3.0制作。在圖片上移動(dòng)你的鼠標(biāo)看看效果。當(dāng)你掌握了這些你將同樣能創(chuàng)建另一些濾鏡效果。好吧,打開你的flash我們開始吧。
設(shè)置環(huán)境
1. 創(chuàng)建一個(gè)新的文檔,大小為500x250
2. 導(dǎo)入兩張圖片到舞臺(tái)(大約200x200)。你可以象我一樣導(dǎo)入一張方的和一張園的圖片。
3. 將兩張圖片轉(zhuǎn)換為MC,你可以這它們?nèi)∩夏阆矚g的名字;將注冊(cè)點(diǎn)移到中心。
4. 給它們?nèi)∩蠈?shí)例名稱分別為:“apple01”和“apple02”
進(jìn)入AS3打開你的動(dòng)作面板輸入下面的代碼:
//使用動(dòng)畫濾鏡
var blurSpeed:Number = 1;
var bevelSpeed:Number = 5;
//為兩個(gè)蘋果添加MOUSE_OVER 事件偵聽
appleapple01.addEventListener(MouseEvent.MOUSE_OVER,mouseOverApple01);
apple02.addEventListener (MouseEvent.MOUSE_OVER, mouseOverApple02);
//這兩個(gè)蘋果添加MOUSE_OUT 事件偵聽
appleapple01.addEventListener(MouseEvent.MOUSE_OUT,mouseOutApple01);
apple02.addEventListener (MouseEvent.MOUSE_OUT, mouseOutApple02);
/*為兩個(gè)蘋果添加ENTER_FRAME,這樣我們就能每隔一幀的時(shí)間繪制它們*/
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)建一個(gè)斜角濾鏡給apple02
var bevelFilter:BevelFilter=new BevelFilter(10, 45,0x000000,1, 0xffffff,1,0, 0, 0, BitmapFilterQuality.HIGH,BitmapFilterType.INNER,false);
apple02.filters = [bevelFilter];
//設(shè)置省缺值(鼠標(biāo)沒移動(dòng)到蘋果上時(shí))
var mouseIsOverApple01:Boolean = false;
var mouseIsOverApple02:Boolean = false;
//當(dāng)鼠標(biāo)移到apple01上時(shí)調(diào)用
function mouseOverApple01 (event:MouseEvent):void {
mouseIsOverApple01 = true;
}
//當(dāng)鼠標(biāo)移到apple02上時(shí)調(diào)用
function mouseOverApple02 (event:MouseEvent):void {
mouseIsOverApple02 = true;
}
//當(dāng)鼠標(biāo)移出apple01 時(shí)調(diào)用
function mouseOutApple01 (event:MouseEvent):void {
mouseIsOverApple01 = false;
}
//當(dāng)鼠標(biāo)移出apple02 時(shí)調(diào)用
function mouseOutApple02 (event:MouseEvent):void {
mouseIsOverApple02 = false;
}
//這個(gè)函數(shù)繪制apple01 的動(dòng)畫
function enterFrameApple01 (event:Event):void {
//如果鼠標(biāo)在蘋果上移動(dòng)減少模糊
if (mouseIsOverApple01 == true) {
blur.blurX -= blurSpeed;
blur.blurY -= blurSpeed;
}
/* 如果鼠標(biāo)移出蘋果,并且模糊沒超過(guò)20,我們?cè)黾幽:?/
if (mouseIsOverApple01 == false && blur.blurX <= 20) {
blur.blurX = blurSpeed;
blur.blurY = blurSpeed;
}
/*在改變模糊濾鏡后我需要重新分配濾鏡*/
apple01.filters = [blur];
}
//這個(gè)函數(shù)繪制apple02的動(dòng)畫
function enterFrameApple02 (event:Event):void {
//如果鼠標(biāo)移到這個(gè)蘋果上,我們?cè)黾幽:秊V鏡直到100
if (mouseIsOverApple02 == true && bevelFilter.blurX < 100) {
bevelFilter.blurX = bevelSpeed;
bevelFilter.blurY = bevelSpeed;
//我們需要分配一個(gè)力度給斜角讓它可見
bevelFilter.strength = 5;
}
//如果鼠標(biāo)移出apple02, 減少模糊
if (mouseIsOverApple02 == false) {
bevelFilter.blurX -= bevelSpeed;
bevelFilter.blurY -= bevelSpeed;
}
/*如果我們確定模糊濾鏡正被使用,我們讓整個(gè)斜角不可見。(strength is 0).否則我們會(huì)看到一些難看的曲線。*/
if(bevelFilter.blurX == 0) {
bevelFilter.strength = 0;
}
/*當(dāng)我們改變了斜角濾鏡時(shí),我們需要重新分配一次濾鏡*/
apple02.filters = [bevelFilter];
}
你已經(jīng)完了!測(cè)試影片,如果你有什么問題,請(qǐng)?jiān)L問論壇!快樂的一天!
下面附代碼供研究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鼠繪新手入門系列課程第十一課,教程詳細(xì)講解了如何繪制可愛的瓢蟲,適合新手朋友學(xué)習(xí),感興趣的朋友可以到論壇提交作業(yè)。 “Flash動(dòng)畫鼠繪入門班”第十一課教材——畫瓢蟲 瓢
Flash教程Rss訂閱網(wǎng)站制作教程搜索
Flash教程推薦
- 匯總知識(shí):Flash中常用的幾個(gè)JS語(yǔ)句
- Flash MX2004入門與進(jìn)階實(shí)例——?jiǎng)幼髂_本進(jìn)階(10)
- Flash實(shí)例動(dòng)畫教程:制作跟隨鼠標(biāo)的盤旋花瓣
- Flash繪圖技巧:用Flash繪制矢量蝴蝶圖形
- Flash AS教程:圖片環(huán)繞旋轉(zhuǎn)動(dòng)畫
- Flash教程:花吃蝴蝶的動(dòng)畫演示(1)
- Flash制作比較流行的樹葉伸展動(dòng)畫效果
- Flash教程:用AS實(shí)現(xiàn)右鍵菜單的最簡(jiǎn)單方法
- Flash教程:一個(gè)不錯(cuò)的緩動(dòng)導(dǎo)航
- 《銀河動(dòng)畫》鼠繪教程 (1)
- 相關(guān)鏈接:
- 教程說(shuō)明:
Flash教程-Flash教程:用AS3代碼實(shí)現(xiàn)濾鏡動(dòng)畫效果
。