“计算机硬件组成”交互课件的设计与实现

☆张丽娜

（韶关学院教育学院，广东韶关512000）

“计算机硬件组成”交互课件的设计与实现

☆张丽娜

（韶关学院教育学院，广东韶关512000）

文章主要从系统的角度出发，阐述了“计算机硬件组成”交互课件的设计过程，详细介绍了如何利用Flash软件和AS3对课件主要模块功能的实现方法。

交互课件；Flash CS5；AS3

Flash作为一款非常流行和广泛使用的二维动画制作工具，具有容量小、交互性强、成本低、兼容性好、表现力丰富等特点。利用Flash整合多种媒体能够方便快速地制作出界面友好、高度交互、反馈迅速、适应学生个别需求的自主学习型课件［1］，可以激发学生学习的兴趣，提高学习的主动性，促使其高效学习。本文主要介绍如何利用Flash软件，制作一个能够让学生在轻松愉快的情境下，有效地学习和掌握计算机硬件知识的交互课件。

一、课件设计的前端分析

（一）学习者特征分析

该课件主要面向初中及小学高年级学生。从知识结构来看，学生对计算机已经有了一定的了解，认识鼠标、键盘等基本硬件设备，还掌握了简单的应用软件操作，如：打字、浏览网页和玩游戏等，但对计算机的系统组成、内部结构认识不清晰。从心理特点来看，这个年龄段的学生对学习计算机有着浓厚的兴趣和很强的好奇心，学习思维具有明显的形象性，喜欢看一些色彩丰富、可爱卡通的画面，对书本上枯燥的文字知识的学习热情的持久度不高。因此，课件设计中的知识内容主要以色彩丰富而美观合理的图形、图像、视频及动画形式呈现，界面的交互操作要简单清楚，否则，会给学生带来学习负担，使其容易失去学习兴趣，大大降低课件的教育效果。

（二）学习内容分析

该课件的学习内容是计算机硬件系统的组成，主要包括计算机各硬件的名称、功能、简单工作原理等介绍内容，以及主要硬件的正确安装。

（三）学习目标分析

该课件旨在让学生知道计算机各硬件的名称，了解各硬件的功能和基本工作原理，掌握主要硬件的安装位置和方法，为以后学习更高层次的知识打下基础。

（四）制作平台分析

课件制作软件选用Adobe Flash CS5，动作脚本语言采用ActionScript（简称AS）3.0，播放器选择IE浏览器或Adobe Flash Player 9.0以上版本。AS是Flash互动程序的核心部分，也在发展中走向成熟，AS 3.0是AS发展史上的一个里程碑，它的脚本编写功能超越了其早期版本（AS1和AS2），极大地减轻了XML数据处理工作量，全面支持正则表达式，代码的执行速度更快，实现了真正意义上的面向对象［2］。

二、课件系统设计

（一）结构框架设计

播放课件时首先呈现情境导入界面，然后是主界面，其中，有5个模块：“开始学习”、“视频教程”、“小练习”、“关于作品”、“退出”。单击模块按钮可以进入相应的内容，结构框架如图1所示。

图1　课件结构框架

（二）界面设计

根据主要界面，设计了六个场景，依次命名为“daoru”、“main”、“xuexi”、“shipin”、“lianxi”、“guanyu”。

1.“情境导入”界面（“daoru”场景）

“在浩瀚的大海中，有一名船长，他的电脑坏了……现在，他需要身为船员的你帮他去附近岛上的小村庄买一些电脑硬件回来进行更换安装。船长怕你不懂，于是，制作了这个课件。”通过故事创设情境，在故事中嵌入任务，引出学习内容，可以激发学生的学习兴趣和求知的欲望，提高学习的积极性和主动性。

根据学生的特征，制作了一个戴骷髅头帽和独眼罩的、有点邪恶又不失可爱的年轻海盗船长，作为整个故事情节的衔接者，让学生在其引导下，清楚知道下一步该怎样做。使用“船舵”进入课件学习的交互按钮，有趣而呼应情景，如图2所示。为了方便学生再次学习内容时快速进入主界面，在课件导入界面的底端设计了“跳过”按钮。

图2　进入界面

2.主界面（“main”场景）

