在这个Flash动画中,从上到下排列了5个小方块,它们之间用一根线串接起来,成为一根链条。
如果我们用鼠标左右拖动任意一个方块,其它方块将会随之连动。你可以注意到方块的这种移动不是随意的,它们摆动的方向和幅度都比较符合我们实际生活惯性效果。
此实例最后的效果如图1所示:
图1
下面我们来看看这个惯性效果的具体制作过程:
1.首先制作影片中要用到的小方块。新建一个影片剪辑元件,命名为Normal box,进入元件编辑区后,使用矩形工具绘制一个黄色填充色黑色轮廓线的正方形,如图2所示:

图2
因为在需要对方块进行拖动,所以需要在方块上面加一个隐形按钮,新建一个按钮元件,命名为trans box,只在按钮的Hit帧绘制一个和图2相同大小的矩形即可。
2.游戏中分别用到了五个方块,所以分别制作5个加上隐形按钮的方块,其制作方法都相同,下面就以其中一个来进行说明。新建一个影片剪辑元件,命名为01drag,然后添加两个图层,上面的图层放置隐形按钮,下面的图层放置黄色的方块,调整其位置重合,如图3所示:

图3
然后给隐形按钮添加如下Action:
on (press) {
tellTarget ("/") {
gotoAndPlay ("01");
}//当在此方块上按下鼠标的时候,跳到主场景的第1帧并开始执行
startDrag ("/01", true, 0, 127, 550, 127);//使对象01可拖动,并设置可拖动的范围
}
on (release, releaseOutside) {
stopDrag ();
}//当在方块上或者方块范围之外释放鼠标时,则停止对方块的拖动
其它4个方块的制作方法相同,只是隐形按钮的AS有一定差异,就是将As中代表此方块的名字换成相应的名字即可,例如在方块02drag中只要将上面代码里的01换成02即可,其它方块类似。
3.影片中的5个方块是由四条线段连接起来的,而且线段的形状和角度在拖动的过程中是不断变化的,所以我们只能先制作一条线段,然后使用Action控制其在拖动过程中的形状。新建一个影片剪辑元件Line,使用直线工具绘制一条普通的线段即可,如图4所式:

图4
准备工作完成后,下面开始布置主场景了。
4.回到主场景中,将当前图层命名为bg,用来设置影片背景,使用矩形工具绘制两个大小相同填充色不同的矩形,其宽度和舞台宽度一致,高度为舞台高度的一般即可,然后将其上下排列好,并在交接处使用直线工具绘制一条水平的虚线,作为两个部分的交界线,如图5所示:

图5
5.在图层bg上新建一个图层Border,使用直线工具给舞台四周添加四条边线,作为影片的有效范围。在图层Border上添加图层line,将元件line拖到舞台的任意位置,并设置其实例名为line,用来连接方块。然后将这三个图层都延续到第21帧。
6.新建一图层Box,将制作好的5 个方块分别拖到舞台中,并将其自上向下排练好,中间的也就是第3个方块要放置到水平虚线上,然后分别设置其实例名为02,01,drag,11和12,如图6所示:

