查看完整版本: Flash动画—单摆的制作教程

爱你不要你 2006-10-9 18:42

Flash动画—单摆的制作教程

<div id=text><!-- 正文 -->
<P>  想起当初作这个动画时,真是不知如何下手,所以,这是一篇献给初学者的教程的单摆动画的制作,应该要解决两个方面的问题:</P>
<P>  一、单摆本身的制作,这一点只要用好flash的绘图工具即可</P>
<P>  二、单摆振动,这一点将是教程的重点也是难点</P>
<P>  下面就先解决第一个问题,制作单摆(这一步的制作注意注册点的选择)首先要弄清,单摆有三部分组成:摆线、摆球、悬挂点(天花板)</P>
<P>  (一)、摆线:</P>
<P>  1、选取工具区的线条工具,线条粗细默认,在主场景按住Shifi键向下画一条适当长度的线段。<BR>2、选中线段,右键—转化为元件-影片剪辑,其参数按图中设置,把它转化为影片剪辑 </P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105140_01.gif"></P>
<P>  (二)、摆球:</P>
<P>  1、选取工具区的椭圆工具,按住Shifi键,在主场景画出一个圆,</P>
<P>  2、打开主场景右边的选项栏,选择颜色-混色器,设置如图,</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105200_02.gif"></P>
<P>  为摆球选择一种填充色(当然你也可以在左边的颜色选取区选择),选择工具选取区的油漆桶工具,为摆球填色</P>
<P>  3、选中小球,右键—转化为元件-影片影剪辑,其参数按图中设置,把它转化为影片剪辑</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105219_03.gif"></P>
<P>  4、为它加点效果吧:选中小球,打开工作区下方的滤镜选项(flash8.0),加点投影效果,设置如图</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105233_04.gif"></P>
<P>  效果如图</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105248_05.gif"></P>
<P>  (三)悬挂点(天花板thb)</P>
<P>  选取工具区的线条工具,线条粗细默认,在主场景按住Shifi键水平画一条适当长度的线段作为天花板,同样按住Shifi键画一条斜向的线段,利用复制、粘贴功能,作出许多斜线,组合成天花板的示意图,选中这些线段,右键—转化为元件-影片剪辑,其参数按图中设置,</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105442_06.gif"></P>
<P>  把它转化为影片剪辑,效果如图,</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105526_07.gif"></P>
<P>  至此,基本的元件制作完成,接下来是组合单摆了:</P>
<P>  1、删除主场景中的所有元件,在第一帧先拖人摆线,再拖人摆球(目的是让摆球在摆线上层),调整位置,并在其属性栏中分别命名为bq、bx,如图</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105538_08.gif"></P>
<P>  2、同时选中摆线、摆球,右键—转化为元件-影片剪辑,其参数按图中设置,把它转化为影片剪辑,做成单摆,</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105547_09.gif"></P>
<P>  再把天花板元件拖入,组成完整的单摆,效果如图</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105602_10.gif"></P>
<P>  单摆的制作到此结束(喝口水先)</P>
<P>  接下来解决第二个问题,让单摆动起来</P>
<P>  这里要用到物理的单摆周期公式&nbsp; 和振动方程x=Acos(ωt+α),但我们知道,单摆的振动实际是在一段圆弧上进行的,也就是说,在一段圆弧上运动同时其x要满足振动方程x=Acos(ωt+α),如何实现呢,先看一个图</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105632_11.gif"></P>
<P>  物理学里有一个要求,那就是单摆摆动的圆心角不能太大,一般不超过10度,否则就不是简谐运动,据此,我们处理的时候干脆把圆弧(BDC)当作直线(BOC)处理,好,关键步骤来了,从图中可知,单摆摆过角度BAO时,水平方向的距离为BO,对应的角度b=arcsin(BO/AB),AB为摆长,x=BO,而这个就是单摆所要旋转的角度,好了,我们可以为单摆加代码了</P>
<P>  1、把单摆所在的层命名为单摆吧</P>
<P>  2、新加两层。一层命名按钮,用来放控制按钮,一层命名As,在As层加入代码</P>
<P class=code>//初始化:a0为初相,A为振幅,g为重力加速度<BR>a0 = 90;<BR>t = 0;<BR>A = 20;<BR>g = 9.8;<BR>//l为摆线的长度<BR>l = db.bx._height;<BR>//周期T为单摆的周期公式<BR>T = 2*Math.PI*Math.sqrt(l/g);<BR>//进入帧要执行的动作<BR>this.onEnterFrame = function() {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //先作一个判断,如果m=1,再执行,这一步是为了控制他而作的<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (m == 1) {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //振动方程<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x = A*Math.cos(2*Math.PI*t/T+a0);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //用反三角函数算出旋转的角度<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b = Math.asin(x/l);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //每执行一次函数,t加0.5(经验值)<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t += 0.5;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //把单摆旋转,由于反三角函数算出的是弧度,故把它转换为角度<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; db._rotation = b*180/Math.PI;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>};</P>
<P>  这样,测试时单摆肯定时不动的,因为m的值没有定义,我们必须在按钮层拖入两个按钮:窗口-公用库-按钮,自己选吧,在控制开始的按钮上加入代码</P>
<P class=code>on (press) {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; m = 1;<BR>}</P>
<P>  在控制停止的按钮上加入代码</P>
<P class=code>on (press) {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; m = 0;<BR>}</P>
<P>  大功基本构成,附上源文件</P>
<P align=center>
<OBJECT codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 height=400 width=550 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="_cx" VALUE="14552"><PARAM NAME="_cy" VALUE="10583"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://www.webjx.com/upfiles/20061009/20061009105821_01.swf"><PARAM NAME="Src" VALUE="http://www.webjx.com/upfiles/20061009/20061009105821_01.swf"><PARAM NAME="WMode" VALUE="Window"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE=""><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0">
<embed src=http://www.webjx.com/upfiles/20061009/20061009105821_01.swf
pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'
type='application/x-shockwave-flash' width=550 height=400></embed></OBJECT></P>
<P align=center><A href="http://www.webjx.com/download.php?url=http://www.webjx.com/upfiles/20061009/20061009105836_01.fla" target=_blank><FONT color=#ff0000><B>点击这里下载源文件</B></FONT></A></P>
<P>  但实际上我们还希望能改变其摆长L,改变g,这时我们可以再作一个可移动的按钮,这里我不想罗嗦了,直接从库里拖一个出来就够了:窗口-公用库-按钮,自己找吧(我选的是fader – round按钮),把他们放在按钮层,这时这个按钮已在我们源文件的库中有了,选中它,点右键—直接复制,复制出另一个,也拖人按钮层,这时,我们就有了两个可以移动的按钮,用来改变L和g,由于我选的是fader – round按钮,它有一个标签,双击按钮,进入改变其标签名,结果如图</P>
<P align=center><IMG src="http://www.webjx.com/upfiles/20061009/20061009105615_12.gif"></P>
<P>  还没有完,因为他们都没有名字呢,选中L按钮,在属性栏命名为lk(控制L的意思),双击lk按钮,进入下一层,看其属性,你会发现滑块是有名字的,如我选的是fader – round按钮,滑块名为knob,改为lk0好了同理,选中g按钮,命名为gk(控制g的意思),双击gk按钮,进入下一层,选中滑块改为gk0,快了,别忘了,改你的代码哦</P>
<P class=code>//初始化<BR>a0 = 90;<BR>t = 0;<BR>A = 20;<BR>m = 0;<BR>db._rotation = 0;<BR>this.onEnterFrame = function() {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //把控制按钮lk中的lk0按钮的y坐标+80作为摆长变化的百分比,由于lk0按钮的y坐标初时值是0,故加80,否则开始摆长就为0了<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; l = lk.lk0._y+80;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //把db中的bx电影剪辑在其y方向上伸缩L倍<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; db.bx._yscale = l;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //把摆线的长度赋值给h<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; h = db.bx._height;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //摆球的位置也相应变化,其位置应该在摆线的注册点往下+摆线的长度的地方<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; db.bq._y = h+db.bx._y;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //把控制按钮gk中的gk0按钮的y坐标+9.80作为g,由于gk0按钮的y坐标初时值是0,故加9.80,使其初始值为9.80,否则开始g就为0了<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; g = gk.gk0._y/10+9.8;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //单摆的周期公式<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; T = 2*Math.PI*Math.sqrt(l/g);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //如果m=1执行<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (m == 1) {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //振动方程<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x = A*Math.cos(2*Math.PI*t/T+a0);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //用反三角函数算出位移为x对应旋转的角度<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b = Math.asin(x/l);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //时间改变<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t += 0.5;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //把单摆旋转b*180/Math.PI,原因是b是弧度制的,把它化成角度制<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; db._rotation = b*180/Math.PI;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>}; </P>
</div>

小飞侠 2007-7-31 14:01

非常不错,谢谢楼主,支持

酒尾鱼 2007-8-1 14:32

呵呵,楼主真是强人啊

锦锦 2007-8-1 16:54

:a15 不是很明白

andylzh1981 2010-3-11 14:01

困惑

为什么按照你的方法做出来的是以摆线的中点为圆心的摆动?
页: [1]
查看完整版本: Flash动画—单摆的制作教程