王玢玥 李冬梅 李華穎 姚佳璐 王仁生

摘要：“數(shù)據(jù)結(jié)構(gòu)”是計(jì)算機(jī)專業(yè)的核心課程，涉及大量深?yuàn)W、抽象的概念和算法，傳統(tǒng)的教學(xué)方式難以引起學(xué)生的學(xué)習(xí)興趣，容易造成學(xué)習(xí)效率低下。針對(duì)這種教學(xué)背景，我們利用Flash開發(fā)了可視化的算法演示系統(tǒng)。該系統(tǒng)在播放代碼的同時(shí)，播放動(dòng)畫演示以及代碼解釋，實(shí)現(xiàn)了算法原理、實(shí)例演示、數(shù)據(jù)變化的同步動(dòng)態(tài)展示。利用該系統(tǒng)進(jìn)行教學(xué)，改進(jìn)了原有的板書、演示文稿的教學(xué)模式，降低了教師的講解難度以及學(xué)生對(duì)課程的理解難度，提高了教學(xué)效率。

關(guān)鍵詞：數(shù)據(jù)結(jié)構(gòu)；Flash；算法演示

中圖分類號(hào)：G642.0 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1674-9324（2016）28-0167-02

一、引言

“數(shù)據(jù)結(jié)構(gòu)”是計(jì)算機(jī)學(xué)科的算法理論基礎(chǔ)，是軟件設(shè)計(jì)的技術(shù)基礎(chǔ)，但是課程內(nèi)容晦澀難懂，其中算法又具有很強(qiáng)的抽象性和動(dòng)態(tài)性。雖然如今教學(xué)方式已經(jīng)不僅僅局限于板書，而是越來越多的借助電子信息進(jìn)行輔助教學(xué)，但是僅僅使用PowerPoint，代碼配上圖片形式的講解并不足以連貫地展示算法的實(shí)現(xiàn)過程。目前，有多種工具可以實(shí)現(xiàn)算法的動(dòng)態(tài)演示功能，較為常見的例如VB、C++、JAVA等高級(jí)編程語(yǔ)言，而這些高級(jí)語(yǔ)言雖然表現(xiàn)效果可觀，但是在實(shí)現(xiàn)上難度較大。Flash是一款目前比較流行的，廣泛應(yīng)用于動(dòng)畫、視頻、網(wǎng)頁(yè)等多個(gè)領(lǐng)域的動(dòng)畫制作軟件。同時(shí)，F(xiàn)lash具有良好的操作性和交互性，如今已被廣泛應(yīng)用于教育領(lǐng)域，成為課堂課后教育的重要輔助工具，對(duì)教學(xué)中遇到的重難點(diǎn)起到重要的輔助作用。本文使用了Flash CS6進(jìn)行制作，借助可視化平臺(tái)，根據(jù)用戶的需求動(dòng)態(tài)地展示算法演示全過程，使用戶可以直觀地學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)涉及的算法及模型，加深理解，有效彌補(bǔ)傳統(tǒng)教學(xué)方式的不足之處，取得更為理想的教學(xué)成果。

二、系統(tǒng)設(shè)計(jì)

（一）界面設(shè)計(jì)

算法演示系統(tǒng)主要由兩大界面構(gòu)成，分別是主界面以及算法演示界面。主界面具體包括兩部分：一部分為主菜單，主菜單為導(dǎo)航界面，包含書本全部章節(jié)供用戶選擇；另一部分為詳細(xì)菜單，幫助用戶在章節(jié)目錄下進(jìn)一步找到所需算法，同時(shí)方便用戶不用返回至主界面即可完成章節(jié)之間以及算法之間的切換，在主界面中用戶可以隨時(shí)返回首頁(yè)或退出。算法演示界面主要包括五部分，界面左側(cè)為代碼展示界面和變量跟蹤界面，右側(cè)為動(dòng)畫演示界面和代碼描述界面，最下方為步驟說明界面。在演示系統(tǒng)中，用戶可以選擇動(dòng)畫演示的全屏播放或窗口播放。用戶可以選擇自動(dòng)播放，速度也可以選擇快或者慢，這主要是為了掌握算法的整體結(jié)構(gòu)。當(dāng)然，用戶如果想要一步一步的了解每行代碼的意義，可以手動(dòng)操控點(diǎn)擊下一步，這樣看得很清楚很詳細(xì)，如果想返回看上一步，也可以選擇上一步。

