數(shù)據(jù)結(jié)構(gòu)算法演示系統(tǒng)的設(shè)計

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

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

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

中圖分類號：G642.0 文獻標志碼：A 文章編號：1674-9324（2016）28-0167-02

一、引言

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

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

（一）界面設(shè)計

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

（二）功能設(shè)計

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

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

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

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

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

5.步驟說明功能：對動畫演示的算法的步驟進行簡單地說明。

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

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

（一）算法動畫演示的實現(xiàn)

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

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

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

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

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

四、系統(tǒng)特點

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

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

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

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

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

五、結(jié)論

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

參考文獻：

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

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

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

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

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

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

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

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

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

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