工程制图在线习题指导系统的设计与实现.doc

1 前言
1.1 国内外研究现状
随着社会经济的飞速发展，目前网络化教育代表了教育改革的一个发展方向，已经成为现代教育的一个特征。事实上在线习题指导系统也正是人们的研究热点之一。但是由于工程制图图形数据的复杂性和特殊性，工程制图在线习题指导系统的设计与实现存在不同程度的难度。
网络教学系统是通过网络表现的某门学科的教学内容及实施的教学活动的总和。随着网络技术和信息技术的迅速发展,网络课程的建设也正在蓬勃的发展。
工程制图在线习题指导系统是二次开发中制图动画的设计与实现。一方面,要分析并讨论如何进行动画设计的整个过程,包括工程制图习题的选择、解题过程的分析、Flash界面的规划等方面,尤其结合系统的开发过程,叙述使用某种开发工具作为设计支撑平台的全过程。另一方面,要从整个系统的应用程序软件部分的需求分析入手,按照软件工程的开发要求,进行二次开发工程制图在线习题指导系统的设计过程。
目前不管是国内还是国外在这方面都在花费着大量的人力和物力，来实现教育的网络化，让学生不用天天呆在学校就能够学习，并且可以反复练习自己不会的习题；从而也能够通过这方面的研究来增强本国的科技水平与自动化水平，从而提高经济与军事力量。
1.2 选题的目的及意义
工程制图是理工科类主要的基础课之一，学生绘图的能力直接影响学生今后在工程设计上的能力。由于传统的工程绘图教学方式，使得学生只能按照投影规律，在脑海中抽象的构思立体图形，不能有效地调动学生的空间思维能力；从而调动不出学生学习的主动性和积极性。因此，开发一个具有适合学生在线进行习题指导与练习的系统，具有很重要的实际意义和应用价值。
随着现代网络技术的迅速发展,《工程制图》的教学手段和方法也发生着日新月异的变化。它由传统的黑板板书、挂图、模型的授课形式,转向了以计算机课件、虚拟模型演示等方法的教学模式上来,从而提高了教学的效率和质量。
机械设计中，一般都采用AutoCAD、Solidworks、Solidedge等设计软件，在复杂CAD问题或特殊用途的设计中，依据原有软件的功能往往难以解决问题或者效率低下，在此情况下，根据客户的特殊用途进行软件的客户化定制和二次开发，往往能够迅速提高企业的生产效率和技术水平。当前我们如何将三维的图更加形象的展现给设计人员，我们借助flash的功能，让机械图形象动漫一样富有立体感与动态感，而工程制图在线习题指导的设计也是实现这一功能的一部分。
对工程制图在线习题指导系统的二次开发，是以"双主模式"的教学设计为指导,开发研究多操作平台间图形交互的习题解答、在线指导、思路设计、动画模拟和操作练习为一体的动态交互系统,实现理论教学和实践教学的适时交互。深入讨论工程制图在线习题指导系统的设计,分析对图形支撑平台系统的要求,提出一个开放的由习题库、答案库和习题三维模型库组成的习题集图形库系统。
本文将工程制图绘图软件与Flash动画制作软件相结合,并利用Dreamweaver网页制作软件，开发一套工程制图在线习题指导系统。该系统包括：工程制图习题原型、习题解题思路及过程、立体模型展示、习题解体结果与分析等，实现学生能够在线进行习题指导的学习，提高自主学习，并且通过工程制图动画过程，提高学生的学习兴趣，提高学生的立体空间分析能力。
由于工程制图课程的特殊性，需要对一些立体和元件模型有比较直观形象的认识，通过普通的文字和图片则难以达到很好的效果。
总之，本课题的设计主要实现学生能够在线进行习题练习，摆脱没有老师的现场指导就无法进行困难题的解答的麻烦，从而提高学生的自主学习的能力。