主界面主要包括“开始学习”、“视频教程”、“小练习”、“关于作品”以及“退出”等按钮（如图3）。

图3　主界面

3.“开始学习”界面（“xuexi”场景）

“开始学习”界面如图4（左）所示。因为海盗的一生离不开寻找宝藏，所以，选择制作一张藏宝图作为背景。阅读完船长的提示语，点击“好的”进入学习界面，如图4（右）所示，主要包括音量控制条、硬件按钮、返回按钮以及木板。

图4　开始学习界面

4.“视频教程”界面（“shipin”场景）

“视频教程”界面如图5（左），制作背景为海盗船长工作的房间，让学生感觉仿佛在船长的引导下进行学习。学生阅读完说明后，点击“好的”进入视频播放界面，如图5（右）所示，界面的主要元素包括视频、木板以及返回按钮。

图5　视频教程界面

5.“小练习”界面（“lianxi”场景）

“小练习”界面如图6（左）。背景由绘制的木板和羊皮纸组成。学生阅读完说明后，点击“好的”开始进行硬件的模拟安装，界面如图6（右）所示。界面的主要元素包括羊皮纸背景、各硬件以及返回按钮。

图6　小练习界面

6.“关于作品”界面（“guanyu”场景）

“关于作品”界面主要介绍该课件的制作平台、使用方式以及作者相关信息等。“退出”界面则为点击后退出课件。制作较简单，不再赘述。

三、课件主要模块的功能及实现

（一）“开始学习”模块

进入该模块，学生可以通过左边的音量控制条选择是否需要背景音乐和设置音量大小。为达到直观的效果，用硬件矢量图形作为按钮，点击相关按钮，木板上就会显示出对应的硬件知识。

1.音量控制的实现

（1）导入背景音乐

为了减小课件体积，课件中的音频并没有直接导入到Flash中，而是使用代码导入外部mp3文件。实现代码如下：

（2）控制音量大小

首先，制作3个影片剪辑元件，分别为音量控制条的滑块元件（命名为hk_mc），滑块与音量条合在一起的元件（命名为hkkz_mc），然后添加一个动态文本以显示音量的大小（命名为yldx_txt），再将这三者组合在一起制成音量控制元件（命名为a_mc）。控制音量的代码如下：

2.硬件按钮的实现

首先，独立绘制硬件按钮元件并设置相应的实例名称，并添加一个事件侦听器；然后，为相应的函数添加命令，跳转到不同的帧。每个按钮的跳转实现方法类似，这里以CPU为例，控制代码如下：

另外，在时间轴的第345帧上添加stop（）语句停止运行，木板上则呈现出CPU的相关知识。

3.“返回”按钮的实现

设置“开始学习”场景中的“返回”按钮实例名称为ss_btn，在as图层相应帧上添加以下代码：

（二）“视频教程”模块

1.转换视频格式

Flash可导入的外部视频格式有限，可以利用“格式工厂”软件将准备好的视频教程素材转换成swf格式。

2.导入视频

建立一个用来存储导入的swf视频的影片剪辑元件（命名为spjcswf_mc），并在as图层的相应帧上添加如下代码：

3.“返回”视频到主场景

设置视频教程中“返回”按钮的实例名称为fanhui_btn，在as图层的相应帧上添加以下代码：

（三）“小练习”模块

实现每个硬件拖动安装的方法类似，这里以CPU为例介绍如何实现模拟安装效果。首先，在“lianxi”场景中，把CPU影片剪辑元件命名为cpu_mc；然后，在as图层的相应帧上添加以下代码：

正确拖动硬件CPU前后效果如图7所示。

图7　拖动效果图

当正确安装CPU后，界面的左上角将会出现下一个需要安装的硬件。当所有硬件正确安装后，则会提示是否需要重新练习（如图8）。

图8　安装成功效果图

［1］梁瑞仪，曾亦琦.Flash多媒体课件制作教程［M］，北京：清华大学出版社，2010：216.

［2］章精设，胡登涛.Flash ActionScript3.0从入门到精通［M］.北京：清华大学出版社，2008：2.

［编辑：陈钺；实习编辑：黄燕玲］

G434

A

1671-7503（2015）21-0075-04