4当前位置:网页制作Flash教程-Flash8制作水波效果简明实例
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
4本站推荐内容
4最新网页制作
·Flash随机显示汉字
·Flash8制作水波效果…
·Flash MX制作“二合…
·Flash制作跟随鼠标…
·跟随鼠标变化的Flas…
·一个网上非常流行的…
·Flash制作“随机树…
·常用Flash动态背景…
·Flash制作新浪网的…
·FLASH+XML制作求职…
4热门网页制作
·一个网上非常流行的…
·Flash8制作水波效果…
·Flash制作新浪网的…
·跟随鼠标变化的Flas…
·常用Flash动态背景…
·Flash制作跟随鼠标…
·Flash制作“随机树…
·网页中嵌入Flash的h…
·Flash MX制作“二合…
·Flash制作“沧海一…
4相关网页制作
·Flash作品网上防抄…
·也谈Flash MX的“连…
·FLASH+XML制作求职…
·Flash鼠绘技术内幕…
·Flash制作新浪网的…
·Flash MX制作“二合…
·Flash制作两点间随…
·Flash作品网上防抄…
·Flash制作“随机树…
·常用Flash动态背景…
Flash8制作水波效果简明实例
类别:Flash教程    来源:网络    时间:2006-12-23    贴士:推荐给好友
收藏本页 8 
    一直以来,Flash8的水波制作都是比较让我向往的,网上也出了不少的教材,闪吧的高手HBB和xiankevin都出过相关的教程,不过当时我没时间学习,看源文件看的是一塌糊涂,到头来是今天看,明天忘。这几天学习flash新增的类,终于学到了DisplacementMapFilter滤镜类,一切豁然开朗,原来水波制作这么简单,下面是昨天学习,今天做的一个小实例。很简单,基本上三步走就完成了一个水波制作的雏形。明天再试试用BitmapData.perlinNoise 方法加深一下印象。

  先看效果:

http://www.zzsky.cn/education/images/20061223102700.swf


点击这里下载源文件


  如果你看不到,底部也有链接,还有源文件。  

  首先我们需要找到一个背景(大小和场景相同),或者自己手绘一个,这里我用的是博客的图标。也可以用一张图片做成mc来代替。做好后,将这个mc拖入到场景中,中心对齐,并给它实例命名为pic。

点击图片打开新窗口浏览


  第二步新建一个mc,绘制一个黑白颜色的放射性渐变的圆,并把它做成动态的效果,效果看这里:  

http://www.zzsky.cn/education/images/20061223102812.swf


  这个会动的放射性渐变mc,我们在库中给它添加标识符(就叫ball好了),你也可以不用这样做,后面的讲解中有可以选择的余地。

  第三步,再次新建一个mc,里面绘制一个和场景大小相同的矩形(注意这个矩形要与mc的场景中心进行“左上”对齐)如下图,这个矩形就是将来在pic那个图片效果上做水波的区域,如果你不绘制这个矩形,将来出来的效果就会感觉有个边缘,视觉上就比较假,当然如果你有心,完全有别的方法可以来解决这个问题。

点击图片打开新窗口浏览


  接下来,如果你刚才懒的命名标识符,就可以在这个mc里新建一个层,把刚才的那个放射性渐变的mc(会动的那个)拖入进来,位置就放到这个矩形的中间。

  如果你命名了标识符,就可以直接在帧上添加以下代码:  

var depth:Number = this.getNextHighestDepth();   
file://获取可用层级,返回一个数字   
this.attachMovie("ball", "ball"+depth, depth);   
file://加载库中的放射性渐变动画。   
this["ball"+depth]._x = Stage.width/2;   
file://确定位置。具体用什么参数,看你的个儿喜好啦。   
this["ball"+depth]._y = Stage.height/2;   

最后,回到主场景,这时主场景中已经有最初制作的实例名叫pic的背景(关的博客);现在只需把刚才制作的包含矩形的mc拖入进来,把它远远的扔到一边就可以了,下面是主场景帧上的代码:   

file://by 关   
file://禁止动画缩放。   
Stage.scaleMode = "noScale";   
file://导入相关的类,死记硬背下面三个import。   
import flash.display.*;   
import flash.filters.*;   
import flash.geom.*;   
file://创建一个bitmapdata对象,大小和放射性渐变的mc相同   
var bit:BitmapData = (new BitmapData(mask._width, mask._height, true));   
file://zjx、zjy是渲染动画时所使用的通道,数值为1、2、4、8,对应红、绿、兰、alpha通道。我看基本可以死记硬背就好。   
var zjx:Number = 1;   
var zjy:Number = 2;   
file://sfx、sfy这两个数据可以改变水波的强度,即图像在x轴和y轴扭曲的程度。   
var sfx:Number = 10;   
var sfy:Number = 20;   
file://逐帧调用,你也可以用setInterval来实现,因为那个放射性渐变是动态的,而bitmap对象要模仿它的话,就必须做到动态跟踪。   
this.onEnterFrame = function() {   
 file://把放射性渐变的动画添加给bit,使之绘制出来。   
 bit.draw(mask);   
 file://设置一个DisplacementMapFilter滤镜对象,它有使图像扭曲的功能,这里就用到了zjx、zjy等变量。   
 var filter:DisplacementMapFilter = (new DisplacementMapFilter(bit, new Point(), zjx, zjy, sfx, sfy, "color", 0, 0));   
 file://场景中实例名为pic的元件使用新创建的滤镜,因为用到onEnterFrame,所以效果是动态滴:)   
 pic.filters = [filter];   
}; 

  ctrl+Enter就可以测试了。

  最后总结出:

  1.必须有一个动态的东东做波动的样子,BitmapData.perlinNoise 类就是更深层次的波动。

  2.有一个BitmapData对象不断的对那个波动mc进行绘制。

  3.需要波动的影像采用DisplacementMapFilter滤镜类,来源是绘制波动效果的BitmapData对象。
·上一篇:Flash MX制作“二合一”交互按钮
·下一篇:Flash随机显示汉字
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2008 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备08002933号