您的位置信息之舟电 脑硬件栏目首页网页制作Flash 收藏本页

→ flash水波制作简明实例:DisplacementMapFilter滤镜类

www.kepusoft.com 信息之舟电脑软件应用栏目

    信息之舟电脑软件应用栏目编者按: 这几天学习flash新增的类,终于学到了DisplacementMapFilter滤镜类,一切豁然开朗,原来水波制作这么简单,下面是昨天学习,今天做的一个小实例。很简单,基本上三步走就完成了一个水波制作的雏形。明天再试试用BitmapData.perlinNoise 方法加深一下印象。 
    注:xiankevin的经典教材在我的博客文章栏目里有收藏 
    先看效果:

    如果你看不到,底部有源文件。 

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

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

    这个会动的放射性渐变mc,我们在库中给它添加标识符(就叫ball好了),你也可以不用这样做,后面的讲解中有可以选择的余地 
    第三步,再次新建一个mc,里面绘制一个和场景大小相同的矩形(注意这个矩形要与mc的场景中心进行“左上”对齐)如下图,这个矩形就是将来在pic那个图片效果上做水波的区域,如果你不绘制这个矩形,将来出来的效果就会感觉有个边缘,视觉上就比较假,当然如果你有心,完全有别的方法可以来解决这个问题。 
    2006220193841226

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

    以下是代码片段:
    var depth:Number = this.getNextHighestDepth();

    //获取可用层级,返回一个数字  
    this.attachMovie("ball", "ball"+depth, depth);  
    //加载库中的放射性渐变动画。  
    this["ball"+depth]._x = Stage.width/2;  
    //确定位置。具体用什么参数,看你的个儿喜好啦。  
    this["ball"+depth]._y = Stage.height/2;  
    最后,回到主场景,这时主场景中已经有最初制作的实例名叫pic的背景(关的博客);现在只需把刚才制作的包含矩形的mc拖入进来,把它远远的扔到一边就可以了,下面是主场景帧上的代码:  
    //by 关  
    //禁止动画缩放。  
    Stage.scaleMode = "noScale";  
    //导入相关的类,死记硬背下面三个import。  
    import flash.display.*;  
    import flash.filters.*;  
    import flash.geom.*;  
    //创建一个bitmapdata对象,大小和放射性渐变的mc相同  
    var bit:BitmapData = (new BitmapData(mask._width, mask._height, true));  
    //zjx、zjy是渲染动画时所使用的通道,数值为1、2、4、8,对应红、绿、兰、alpha通道。我看基本可以死记硬背就好。  
    var zjx:Number = 1;  
    var zjy:Number = 2;  
    //sfx、sfy这两个数据可以改变水波的强度,即图像在x轴和y轴扭曲的程度。  
    var sfx:Number = 10;  
    var sfy:Number = 20;  
    //逐帧调用,你也可以用setInterval来实现,因为那个放射性渐变是动态的,而bitmap对象要模仿它的话,就必须做到动态跟踪。  
    this.onEnterFrame = function() {  
     //把放射性渐变的动画添加给bit,使之绘制出来。  
     bit.draw(mask);  
     //设置一个DisplacementMapFilter滤镜对象,它有使图像扭曲的功能,这里就用到了zjx、zjy等变量。  
     var filter:DisplacementMapFilter = (new DisplacementMapFilter(bit, new Point(), zjx, zjy, sfx, sfy, "color", 0, 0));  
     //场景中实例名为pic的元件使用新创建的滤镜,因为用到onEnterFrame,所以效果是动态滴:)  
     pic.filters = [filter];  
    };  

    ctrl+Enter就可以测试了。 
    最后总结出:1.必须有一个动态的东东做波动的样子,BitmapData.perlinNoise 类就是更深层次的波动,明天再测试。 
    2.有一个BitmapData对象不断的对那个波动mc进行绘制。 
    3.需要波动的影像采用DisplacementMapFilter滤镜类,来源是绘制波动效果的BitmapData对象。

www.kepusoft.com 信息之舟电脑之家收集整理推荐文章

→ Flash栏目列表:

DreamWeaver
FrontPage
FireWorks
Flash
HTML
CSS&其它

→ 赞助商链接:
→ 热门文章排行榜:
·自动跳转、载入动画、禁止右键、全屏弹出、按钮+链接源代码
·通过模糊效果让Flash制作出好看的羽化遮罩图
·十大超酷cool的flash片头动画
·flash水波制作简明实例:DisplacementMapFilter滤镜类
·F8创建字体特效:TextScript类的结构\自定义字体效果\简单的打字效果\旋转效果\淡出效果
·怎样用flash制作出无AS的下雪动画效果四
·怎样用flash制作出无AS的下雪动画效果?
·最常用的Flash语句精粹汇集:GOTO语句\函数\复合比较\else\
·如何用flash模拟制作简单的3D转动视觉特效二
·最常用的Flash语句精粹汇集:详细了解GOTO语句\MC的各种可改写的属性