×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
楼主: 肥鱼

[AS] Actionscript 3 Filter Animation(滤镜动画效果)二楼附译文_[本文已收录教程库]

  [复制链接]
发表于 2008-10-28 13:36:43 | 显示全部楼层 |阅读模式


In this tutorial, we're going to apply blur and bevel filters to images. All the animation is done with Actionscript 3.0 of course. Move your mouse over to the images to see the effects. When you master these, you'll be able to create other filter effects as well. So start your Flash and let's get started.
Setting up the environment 1. Create a new document of size 500x250.
2. Import two images to the stage (about size 200x200). You can import one rectangular and one round image as I have done.
3. Convert both images into movie clips. You can name them to whatever you want. Set the registration points to the center.
4. Give them instance names of "apple01" and "apple02".
Moving into Actionscript 3 Open your actions panel and type the following.
//These are used for animating the filtersvar blurSpeed:Number = 1;var bevelSpeed:Number = 5;//Add the MOUSE_OVER listener to each appleapple01.addEventListener (MouseEvent.MOUSE_OVER, mouseOverApple01);apple02.addEventListener (MouseEvent.MOUSE_OVER, mouseOverApple02);//Add the MOUSE_OUT listener to each appleapple01.addEventListener (MouseEvent.MOUSE_OUT, mouseOutApple01);apple02.addEventListener (MouseEvent.MOUSE_OUT, mouseOutApple02);/*Add the ENTER_FRAMEs for both apples, so we can animate themin each frame.*/apple01.addEventListener (Event.ENTER_FRAME, enterFrameApple01);apple02.addEventListener (Event.ENTER_FRAME, enterFrameApple02);// Create and assign the blur filter to apple01.var blur:BlurFilter = new BlurFilter();blur.blurX = 20;blur.blurY = 20;blur.quality = BitmapFilterQuality.HIGH;apple01.filters = [blur];//Create a BevelFilter for apple02var bevelFilter:BevelFilter = new BevelFilter(10,                                   45,                                   0x000000,                                   1,                                   0xffffff,                                   1,                                   0,                                   0,                                   0,                                   BitmapFilterQuality.HIGH,                                   BitmapFilterType.INNER,                                   false);apple02.filters = [bevelFilter];//Set the default values (mouse is not over the apples)var mouseIsOverApple01:Boolean = false;var mouseIsOverApple02:Boolean = false;//This is called when mouse is over apple01function mouseOverApple01 (event:MouseEvent):void {        mouseIsOverApple01 = true;}//This is called when mouse is over apple02function mouseOverApple02 (event:MouseEvent):void {        mouseIsOverApple02 = true;}//This is called when mouse is out of apple01function mouseOutApple01 (event:MouseEvent):void {        mouseIsOverApple01 = false;}//This is called when mouse is out of apple02function mouseOutApple02 (event:MouseEvent):void {        mouseIsOverApple02 = false;}//This function animates apple01function enterFrameApple01 (event:Event):void {                //If mouse is over the apple, decrease the blur        if (mouseIsOverApple01 == true) {                blur.blurX -= blurSpeed;                blur.blurY -= blurSpeed;        }                /*         If the mouse is out of the apple,        and the blur is not over 20,        we increase the blur.        */        if (mouseIsOverApple01 == false && blur.blurX <= 20) {                blur.blurX += blurSpeed;                blur.blurY += blurSpeed;        }                /*         We need to assign the filter again since we         made changes to the blur filter.        */        apple01.filters = [blur];}//This function animates apple02function enterFrameApple02 (event:Event):void {                //If mouse is over the apple, increase the blur until we reach 100        if (mouseIsOverApple02 == true && bevelFilter.blurX < 100) {                bevelFilter.blurX += bevelSpeed;                bevelFilter.blurY += bevelSpeed;                                //We need to assign a strength to the bevel to make it visible                bevelFilter.strength = 5;        }                //If mouse is out of the apple02, decrease the blur        if (mouseIsOverApple02 == false) {                bevelFilter.blurX -= bevelSpeed;                bevelFilter.blurY -= bevelSpeed;        }                /*        If we are sure that no blur is applied,         we make the whole bevel filter invisible (strength is 0).        Otherwise we would see some ugly corners.        */        if(bevelFilter.blurX == 0) {                bevelFilter.strength = 0;        }                /*         We need to assign the filter again since we         made changes to the bevelFilter filter.        */        apple02.filters = [bevelFilter];}                You are done, test your movie! If you have any questions concerning this tutorial, please visit the forum. Have a nice day!

