您的位置:首页 >> 网页教程 >> Flash >>

Flash AS实现的波纹视觉特效教程

作者:佚名 时间:2007-09-26 来源:网络收集

代码不是我写的, All credits fly to unitzeroone

这里和大家一起欣赏一下这个效果,顺便注释一下代码:
//完整的代码看附件吧
//初始化函数,建立对象等
private function initialize():Void
  {
   particles = new Array();
   mBitmapData = new BitmapData(width,height+20,false,0x00000000);//这个BitmapData用来生成一个波纹的位图,具体如何生成后面有
   mPerlinBitmapData = new BitmapData(width,20,false,0x00000000);//这是一个存放Perlin杂色的位图,不知道什么是Perlin可以看Flash自带的文档,经然后由他的Bio  
   
   mSmokingBitmapData = BitmapData.loadBitmap("queen")//背景图像MC
   mSmokingClip = viewPort.createEmptyMovieClip("queen",1);
   mSmokingClip.attachBitmap(mSmokingBitmapData,1,"auto",false);
   mSmokingClip.blendMode = 13;//将他的渲染模式设置为13也就是Overlay模式,也可以当作光照模式,具体可以看Flash自带的介绍
   
   viewPort.scrollRect = new Rectangle(0,0,width,height);
   
   mRectangle = new Rectangle(0,0,width,height);
   mPoint_1 = new Point(0,0);
   mPoint_2 = new Point(0,0);
   viewPort.attachBitmap(mBitmapData, 0, "auto", false);//将mBitmapData放到舞台上,因为前面背景的渲染模式是Overlay,所以就带来了一种光照+反光的效果,非常逼真的波光
   mMatrix = new Matrix();
   mMatrix.translate(0,height-20);
   mBlur = new BlurFilter(4,4,3);//一个模糊滤镜,用来为生成波纹位图服务
  }
  
  
  public function onEnterFrame():Void
  {
//以下主要就是如何生成连续的波纹位图的代码
   mPoint_1.x += 1;
   mPoint_1.y += .5;
   mPoint_2.x += 5;
   mPoint_2.y += 2;//这些都是为生成连续Perlin 杂点服务的 
   mPerlinBitmapData.perlinNoise(width/2,10,2,12345,false,true,1,true,[mPoint_1, mPoint_2]);//生成杂点函数
   mBitmapData.draw(mPerlinBitmapData,mMatrix);//将杂点画在上一个波纹位图最底端,作为新的激荡点
   mBitmapData.applyFilter(mBitmapData, mRectangle, new Point(0,-5), mBlur);//使用前面的那个模糊滤镜,主要模拟波纹扩散的效果
   mDisplacement = new DisplacementMapFilter(mBitmapData, new Point(0,0), 1,1,0,-40,"color",0x000000,100);//用这张波纹位图创建一个DisplacementMapFilter,用来产生折射效果
   mSmokingClip.filters = [mDisplacement];//套用这个折射效果
  }

//之后每进入一帧都重复此过程,这样就出现了一系列连续的波纹位图。主要思路就是使用DisplacementMapFilter来带来折射效果,并且使用Overlay来模拟波光的效果。效果及其真实,和网友共勉。

中华大观园版权申明:本站部分图片和文章来源于网络。除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。 特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:5000sky@gmail.com
现有 条评论 | 更多评论..
我要发表看法
验证码: 匿名发表(无需注册)
    如果您还不是中华大观园会员,欢迎加入
  • ※ 评论注意事项:
  • 您的评论将在管理员审核后才会显示。
  •   
  • 不是中华大观园会员或未登陆发表评论,评论人名字显示为匿名。
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除评论中的任意内容
  • 参与本评论即表明您已经阅读并接受上述条款