☆張麗娜

（韶關學院教育學院，廣東韶關512000）

“計算機硬件組成”交互課件的設計與實現(xiàn)

☆張麗娜

（韶關學院教育學院，廣東韶關512000）

文章主要從系統(tǒng)的角度出發(fā)，闡述了“計算機硬件組成”交互課件的設計過程，詳細介紹了如何利用Flash軟件和AS3對課件主要模塊功能的實現(xiàn)方法。

交互課件；Flash CS5；AS3

Flash作為一款非常流行和廣泛使用的二維動畫制作工具，具有容量小、交互性強、成本低、兼容性好、表現(xiàn)力豐富等特點。利用Flash整合多種媒體能夠方便快速地制作出界面友好、高度交互、反饋迅速、適應學生個別需求的自主學習型課件［1］，可以激發(fā)學生學習的興趣，提高學習的主動性，促使其高效學習。本文主要介紹如何利用Flash軟件，制作一個能夠讓學生在輕松愉快的情境下，有效地學習和掌握計算機硬件知識的交互課件。

一、課件設計的前端分析

（一）學習者特征分析

該課件主要面向初中及小學高年級學生。從知識結(jié)構(gòu)來看，學生對計算機已經(jīng)有了一定的了解，認識鼠標、鍵盤等基本硬件設備，還掌握了簡單的應用軟件操作，如：打字、瀏覽網(wǎng)頁和玩游戲等，但對計算機的系統(tǒng)組成、內(nèi)部結(jié)構(gòu)認識不清晰。從心理特點來看，這個年齡段的學生對學習計算機有著濃厚的興趣和很強的好奇心，學習思維具有明顯的形象性，喜歡看一些色彩豐富、可愛卡通的畫面，對書本上枯燥的文字知識的學習熱情的持久度不高。因此，課件設計中的知識內(nèi)容主要以色彩豐富而美觀合理的圖形、圖像、視頻及動畫形式呈現(xiàn)，界面的交互操作要簡單清楚，否則，會給學生帶來學習負擔，使其容易失去學習興趣，大大降低課件的教育效果。

（二）學習內(nèi)容分析

該課件的學習內(nèi)容是計算機硬件系統(tǒng)的組成，主要包括計算機各硬件的名稱、功能、簡單工作原理等介紹內(nèi)容，以及主要硬件的正確安裝。

（三）學習目標分析

該課件旨在讓學生知道計算機各硬件的名稱，了解各硬件的功能和基本工作原理，掌握主要硬件的安裝位置和方法，為以后學習更高層次的知識打下基礎。

（四）制作平臺分析

課件制作軟件選用Adobe Flash CS5，動作腳本語言采用ActionScript（簡稱AS）3.0，播放器選擇IE瀏覽器或Adobe Flash Player 9.0以上版本。AS是Flash互動程序的核心部分，也在發(fā)展中走向成熟，AS 3.0是AS發(fā)展史上的一個里程碑，它的腳本編寫功能超越了其早期版本（AS1和AS2），極大地減輕了XML數(shù)據(jù)處理工作量，全面支持正則表達式，代碼的執(zhí)行速度更快，實現(xiàn)了真正意義上的面向?qū)ο螅?］。

二、課件系統(tǒng)設計

（一）結(jié)構(gòu)框架設計

播放課件時首先呈現(xiàn)情境導入界面，然后是主界面，其中，有5個模塊：“開始學習”、“視頻教程”、“小練習”、“關于作品”、“退出”。單擊模塊按鈕可以進入相應的內(nèi)容，結(jié)構(gòu)框架如圖1所示。

圖1　課件結(jié)構(gòu)框架

（二）界面設計

根據(jù)主要界面，設計了六個場景，依次命名為“daoru”、“main”、“xuexi”、“shipin”、“l(fā)ianxi”、“guanyu”。

1.“情境導入”界面（“daoru”場景）

“在浩瀚的大海中，有一名船長，他的電腦壞了……現(xiàn)在，他需要身為船員的你幫他去附近島上的小村莊買一些電腦硬件回來進行更換安裝。船長怕你不懂，于是，制作了這個課件?！蓖ㄟ^故事創(chuàng)設情境，在故事中嵌入任務，引出學習內(nèi)容，可以激發(fā)學生的學習興趣和求知的欲望，提高學習的積極性和主動性。

根據(jù)學生的特征，制作了一個戴骷髏頭帽和獨眼罩的、有點邪惡又不失可愛的年輕海盜船長，作為整個故事情節(jié)的銜接者，讓學生在其引導下，清楚知道下一步該怎樣做。使用“船舵”進入課件學習的交互按鈕，有趣而呼應情景，如圖2所示。為了方便學生再次學習內(nèi)容時快速進入主界面，在課件導入界面的底端設計了“跳過”按鈕。