2 支撑平台及开发工具的选择
2.1 Flash MX制作动画
Macromedia公司是美国的一个著名软件公司，它主要生产多媒体、网页制作和网站管理软件。在1998年，Macromedia公司收购了FutureSplash原创的电脑公司，同时将该公司生产的Director网络插件FutureSplash继续升级发展，相继推出了Flash2,Flash3,Flash4,Flash5。现在Macromedia公司终于推出了最新版本的FlashMX简体中文版。
Macromedia Flash MX根据设计者与开发者的要求，可以提供支持各种主要平台与设备的Internet多媒体内容及软件。通过视觉处理，开发者可以嵌入软件支持的多媒体客户端技术。此外，习惯了Macromedia Flash的设计者也可以利用以后发表的支持Macromedia Flash MX的服务技术，进一步发展现有的制作技巧，将其嵌入发到多媒体应用软件中。
Macromedia公司已经把Flash与它的其他产品更加紧密的联系在一起，目前，Flash的播放器代码已植入到各种主流网页浏览器中。Flash的功能可以使创建的网页更加适应各种网页的浏览器。事实证明，目前还没有哪个网页制作软件能像Flash一样，可以既容易又出色地创作出一个高效、全屏和具有交互式动画效果的网页。Flash的用户界面已被重新设计，它使专业图像设计师和网页设计师在使用它时感到更加方便。
2.1.1 Flash MX的功能介绍
Flash具有强大的功能，以下是Flash的基本功能。
（1）具有强大的矢量绘图和动画制作功能，图像质量高，制作的动画和网页数据量小。
（2）导入和发布功能强。可以导入点阵图，OuickTime格式电影文件和MP3音乐格式文件等，可以发布MP3音乐格式文件等。
（3）插件的工作方式。只要机器内安装Shockwave Flash插件的浏览器，即可观看FlashMX动画。采用“流式方式”播放FlashMX动画，文件没有全部下载即可观看已下载的内容。
（4新的Flash播放器可以直接在网上下载最新版本的Flash播放器。
（5）可以充分调用Flash MX文件内部库中的元件重复利用资源。只要这个库下载后，其他电影都可以不再下载共享的文件，而直接使用这个库中的文件，使文件字节数减少。
（6）新增加了许多功能更强大的动作脚本函数、属性和目标对象，兼容并支持Flash以前的版本。在使用动作脚本时，Flash MX将用颜色来区分哪些代码对以前的Flash播放器兼容。
（7）Apple授权使用Flash的播放器可以内置于Apple产品中，这样就可以通过OuickTime播放Flash的图片、电影和具有交互能力的图像。
（8）采用与动作脚本类似的语法结构以及新的文本编辑区和调试区，可进一步提高程序的开发能力，开发更多的可扩展的工具，用来开发Web应用程序。
（9）动作脚本编辑器允许有普通模式两种模式。所有的脚本程序均可从外部脚本文件调入，外部的脚本文件可以是任何ASCII码的文本文件。
（10）支持XML。
2.1.2 Flash MX制作动画的过程
（1）从题材库中选择需要处理的图形，如图2.1所示；

图2.1 工程机械习题图

（2）启动Flash MX的工作界面；
（3）打开“文件”菜单，创建一个新的Flash MX文档；
（4）通过“复制”——“粘贴”，将要处理的图形导入Flash MX图层1的舞台上，在Flash MX图层1的舞台上，同时输入解题步骤；
（5）打开“窗口”菜单命令，在其下拉菜单上选择“公用库”——“按钮”，打开“库—按钮”面板，选择与解题步骤对应的按钮，如图2.2所示；

图2.2 Flash MX动画的初始界面

（6）插入新的图层2，在图层2上的时间轴上插入两个相距一定距离的两个“关键帧”；
（7）将指针放在图层2的第一个“关键帧”上，根据（4）中的解题步骤①，作出相应的动画辅助线；
（8）将两个“关键帧”之间插入一个新的“关键帧”， 将指针放在图层2的第一个“关键帧”上，选择作出的动画辅助线，右击，选择“时间轴特效”—“变形转换”—“转换”命令打开变形控制面板，选择相应的变形命令，“确定”即可；如图2.3所示；
（9）插入新的图层，重复以上操作，完成整个动画；
（10）选择一个新的图层，在其上选择需要插入“停止”动作的帧，右击，打开“动作”属性面板，选择“全局函数”—“时间轴控制”—“stop”命令，此帧就具有了指定的停止行为，其上有一个小的字母a；
（11）将图层1设置为当前图层，右击插入的按钮，右击，打开动作按钮，在“动作—帧”属性面板上，打开“全局函数”—“影片剪辑控制”—“on”命令，双击，在弹出的对话框中，选择“release”命令，然后选择“全局函数”—“时间轴控制”—“gotoAndPlay”命令,输入每个动作发生前的第一个关键帧所在时间轴上的帧；

图2.3 “变形”控制面板

（12）检查完成所有的动作及行为，打开“控制”—“测试影片”，如图2.4所示；

