Flash互动动画剖析：惯性模拟
作者 佚名技术
来源 服务器技术
浏览
发布时间 2012-07-14
|
在这个Flash动画中，从上到下排列了5个小方块，它们之间用一根线串接起来，成为一根链条。 如果我们用鼠标左右拖动任意一个方块，其它方块将会随之连动。你可以注意到方块的这种移动不是随意的，它们摆动的方向和幅度都比较符合我们实际生活惯性效果。 下面我们来看看这个惯性效果的具体制作过程： 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 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: Flash实例制作：鱼翔浅底下一篇: 用数组实现flash中的迷宫行走
关于Flash互动动画剖析：惯性模拟的所有评论
