注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

AS3.0 水纹效果  

2014-01-13 10:30:44|  分类: 【flash教程】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

在这个教程中,我们将用到置换图滤镜(DisplacementMapFilter)和BitmapData类的的杂点功能(perlinNoise),这两个家伙常常给我们带一些令人兴奋的效果,它们今天的合作为我们创造了一个漂亮的的水纹,看看下面的动画,应该还不错吧。

现在我开始来构建这个漂亮的水纹:

1. 新建一AS3.0文档,将帧频设为30,将你刚百度到的图片导入到库中,点右键,在属性面板中将“使用JPEG导入品质”前的钩钩去掉,这样做图片的体积就会大大地减小哦。

2. 新建一个影片剪辑元件,将图片拖到舞台上,设置图片的大小,你想设多大呢?反正我是按默认的550x400.图片在大小与文档大小一样大哈。点击对齐面板,相对于舞台居中对齐。

3. 回到主场景,将MC拖到舞台上,居中放置,为它设置一个实例名称,我用的是”pic”图层上锁。

4. 新插入一图层,将图片(注意是图片不是MC哈),拖到舞台上,打开对齐面板,宽高匹配,居中对齐。现在第1,2层的图像是完全重合的,请确认是这样的。选择图片,点击 修改>分离,将水面部分选出,删除。可以将第1层隐藏,看看删除后的效果。

如下图:

Flash实例教程:AS 3.0打造漂亮的水汶效果_中国教程网

5. 新建一层用来写代码,打开动作面板,输入下列代码:    

 var bmp:BitmapData = new BitmapData(550,400);
var zh:DisplacementMapFilter = new DisplacementMapFilter(bmp,new Point(0,0),1,2,10,600); 
var p1:Point = new Point(); 
var p2:Point = new Point();
var zdxg:Array = [p1,p2]; 
addEventListener(Event.ENTER_FRAME ,ld);
function ld(e:Event):void {
zdxg[0].x += 0.2;
zdxg[1].y += 0.1;
bmp.perlinNoise(168,5,2,4,true,true,2,true,zdxg);
pic.filters = [zh];
}

OK,测试影片。

代码分析:

首先声明了一个与图片一样大的BitmapData类实例bmp,用来作为置换图滤镜的参数。
var bmp:BitmapData = new BitmapData(550,400);
然后声明一个置换图滤镜zh,将bmp作为参数。
var zh:DisplacementMapFilter = new DisplacementMapFilter(bmp,new Point(0,0),1,2,10,600);
接下来声明了两个点,并将这两个点放到到一个叫zdxg的数组中,这个数组将用于bmp产生杂点的参数。
var p1:Point = new Point();
var p2:Point = new Point();
var zdxg:Array = [p1,p2];
然后,在ENTER_FRAME事件中调用ld函数。
addEventListener(Event.ENTER_FRAME ,ld);
ld函数,动态改变两个点的位置,然后使bmp应用杂点功能,在每一帧的间隔产生不同的杂点效果,使置换滤镜效果产生变化,最后让影片剪辑pic,应用滤镜,实现水汶效果。
function ld(e:Event):void {
zdxg[0].x += 0.2;
zdxg[1].y += 0.1;
bmp.perlinNoise(168,5,2,4,true,true,2,true,zdxg);
pic.filters = [zh];
}

  评论这张
 
阅读(17)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017