Flash Mx Professional中实现发电机线圈的转动（物理课件制作入门级文章一） - 达人(西部秋虫)

2005/09/18 | Flash Mx Professional中实现发电机线圈的转动（物理课件制作入门级文章一）
类别(Flash) | 评论(5) | 阅读(724) | 发表于 14:27: 摘要：美国Macromedia公司的 Flash软件发展至今，不会再有人怀疑它在多媒体设计、开发方面的能力。本文以如何在Flash Mx Professional中实现发电机线圈的转动为例，由浅入深地详细讲述了如何用Flash来开发积件式CAI软件。读完本文，你可以体会到一个完整的积件式CAI软件结构是如何一步步完善，代码是如何一步步精简的……
关键词：Flash Mx Professional 课程整合初中物理思想

在初中物理教学中，交流发电机的工作原理是电学部分的一个重点，同时也是一个难点问题。利用传统的挂图很难将交流发电机的工作原理讲清楚，如果能将挂图上静态的模型转化为动态的模型，那该多好。于是，笔者利用刚得到的Flash Mx Professional 开始了交流发电机模型的设计与制作，经过几天断断续续的思考与实践，笔者终于将理想变为现实。
一、用传统的动画实现。
这是笔者最初的想法，毕竟这种方法是最为简单也是最容易想到的。在实际的制作过程中，笔者发现，该模型中最难实现的是线圈的转动。笔者曾尝试用“Motion”动画或“Shape”动画实现，但均因实现太复杂而罢手。最后笔者只好用“keyframe”动画才算实现了，请看下面的效果图：

图片如下：

二、用Actionscript实现
虽然用“keyframe”动画可以实现线圈转动的效果，但它也存在以下缺点：一是文件占用空间大，二是交互性的实现效果不太好。因此，笔者决定放弃原来的做法，重新用Actionscript来实现线圈的转动。经过长时间的分析与实践，效果终于得以实现，请看下面的效果：

Flash 动画：

上图中淡蓝色透明的线圈（效果可参看swf文件）并不是直接用鼠标画出来的，而是利用Actionscript的强大编程功能做出来的，它的转速、大小都是可调的。下面，我来具体介绍一下其实现的过程。
在上图中，线圈的形状如下：

图片如下：

稍加分析我们就会发现，该线圈其实是由八个点，八条线组成的，如下图：

图片如下：

将各点顺次用线连接即可得一线圈。
我们再来探讨下一个问题：如何让线圈实现转动。经过分析我们可以知道，线圈在转动时，点1至点8的运动轨迹都是一个圆，如果在各点绕圆转动的过程中，实时地将各点用线连接起来，则线圈转动的效果也就实现了。为了能简单地说明问题，我们选上图中的一部分加以说明。
首先，新建一层，命名为“base”,在该层建立四个类型为MovieClip的点，并分别命名为dot1、dot2、dot3、dot4，并调整它们的位置，以使其连线后得到一平行四边形。如图所示：

图片如下：

然后，分别对四个点添加圆形引导线，并调整各点的起始位置与终止位置，使其沿顺时针做圆周运动（关于如何让点沿圆形引导线转动起来，请参阅其它资料）。如图所示：

图片如下：

测试一下，应能使各点做圆周运动。
下面的任务就是将各点连接起来。在本例中，应该是dot1连dot2，dot2连dot4，dot4连dot3，dot3连dot1。于是，我们可以新建一层，命名为“actions”,在第一帧添加如下actions：

//为使代码更简洁，建立一function：rawcircle()
function drawcircle(){
_root.createEmptyMovieClip ("triangle", 1);//为实现画线，新建一空MovieClip
with (_root.triangle){
beginFill (0x0000FF, 50);//设置线圈填充色
lineStyle (5, 0xFF00FF, 100);//设置线圈边框粗细、颜色及透明度
moveTo (dot1._x, dot1._y);//将空MovieClip移至dot1的位置
lineTo (dot2._x, dot2._y);//顺次连线
    lineTo (dot4._x, dot4._y);
lineTo (dot3._x, dot3._y);
    lineTo (dot1._x, dot1._y);
endFill();
}
    }
drawcircle()

然后，将剩余的19帧均加入以下代码：

drawcircle();

测试，应该得到我们所期望的效果。
其实，我们还可以将该源文件改进，甚至只使用Actionscritp。为了使效果更明显，我将点的个数由四个扩展为八个。
在本例中，既然各点均做圆周运动，我们只要获取了以上各点的初始位置，利用八个“虚拟点”，使这八个虚拟点均做圆周运动，即时将这八个点顺次连线，也能实现我们所期望的效果。
新建一Flash Document,将默认的"Frame1"改为"Actions"，在第一空白关键帧加入以下代码：

//初始化
angle=0//在第二帧使angle递增，以实现点绕圆转动的效果
//为使代码更简洁，建立一function：rawcircle()
function drawcircle(){
beginFill (0x0000FF, 50);//设置线圈填充色及透明度
lineStyle (5, 0x0000FF, 0);//设置线圈粗细、颜色及透明度
moveTo (dot1_x, dot1_y);//初始化起点
lineTo (dot2_x, dot2_y);//开始画线
    lineStyle (1, 0x0000FF, 100);//设置线圈边框的粗细、颜色及透明度
    lineTo (dot3_x, dot3_y);
lineTo (dot8_x, dot8_y);
    lineTo (dot7_x, dot7_y);
    lineTo (dot6_x, dot6_y);
    lineTo (dot5_x, dot5_y);
    lineTo (dot4_x, dot4_y);
    lineTo (dot1_x, dot1_y);
endFill();
}
drawcircle()

插入一空白关键帧，并加入以下代码：

angle=angle+0.1//使angle递增，以使“虚拟点”转动
dot1_x=250-20*Math.cos(angle)//获取各“虚拟点”位置
dot1_y=250-20*Math.sin(angle)
dot2_x=250+20*Math.cos(angle)
dot2_y=250+20*Math.sin(angle)
dot3_x=300+20*Math.cos(angle)
dot3_y=200+20*Math.sin(angle)
dot4_x=300-20*Math.cos(angle)
dot4_y=200-20*Math.sin(angle)
dot5_x=300-40*Math.cos(angle)
dot5_y=200-40*Math.sin(angle)
dot6_x=400-40*Math.cos(angle)
dot6_y=100-40*Math.sin(angle)
dot7_x=400+40*Math.cos(angle)
dot7_y=100+40*Math.sin(angle)
dot8_x=300+40*Math.cos(angle)
dot8_y=200+40*Math.sin(angle)
drawcircle()

插入第三个空白关键帧，并加入以下代码：

gotoAndPlay(2);
clear()//如果不加该Action，会出现何种效果？

测试，应该得到效果。
通过本例的制作，我深深认识到：思想其实比编程更重要，编程只是思想的实现。在Flash中，要实现同一种效果，途径可能很多，但哪一种是最好的，却需要我们不断地对问题进行分析，改进。
同时，通过以上的制作过程，我再一次感受到Flash Mx Professional的无可比拟的魅力，更加坚定了我“将Flash进行到底”的信心！; 0

http://xbzg.5d.cn/

专注于Flash+FMS开发...通过Google搜索西部之光Software

评论Comments