爆炸:
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 创建初始化代码
在主场景第一帧输入代码:
varmaxhor=16;
varmaxver=12;
varunitx=25
varunity=25
varorder=newArray();
for(varhor=0;hor<=maxhor-1;hor++){
order[hor]=newArray();
for(varver=0;ver<=maxver-1;ver++){
order[hor][ver]=maxver*hor+ver;
}
}
varindex=newArray()
for(varhor=0;hor<=maxhor-1;hor++){
for(varver=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(vari=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)
测试影片,就可以看到效果了.
小结:
该特效的要点在于:被复制的元件包含一个遮罩层和一个被遮罩的图像层,遮罩层位置的变化控制切片的区域.特效完成后,实际上是所有图片都在相同的位置,然后各图片的遮罩的总和恰好等于被遮罩的图像.
