数据结构算法演示系统的设计

2016-05-30王玢玥李冬梅李华颖姚佳璐王仁生

教育教学论坛 2016年28期

王玢玥李冬梅李华颖姚佳璐王仁生

摘要：“数据结构”是计算机专业的核心课程，涉及大量深奥、抽象的概念和算法，传统的教学方式难以引起学生的学习兴趣，容易造成学习效率低下。针对这种教学背景，我们利用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.