Flash动态绘图在课件中的应用

在一些学科的教学中经常需要画函数的图像，如果能让计算机进行动态绘图，可以让学生更清楚地看到函数变化的过程，能更好地帮助学生学习教学内容。笔者以绘制数学函数图像为例介绍如何运用Flash软件进行动态绘图。

一、添加静态图形、文字、组件

1.创建新文件

启动Flash MX 2004创建一个新的Flash文档，使用默认的舞台大小550×400。在用程序绘制动态图像前，先用Flash绘图工具制作界面和一些静态的图形，这样可以简化程序。在制作过程中也要使用一些技巧才能使这些静态图形快速完成，并且与后面的程序绘图准确结合。

2.制作软件界面

将图层一重命名为“界面”，并绘制出如图1所示的矩形界面。图中间的部分是空的，背景为白色。

图1 绘制界面

3.绘制坐标系

(1)绘制坐标原点

①新建图层，并将其命名为“坐标原点”，拖拽到“界面”图层的下一层。

②在新图层中，绘制一个没有边线的红色小圆点，在属性面板中将其宽和高都设为2，x设为274，y设为199，这样就精确地使小红点的中心为(275，200)了(如图2所示)。

图2

说明：因为Flash中的图形的坐标是其左上角的点的坐标，又因为红色小圆点的宽是2，坐标x为274，所以它的中心点坐标x值是：274+2/2=275；同理，中心点坐标y值为200。

(2)绘制x轴

再添加一个新图层，将其重命名为“x轴”，并将其拖拽到“坐标原点”图层的下一层，隐藏“界面”图层，使用线条工具按住Shift键绘制一条横线，在属性面板中对其做如下设置，宽：550，x：0，y：200，显示“界面”图层后，在“x轴”图层合适的位置上绘制一个向右的箭头，标出x轴正方向。

(3)绘制x轴刻度

①在“x轴”图层上插入一个新图层，将其命名为“x轴刻度”，锁定其他图层，并隐藏“界面”图层。

图3

②在x轴上绘制一条短竖线作为刻度标记，在属性面板中对其进行如下设置，高：5，x：15，y：195，这样在x轴左边就有了一个如图3所示的刻度。

③选中短竖线，使用组合键Ctrl+G将其组合，然后使用组合键Ctrl+C对其复制，然后连续使用Ctrl+Shift+V组合键26次，这样在同一个位置就有了27个刻度了。

④选择最上层的刻度，在属性面板中将其x值改为535。设置完后得到如图4所示的结果。

图4

⑤使用组合键Ctrl+A选择所有x轴刻度，然后使用组合键Ctrl+K打开“对齐”面板，单击“水平平均间隔”按钮，这些刻度就如图5所示，均匀地排列到x轴上了，相邻两个刻度之间的距离都是20个像素，中间的一个刻度正好在原点上。

图5

(4)绘制y轴和y轴上的刻度与绘制x轴及其刻度的方法相同

说明：在绘制刻度时一定要计算好刻度个数、第一个刻度的位置和最后一个刻度的位置。本例中y轴刻度可参考如下设置，刻度个数21个；刻度大小，宽：5，高：0；最上面的刻度位置，x：275，y：400；最下面的刻度位置，x：275，y：0。最后用“垂直平均间隔”将刻度平均分布。

(5)用文字工具，给坐标轴上的刻度标上刻度值

4.绘制网格线

再添加一个图层，将其命名为“网络线”，并将其拖至最下一层，使用与绘制坐标轴刻度相同的方法绘制网格线。

5.添加文字和组件

在“界面”图层上添加一个图层，将其命名为“文字”，在其上输入必要的文字。再添加一个图层，将其命名为“组件”，用Ctrl+F7打开“组件”面板，如图6所示，找到“NumericStepper”组件并将其拖拽到舞台上，在属性面板中进行如下参数设置，maxmum：5；minmum：-5；stepSize：0.1；value：0(如图7所示)。

图6

图7

复制粘贴这个组件成3个，并如图8所示放置，在属性面板中将它们的实例名称分别命名为a，b，c。至此准备工作完成。

图8

二、编写动态绘图程序

在“界面”图层下面，“坐标原点”图层上面，插入一个新图层，将其命名为“绘图程序”，如图9所示在“绘图程序”图层的第一帧上添加如下语句：

//自定义drawfx()函数，用于画二次函数图像

function drawfx() {

//清除原有图像

_root.clear();

//x，y是以窗口客户区坐标系中点(275，200)为原点，一个像素为一个单位长度的平面直角坐标系中的点的坐标x，y值。

x = -275;

//x0，y0是以窗口客户区坐标系中点(275，200)为原点，20个像素为一个单位长度的平面直角坐标系中的点的坐标x，y值。

x0 = x/20;

//用二次函数求出y0

y0 = a.value*Math.pow(x0, 2)+b.value*x0+c.value;

y = y0*20;

//x1，y1为窗口客户区坐标系中点的坐标x，y值。

x1 = x+275;

y1 = -(y-200);

//定义线条样式。

_root.lineStyle(2, 0x0000FF);

//移动绘制定点到(x1,y1)

_root.moveTo(x1,y1);

//使用循环语句绘图，由499条小线段组成函数图像，由于线段都很短，看起来函数图像还是很平滑的

for (x=-274; x

x0 = x/20;

y0 = a.value*Math.pow(x0, 2)+b.value*x0+c.value;

y = y0*20;

x1 = x+275;

y1 = -(y-200);

_root.lineTo(x1, y1);

_root.moveTo(x1, y1);

}

//强制刷新画面

updateAferEvent();

}

//调用drawfx()函数，画二次函数图像

drawfx();

//新建一个名为myobj的对象

myobj = new Object();

//为对象添加change事件函数，在函数中调用drawfx函数画二次函数图像

myobj.change = function() {

drawfx();

};

//分别为三个组件添加监听对象

a.addEventListener("change", myobj);

b.addEventListener("change", myobj);

c.addEventListener("change", myobj);

图9

这样一个可以动态绘制二次函数图像的课件就制作完成了，通过调整系数的大小，就可以看到相应的函数图像了，运行结果如图10所示。