基于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沿矩形路徑移動一圈的動畫，從而形象化地演示了循環嵌套的執行過程，將復雜概念形象化。