孫 杰，楊 潔，黨元曉

（昌吉學(xué)院，昌吉 831100）

0 引言

高級程序語言中，一個循環(huán)語句的循環(huán)體內(nèi)又包含另一個或者多個循環(huán)語句，此種結(jié)構(gòu)稱為循環(huán)嵌套［1-4］。該結(jié)構(gòu)可用來解決復(fù)雜問題的程序設(shè)計，比如求階乘和、輸出三角形、解百錢買百雞和分解質(zhì)因數(shù)等問題，另外外層和內(nèi)層循環(huán)計數(shù)器的變化規(guī)律與C語言二維數(shù)組的行列下標變化順序呈現(xiàn)一致性，方便對數(shù)組元素的操作。但是在實際教學(xué)過程中，初次接觸編程的大學(xué)生很難理解循環(huán)嵌套結(jié)構(gòu)的執(zhí)行過程和循環(huán)總次數(shù)計算的含義。

為此采用Animate矢量動畫軟件［5］編寫循環(huán)嵌套執(zhí)行過程的演示動畫，幫助程序?qū)W習(xí)者理解其涵義。在演示動畫設(shè)計時，將循環(huán)體執(zhí)行一次的過程看作為一個MovieClip（后簡稱MC）小球沿矩形運動一圈的路徑動畫，那么內(nèi)層循環(huán)就是嵌入在矩形路徑上的又一個矩形路徑動畫，如此便可形象化循環(huán)嵌套的執(zhí)行過程。同時，為了演示不同內(nèi)外層循環(huán)次數(shù)的循環(huán)嵌套，使用Animate工具箱中的輸入文本工具接受用戶的輸入，從而構(gòu)建不同的循環(huán)嵌套結(jié)構(gòu)。在理工科大學(xué)生C語言程序設(shè)計和Java程序設(shè)計課程教學(xué)實踐中，使用演示動畫講解循環(huán)嵌套，學(xué)生反饋較好。

1 Animate動畫軟件

Animate是新一代網(wǎng)頁交互動畫制作軟件［6］，它在繼承Adobe Flash專業(yè)二維矢量動畫制作軟件功能的基礎(chǔ)上，增加了許多新特性，比如：自動關(guān)鍵幀、虛擬攝像頭、圖像矢量化、畫筆鏡像和資源變形等新功能，這不僅讓原有使用者擁有熟悉的開發(fā)環(huán)境，而且增強了網(wǎng)頁音視頻的編輯制作能力，特別是Animate對HTML5的支持［7-8］，使它擺脫了對特定播放器的依賴，在瀏覽器窗口中可以實現(xiàn)音視頻的播放和交互動畫，另外其針對Adobe Flash Player運行時環(huán)境的ActionScrip編程語言—AS3.0支持面向?qū)ο蟪绦蛟O(shè)計開發(fā)［9］，強化了動畫的交互能力和動態(tài)設(shè)計功能。

2 循環(huán)嵌套演示動畫制作

2.1 動畫界面設(shè)計

演示動畫的界面如圖1所示，背景采用純色填充，主要分為四個區(qū)域：①為標題區(qū)，主要是顯示動畫的主題；②為動畫交互區(qū)域，主要是輸入外層和內(nèi)層循環(huán)次數(shù)，以及點擊演示按鈕，開始動畫演示；③是循環(huán)嵌套路徑動畫演示區(qū)；④是界面底部區(qū)域，一般用于顯示版權(quán)和制作者。

圖1 循環(huán)嵌套執(zhí)行演示動畫界面

2.2 元件設(shè)計

該演示動畫在制作過程中主要創(chuàng)建了按鈕和影片剪輯兩類共計六個主要元件，分別是演示按鈕、外循環(huán)小球（MC）、內(nèi)循環(huán)小球（MC）外循環(huán)上半圈動畫（MC）、外循環(huán)下半圈動畫（MC）和內(nèi)循環(huán)動畫（MC）。六個元件分別如圖2至圖7所示。

圖2 演示按鈕

圖3 外循環(huán)小球

圖4 內(nèi)循環(huán)小球

圖5 外循環(huán)上半圈動畫

圖6 外循環(huán)下半圈動畫

圖7 內(nèi)循環(huán)動畫

圖5至圖7均為路徑動畫，第一層為小球，第二層為引導(dǎo)層。外循環(huán)動畫分解為上、下半圈動畫，主要是為后續(xù)在編程中按不同時序加載不同元件，實現(xiàn)外內(nèi)層循環(huán)的執(zhí)行過程，其加載順序為：外層上半圈動畫-->內(nèi)層循環(huán)動畫-->外層下半圈動畫。并且在這三個MC的最后一幀添加如下腳本：

目的是在每個MC播放完畢后在舞臺上清除該MC，同時停止MC的播放。

2.3 輸入文本控制內(nèi)外層循環(huán)次數(shù)的實現(xiàn)

為使動畫能夠演示不同內(nèi)外層循環(huán)次數(shù)的循環(huán)嵌套結(jié)構(gòu)，在界面的首頁分別設(shè)置兩個輸入文本框，用于接受用戶的輸入。為防止不正確的輸入，在演示按鈕點擊時首先對輸入文本進行檢測，其代碼如下：

