☆張麗娜

（韶關(guān)學(xué)院教育學(xué)院，廣東韶關(guān)512000）

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

☆張麗娜

（韶關(guān)學(xué)院教育學(xué)院，廣東韶關(guān)512000）

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

交互課件；Flash CS5；AS3

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

一、課件設(shè)計的前端分析

（一）學(xué)習(xí)者特征分析

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

（二）學(xué)習(xí)內(nèi)容分析

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

（三）學(xué)習(xí)目標(biāo)分析

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

（四）制作平臺分析

課件制作軟件選用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ù)處理工作量，全面支持正則表達(dá)式，代碼的執(zhí)行速度更快，實現(xiàn)了真正意義上的面向?qū)ο螅?］。

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

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

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

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

（二）界面設(shè)計

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

1.“情境導(dǎo)入”界面（“daoru”場景）

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

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

圖2　進(jìn)入界面

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

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

圖3　主界面

3.“開始學(xué)習(xí)”界面（“xuexi”場景）

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

圖4　開始學(xué)習(xí)界面

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

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

圖5　視頻教程界面

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

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

圖6　小練習(xí)界面

6.“關(guān)于作品”界面（“guanyu”場景）

“關(guān)于作品”界面主要介紹該課件的制作平臺、使用方式以及作者相關(guān)信息等?！巴顺觥苯缑鎰t為點擊后退出課件。制作較簡單，不再贅述。

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

（一）“開始學(xué)習(xí)”模塊

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

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

（1）導(dǎo)入背景音樂

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

（2）控制音量大小

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

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

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

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

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

設(shè)置“開始學(xué)習(xí)”場景中的“返回”按鈕實例名稱為ss_btn，在as圖層相應(yīng)幀上添加以下代碼：

（二）“視頻教程”模塊

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

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

2.導(dǎo)入視頻

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

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

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

（三）“小練習(xí)”模塊

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

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

圖7　拖動效果圖

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

圖8　安裝成功效果圖

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

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

［編輯：陳鉞；實習(xí)編輯：黃燕玲］

G434

A

1671-7503（2015）21-0075-04