快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

Flash中水的形成思路和方式

  很多朋友对水的效果情有独钟,水的形成其实是因为光在波面上形成折射,使看上去水波的地方产生了偏移,这里有篇不错的教程讲如何实现水波和折射,不过可能比较难,因为牵涉到很多数学,物理和计算机图形的知识.

  而且上面的教程真的要在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,强啊

  (需要在flash8 player下才能看到效果)

http://www.flash8.net/bbs/UploadFile/2005-8/200583094640147.swf

« Full Screen »






返回类别: Flash教程
上一教程: 出色:FLASH制作矢量性感MM
下一教程: 用flash打开我的电脑等特别文件夹

您可以阅读与"Flash中水的形成思路和方式"相关的教程:
· Flash绘画技巧:对象绘制思路[Flash视频教程]
· 用Flash建站的通用思路及步骤
· 用另一种方法处理RPG地图---用好两个图层
· xml方法载入图片自动轮换显示
· 创建鼠标光标的外形实例
    微笑服务 优质保证 索取样品