基于Animate的循環(huán)嵌套演示動(dòng)畫(huà)設(shè)計(jì)與開(kāi)發(fā)

孫 杰，楊 潔，黨元曉

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

0 引言

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

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

1 Animate動(dòng)畫(huà)軟件

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

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

2.1 動(dòng)畫(huà)界面設(shè)計(jì)

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

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

2.2 元件設(shè)計(jì)

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

圖2 演示按鈕

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

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

圖5 外循環(huán)上半圈動(dòng)畫(huà)

圖6 外循環(huán)下半圈動(dòng)畫(huà)

圖7 內(nèi)循環(huán)動(dòng)畫(huà)

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

目的是在每個(gè)MC播放完畢后在舞臺(tái)上清除該MC，同時(shí)停止MC的播放。

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

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

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

2.4 演示動(dòng)畫(huà)的類編寫(xiě)

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

圖8 NestedLoop類圖

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

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

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

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

圖9 循環(huán)嵌套演示動(dòng)畫(huà)

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

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

表1 測(cè)試平均得分

從對(duì)照班級(jí)和實(shí)驗(yàn)班級(jí)平均得分可以看出，實(shí)驗(yàn)班級(jí)循環(huán)嵌套測(cè)試題的得分顯著高于對(duì)照班級(jí)，進(jìn)一步說(shuō)明演示動(dòng)畫(huà)有助于學(xué)生理解循環(huán)嵌套的涵義。

4 結(jié)語(yǔ)

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