首先我们需要找到一个背景(大小和场景相同),或者自己手绘一个,这里我用的是博客的图标。也可以用一张图片做成mc来代替。做好后,将这个mc拖入到场景中,中心对齐,并给它实例命名为pic
第三步,再次新建一个mc,里面绘制一个和场景大小相同的矩形(注意这个矩形要与mc的场景中心进行“左上”对齐)如下图,这个矩形就是将来在pic那个图片效果上做水波的区域,如果你不绘制这个矩形,将来出来的效果就会感觉有个边缘,视觉上就比较假,当然如果你有心,完全有别的方法可以来解决这个问题。
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];
};