（二）功能設(shè)計(jì)

為了幫助用戶更好地理解數(shù)據(jù)結(jié)構(gòu)所涉及的算法，系統(tǒng)主要實(shí)現(xiàn)了五大功能：代碼展示功能、代碼描述功能、動(dòng)畫演示功能、變量跟蹤功能以及步驟說明功能。

1.代碼展示功能：左側(cè)包含相應(yīng)算法的完整代碼描述，用戶可以輕松完成對(duì)代碼描述的簡(jiǎn)單瀏覽，在動(dòng)態(tài)演示過程中，當(dāng)前執(zhí)行代碼字體顏色會(huì)由黑色變?yōu)榧t色，并進(jìn)行短暫的閃爍，和動(dòng)畫演示同步，幫助用戶理解算法代碼描述的含義。

2.代碼描述功能：在演示區(qū)的上方，用簡(jiǎn)單的文字對(duì)應(yīng)當(dāng)前執(zhí)行的每一行代碼，解釋說明當(dāng)前正在執(zhí)行的代碼的功能。

3.動(dòng)畫演示功能：動(dòng)畫的動(dòng)態(tài)演示是本系統(tǒng)的核心功能，由于算法的抽象性難以用語(yǔ)言直接描述，將一個(gè)簡(jiǎn)單的例子用動(dòng)畫的形式直觀展現(xiàn)，動(dòng)態(tài)地展現(xiàn)出算法中涉及的數(shù)據(jù)結(jié)構(gòu)隨著算法代碼描述的一步步執(zhí)行的變化情況，用戶可以選擇自動(dòng)播放、操控播放、暫停按鈕并根據(jù)自身情況調(diào)節(jié)播放速度，也可以通過上一步、下一步按鈕選擇手動(dòng)播放，單步執(zhí)行的演示方式。

4.變量跟蹤功能：在算法的執(zhí)行過程中，算法中涉及的變量的數(shù)值也在不斷地發(fā)生變化，當(dāng)代碼中所涉及的變量發(fā)生變化時(shí)，變量就會(huì)閃爍，類似于代碼的閃爍功能，使用閃爍的字體強(qiáng)調(diào)變化更新。

5.步驟說明功能：對(duì)動(dòng)畫演示的算法的步驟進(jìn)行簡(jiǎn)單地說明。

三、系統(tǒng)實(shí)現(xiàn)和關(guān)鍵技術(shù)

系統(tǒng)的開發(fā)主要基于Flash實(shí)現(xiàn)，關(guān)鍵技術(shù)主要涉及算法動(dòng)畫演示的實(shí)現(xiàn)和按鈕功能的實(shí)現(xiàn)。

（一）算法動(dòng)畫演示的實(shí)現(xiàn)

因?yàn)樗兴惴ǖ膭?dòng)態(tài)展示包含基本功能相同，所以我們首先做了一個(gè)搭建好基本框架模板，即將頁(yè)面劃分好塊，分為標(biāo)題區(qū)、代碼展示區(qū)、代碼描述區(qū)、動(dòng)畫演示區(qū)、變量跟蹤區(qū)以及步驟說明區(qū)，然后在建立好模板的基礎(chǔ)上進(jìn)行套用即可，這樣就提高了系統(tǒng)的開發(fā)效率。

