數據結構算法演示系統的設計

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

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

關鍵詞：數據結構；Flash；算法演示

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

一、引言

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

二、系統設計

（一）界面設計

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

（二）功能設計

為了幫助用戶更好地理解數據結構所涉及的算法，系統主要實現了五大功能：代碼展示功能、代碼描述功能、動畫演示功能、變量跟蹤功能以及步驟說明功能。

1.代碼展示功能：左側包含相應算法的完整代碼描述，用戶可以輕松完成對代碼描述的簡單瀏覽，在動態演示過程中，當前執行代碼字體顏色會由黑色變為紅色，并進行短暫的閃爍，和動畫演示同步，幫助用戶理解算法代碼描述的含義。

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

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

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

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

三、系統實現和關鍵技術

系統的開發主要基于Flash實現，關鍵技術主要涉及算法動畫演示的實現和按鈕功能的實現。

（一）算法動畫演示的實現

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

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

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

（二）按鈕功能的實現

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

四、系統特點

數據結構算法演示系統主要具有友好性、適用性、動態交互性和教學趣味性四大特點。

1.友好性，系統無需安裝，內附可執行文件，直接運行即可；系統操作簡單，界面友好。

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

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

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

五、結論

本文介紹的算法演示系統使用Flash實現了數據結構的動態演示，可以將算法的執行過程中生動地展現給用戶。該系統可用于課堂教學，教師在課堂上將抽象、復雜的算法生動形象地展示給學生，提高課堂教學效率；也可供學生課后使用，通過該課件對算法進行自學或者復習，加深學生對算法的理解和學習，提高學習效率。

參考文獻：

[1]嚴蔚敏，李冬梅，吳偉民.數據結構（C語言版）[M].北京：人民郵電出版社，2015.

[2]鐘鋒.《數據機構》網絡課程的設計與實現研究[J].中國教育信息化，2013，（299）：51-54.

[3]張朝，許猛煒，等.計算機圖形學算法演示系統的設計與實現[J].計算機教育，2015，（19）：77-79.

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

[5]李毅波.數據結構與算法學習系統的設計與實現[D].長沙：中南大學，2012.

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

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

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

[9]隋雪潔，楊偉.算法演示系統設計與實現[J].軟件導刊，2015，14（7）：142-144.

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