爆炸:
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