制作代碼模塊時(shí)，先將算法代碼描述輸入文本框后分離，之后將代碼描述按行或按演示的具體需要分成代碼段，再將分開的每一部分轉(zhuǎn)化為元件進(jìn)行編輯。元件的制作過程如下：在第一幀關(guān)鍵幀上設(shè)代碼為黑色，在第五幀關(guān)鍵幀上設(shè)為紅色，在第十幀關(guān)鍵幀上設(shè)為黑色。具體幀數(shù)并不是固定的，可以根據(jù)需求定義幀數(shù)，這樣可實(shí)現(xiàn)紅色閃爍功能。

在算法演示到相應(yīng)代碼段時(shí)，將相應(yīng)編輯好的元件替代原有元件，從而實(shí)現(xiàn)對(duì)當(dāng)前正在演示的代碼描述語(yǔ)句紅色閃爍的功能。對(duì)于不需要實(shí)現(xiàn)用戶修改數(shù)據(jù)功能的動(dòng)畫演示，其制作重點(diǎn)在于元件的制作和補(bǔ)間動(dòng)畫的創(chuàng)建。元件的制作過程同上，補(bǔ)間動(dòng)畫的創(chuàng)建是為了實(shí)現(xiàn)動(dòng)畫的動(dòng)態(tài)變換過程。例如排序算法需要實(shí)現(xiàn)數(shù)字的排序，數(shù)字的位置變換就要通過補(bǔ)間動(dòng)畫來完成。將數(shù)字轉(zhuǎn)換為元件方可創(chuàng)建補(bǔ)間動(dòng)畫，移動(dòng)數(shù)字元件可畫出一條運(yùn)動(dòng)軌跡，并在補(bǔ)間動(dòng)畫上設(shè)好關(guān)鍵幀即可完成動(dòng)畫制作。將算法演示按照算法的執(zhí)行順序，分成多個(gè)演示步驟，并通過在動(dòng)畫演示的主時(shí)間軸的關(guān)鍵幀上設(shè)置標(biāo)簽把按鈕代碼和動(dòng)畫結(jié)合起來，每一個(gè)標(biāo)簽對(duì)應(yīng)一個(gè)按鈕，也對(duì)應(yīng)每一步動(dòng)畫，從而實(shí)現(xiàn)代碼對(duì)動(dòng)畫播放的控制。

（二）按鈕功能的實(shí)現(xiàn)

通過觀察視頻播放器中控制視頻播放的按鈕的功能，實(shí)現(xiàn)動(dòng)畫演示中控制用戶控制動(dòng)畫播放按鈕。我們利用Actionscript3.0語(yǔ)言編寫實(shí)現(xiàn)按鈕的腳本代碼，通過對(duì)ENTER_FRAME事件的偵聽動(dòng)畫播放到哪一步，以實(shí)現(xiàn)動(dòng)畫演示播放到最后一幀時(shí)自動(dòng)停止播放、單擊上一步或下一步按鈕時(shí)能使動(dòng)畫播放一步后停在相應(yīng)的位置等功能，通過對(duì)鼠標(biāo)單擊事件的偵聽實(shí)現(xiàn)用戶單擊播放、下一步、重置、上一步按鈕時(shí)對(duì)演示播放的控制，并通過在動(dòng)畫演示的主時(shí)間軸的關(guān)鍵幀上設(shè)置標(biāo)簽把按鈕代碼和動(dòng)畫結(jié)合起來，從而實(shí)現(xiàn)代碼對(duì)動(dòng)畫播放的控制，用戶可以根據(jù)自己對(duì)算法的理解情況，自主地控制算法的演示過程，動(dòng)畫控制按鈕具有一定的健壯性，對(duì)用戶友好。

四、系統(tǒng)特點(diǎn)

數(shù)據(jù)結(jié)構(gòu)算法演示系統(tǒng)主要具有友好性、適用性、動(dòng)態(tài)交互性和教學(xué)趣味性四大特點(diǎn)。

1.友好性，系統(tǒng)無需安裝，內(nèi)附可執(zhí)行文件，直接運(yùn)行即可；系統(tǒng)操作簡(jiǎn)單，界面友好。

