基于Animate的循环嵌套演示动画设计与开发

孙 杰，杨 洁，党元晓

（昌吉学院，昌吉 831100）

0 引言

高级程序语言中，一个循环语句的循环体内又包含另一个或者多个循环语句，此种结构称为循环嵌套［1-4］。该结构可用来解决复杂问题的程序设计，比如求阶乘和、输出三角形、解百钱买百鸡和分解质因数等问题，另外外层和内层循环计数器的变化规律与C语言二维数组的行列下标变化顺序呈现一致性，方便对数组元素的操作。但是在实际教学过程中，初次接触编程的大学生很难理解循环嵌套结构的执行过程和循环总次数计算的含义。

为此采用Animate矢量动画软件［5］编写循环嵌套执行过程的演示动画，帮助程序学习者理解其涵义。在演示动画设计时，将循环体执行一次的过程看作为一个MovieClip（后简称MC）小球沿矩形运动一圈的路径动画，那么内层循环就是嵌入在矩形路径上的又一个矩形路径动画，如此便可形象化循环嵌套的执行过程。同时，为了演示不同内外层循环次数的循环嵌套，使用Animate工具箱中的输入文本工具接受用户的输入，从而构建不同的循环嵌套结构。在理工科大学生C语言程序设计和Java程序设计课程教学实践中，使用演示动画讲解循环嵌套，学生反馈较好。

1 Animate动画软件

Animate是新一代网页交互动画制作软件［6］，它在继承Adobe Flash专业二维矢量动画制作软件功能的基础上，增加了许多新特性，比如：自动关键帧、虚拟摄像头、图像矢量化、画笔镜像和资源变形等新功能，这不仅让原有使用者拥有熟悉的开发环境，而且增强了网页音视频的编辑制作能力，特别是Animate对HTML5的支持［7-8］，使它摆脱了对特定播放器的依赖，在浏览器窗口中可以实现音视频的播放和交互动画，另外其针对Adobe Flash Player运行时环境的ActionScrip编程语言—AS3.0支持面向对象程序设计开发［9］，强化了动画的交互能力和动态设计功能。

2 循环嵌套演示动画制作

2.1 动画界面设计

演示动画的界面如图1所示，背景采用纯色填充，主要分为四个区域：①为标题区，主要是显示动画的主题；②为动画交互区域，主要是输入外层和内层循环次数，以及点击演示按钮，开始动画演示；③是循环嵌套路径动画演示区；④是界面底部区域，一般用于显示版权和制作者。

图1 循环嵌套执行演示动画界面

2.2 元件设计

该演示动画在制作过程中主要创建了按钮和影片剪辑两类共计六个主要元件，分别是演示按钮、外循环小球（MC）、内循环小球（MC）外循环上半圈动画（MC）、外循环下半圈动画（MC）和内循环动画（MC）。六个元件分别如图2至图7所示。

图2 演示按钮

图3 外循环小球

图4 内循环小球

图5 外循环上半圈动画

图6 外循环下半圈动画

图7 内循环动画

图5至图7均为路径动画，第一层为小球，第二层为引导层。外循环动画分解为上、下半圈动画，主要是为后续在编程中按不同时序加载不同元件，实现外内层循环的执行过程，其加载顺序为：外层上半圈动画-->内层循环动画-->外层下半圈动画。并且在这三个MC的最后一帧添加如下脚本：

目的是在每个MC播放完毕后在舞台上清除该MC，同时停止MC的播放。

2.3 输入文本控制内外层循环次数的实现

为使动画能够演示不同内外层循环次数的循环嵌套结构，在界面的首页分别设置两个输入文本框，用于接受用户的输入。为防止不正确的输入，在演示按钮点击时首先对输入文本进行检测，其代码如下：

演示按钮被点击时调用ys函数，该函数主要是保证输入的外循环和内循环次数不能为0和负数。

2.4 演示动画的类编写

当用户输入的内外循环次数符合设定条件，舞台（stage）时间轴上的第一帧就会跳转到run⁃face标记帧，该帧执行NestedLoop类中的start⁃Loop（outerNum:int, innerNum:int）方法，Nested⁃Loop类的UML图［11-12］如图8所示。

图8 NestedLoop类图

其中mcArray为存储影片剪辑MC的Array数组，wxhUp为外循环上半圈影片剪辑类，nxh为内循环影片剪辑类，wxhDown为外循环下半圈影片剪辑类，currenFrame代表当前帧，cur⁃rentMc代表当前影片剪辑，numInnerLoop为当前内循环次数，numOuterLoop为当前外循环次数，startLoop（）启动循环嵌套演示动画方法，checkAndPlayFrame（）为判断影片剪辑是否播放到最后一帧以及数组中影片剪辑是否全部播放完毕的方法。其中startLoop（）方法的伪代码［13］如下：

由于Animate不提供检测影片剪辑是否播放完毕的系统函数，因此本类中checkAndPlay⁃Frame（）方法实现了：判断影片剪辑是否播放到最后一帧；数组中影片剪辑是否全部播放完毕；顺次在舞台添加影片剪辑并逐帧播放影片剪辑三个功能。其具体代码如下：

代码段第一个if语句是用来判断当前影片剪辑是否播放完毕，第二if语句判断数组中影片剪辑是否遍历完毕，当同时满足后，依次清除舞台上的影片剪辑，移除帧上的监听器，清空文本内容，使用gotoAndStop（“face”）将播放指针自动跳转到第一帧，即界面处（标记为face）。否则，将当前影片剪辑放入舞台中，将当前帧指针指向第一帧，播放指针指向当前帧。

经过上述四个主要设计步骤，当用户分别输入外层循环次数和内层循环次数，点击“演示”按钮后，外层红色小球沿左侧中点向上沿红色矩形移动到绿色矩形框，内层绿色小球开始沿绿色矩形移动（移动圈数等于内循环次数），外层红色小球从绿色矩形底部中点沿循环嵌套演示动画运行效果如图9所示。

图9 循环嵌套演示动画

3 演示动画的教学应用

为验证循环嵌套演示动画对帮助学生理解循环嵌套的执行过程的有效性，笔者选择该校某理工科专业开设《C语言程序设计》课程［14］的B2001和B2002两个班，讲授“循环嵌套”这一章节，其中B2001班不使用该演示动画，采用书上的顺序和例子讲解，B2002班先讲循环嵌套定义，再讲循环嵌套种类，然后讲执行过程，同时使用动画演示，并将该动画发给每位学生让其操作体验，最后讲解循环嵌套编程实例。学完本节后，通过雨课堂发布课堂练习题和循环嵌套章节测试题，题目包括5道选择题、3道填空题和1道编程题，内容涉及循环嵌套定义、循环嵌套形式、循环嵌套执行过程、外内层循环计数器变换规律、循环嵌套执行总次数和使用循环嵌套解决问题能力。要求学生独立完成，提交后统计两个班的平均得分，见表1。

表1 测试平均得分

从对照班级和实验班级平均得分可以看出，实验班级循环嵌套测试题的得分显著高于对照班级，进一步说明演示动画有助于学生理解循环嵌套的涵义。

4 结语

循环嵌套执行过程属于C语言和Java程序设计中的难点内容，为使学生更好理解，采用Animate专业二维矢量动画制作软件制作演示动画，在制作过程中将循环体执行一次看作MC沿矩形路径移动一圈的动画，从而形象化地演示了循环嵌套的执行过程，将复杂概念形象化。