ddc
联网
平面设计 画册 VI欣赏 包装 CG-插画 搜索 个人网页 Alexa排名 CSS 建站资源 下载专区 JS特效 品牌服装 服装院校 专题欣赏 SEO 图标欣赏 专题
上海网站建设 网站建设 域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg ACG玩家 品牌设计
求创科技
网站建设
中国互联
投稿
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> Flash >> 水的形成思路和方法

水的形成思路和方法

来源:中国设计秀    作者:holybozo    点击:140     加入收藏    发表评论
0
顶一下
很多朋友对水的效果情有独钟,水的形成其实是因为光在波面上形成折射,使看上去水波的地方产生了偏移,这里有篇不错的教程讲如何实现水波和折射,不过可能比较难,因为牵涉到很多数学,物理和计算机图形的知识.
而且上面的教程真的要在flash里面实现,也是不可能的,大家都知道flash的执行效率,^^,不过flash8里面支持了滤镜和位图,所以可以抛开数学建模,直接使用滤镜来模拟.
用flash实现水的效果,方法很多,我这里提供一个比较简单的方法和思路,因为本人比较懒,图文兼备就免了,代码+注释,大家仔细看看,不懂的地方再一起讨论,我也是新接触flash8,还有不对的地方,高手多多指出,OK.Go


import flash.display.BitmapData;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.filters.DisplacementMapFilter;
//
// 加载位图元素
var image:BitmapData = BitmapData.loadBitmap("image");
// 取得位图元素的宽和高
var W:Number = image.width;
var H:Number = image.height;
// 设置原点为(0,0)
var origin:Point = new Point();
// 设置范围是一个从(0,0)开始到(W,H)的一个范围
var bound:Rectangle = new Rectangle(0,0,W,H);
// 以上这些参数是等下用在滤镜等一些效果操作的参数内的
// 目的是要固定好这些效果的影响范围
// ------------------------------------------------
// 创建一个空位图元素,用来模拟’水’
var water:BitmapData = new BitmapData(W,H);
// 创建一个空的mc,用来加载位图元素显示于屏幕上
var output:MovieClip = _root.createEmptyMovieClip("output",0);
// 设置一下mc的偏移,为什么?等下介绍
output._x = output._y=-50;
// 加载位图元素image
output.attachBitmap(image, 0);
// 以上是创建一些必要的位图元素和显示位图的mc
// ------------------------------------------------------
// 这个是测试用的,感兴趣的可以把画面放大就可以
// 看到’水’的样子
var display:MovieClip = _root.createEmptyMovieClip("display",1);
display.attachBitmap(water,0);
display._x = W;
// --------------------------------------------
// 创建一个DisplacementMapFilter
// 关于这个滤镜,其实就是可以通过一个固定公式
// 让一张位图上的象素产生偏移,这个公式帮助里面有,大家尽量多看帮助
var dmf:DisplacementMapFilter = new DisplacementMapFilter();
// 以下就是设置,影响的位图是上面定义的water
// 起点是之前定义的原点origin
// 还有一些公式里面用到的参数 (多看帮助,多看帮助)
dmf.mapBitmap = water;
dmf.mapPoint = origin;
dmf.componentX = 1;
dmf.componentY = 1;
dmf.scaleX = 45;
dmf.scaleY = 45;
dmf.mode = "color";
// 这个就是保存一个路径到数组,等下供mc使用
var myFilters:Array = [ dmf ];
// 以上等一的一些滤镜,作用是用来把water位图元素中的数据过滤到
// image位图元素中,从而使image产生water一样的感觉,大家也看出来了
// water的好坏,直接影响最后image出来的水的效果
// ----------------------------------------------------
// 下面一些参数等下会用到
var rndSeed:Number = new Date().getTime();
var offsets:Point = new Point(0,0);
var speed:Number = 1;
var inc:Number = 5;
// ----------------------------------------------------
onEnterFrame = function()
{
// 以下一些是产生加速度移动的效果,可以忽律,直接使用
// 匀速移动就行了
inc += speed;
if( inc > 12 )
{
inc = 12;
speed = -speed;
}
else if ( inc < 5 )
{
inc = 5;
speed = -speed;
}
// 上面的速度就是影响,x,y的偏移,到底xy是哪里的呢,往下看
offsets.x += inc;
offsets.y += inc;
// 这里就是形成water的关键,也就是BitmapData里面的perlinNoise方法
// 这个方法,其实实现的是一个类似Photoshop里面"云雾"的滤镜(不知道是不是叫这名字-_-)
// 里面的一些参数,大家看帮助,说的很仔细..
// 上面的offsets就是让这个"云雾"移动起来!
water.perlinNoise(300,300,1, rndSeed, false, false, 1, true, offsets);
// 最后把output的滤镜一下就完成了
output.filters = myFilters;
// 到此,我还没有介绍output为什么有个偏移量
// 其实这是displacementMapFilter造成的
// 原因是使用了这个滤镜后,整个被过滤的位图元素会发生偏移
// 偏移多少,由他里面的参数决定,所以大致要弥补一下这个偏移
// 所以随便设置个数字啦,呵呵
}
下面是效果和源文件,可能看上去不太像水波~_~!...我也这么觉得,更像旗子飘啊飘的.但其实大致思路还是讲清了.
主要就是DisplacementMapFilter类和perlinNosie方法
前者可以让一个位图元素发生偏移,这样就可以模拟光在波面的折射
后者是在一张空白的位图上,产生"云雾"的纹路来模拟水的纹路.
但是要完全逼真,还是看头上的教程,然后用flash8里面提供的滤镜来模拟数学建模,这一点还是比较复杂的,这里有一个高手就做到了...hoho,强啊

附件:200583094654366.rar

2005-09-03 00:20:36    出处:闪吧
Google
热点文章/相关文章

音乐
嫁衣 画心 放生 天亮了 牡丹江 那滋味 擦肩而过 怀念过去 北京欢迎你 突然好想你 吻的太逼真 说好的幸福呢 坐上火车去拉萨 没有人比我更爱你
愚爱 心碎 稻香 带我走 醉赤壁 魔杰座 我还想她 明天过后 一定要爱你 等爱的玫瑰 原谅我一次 越单纯越幸福 最后一次的温柔 给我一首歌的时间
白狐 光荣 降临 下雨天 小酒窝 樱花草 恋爱新手 说唱脸谱 红色高跟鞋 寂寞才说爱 深深爱过你 爱上你是个错 即使知道要见面 不是因为寂寞才想你
城府 假如 花海 兰亭序 棉花糖 舍不得 最后一次 女人如烟 外滩十八号 我们的纪念 我们的无奈 心在跳情在烧 爱上你是我的错 爱情里没有谁对谁错
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口