图6
在第5.10.15.20帧分别插入关键帧,给5个关键帧分别设置帧标签为drag,01,02,11,12.
7.在图层box的上面自上向下在建5个图层,分别为as02,as01,as11,as12和drag,将在这五个图层中分别控制个方块的运动。
在图层as02的第1,5,15,20帧分别添加如下AS:
x02 = getProperty("/02", _x);
//首先取得方块02的x坐标
dif = x01-x02;//取得方块01和02的x坐标差
setProperty ("/02", _x, Number(x02)+Number(dif/10));//重新设置方块02的x坐标为其原坐标与坐标差的1/10的代数和
在第10帧添加如下AS:
x02 = getProperty("/02", _x); //首先取得方块02的x坐标
dif = x02-x01; //取得方块01和02的x坐标差
setProperty ("/01", _x, Number(x01)+Number(dif/10)); //重新设置方块01的x坐标为其原坐标与坐标差的1/10的代数和
8.在图层as01的第1,15帧添加如下AS;
dragx = getProperty("/drag", _x);//取得方块drag的x坐标
x01 = getProperty("/01", _x);// 取得方块01的x坐标
dif = dragx-x01; //取得方块drag和01的x坐标差
setProperty ("/01", _x, Number(x01)+Number(dif/10)); //重新设置方块01的x坐标为其原坐标与坐标差的1/10的代数和
在第2,10,20帧分别添加如下AS:
dragx = getProperty("/drag", _x); //取得方块drag的x坐标
x01 = getProperty("/01", _x); // 取得方块01的x坐标
dif = x11-dragx; //取得方块11和drag的x坐标差
setProperty ("/drag", _x, Number(dragx)+Number(dif/10)); //重新设置方块drag的x坐标为其原坐标与坐标差的1/10的代数和
9.在图层as11的第1,5,10帧添加如下AS:
x11 = getProperty("/11", _x); //取得方块11的x坐标
dif = dragx-x11; //取得方块drag和11的x坐标差
setProperty ("/11", _x, Number(x11)+Number(dif/10)); //重新设置方块11的x坐标为其原坐标与坐标差的1/10的代数和
第15帧添加AS:
x11 = getProperty("/11", _x); //取得方块11的x坐
dif = x11-dragx; //取得方块11和drag的x坐标差
setProperty ("/drag", _x, Number(dragx)+Number(dif/10));
//重新设置方块drag的x坐标为其原坐标与坐标差的1/10的代数和
给第20帧添加AS:
x11 = getProperty("/11", _x); //取得方块11的x坐标
dif = dragx-x01; //取得方块drag和01的x坐标差
setProperty ("/01", _x, Number(x01)+Number(dif/10)); //重新设置方块01的x坐标为其原坐标与坐标差的1/10的代数和
10.给图层as12的1,5,10,15帧添加AS;
x12 = getProperty("/12", _x); //取得方块12的x坐标
dif = x11-x12; //取得方块11和12的x坐标差
setProperty ("/12", _x, Number(x12)+Number(dif/10)) //重新设置方块12的x坐标为其原坐标与坐标差的1/10的代数和给第20帧添加AS;
x12 = getProperty("/12", _x); //取得方块12的x坐标
dif = x12-x11; //取得方块12和11的x坐标差
setProperty ("/11", _x, Number(x11)+Number(dif/10)); //重新设置方块11的x坐标为其原坐标与坐标差的1/10的代数和
11.最后给图层as的第1,5,10,15,20帧都添加上如下的AS:
duplicateMovieClip ("line", "newLine1", 1);//在影片中复制一个line线段,设置其名称为newline1
setProperty ("newLine1", _x, getProperty("01", _x));//设置新线段的x坐标为方块01的x坐标
setProperty ("newLine1", _y, getProperty("01", _y)); //设置新线段的y坐标为方块01的y坐标
setProperty ("newLine1", _xscale, getProperty("02", _x)-getProperty("01", _x));
setProperty ("newLine1", _yscale, getProperty("02", _y)-getProperty("01", _y));
//上面复制出来的newline1其实是连接最上面两个方块的,下面复制出的newline2,newline3和newline4的作用都相同,也就连接两个方块的,具体的As的含义也相同,下面就不再赘述了。
duplicateMovieClip ("line", "newLine2", 2);
setProperty ("newLine2", _x, getProperty("drag", _x));
setProperty ("newLine2", _y, getProperty("drag", _y));
setProperty ("newLine2", _xscale, getProperty("01", _x)-getProperty("drag", _x));
setProperty ("newLine2", _yscale, getProperty("01", _y)-getProperty("drag", _y));
duplicateMovieClip ("line", "newLine3", 3);
setProperty ("newLine3", _x, getProperty("11", _x));
setProperty ("newLine3", _y, getProperty("11", _y));
setProperty ("newLine3", _xscale, getProperty("drag", _x)-getProperty("11", _x));
setProperty ("newLine3", _yscale, getProperty("drag", _y)-getProperty("11", _y));
duplicateMovieClip ("line", "newLine4", 4);
setProperty ("newLine4", _x, getProperty("12", _x));
setProperty ("newLine4", _y, getProperty("12", _y));
setProperty ("newLine4", _xscale, getProperty("11", _x)-getProperty("12", _x));
setProperty ("newLine4", _yscale, getProperty("11", _y)-getProperty("12", _y));
最后的时间轴如图7所示:

图7
这样就完成了对现实生活中惯性效应的模拟,关键是使用AS对这一过程进行控制,其次就是自己本身对这一现象的观察和理解,这样一才能编写出正确的脚本。其实使用Flash还可以模拟其它的一些效果,对于辅助人们的日常工作也很有帮助。源文件下载