演示按鈕被點擊時調(diào)用ys函數(shù)，該函數(shù)主要是保證輸入的外循環(huán)和內(nèi)循環(huán)次數(shù)不能為0和負數(shù)。

2.4 演示動畫的類編寫

當用戶輸入的內(nèi)外循環(huán)次數(shù)符合設(shè)定條件，舞臺（stage）時間軸上的第一幀就會跳轉(zhuǎn)到run?face標記幀，該幀執(zhí)行NestedLoop類中的start?Loop（outerNum:int, innerNum:int）方法，Nested?Loop類的UML圖［11-12］如圖8所示。

圖8 NestedLoop類圖

其中mcArray為存儲影片剪輯MC的Array數(shù)組，wxhUp為外循環(huán)上半圈影片剪輯類，nxh為內(nèi)循環(huán)影片剪輯類，wxhDown為外循環(huán)下半圈影片剪輯類，currenFrame代表當前幀，cur?rentMc代表當前影片剪輯，numInnerLoop為當前內(nèi)循環(huán)次數(shù)，numOuterLoop為當前外循環(huán)次數(shù)，startLoop（）啟動循環(huán)嵌套演示動畫方法，checkAndPlayFrame（）為判斷影片剪輯是否播放到最后一幀以及數(shù)組中影片剪輯是否全部播放完畢的方法。其中startLoop（）方法的偽代碼［13］如下：

由于Animate不提供檢測影片剪輯是否播放完畢的系統(tǒng)函數(shù)，因此本類中checkAndPlay?Frame（）方法實現(xiàn)了：判斷影片剪輯是否播放到最后一幀；數(shù)組中影片剪輯是否全部播放完畢；順次在舞臺添加影片剪輯并逐幀播放影片剪輯三個功能。其具體代碼如下：

代碼段第一個if語句是用來判斷當前影片剪輯是否播放完畢，第二if語句判斷數(shù)組中影片剪輯是否遍歷完畢，當同時滿足后，依次清除舞臺上的影片剪輯，移除幀上的監(jiān)聽器，清空文本內(nèi)容，使用gotoAndStop（“face”）將播放指針自動跳轉(zhuǎn)到第一幀，即界面處（標記為face）。否則，將當前影片剪輯放入舞臺中，將當前幀指針指向第一幀，播放指針指向當前幀。

經(jīng)過上述四個主要設(shè)計步驟，當用戶分別輸入外層循環(huán)次數(shù)和內(nèi)層循環(huán)次數(shù)，點擊“演示”按鈕后，外層紅色小球沿左側(cè)中點向上沿紅色矩形移動到綠色矩形框，內(nèi)層綠色小球開始沿綠色矩形移動（移動圈數(shù)等于內(nèi)循環(huán)次數(shù)），外層紅色小球從綠色矩形底部中點沿循環(huán)嵌套演示動畫運行效果如圖9所示。

圖9 循環(huán)嵌套演示動畫

3 演示動畫的教學(xué)應(yīng)用

為驗證循環(huán)嵌套演示動畫對幫助學(xué)生理解循環(huán)嵌套的執(zhí)行過程的有效性，筆者選擇該校某理工科專業(yè)開設(shè)《C語言程序設(shè)計》課程［14］的B2001和B2002兩個班，講授“循環(huán)嵌套”這一章節(jié)，其中B2001班不使用該演示動畫，采用書上的順序和例子講解，B2002班先講循環(huán)嵌套定義，再講循環(huán)嵌套種類，然后講執(zhí)行過程，同時使用動畫演示，并將該動畫發(fā)給每位學(xué)生讓其操作體驗，最后講解循環(huán)嵌套編程實例。學(xué)完本節(jié)后，通過雨課堂發(fā)布課堂練習(xí)題和循環(huán)嵌套章節(jié)測試題，題目包括5道選擇題、3道填空題和1道編程題，內(nèi)容涉及循環(huán)嵌套定義、循環(huán)嵌套形式、循環(huán)嵌套執(zhí)行過程、外內(nèi)層循環(huán)計數(shù)器變換規(guī)律、循環(huán)嵌套執(zhí)行總次數(shù)和使用循環(huán)嵌套解決問題能力。要求學(xué)生獨立完成，提交后統(tǒng)計兩個班的平均得分，見表1。

表1 測試平均得分

從對照班級和實驗班級平均得分可以看出，實驗班級循環(huán)嵌套測試題的得分顯著高于對照班級，進一步說明演示動畫有助于學(xué)生理解循環(huán)嵌套的涵義。

4 結(jié)語

循環(huán)嵌套執(zhí)行過程屬于C語言和Java程序設(shè)計中的難點內(nèi)容，為使學(xué)生更好理解，采用Animate專業(yè)二維矢量動畫制作軟件制作演示動畫，在制作過程中將循環(huán)體執(zhí)行一次看作MC沿矩形路徑移動一圈的動畫，從而形象化地演示了循環(huán)嵌套的執(zhí)行過程，將復(fù)雜概念形象化。