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

2016-01-29 12:17 115 1 收藏

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

【 tulaoshi.com - Flash 】

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

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

 

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

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

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

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

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

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

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

代码分析:

首先声明了一个与图片一样大的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函数。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

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];
}

来源:http://www.tulaoshi.com/n/20160129/1485411.html

延伸阅读
标签: flash教程
本例制作从左到右扫描文字的效果。文字从左到右移动并扫描背景文字,如图5-1所示。文字扫描特效是一种比较好的文字效果,可以应用在网站动画及广告图标中。本例主要应用到Flash MX中的“文本工具”按钮、图像元件属性、移动变形动画的制作技巧以及图层的使用等。 创作步骤: 第1步,启动Flash MX,按快捷键“Ctrl+J”,打开“文...
标签: FLASH flash教程
这种相册有一定立体感觉,但由于没有用到BITMAP类,而且在算法上,还有一定的问题。所以制作出来的效果,总不是很理想。让我有些头晕。或许是现在看得太多了的原故吧。呵呵...演示: http://www.taoshaw.com/taoshaw/study/qiang_xiangce/ 制作过程有点复杂。我写慢点吧。这个动画的代码其实不是很难,只是算法上有些麻烦。 1、新建一个...
标签: FLASH flash教程
本例介绍使用Flash绘制唯美渔舟唱晚效果,教程详细讲解了鼠绘唯美的夕阳山水风景画,希望能给朋友来带来帮助~~ 新建文档,数值默认。 一、新建影片剪辑元件命名,太阳。放射状填充:左FF6600,右FF9900,画一个正圆。 二、新建图形元件,名遮片,画遮片。 三、新建影片剪辑元件,命名背景。共9个图层,从上至下,云、云倒影...
标签: flash教程
[next] 提示:在新建flash文档后,为了在制作过程中移动图形的方便,可以在舞台上,鼠标右键--贴紧-- 将贴紧至对象去掉,制作过程中的对齐方式,可以运用网格,标尺(加上相应的贴紧方式),还有Ctrl+K的对齐面板,结合对齐! [next] 提示:画流线型线条,时,可用钢笔工具,也可以利用直线工具,按住Ctrl键,在直线上增加节点,通过调整,会做出比较...
标签: 电脑应用
本例为用Flash AS3.0制作时钟的实例教程,为Flash AS入门教程第八课的延伸教程,希望能给朋友们带来帮助。 AS3.0实例教程二-时钟的制作 效果: 虽然制作时钟老套了点,但它确可以较全面地应用到时间日期和间隔等知识,仍不失为较好的入门练习。 一. AS3.0时间日期简介 时间和日期主...

经验教程

495

收藏

74
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部