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

呼市初三毕业生

呼市初三毕业生

2016-01-29 12:17

Flash实例教程:AS 3.0打造漂亮的水汶效果,本文由中国 sanbos 原创,转载请保留此信息! 本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请点击这里,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢 ...

本文由中国 sanbos 原创,转载请保留此信息!  

本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请点击这里,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临!

 

AS3.0 实例教程之水汶效果

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

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

既然是水纹,我想首先要找一张含水的图片吧,百度一下吧,河道,湖泊,水池,你喜欢就行。

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

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/fjc/)

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

如下图:

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

1. var bmp:BitmapData = 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,测试影片,一个漂亮的水汶效果立即出现在你的眼前。

代码分析:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/fjc/)

首先声明了一个与图片一样大的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];
}

展开更多 50%)
分享

猜你喜欢

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

flash教程
Flash实例教程:AS 3.0打造漂亮的水汶效果

Flash AS 3.0实例教程:Main类打造发散效果

flash教程
Flash AS 3.0实例教程:Main类打造发散效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Flash实例教程:AS3.0实现逼真喷泉效果

flash教程
Flash实例教程:AS3.0实现逼真喷泉效果

Flash AS3.0实例教程:Tweener应用实现堆放的照片效果

flash教程
Flash AS3.0实例教程:Tweener应用实现堆放的照片效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Flash教程:AS3.0实例之打字效果

flash教程
Flash教程:AS3.0实例之打字效果

Flash实例教程:模拟海底世界-Flash实例教程

FLASH flash教程
Flash实例教程:模拟海底世界-Flash实例教程

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

PSV《闪之轨迹2》深渊之魔女与黑兔技能演示视频

PSV《闪之轨迹2》深渊之魔女与黑兔技能演示视频

Java Servlet和JSP教程

Java Servlet和JSP教程
下拉加载更多内容 ↓