[ 本帖最后由 xyl7422 于 2008-11-21 10:30 编辑 ]

评分

参与人数 2金币 +6 热心度 +2 收起 理由
清风掠影 + 3 + 1 鱼鱼辛苦了
sanbos + 3 + 1 多谢鱼头

查看全部评分

发表于 2008-10-30 11:41:07 | 显示全部楼层

AS3滤镜动画

酷素材
Actionscript 3 滤镜动画
在这个教程中,我们将添加模糊和斜角滤镜给图片。所有的动画都是用 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,&nbsp;45,0x000000,1,&nbsp;0xffffff,1,0,&nbsp;0,&nbsp;0,&nbsp;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];
}
你已经完了!测试影片,如果你有什么问题,请访问论坛!快乐的一天!
  1. var blurSpeed:Number = 1;
  2. var bevelSpeed:Number = 5;
  3. appleapple01.addEventListener(MouseEvent.MOUSE_OVER,mouseOverApple01);
  4. apple02.addEventListener (MouseEvent.MOUSE_OVER, mouseOverApple02);
  5. appleapple01.addEventListener(MouseEvent.MOUSE_OUT,mouseOutApple01);
  6. apple02.addEventListener (MouseEvent.MOUSE_OUT, mouseOutApple02);
  7. apple01.addEventListener(Event.ENTER_FRAME,enterFrameApple01);
  8. apple02.addEventListener (Event.ENTER_FRAME, enterFrameApple02);
  9. var blur:BlurFilter = new BlurFilter();
  10. blur.blurX = 20;
  11. blur.blurY = 20;
  12. blur.quality = BitmapFilterQuality.HIGH;
  13. apple01.filters = [blur];
  14. var bevelFilter:BevelFilter=new BevelFilter(10, 45,0x000000,1, 0xffffff,1,0, 0, 0, BitmapFilterQuality.HIGH,BitmapFilterType.INNER,false);
  15. apple02.filters = [bevelFilter];
  16. var mouseIsOverApple01:Boolean = false;
  17. var mouseIsOverApple02:Boolean = false;
  18. function mouseOverApple01 (event:MouseEvent):void {
  19. mouseIsOverApple01 = true;
  20. }
  21. function mouseOverApple02 (event:MouseEvent):void {
  22.   mouseIsOverApple02 = true;
  23. }
  24. function mouseOutApple01 (event:MouseEvent):void {
  25. mouseIsOverApple01 = false;
  26. }
  27. function mouseOutApple02 (event:MouseEvent):void {
  28. mouseIsOverApple02 = false;
  29. }
  30. function enterFrameApple01 (event:Event):void {  
  31. if (mouseIsOverApple01 == true) {
  32. blur.blurX -= blurSpeed;
  33. blur.blurY -= blurSpeed;
  34. }
  35. if (mouseIsOverApple01 == false && blur.blurX <= 20) {
  36. blur.blurX += blurSpeed;
  37. blur.blurY += blurSpeed;
  38. }
  39. apple01.filters = [blur];
  40. }
  41. function enterFrameApple02 (event:Event):void {
  42. if (mouseIsOverApple02 == true && bevelFilter.blurX < 100) {
  43. bevelFilter.blurX += bevelSpeed;
  44. bevelFilter.blurY += bevelSpeed;
  45. bevelFilter.strength = 5;
  46. }
  47. if (mouseIsOverApple02 == false) {
  48. bevelFilter.blurX -= bevelSpeed;
  49. bevelFilter.blurY -= bevelSpeed;
  50. }
  51. if(bevelFilter.blurX == 0) {
  52. bevelFilter.strength = 0;
  53. }
  54. apple02.filters = [bevelFilter];
  55. }
复制代码

评分

参与人数 3金币 +18 热心度 +5 收起 理由
zctmh0336 + 8 + 2 小博士辛苦了
xyl7422 + 5 + 2 博士翻译教程辛苦了:)
清风掠影 + 5 + 1 小博士译文辛苦了

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2008-12-5 22:01:34 | 显示全部楼层

滤镜动画

滤镜动画

[ 本帖最后由 sanbos 于 2008-12-5 22:26 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
sanbos + 3 做得不错

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2008-12-5 22:28:04 | 显示全部楼层

3楼的作业:

回复 支持 反对

使用道具 举报

发表于 2009-4-5 23:55:13 | 显示全部楼层
酷素材
代码有两处小错,可能是写的时候疏忽。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2009-10-4 23:59:14 | 显示全部楼层
酷素材
再交一份作业

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
zctmh0336 + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-10-5 00:01:15 | 显示全部楼层
6楼朋友的作业
回复 支持 反对

使用道具 举报

发表于 2010-2-9 14:18:56 | 显示全部楼层
交作业喽

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2010-2-9 19:25:07 | 显示全部楼层
8楼朋友的作业
回复 支持 反对

使用道具 举报

发表于 2012-2-14 17:10:45 | 显示全部楼层
交作业啦

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2012-3-14 15:14:33 | 显示全部楼层
很有意思,对我们学习FLASH很有帮助。
回复 支持 反对

使用道具 举报

发表于 2012-10-29 17:07:54 | 显示全部楼层
//添加两个mc;
var a1_mc:MovieClip = new apple01();
var a2_mc:MovieClip = new apple02();
var mo_over_1:Boolean = false;
var mo_over_2:Boolean = false;
var blurSpeed:Number = 1;
var beveSpeed:Number = 5;
var blur:BlurFilter = new BlurFilter(20,20,BitmapFilterQuality.HIGH);
var befil :BevelFilter = new BevelFilter(10, 45,0x000000,1, 0xffffff,1,0, 0, 0, BitmapFilterQuality.HIGH,BitmapFilterType.INNER,false);

//A1;
a1_mc.x = 100;
a1_mc.y = 50;
a1_mc.height = 100;
a1_mc.width =100;
a1_mc.filters = [blur];
a1_mc.addEventListener(MouseEvent.MOUSE_OVER,function (Ev:Event):void {
        mo_over_1 =true;
});
a1_mc.addEventListener(Event.ENTER_FRAME,function  (Ev:Event):void {
        if (mo_over_1 == true) {
                blur.blurX -= blurSpeed;
                blur.blurY -= blurSpeed;
        }
        if (mo_over_1 == false && blur.blurX <= 20) {
                blur.blurX += blurSpeed;
                blur.blurY += blurSpeed;
        }
        a1_mc.filters = [blur];
});
a1_mc.addEventListener(MouseEvent.MOUSE_OUT,function  (Ev:Event):void {
        mo_over_1 = false;
});

//A2;
a2_mc.x = 250;
a2_mc.y = 50;
a2_mc.height = 100;
a2_mc.width =100;
a2_mc.filters = [befil];
addChild(a1_mc);
addChild(a2_mc);
a2_mc.addEventListener(MouseEvent.MOUSE_OVER,function  (Ev:Event):void {
        mo_over_2 = true;
});
a2_mc.addEventListener(MouseEvent.MOUSE_OUT,function  (Ev:Event):void {
        mo_over_2 = false;
});
a2_mc.addEventListener(Event.ENTER_FRAME,function  (Ev:Event):void {
        if (mo_over_2 == true && befil.blurX <100) {
                befil.blurX += beveSpeed;
                befil.blurY += beveSpeed;
                befil.strength = 5;
        }
        if (mo_over_2 == false) {
                befil.blurX -= beveSpeed;
                befil.blurY -= beveSpeed;
        }
        if (befil.blurX == 0) {
                befil.strength = 0;
        }
        a2_mc.filters = [befil];
});





回复 支持 反对

使用道具 举报

发表于 2013-4-9 21:23:25 | 显示全部楼层
蛮漂亮的!谢谢!
回复 支持 反对

使用道具 举报

发表于 2018-6-2 11:44:36 | 显示全部楼层
很不错。。。
回复 支持 反对

使用道具 举报

发表于 2018-6-2 11:26:59 | 显示全部楼层
顶顶多好
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则