圖2　進入界面

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

主界面主要包括“開始學習”、“視頻教程”、“小練習”、“關于作品”以及“退出”等按鈕（如圖3）。

圖3　主界面

3.“開始學習”界面（“xuexi”場景）

“開始學習”界面如圖4（左）所示。因為海盜的一生離不開尋找寶藏，所以，選擇制作一張藏寶圖作為背景。閱讀完船長的提示語，點擊“好的”進入學習界面，如圖4（右）所示，主要包括音量控制條、硬件按鈕、返回按鈕以及木板。

圖4　開始學習界面

4.“視頻教程”界面（“shipin”場景）

“視頻教程”界面如圖5（左），制作背景為海盜船長工作的房間，讓學生感覺仿佛在船長的引導下進行學習。學生閱讀完說明后，點擊“好的”進入視頻播放界面，如圖5（右）所示，界面的主要元素包括視頻、木板以及返回按鈕。

圖5　視頻教程界面

5.“小練習”界面（“l(fā)ianxi”場景）

“小練習”界面如圖6（左）。背景由繪制的木板和羊皮紙組成。學生閱讀完說明后，點擊“好的”開始進行硬件的模擬安裝，界面如圖6（右）所示。界面的主要元素包括羊皮紙背景、各硬件以及返回按鈕。

圖6　小練習界面

6.“關于作品”界面（“guanyu”場景）

“關于作品”界面主要介紹該課件的制作平臺、使用方式以及作者相關信息等。“退出”界面則為點擊后退出課件。制作較簡單，不再贅述。

三、課件主要模塊的功能及實現(xiàn)

（一）“開始學習”模塊

進入該模塊，學生可以通過左邊的音量控制條選擇是否需要背景音樂和設置音量大小。為達到直觀的效果，用硬件矢量圖形作為按鈕，點擊相關按鈕，木板上就會顯示出對應的硬件知識。

1.音量控制的實現(xiàn)

（1）導入背景音樂

為了減小課件體積，課件中的音頻并沒有直接導入到Flash中，而是使用代碼導入外部mp3文件。實現(xiàn)代碼如下：

（2）控制音量大小

首先，制作3個影片剪輯元件，分別為音量控制條的滑塊元件（命名為hk_mc），滑塊與音量條合在一起的元件（命名為hkkz_mc），然后添加一個動態(tài)文本以顯示音量的大小（命名為yldx_txt），再將這三者組合在一起制成音量控制元件（命名為a_mc）?？刂埔袅康拇a如下：

2.硬件按鈕的實現(xiàn)

首先，獨立繪制硬件按鈕元件并設置相應的實例名稱，并添加一個事件偵聽器；然后，為相應的函數(shù)添加命令，跳轉(zhuǎn)到不同的幀。每個按鈕的跳轉(zhuǎn)實現(xiàn)方法類似，這里以CPU為例，控制代碼如下：

另外，在時間軸的第345幀上添加stop（）語句停止運行，木板上則呈現(xiàn)出CPU的相關知識。

3.“返回”按鈕的實現(xiàn)

設置“開始學習”場景中的“返回”按鈕實例名稱為ss_btn，在as圖層相應幀上添加以下代碼：

（二）“視頻教程”模塊

1.轉(zhuǎn)換視頻格式

Flash可導入的外部視頻格式有限，可以利用“格式工廠”軟件將準備好的視頻教程素材轉(zhuǎn)換成swf格式。

2.導入視頻

建立一個用來存儲導入的swf視頻的影片剪輯元件（命名為spjcswf_mc），并在as圖層的相應幀上添加如下代碼：

3.“返回”視頻到主場景

設置視頻教程中“返回”按鈕的實例名稱為fanhui_btn，在as圖層的相應幀上添加以下代碼：

（三）“小練習”模塊

實現(xiàn)每個硬件拖動安裝的方法類似，這里以CPU為例介紹如何實現(xiàn)模擬安裝效果。首先，在“l(fā)ianxi”場景中，把CPU影片剪輯元件命名為cpu_mc；然后，在as圖層的相應幀上添加以下代碼：

正確拖動硬件CPU前后效果如圖7所示。

圖7　拖動效果圖

當正確安裝CPU后，界面的左上角將會出現(xiàn)下一個需要安裝的硬件。當所有硬件正確安裝后，則會提示是否需要重新練習（如圖8）。

圖8　安裝成功效果圖

［1］梁瑞儀，曾亦琦.Flash多媒體課件制作教程［M］，北京：清華大學出版社，2010：216.

［2］章精設，胡登濤.Flash ActionScript3.0從入門到精通［M］.北京：清華大學出版社，2008：2.

［編輯：陳鉞；實習編輯：黃燕玲］

G434

A

1671-7503（2015）21-0075-04