图2.4 Flash MX测试影片
2.2 Dreamweaver MX制作网页
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
DREAMWEAVER、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手。
2.2.1 Dreamweaver MX的功能介绍
Dreamweaver MX具有强大的功能，以下是Dreamweaver MX基本功能：
一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。
Macromedia Dreamweaver MX 测试版新增功能如下：
（1）加强的用户界面；
（2）多重用户配置；
（3）增强的源代码编辑功能；
（4）扩展的文档格式支持；
（5）加强的服务器模式扩展；
（6）改进的数据库链接操作；
（7）提升了与外部应用程序的协作功能。
Dreamweaver MX与FrontPage的功能类似，以下是Dreamweaver MX的优点：
（1）产生的垃圾代码少，网页可读性好，可以提高网页浏览速度；
（2）通过图层功能，可以快速制作出复杂的页面，图片定位更容易；
（3）可基本解决IE与Netscape的兼容性；
（4）设计思路广，内涵丰富，创作随意性强，可充分展现你的创意。
2.2.2 Dreamweaver MX 制作网页的过程
（1）打开Dreamweaver MX的工作界面；
（2）在“文件”菜单中，选择“新建”，创建一个新的HTML文档；
（3）点击菜单上的“站点”—“新建站点”定义一个新的站点，例如：站点的名称定义为,那么，在“文件”面板上的站点选项卡中出现了刚刚定义的站点;
(4) 右击，新建站点的文件夹，便会自动生成一个以“untitled.htm”命名的网页，打开此网页界面便可设计网页界面；
（5）在此网页上编辑进入工程制图在线习题指导的初始网页，运行结果如图3.3所示；
（6）重复以上操作，分别制作untitled1.htm网页和untitled2.htm网页，运行结果如图3.4，图3.5所示；
（7）打开网页untitled.htm，选中机械制图，单击“链接”文件夹，在弹出的对话框中，选择untitled1.htm网页，则实现了网页untitled1.htm与网页untitled.htm的链接；
（8）打开网页untitled1.htm，选中工程制图在线指导，单击“链接”文件夹，在弹出的对话框中，选择untitled2.htm网页，则实现了网页untitled2.htm与网页untitled1.htm的链接；
（9）打开网页untitled2.htm，分别选中7-1-1、7-1-2、7-1-3、7-1-4、7-1-5、7-1-6，分别单击“链接”文件夹，在弹出的对话框中，在同一个文件夹中，分别链接Flash MX动画7-1-1、7-1-2、7-1-3、7-1-4、7-1-5、7-1-6，则实现了Flash MX动画7-1-1、7-1-2、7-1-3、7-1-4、7-1-5、7-1-6与网页untitled2.htm的链接；
（10）单击untitled2.htm网页上的题号，运行结果如图2.5所示；

图2.5 Flash在网页上的显示结果

3 系统总体结构的分析与设计
本系统的主要目的是让学生能够在线进行工程制图习题指导，针对不同学生的学习程度的差异进行个性化的辅导教学。这样，学生在课后练习时，可以进行自我学习，通过动画指导显示，及时获取需要的知识点，发现自己存在的学习问题，以便查漏补缺。对于教师来说，应用本系统可以减轻授课时，苦口婆心的指导，另外还可以通过其他系统检测学生的学习情况，为此本系统必须要满足学生不仅方便学习，还要形象直观的学习的要求。
3.1系统总体结构的分析
在在线习题指导过程中，习题的答案与解题思路（解题步骤）必须做规划处理。即是合并同类的图形对像。可以将答案图形分解成为若干个元件，这一过程需要通过CAD软件来进行绘制，但一定要保证图形的标准性。把在AutoCAD里面绘制在图形导入或通过“复制”——“粘贴”到FlashMX中，并且将这些元件分别制作成两类，一类是用来定位标准答案的，另一类是用来制作可以挪动的待选的图形。对这写AutoCAD绘制的图形来说，可以在FlashMX中建立元件库，因为FlashMX中的元件具有可重复利用的优点。因此，可以简化绘图的繁琐过程。另外，答案的归一化是在制作习题之前完成的。
由于绘图思路的不同，所以不同制作者的解题步骤也不同，所以制作者一定要把解题的步骤表达清楚，易于学生理解，另外，绘制工程的、图形时，一定要严格按照制图的标准进行，粗细线分明，如相贯穿线、中心线、剖面线、隐藏线等等使用规范。
FlashMX动画绘制的内容在如下几个方面进行：
（1） 各种图元选择要正确。
（2） 各种图元定位、定形之间的相对位置要正确
（3） 组合成的图像结果要与标准答案一致。
（4） 对应的知识点进行直接查阅与学习，
DreamweaverMX网页绘制的内容在如下几个方面进行：
（1） 网页的制作界面邀清晰。简单，让学生能够一目了然。
（2） 网页的内容不仅仅包含工程制图的相关内容，还要涉及其他方面，例如学院的宣传，学院的新闻等。
（3） 网页的内容要与学习有关，不准涉及其他方面的与学习无关的不良信息，更不准其他网站侵入。
（4） 尽量减少垃圾代码的使用，提高网页浏览速度。
（5） 设计思路要广泛，丰富页面内容。
另外，学生应如何进入在线习题指导，访问2011届毕业生的毕业设计（二次开发类），如图3.1展示了进入该系统的过程：

