用DUPLICATEMOVIE及遮罩模拟图片切割

作者：HBrO 类型:闪吧BBS 来源:闪吧

　　爆炸:

点击浏览该文件
3D翻转:

点击浏览该文件
抛物线饼图:

点击浏览该文件

在FLASH7及以下的版本里,AS是不能对图像进行直接切割的,而在这些效果里,不进行切割,是不能让图片分成多个单元来独立运动的.那么,这是怎样做出来的呢?
先看下面两张示意图:

    可以看到,同一图像,用同一遮罩,然后改变遮罩的位置,就可以得到不同区域的图像,达到图像切割的效果.
为了保证每一区域都能在最后显示出来,用DUPLICATEMOVIECLIP方法复制多个包含遮罩和图片的MC,用AS控制遮罩的位置,就可以把图像"切"成N个MC了,然后控制它们的运动,就可以啦.
    下面以抛物线饼图为例,说说具体操作:
    1 先创建包含遮罩和图片的MC.
    1.1 新建一元件MC,名为PIC_PART.
    1.2 本次采用ATTACHMOVIE的方法,所以要设置链接:菜单"窗口"-"库",找到PIC_PART元件,右键-"链接",勾上"为动作脚本导出"和"在第一帧导出"后,点"确定"
    1.3 双击该元件,进入编辑状态.
    1.4 导入一个图片,把它的宽设置为400,高300
    1.5 把图片转换为元件MC,注册点在左上角,名为GRAPHIC,实例名一样.
    1.6 插入一个新的图层,画个25*25的正方形,转换为MC,注册点也是左上角.名为MASK,实例名一样.
    1.7 因为该特效是抛物线饼图,而且是随机的,所以,在该MC里设置随机的抛物线运动代码,会比在主场景用FOR语句方便.
    先创建一个MC,名为PICCONTROL,实例名为CONTROL.
使用三帧MC的思想:第一帧初始化,第二帧周期性代码的执行,第三帧:GOTOANDPLAY(2)实现周期性代码.
这里先讨论随机抛物线的生成(涉及初中数学问题,忘记了的话,先看看书)
    首先,抛物线运动的终点都是固定的,以让图像切片刚好组成原始图像.
然后,由于抛物线的方程是y=a*x*x+b*x+c,也就是说,三个点才能把抛物线的形状确定下来,所以,我们再定义两个随机点来确定一条随机抛物线.其中一个就是图像的起点,然后另一个点应该让横坐标在其它两点之间,然后纵坐标在两者之上,为了有一种向上抛的感觉.
假设现在定义了三点(x1,y1),(x2,y2),(x3,y3),则代入抛物线方程,解得

a=(-x1*y2-x3*y1+x3*y2+x1*y3+x2*y1-x2*y3)/(x1-x2)/(x2-x3)/(x1-x3)
b=((y1-y2)-a*(x1*x1-x2*x2))/(x1-x2)
c=y1-a*x1*x1-b*x1

把这段代码加到PICCONTROL的第一帧,至于点坐标的具体值,是与遮罩切片的位置有关的,所以在这里暂不赋值.
现把(X1,Y1)作为起始点,所以第一帧还要添加

_parent.mask._x=x1
_parent.mask._y=y1

另外,(X2,Y2)是中间点,(X3,Y3)是终点,请参见下图:

第二帧:让图片不断沿抛物线移动,直到终点(X3,Y3)为止.
代码如下:

x = _parent.mask._x; //为横坐标保存一个副本,以用于计算Y值.
_parent.mask._x += (x3-x1)/Math.abs(x3-x1)*Math.abs((x-x3)/(x3-x1))*20;//让图像的横坐标向终点的横坐标靠近.
x = _parent.mask._x;//再次保存横坐标副本.
_parent.mask._y = a*x*x+b*x+c;//用抛物线方程计算相应的Y位置.
//检查到横坐标移动过度的时候,说明已经移动到位了.让图形定位在最终坐标(X3,Y3)上.
//这里分开两种情况讨论,当然这里的算法可以进一步优化.
if (x3>x1) {
if (x-x3>-1) {
  x = x3;
  _parent.mask._x = x;
  _parent.mask._y = a*x*x+b*x+c;
  stop();
}
}
if (x3<=x1) {
if (x-x3<1) {
  x = x3;
  _parent.mask._x = x;
  _parent.mask._y = a*x*x+b*x+c;
  stop();
}
}
//-------------
_parent.graphic._x = _parent.mask._x-x3;//根据遮罩横坐标确定图像横坐标.
_parent.graphic._y = _parent.mask._y-y3;//根据遮罩纵坐标确定图像纵坐标.

第三帧:

gotoAndPlay(2);

    1.8   返回主场景.
    2 在主场景创建一个空的MC,名为PAOFIELD,实例名一样.该MC是被切割的小图片的容器.
    3 创建初始化代码
    在主场景第一帧输入代码:

    对该代码的解释,前面已经提到过,这里不再赘述.
    4 创建实时更新的代码.
    这里再次使用CONTROL三帧MC的思想.
    4.1 第一帧:

num=0;//已复制的MC为0个
step=2;//每周期复制两个MC

4.2 第二帧:

for (var i = num; i<=num+step; i++) {
_parent.paofield.attachMovie("pic_part", "part"+i, i);//从库中获得一个MC的实例
_parent.paofield["part"+i].mask._width = _parent.unitx;//设定每一图像切片的宽度
_parent.paofield["part"+i].mask._height = _parent.unity;//设定每一图像切片的高度
_parent.paofield["part"+i].control.x1 = random(400)-200;//让开始点X随机定位(当然有一定限度,以免很久都不能移到终点)
_parent.paofield["part"+i].control.y1 = random(300)-150;//让开始点Y随机定位
_parent.paofield["part"+i].control.x3 = _parent.index[i].split("_")[0]*_parent.paofield["part"+i].mask._width;//根据图像的位置索引X,确定终点的位置
_parent.paofield["part"+i].control.y3 = Number(_parent.index[i].split("_")[1])*_parent.paofield["part"+i].mask._height;//根据图像的位置索引Y,确定终点的位置
_parent.paofield["part"+i].control.x2 = (_parent.paofield["part"+i].control.x3+_parent.paofield["part"+i].control.x1)/2;//为简单起见,这里取的中间点横坐标就是起点

和终点连线的中点

_parent.paofield["part"+i].control.y2 = random(300)-150;//取随机的Y2点
_parent.paofield["part"+i].ball.contents = _parent.index[i];
if (i>=_parent.maxhor*_parent.maxver-1) {
break;//条件成立,意味复制完毕,故退出循环
}
}

4.3 第三帧

gotoAndPlay(2)

测试影片,就可以看到效果了.
小结:
该特效的要点在于:被复制的元件包含一个遮罩层和一个被遮罩的图像层,遮罩层位置的变化控制切片的区域.特效完成后,实际上是所有图片都在相同的位置,然后各图片的遮罩的总和恰好等于被遮罩的图像.

责任编辑:uufeng 时间:2005年11月8日

最近更新

查看所有评论