Flash AS3.0如何打造漂亮的水纹动画效果

【Flash AS3.0如何打造漂亮的水纹动画效果】本教程是向大家介绍利用Flash AS3.0打造漂亮的水纹GIF动画效果,教程很不错,讲解的也很详细,很值得学习,喜欢的朋友可以过来学习一下!
在这个Flash AS3.0实例教程中,将用到置换图滤镜(DisplacementMapFilter)和BitmapData类的的杂点功能(perlinNoise) , 这两个家伙常常给我们带一些令人兴奋的效果,它们的合作为大家创造了一个漂亮的的水汶 , 看看下面的动画,应该还不错吧 。
现在来构建这个漂亮的水纹:
既然是水纹,想首先要找一张含水的图片吧,河道 , 湖泊,水池 , 喜欢就行 。
1、新建一AS3.0文档,将帧频设为30 , 将图片导入到库中,点右键,在属性面板中将使用JPEG导入品质前的钩钩去掉,这样做图片的体积就会大大地减小哦 。
2、新建一个影片剪辑元件,将图片拖到舞台上,设置图片的大小 , 你想设多大呢?反正我是按默认的550x400 。图片在大小与文档大小一样大 。点击对齐面板,相对于舞台居中对齐 。
3、回到主场景,将MC拖到舞台上,居中放置,为它设置一个实例名称,我用的是pic图层上锁 。
4、新插入一图层,将图片(注意是图片不是MC),拖到舞台上,打开对齐面板,宽高匹配,居中对齐 。现在第1 , 2层的图像是完全重合的 , 请确认是这样的 。选择图片 , 点击 修改分离,将水面部分选出,删除 。可以将第1层隐藏,看看删除后的效果 。
如下图:
5、新建一层用来写代码,打开动作面板 , 输入下列代码:
复制代码
代码如下:
1. var bmp:BitmapData = https://www.wannianli8.com/arc4281719/new BitmapData(550,400);
2. var zh:DisplacementMapFilter = new DisplacementMapFilter(bmp,new Point(0,0),1,2,10,600);
3. var p1:Point = new Point();
4. var p2:Point = new Point();
5. var zdxg:Array = [p1,p2];
6. addEventListener(Event.ENTER_FRAME ,ld);
7. function ld(e:Event):void {
8. zdxg[0].x += 0.2;
9. zdxg[1].y += 0.1;
10. bmp.perlinNoise(168,5,2,4,true,true,2,true,zdxg);
11. pic.filters = [zh];
12. }
OK , 测试影片,一个漂亮的水汶效果立即出现在你的眼前 。
代码分析:
首先声明了一个与图片一样大的BitmapData类实例bmp,用来作为置换图滤镜的参数 。
var bmp:BitmapData = https://www.wannianli8.com/arc4281719/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];
}

Flash AS3.0如何打造漂亮的水纹动画效果的详细内容就为您分享到这里,【精彩生活】jing111.com小编为您精选以下内容,希望对您有所帮助: