×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
软件安装教程 远程服务 超值!手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 20657|回复: 73

[AS] AS3.0实例教程五-漂亮的水汶[原创][本文已收录教程库]

  [复制链接]
发表于 2009-4-18 18:49:34 | 显示全部楼层 |阅读模式
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 = 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函数。
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];
}

[ 本帖最后由 sanbos 于 2009-4-18 18:52 编辑 ]
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=241956
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

本帖子中包含更多资源

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

x

评分

参与人数 3金币 +9 威望 +1 热心度 +2 收起 理由
张文烈 + 1 赞一个!
祁连山 + 1 感谢教程,支持一下。
xyl7422 + 8 + 2 对论坛做出贡献

查看全部评分

发表于 2009-4-18 19:02:27 | 显示全部楼层
酷素材
不错,教程收下。
回复 支持 反对

使用道具 举报

发表于 2009-4-19 00:06:15 | 显示全部楼层
不知道这个代码还可以改吗?
打开这个页面,电脑有点发卡。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-4-19 00:39:20 | 显示全部楼层

回复 地板 sunshijiu 的帖子

滤镜和杂点的参数都可以调整,调整后可能会出现不同的效是果。随机种子数越多,效果越细,但更耗资源。你可以试试。
回复 支持 反对

使用道具 举报

发表于 2009-4-19 00:48:33 | 显示全部楼层
酷素材
打开这个网页,明显地卡。
如果再把本机的打开,就卡得厉害!幸好我的电脑配置还算可以!
回复 支持 反对

使用道具 举报

发表于 2009-4-20 10:26:32 | 显示全部楼层
酷素材
作业:


[ 本帖最后由 zctmh0336 于 2009-4-20 18:41 编辑 ]

本帖子中包含更多资源

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

x

评分

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

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-4-20 19:00:03 | 显示全部楼层
好教程,学做一幅

本帖子中包含更多资源

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

x

评分

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

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-4-25 23:32:50 | 显示全部楼层
没做出效果,没看明白
回复 支持 反对

使用道具 举报

发表于 2009-5-3 11:25:05 | 显示全部楼层
本帖最后由 sanbos 于 2009-5-3 13:05 编辑

练习

本帖子中包含更多资源

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

x

评分

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

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-5-3 23:01:19 | 显示全部楼层
太卡了,卡得我是掉了好几次!
回复 支持 反对

使用道具 举报

发表于 2009-6-18 00:52:53 | 显示全部楼层
为什么老是出错,请老师指点。
场景=场景 1, 图层=图层 3, 帧=1: 第 11 行: 需要 '{'
     function ld(e:Event):void {

场景=场景 1, 图层=图层 3, 帧=1: 第 16 行: 遇到意外的 '}'
     }
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-18 00:57:32 | 显示全部楼层
12# 山雨润心

你对照一下,括号的数量不对。
回复 支持 反对

使用道具 举报

发表于 2009-6-19 10:45:01 | 显示全部楼层
谢谢,今天一定把作业交了
回复 支持 反对

使用道具 举报

发表于 2009-6-19 23:15:01 | 显示全部楼层
本帖最后由 山雨润心 于 2009-6-19 23:17 编辑

我用的是flash mx
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];
}
还是报错:
场景=场景 1, 图层=图层 3, 帧=1: 第 7行: 需要 '{'
     function ld(e:Event):void {

场景=场景 1, 图层=图层 3, 帧=1: 第 12 行: 遇到意外的 '}'
     },
请问怎么改?谢谢!
回复 支持 反对

使用道具 举报

发表于 2009-7-17 18:32:59 | 显示全部楼层
您好,很好的一个实例教程。
但我有一个问题。我按每个步骤都做了,最后却有个错误提示
Location               Scene 1, layer 3', Frame 1, Line 11   
Description           1120:Access of undefined property pic.
Source                  pic.filters=[zh];

麻烦您帮我看一下,谢谢 ^^
回复 支持 反对

使用道具 举报

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

本版积分规则

2345