爆炸:
点击浏览该文件 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 创建初始化代码
??? 在主场景第一帧输入代码:
var?maxhor?=16;
var?maxver?=?12;
var?unitx=25
var?unity=25
var?order?=?new?Array();
for?(var?hor?=?0;?hor<=maxhor-1;?hor++)?{
?order[hor]?=?new?Array();
?for?(var?ver?=?0;?ver<=maxver-1;?ver++)?{
??order[hor][ver]?=?maxver*hor+ver;
?}
}
var?index=new?Array()
for(var?hor=0;hor<=maxhor-1;hor++){
?for(var?ver=0;ver<=maxver-1;ver++){
????????index[order[hor][ver]]=hor+"_"+ver
??
?}
}
??? 对该代码的解释,前面已经提到过,这里不再赘述.
??? 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)
??? 测试影片,就可以看到效果了.
??? 小结:
该特效的要点在于:被复制的元件包含一个遮罩层和一个被遮罩的图像层,遮罩层位置的变化控制切片的区域.特效完成后,实际上是所有图片都在相同的位置,然后各图片的遮罩的总和恰好等于被遮罩的图像.
QQ：2693987339(点击联系)购买教程光盘
:
