基于as3.0的计算机硬件安装交互课件开发

董会权

摘要：该文提出了在计算机基础课程教学中，计算机硬件方面的教学内容的一些不足，提出了教学上利用交互式课件的模式，并重点介绍了如何开发一款计算机硬件安装的课件。

关键词：AS3.0；交互；事件监听；MouseEvent

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2015）09-0126-03

Abstract： This paper is presented in the teaching of computer basic courses， some shortcomings of the teaching content of computer hardware， puts on the teaching mode of interactive courseware， and focuses on how to develop a computer hardware installation of the courseware.

Key words： AS3.0； Interactive； Event listener； MouseEvent

1 开发背景

在计算机公共课教学中，计算机硬件的教学内容是该课程的一个重要组成。但在教学中一般的过程是介绍硬件系统的组成、工作原理、各个硬件参数等。学生几乎没有对实际硬件接触乃至组装的机会。如果没有实际的接触和组装，这部分的教学效果会大打折扣，笔者根据自己的教学实际需求，利用FLASH CS5.5 AS3.0及Photoshop设计和开发了一款适合计算机硬件教学的交互式课件。

2 课件基本模块设计

本课件根据教学实际需求包含硬件系统工作原理、具体硬件介绍、安装演示、仿真安装练习和测试习题五个部分

工作原理介绍功能：利用动画演示计算机对数据加工处理的基本过程。分为输入、存储、运算和输出4个环节。

主要硬件介绍功能：利用动画演示每个硬件在计算机中的位置，物理外形、主要参数等

安装演示功能：利用教学录像演示计算机硬件的整个安装流程，先介绍硬件实物然后进入具体安装，整个过程有配音和字幕。

模拟仿真安装：利用交互式动画建立一个模拟仿真的安装环境，使用者通过拖放式的游戏进行硬件的模拟安装。

习题练习功能：利用交互功能创建单项选择练习题环境，使用者可以通过练习检验自己所学知识的掌握情况。

3 主界面搭建

主界面是一个导航界面，通过主界面可以跳转到前面所述的各个功能模块。主界面建立在技术上主要是利用图形绘制界面，添加相应按钮来进行跳转控制。跳转控制主要通过编写按钮的CLICK事件监听程序来实现。界面的基本外观如图1所示。

4 各个功能实现

1）工作原理介绍功能实现

首先建立独立场景，在本场景下导入相关基本素材。整个工作原理介绍为一个完整的动画自动演示过程，以一个显示二进制数的元件模拟一个被加工处理的数据，利用带有箭头的线段作为控制线、数据线和地址线的信号变化和方向变化。在控制线动画的作用下产生输入动作，数据元件从输入设备端进入通过数据线进入内存，内存中一个带有地址编号的单元出现该数据表示一个存储动作。在通过控制线动画模拟发出运算指令向内存取数据，内存中数据元件进入CPU，随后进行运算操作。控制线再发出存放数据指令将运算后的数据存入内存中。控制线发出输出指令，数据通过数据线传递至输出设备，整个动画演示结束。本部分的功能实现首先要清楚了解计算机的基本工作原理，然后在技术实现上能够更形象描述出每个动作变化。对每个环节上动画之间顺序进行正确编排，本部分基本不需要代码编写即可完成。

2）硬件演示实现

硬件演示的目标是告诉学习者每个硬件在计算机中所处位置，物理外观如何以及主要参数意义。因此本模块采用了二级导航，用户选择不同硬件按钮后播放不同的动画内容，如单击“CPU”按钮时，首先显示CPU在计算机中的位置；然后弹出物理外观图；同时介绍物理外观下的各个部分；最后放大CPU背面显示主要参数。其他硬件部分以此类推。

3）硬件系统安装演示实现

在这部分功能中主要是一个教学录像片。教学录像录制时，先介绍每个主要独立硬件，安装工具，最后是安装过程。在安装过程录制时有每一步骤的配音，安装步骤科学安排。首先是在主板上安装CPU、风扇、内存和显示卡；然后将主板固定于机箱，将机箱相关连线与主板连接；安装硬盘及光驱；封箱后连接键盘鼠标显示器等外围设备。

教学录像中的一些重要环节应该加入提示标记等符号，因此录制完成后再利用会声会影加以编辑。在相应的时段加入提示符号，提示字幕来为学习者更加详细的解释安装过程。

4）硬件安装仿真实现

该功能可以解决实际安装需要拆解机器，造成器件消耗的成本问题。安装仿真采用交互游戏的模式，学习者可以通过在模拟环境下的操作来进行安装的练习。

以主板硬件安装为例，首先需要完成素材准备。为了模拟该环境，将一个主板和主板上所有插接的原件拍摄成图片；利用Photoshop对图片中主板上的原件进行截取，保存为独立图片。该工作结束后，将得到主板及所插接硬件的整体图片，主板上插接的各个部件（如显卡、内存、CPU等）图片。第二部将上述图片导入Flash库中，在新建场景中，利用导入的图片创建主板元件及主板上插接部件相关的元件，将这些元件一一放入场景中，布局位置大概位置如图2所示，同时为各个元件实例进行命名。命名是为了在后续的程序代码中对这些元件进行引用。

在基本场景及元件建立完成后，核心工作是对指定的元件进行编码来完成模拟安装交互操作。以内存安装为例。首先场景右侧放置了内存的元件，实例名称为nc；在主板上内存位置放置了一个内存元件，实例名称为ncs；在主板内存相应位置制作一个与此位置图形一致的图形元件，实例名为nccz；在动作代码中将ncs设置为不可见，this.ncs.alpha=0。然后编写nc和nccz的监听代码。

Nc元件的代码主要是响应鼠标拖动，拖动中释放鼠标时检测其是否与nccz元件发生了hitTestObject事件；如果发生则令ncs可见，拖放结束，nc不可见；否则nc回到原来位置。具体代码如下：

function release_xk（event：MouseEvent）

{if （tnc.hitTestObject（nccz））

{this. nc.alpha = 0；

this.tnc.stopDrag（）；

this.ncs.alpha = 100；}

else

{tnc.y = 235.85；

tnc.x = 80.15；

nc.stopDrag（）；}}

function move_nc（event：MouseEvent）

{this.nc.startDrag（）；}

nc.addEventListener（MouseEvent.MOUSE_DOWN，move_nc）；

tnc.addEventListener（MouseEvent.MOUSE_UP，release_xk）；

测试时，拖动nc元件，如果nc元件正好被拖动至nccz上释放鼠标，则ncs控件会显示在内存应该所在位置；如果没有在nccz上释放鼠标，那么hitTestObject事件不会发生，则nc将回到原来位置显示，可以继续进行拖动操作。

5）单选练习功能实现

创建场景如图3所示，主要包含了4个复选按钮控件ca、cb、cc、cd，作为4个选项按钮，添加了3个按钮st、xt、pd，st切换到上一题；xt切换到下一题；pd判断答题结果。该功能的主要控制逻辑是当操作者做出选择并单击判断按钮后，根据选择的选项是否正确给出提示，提示方式是播放一个正确zq或错误cw的影片剪辑。

主要代码如下：

判断作答是否正确代码

Function pd1（pd：MouseEvent）

{if（ca.selected==0 &&cb.selected==1 &&cc.selected==0 &&cd.selected==0）

{right_mc.play（）；}

else{

false_mc.play（）；}}

pd.addEventListener（MouseEvent.CLICK，pd1）；

试题之间切换代码

function xyt（e：MouseEvent）

{this.nextFrame（）；}

xt.addEventListener（MouseEvent.CLICK，xyt）；

//跳转上一题；

function xyt（e：MouseEvent）

{this.prevFrame（）；}

xt.addEventListener（MouseEvent.CLICK，xyt）；

5 测试应用

经过调试后，最后发布生成swf文件，在本学期的课堂教学中投入实际应用。在硬件教学中主要以该课件进行，学生对这种形式非常欢迎，课堂教学效果有了进一步改善。尤其是模拟安装练习和习题测试，由于是具有交互性的环境学生乐于反复尝试，这要最直接的结果就是对计算机硬件课程内容的良好掌握。

参考文献：

[1] 刘绍英， 刘成锁. 网络课件设计[J]. 中国电化教育， 2002（7）.

[2] 朱凌云， 罗廷锦， 余胜泉. 网络课程评价[J]. 开放教育研究， 2002（1）.