Flash教程:用AS3代碼實(shí)現(xiàn)濾鏡動(dòng)畫(huà)效果_Flash教程
推薦:Flash入門(mén)實(shí)例鼠繪教程:風(fēng)車(chē)在卡通風(fēng)景畫(huà)中的畫(huà)法簡(jiǎn)介:本例為Flash鼠繪新手入門(mén)實(shí)例系列課程,今天我們來(lái)學(xué)習(xí)在Flash中繪制美麗卡通風(fēng)景畫(huà)中的風(fēng)車(chē),適合新手朋友學(xué)習(xí),感興趣的朋友可以到論壇提交作業(yè)~~ “Flash動(dòng)畫(huà)鼠繪入門(mén)班”實(shí)例課教
效果演示:(請(qǐng)用鼠標(biāo)在畫(huà)面上點(diǎn)擊觀看效果)
在這個(gè)教程中,我們將添加模糊和斜角濾鏡給圖片。所有的動(dòng)畫(huà)都是用 Actionscript 3.0制作。在圖片上移動(dòng)你的鼠標(biāo)看看效果。當(dāng)你掌握了這些你將同樣能創(chuàng)建另一些濾鏡效果。好吧,打開(kāi)你的flash我們開(kāi)始吧。
設(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打開(kāi)你的動(dòng)作面板輸入下面的代碼:
//使用動(dòng)畫(huà)濾鏡
var blurSpeed:Number = 1;
var bevelSpeed:Number = 5;
//為兩個(gè)蘋(píng)果添加MOUSE_OVER 事件偵聽(tīng)
appleapple01.addEventListener(MouseEvent.MOUSE_OVER,mouseOverApple01);
apple02.addEventListener (MouseEvent.MOUSE_OVER, mouseOverApple02);
//這兩個(gè)蘋(píng)果添加MOUSE_OUT 事件偵聽(tīng)
appleapple01.addEventListener(MouseEvent.MOUSE_OUT,mouseOutApple01);
apple02.addEventListener (MouseEvent.MOUSE_OUT, mouseOutApple02);
/*為兩個(gè)蘋(píng)果添加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)沒(méi)移動(dòng)到蘋(pí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)畫(huà)
function enterFrameApple01 (event:Event):void {
//如果鼠標(biāo)在蘋(píng)果上移動(dòng)減少模糊
if (mouseIsOverApple01 == true) {
blur.blurX -= blurSpeed;
blur.blurY -= blurSpeed;
}
/* 如果鼠標(biāo)移出蘋(píng)果,并且模糊沒(méi)超過(guò)20,我們?cè)黾幽:?/
if (mouseIsOverApple01 == false && blur.blurX <= 20) {
blur.blurX = blurSpeed;
blur.blurY = blurSpeed;
}
/*在改變模糊濾鏡后我需要重新分配濾鏡*/
apple01.filters = [blur];
}
//這個(gè)函數(shù)繪制apple02的動(dòng)畫(huà)
function enterFrameApple02 (event:Event):void {
//如果鼠標(biāo)移到這個(gè)蘋(píng)果上,我們?cè)黾幽:秊V鏡直到100
if (mouseIsOverApple02 == true && bevelFilter.blurX < 100) {
bevelFilter.blurX = bevelSpeed;
bevelFilter.blurY = bevelSpeed;
//我們需要分配一個(gè)力度給斜角讓它可見(jiàn)
bevelFilter.strength = 5;
}
//如果鼠標(biāo)移出apple02, 減少模糊
if (mouseIsOverApple02 == false) {
bevelFilter.blurX -= bevelSpeed;
bevelFilter.blurY -= bevelSpeed;
}
/*如果我們確定模糊濾鏡正被使用,我們讓整個(gè)斜角不可見(jiàn)。(strength is 0).否則我們會(huì)看到一些難看的曲線。*/
if(bevelFilter.blurX == 0) {
bevelFilter.strength = 0;
}
/*當(dāng)我們改變了斜角濾鏡時(shí),我們需要重新分配一次濾鏡*/
apple02.filters = [bevelFilter];
}
你已經(jīng)完了!測(cè)試影片,如果你有什么問(wèn)題,請(qǐng)?jiān)L問(wè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新手鼠繪教程:逼真的瓢蟲(chóng)本例為Flash鼠繪新手入門(mén)系列課程第十一課,教程詳細(xì)講解了如何繪制可愛(ài)的瓢蟲(chóng),適合新手朋友學(xué)習(xí),感興趣的朋友可以到論壇提交作業(yè)。 “Flash動(dòng)畫(huà)鼠繪入門(mén)班”第十一課教材——畫(huà)瓢蟲(chóng) 瓢
- as中禁用ESC鍵
- AS3.0 圖片變黑白 圖片彩色變黑白代碼
- flash as3.0 跨域的解決辦法
- 模板無(wú)憂FLASH透明代碼
- Flash教你制作卡通MM眨眼睛動(dòng)畫(huà)
- Flash從零開(kāi)始學(xué)習(xí)創(chuàng)建單選按鈕
- Flash繪制小龍與花插畫(huà)場(chǎng)景
- Flash程序的測(cè)試方法
- Flash CS4文字顏色緩動(dòng)特效
- 網(wǎng)頁(yè)中演示類FLASH動(dòng)畫(huà)制作規(guī)范
- Flash CS3循環(huán)背景的運(yùn)用技巧
- Flash鼠繪技巧教你制作紅綠色的樹(shù)葉
Flash教程Rss訂閱網(wǎng)站制作教程搜索
Flash教程推薦
- 匯總知識(shí):Flash中常用的幾個(gè)JS語(yǔ)句
- Flash MX2004入門(mén)與進(jìn)階實(shí)例——?jiǎng)幼髂_本進(jìn)階(10)
- Flash實(shí)例動(dòng)畫(huà)教程:制作跟隨鼠標(biāo)的盤(pán)旋花瓣
- Flash繪圖技巧:用Flash繪制矢量蝴蝶圖形
- Flash AS教程:圖片環(huán)繞旋轉(zhuǎn)動(dòng)畫(huà)
- Flash教程:花吃蝴蝶的動(dòng)畫(huà)演示(1)
- Flash制作比較流行的樹(shù)葉伸展動(dòng)畫(huà)效果
- Flash教程:用AS實(shí)現(xiàn)右鍵菜單的最簡(jiǎn)單方法
- Flash教程:一個(gè)不錯(cuò)的緩動(dòng)導(dǎo)航
- 《銀河動(dòng)畫(huà)》鼠繪教程 (1)
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索Flash教程:用AS3代碼實(shí)現(xiàn)濾鏡動(dòng)畫(huà)效果
- 教程說(shuō)明:
Flash教程-Flash教程:用AS3代碼實(shí)現(xiàn)濾鏡動(dòng)畫(huà)效果
。