论文摘要:动态绘图在教学已经开始有所应用,但是到目前为止所看到的Flash动态绘图程序所绘制的图形还不能被鼠标选中,当然也不能进行再编辑,在Flash中实现动态图形的选中与编辑,可以使Flash动态绘图的交互性更强,可以制作出实用的绘图程序。
论文关键词:动态绘图,选中,编辑
在教学中使用动态绘图有着静态绘图无法比拟的优点,然而在Flash中如何使这些用程序绘制的图形可以用鼠标选中并再次编辑呢?解决这一问题可使其交互性进一步提高。现以绘制函数图像的具体实例说一说在Flash中如何实现动态图形的选中与编辑。
一、实例最终效果:制作一个可以精确绘制数学函数图像的Flash,可以任意添加函数图像,用鼠标单击其中一个函数图像时可选中相应的图像,并且可以对其进行删除或再编辑等操作。
二、设计思路:
1、创建基类为“MovieClip”的类,在类中定义存储函数参数的变量并编写画函数图像的函数。
2、每添加一个函数图像创建一个相应类的对象,当改变函数的参数信息时,由对象中的绘图函数绘制出函数图像,同时将参数信息保存到对象中的相应变量里。
3、创建对象的同时为其添加需要的鼠标侦听事件。
4、当鼠标单击这些动态图形时,通过重绘不同颜色的函数图像达到选中的效果,同时将对象中变量保存的函数参数信息返还给相应的组件,这样就可以对这些动态图形再次进行编辑了。
三、实现过程
1、准备工作,添加静态图形、文字、组件等。
首先启动AdobeFlashcs4创建一个新的FlashActionScript3.0文件,使用默认的舞台大小550×400,在用程序绘制动态图像前,先用Flash绘图工具制作界面和一些静态的图形,这样可以简化程序,当然在制作的过程中也要使用一些技巧才能使这些静态图形快速绘制完成并与程序绘制图形准确的结合。
(1)绘制坐标系和网格线
以窗口坐标系上的点(275,200)为坐标原点绘制直角坐标系,并绘制上网格,如图1所示,此步使用属性面板和对齐面板可轻松完成,注意每个两个刻度间的长度都是20个象素,因为后面动态绘图是以20个象素为一个单位长度,当然也可以只画坐标系或都不画,并不影响动态图形选中与编辑效果的实现。

图1
(2)绘制界面
锁定原有图层,在上层添加一个新图层,绘制如图2所示的界面,图中间网格部分是下层内容的。单击关键帧选中本层所绘制的界面,按F8将其转换为影片剪辑元件,名称为“界面”,再按“del”键将其删除。

图2
(3)在“界面”元件中添加内容。
插入一个影片剪辑元件,名称为“抛物线方程”,用文字工具输入文字,插入三个NumericStepper组件,实例名称分别为:a1,b1,c1。
在属性面板中对三个组件实例的参数都设置如下:maxmum:10;minmum:-10;stepSize:0.1;value:0。
打开“界面”元件,将“抛物线方程”元件拖入其中,摆放到合适的位置,实例名称为:pwxfc。
在适当的位置插入三个“Button”组件,在属性面板参数中将其“Label”值分别设为“添加抛物线”、“确定”和“删除”,实例名分别为:add_pwx、ok和shanchu。如图3:

图3
(4)打开库面板,右击“界面”元件,在快捷菜单中选择“属性”,在元件属性中设置类为“jm”。
(5)以“动态图形的选中与编辑.fla”为文件名保存。
2、编写动态绘图程序。
(1)首先新建一个“ActionScript”文件,保存为“pwx_mc.as”,与“动态图形的选中与编辑.fla”放在同一文件夹中。
在其中输入如下内容:
package{
importflash.display.MovieClip;//导入类MovieClip
publicclasspwx_mcextendsMovieClip{//定义pwx_mc类,继承自MovieClip类
publicconsttuxing:String='pwx';//定义常量tuxing,当同时绘制多种函数图像时用于区分。
publicvarn:uint;//用于保存函数图像在flash文件中的标号
publicvara1:Number;//这三句的变量用于保存一元二次方程(抛物线)的参数
publicvarb1:Number;
publicvarc1:Number;
publicfunctionpwx_mc(){//在此构造函数未用为空
}
publicfunctiondraw_pwx(color:String){//定义draw_pwx函数,用于画抛物线图像,参数color传递颜色信息。
//下面的x0,y0是以窗口客户区坐标系中点(275,200)为原点,一个象素为一个单位长度的平面直角坐标系中的点的坐标x,y值。
varx0:Number=-275;
//用x1,y1表示以窗口客户区坐标系中点(275,200)为原点,20个象素为一个单位长度的平面直角坐标系中的点的坐标x、y值。
varx1:Number=x0/20;
//下句用二次函数求出y1
vary1:Number=a1*Math.pow(x1,2)+b1*x1+c1;
vary0:Number=y1*20;
//x2,y2为窗口客户区坐标系中点的坐标x,y值。 1/2 1 2 下一页 尾页 |