文章探索:   分类:    关键字:  
  + 栏目导航
  + 相关文章
未公开的Flash MX使用摄像头和麦克风..
flash摄像头拍照实现原理分析
Flash 8 摄像头拍照
用FLASH操作并控制摄像头
尝试在Flash MX中轻松应用摄像头
让Flash听话:Flash与麦克风的互动
Flash的压缩算法
FLASH脚本语言详解
简单实用的Flash技巧心得
Flash动画下载全攻略
一些Flash经验法则
Flash 缓存问题的解决
FLASH游戏制作基础:响应键盘的四种方..
如何防止SWF文件被反编译?
巧妙提取Flash文件中的素材
实现声音与歌词同步的三种方法
鼠绘技术内幕完全接触-概述篇
鼠绘技术内幕完全接触-动物篇
鼠绘技术内幕完全接触-环境背景篇
鼠绘技术内幕完全接触-效果篇
鼠绘技术内幕完全接触-植物篇
让Flash课件在VCD上播放
Flash中水的形成思路和方法
超简单flash+asp+access计数器
徒手轻松保存网页中的Swf动画
flash上加htm链接的技巧
教你怎么样用Flash来制作马赛克效果
Flash作品的播放保护
将AutoCAD导入Flash
Flash全屏效果全攻略


技术教程 -> FLASH教程 ->  
Flash中水的形成思路和方法
来源:转载   人气:2148   录入时间:2007-11-8
      很多朋友对水的效果情有独钟,水的形成其实是因为光在波面上形成折射,使看上去水波的地方产生了偏移,大家都知道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,强啊
   




Copyright(C)2007-2024 广州市佳沛数码科技有限公司 版权所有
公司地址: 广州市荔湾区东漖北路560号511室
电话:020-81803473 传真:020-81544987