图3.1 访问流程图
3.2系统总体结构的设计
本次的工程制图在线习题指导系统的设计与实现，本着二次开发的目的，设计与开发的内容要丰富，构思要新颖。在现有的工程制图在线习题指导系统的基础上，设计与开发出新的功能。不但要拥有原有在线习题指导系统的功能，而且要有新的在线习题指导功能出现，这才是本次设计与二次开发的目的。使得原有的工程制图在线习题指导系统能够进一步完善，能够适合现在学生自主学习并满足学生的要求，能够与现代高科技信息技术相衔接，实现工程制图在线习题指导在教学领域有一定质的飞跃，这样才使得本次的设计与二次开发更具有意义。
那么怎样才能够实现系统的功能呢？如何去设计系统的总体结构才是关键，下面是系统总体结构设计的步骤及结构图（图3.2所示）：

图3.2 系统总体结构图

（1）图形素材的准备。通过现在最流行的绘图软件Auto CAD或者是通过CAXA、Solidedge等，将习题完整的绘制出来，包括一些辅助线在内，图形的绘制尽量不要过于复杂，并且各种线条的使用要符合机械制图的标准，否则容易使学生混淆。
（2）Flash动画制作。将上一步绘制的习题图形，按照本步设计的思路，将图形拆分，组建成Flash MX中的图元件，然后从图元件库中调出元件，通过Flash的功能，使得元件件具有设计者所想的动态效果。在这一设计过程中，图元件的定位一定要准确，否则会使得作出的动画准确性下降，体现不出解题过程的思路。另外，还可以通过Flash的绘图功能，将不容易处理的图元件进行Flash绘图，从而也增加了Flash在设计中发挥的作用。设计者在这一方面一定要有所创新，根据具体情况的需要，适当发挥自己的想象力，在设计上要有新的突破，思路也要清楚明了，还可以添加一定的声音，达到动画生文并茂的效果，本次的设计也体现了这一点。
（3）Dreameaner网页制作。在Dreamweaver网页制作过程中，本着内容要丰富、画面要清晰地特点，这次的设计在这一方面要加倍注意。首先，Dreamweaver网页制作的站点连接要与暨南大学机械工程学院的站点相衔接，制作的网页的名称也是以工程机械西安海关的名字定义；其次，网页的内容不要过于单一，使得页面不能够吸引访问者的兴趣，但也不要太过于繁琐，体现不出网页的清晰性与鲜明性，网页画面的设计一定要适中，适当的加入一些学院的信息机学院活动图片等，用来增加学院的宣传效果；最后，Dreamweaver制作的网页与Flash动画的超级链接，这一边设计才是重中之重。
下面介绍Dreamweaver设计过程中的程序及功能实现问题。

例一：
程序：

ta http-equiv="Content-Type" content="text/html; charset=gb2312">
Untitled Document

<!--
body,td,th {
color: #FF00FF;
font-size: xx-large;
}
body {
background-color: #00FFFF;
margin-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bott</p><p style='height:0px;padding:0;overflow:hidden'>28、om: 0px;
}
.style1 {font-size: xx-large}
-->

/W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Untitled Document

<!--
body,td,th {
font-size: xx-large;
color: #FF00FF;
}
body {
ba</p><p style='height:0px;padding:0;overflow:hidden'>31、ckground-color: #00FFFF;
margin-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->

<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((a</p><p style='height:0px;padding:0;overflow:hidden'>32、ppName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->

g src="file:///C|/Documents%20and%20Settings/Administrator/桌面/clip_image002.jpg" width="807" height="123">机设类