2.適用性，課件內(nèi)容與“十二·五”國(guó)家級(jí)規(guī)劃教材配套，涵蓋教材中大部分重要算法的演示。此教材發(fā)行量大，已被全國(guó)100多所院校選用。課件可用于教師課堂教學(xué)也可用于學(xué)生課后自學(xué)。

3.動(dòng)態(tài)交互性，課件將教材中的對(duì)應(yīng)算法以代碼、變量、注釋、動(dòng)畫四位一體模式全方位靈活地展現(xiàn)，從不同角度展現(xiàn)了算法的動(dòng)態(tài)執(zhí)行過程，使抽象的算法形象化、生動(dòng)化。用戶可以根據(jù)接受知識(shí)的速度，控制算法動(dòng)態(tài)展現(xiàn)的過程。用戶可以對(duì)算法的輸入數(shù)據(jù)進(jìn)行修改，使學(xué)習(xí)者從不同角度理解算法的執(zhí)行過程。

4.教學(xué)趣味性，除了動(dòng)畫的動(dòng)態(tài)演示，還利用Flash編寫了一些與算法有關(guān)的小游戲，使學(xué)生在游戲過程中深刻體會(huì)理解算法的思想和執(zhí)行過程，增加學(xué)習(xí)的趣味性。

五、結(jié)論

本文介紹的算法演示系統(tǒng)使用Flash實(shí)現(xiàn)了數(shù)據(jù)結(jié)構(gòu)的動(dòng)態(tài)演示，可以將算法的執(zhí)行過程中生動(dòng)地展現(xiàn)給用戶。該系統(tǒng)可用于課堂教學(xué)，教師在課堂上將抽象、復(fù)雜的算法生動(dòng)形象地展示給學(xué)生，提高課堂教學(xué)效率；也可供學(xué)生課后使用，通過該課件對(duì)算法進(jìn)行自學(xué)或者復(fù)習(xí)，加深學(xué)生對(duì)算法的理解和學(xué)習(xí)，提高學(xué)習(xí)效率。

參考文獻(xiàn)：

[1]嚴(yán)蔚敏，李冬梅，吳偉民.數(shù)據(jù)結(jié)構(gòu)（C語(yǔ)言版）[M].北京：人民郵電出版社，2015.

[2]鐘鋒.《數(shù)據(jù)機(jī)構(gòu)》網(wǎng)絡(luò)課程的設(shè)計(jì)與實(shí)現(xiàn)研究[J].中國(guó)教育信息化，2013，（299）：51-54.

[3]張朝，許猛煒，等.計(jì)算機(jī)圖形學(xué)算法演示系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)教育，2015，（19）：77-79.

[4]劉小英.計(jì)算機(jī)圖形學(xué)可視化教學(xué)演示系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].攀枝花學(xué)院報(bào)，2015，32（5）：22-24.

[5]李毅波.數(shù)據(jù)結(jié)構(gòu)與算法學(xué)習(xí)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].長(zhǎng)沙：中南大學(xué)，2012.

[6]李海英.ActionScript在動(dòng)態(tài)交互式C語(yǔ)言算法仿真動(dòng)畫中的研究[J].中國(guó)教育信息化，2012，（286）：79-81.

[7]諶志群，王榮波.基于Flash的編譯算法動(dòng)態(tài)演示系統(tǒng)設(shè)計(jì)[J].計(jì)算機(jī)時(shí)代，2011，（9）：59-63.

[8]吳艷，陳魯玉.基于Flash MX“計(jì)算機(jī)圖形學(xué)”直線生成算法演示系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].長(zhǎng)春師范學(xué)院學(xué)報(bào)（自然科學(xué)版），2013，32（4）：33-35.

[9]隋雪潔，楊偉.算法演示系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].軟件導(dǎo)刊，2015，14（7）：142-144.

[10]張文升，周青云，周曉聰.算法演示系統(tǒng)研究與應(yīng)用[J].計(jì)算機(jī)應(yīng)用與軟件，2008，25（10）：41-43.