交互動畫案例在Flash程序教學(xué)中的應(yīng)用與實踐

林旭晞

摘 要：Flash作為一種獨立的藝術(shù)形式，被大量應(yīng)用于網(wǎng)絡(luò)矢量動畫、游戲、廣告和UI設(shè)計，近年來在新移動媒體中得到了更為廣泛的應(yīng)用和推廣。在Flash課程教學(xué)中，使用Action Script進行編程對于中職學(xué)生是個不小的難題。選擇漸進式的交互動畫案例，讓編程與動畫效果相結(jié)合，直觀生動地呈現(xiàn)程序的交互效果，能夠有效激發(fā)學(xué)生學(xué)習(xí)積極性，提高教學(xué)成效。

關(guān)鍵詞：Flash；AS程序；交互動畫

中圖分類號：G64 文獻標識碼：A 文章編號：1673-9132（2017）18-0007-02

DOI：10.16657/j.cnki.issn1673-9132.2017.18.002

對于大部分中職學(xué)生來說，教學(xué)內(nèi)容的趣味性很大程度上決定了學(xué)習(xí)的效果，尤其編程類的課程很考驗教師對教學(xué)內(nèi)容的把握。學(xué)生對于編程的學(xué)習(xí)效果不理想，不僅由于編程的難度高，更主要的是由于編程的枯燥。

“交互”在計算機中意思是參與活動的對象可以雙方面相互交流，教學(xué)中強調(diào)教師與學(xué)生的之間的互動，卻常常忽略了學(xué)生與直接面對的實例之間的互動。計算機教學(xué)中所使用的實例需要學(xué)生的實際操作，實例效果好壞和成敗的反饋不是教師給予的，而是學(xué)生在操作過程中直接獲得的，因此，F(xiàn)lash程序?qū)嵱?xùn)教學(xué)的實例選擇應(yīng)符合中職生的特點，在編程的基礎(chǔ)上綜合考慮實例的難易漸進、參數(shù)修改和測試的對比直觀性、動畫美觀性等方面。

Flash具有交互性強、創(chuàng)作簡單的特點 [1]，以其獨特的形式能夠?qū)赢嫼统绦蛳嗷ソY(jié)合，網(wǎng)絡(luò)上有很多可以進行交互的案例，如網(wǎng)頁導(dǎo)航菜單、廣告片頭、電子賀卡、網(wǎng)頁小游戲等等，有趣且互動性強，是理想的Flash程序?qū)嵱?xùn)教學(xué)案例。在教學(xué)過程中以學(xué)生為主體，做到學(xué)做合一，針對學(xué)生的認知特點和現(xiàn)有知識體系，選擇循序漸進的交互動畫案例，設(shè)計教學(xué)流程，由淺入深地引導(dǎo)學(xué)生掌握Action Script（簡稱AS）的使用，結(jié)合美工設(shè)計和游戲設(shè)計，用動畫和游戲的魅力吸引學(xué)生參與到程序的編寫，從實現(xiàn)簡單的交互動畫，到完成小游戲項目的制作。

一、建立互動，激發(fā)興趣

在學(xué)習(xí)AS程序初始階段，選擇語句簡單且直觀性強的交互動畫實例，學(xué)生可以直接測試得到以動畫方式呈現(xiàn)的結(jié)果，獲得及時的反饋，學(xué)習(xí)效果明顯。使用AS編程與使用VB、VC等高級程序設(shè)計語言相比有不小的差別，它的語句格式要求較低，利用AS中自帶的腳本助手來簡化編程、降低難度，減少學(xué)生犯錯的可能，提高作品的成功率，降低學(xué)生對編程的恐懼和排斥心理。下面通過兩個實例進行說明。

（一）小魚游：控制魚的游動和停止

此例中用到函數(shù)有on函數(shù)、play函數(shù)、stop函數(shù)。on表示當(dāng)發(fā)生特定鼠標事件時執(zhí)行動過，play表示開始播放影片，stop表示停止播放影片。

“開始”按鈕的語句：

on （release） //當(dāng)鼠標點擊并釋放后，執(zhí)行{}內(nèi)的語句

{ play （ ）； }

“停止”按鈕的語句：

on （release） //當(dāng)鼠標點擊并釋放后，執(zhí)行{}內(nèi)的語句

{ stop （ ）； }

運行結(jié)果：當(dāng)點擊停止按鈕，魚停止游動；當(dāng)點擊開始按鈕，魚繼續(xù)游動。

案例分析：這個例子結(jié)合了按鈕和程序的運用，語句的編寫過程直接通過腳本助手來完成，點擊鼠標即可實現(xiàn)幾個函數(shù)的調(diào)用，簡化程序的編寫過程。通過點擊按鈕實現(xiàn)學(xué)生與實例之間的交互，讓學(xué)生能夠很直觀地感受到程序的控制作用。

（二） 自制鼠標：設(shè)計繪制鼠標指針

選中幀打開動作面板，輸入程序：

Mouse.hide（ ）； //隱藏鼠標

startDrag（s，true）； //在MC上開始拖放動作，動作對象為s，true表示鎖定鼠標到元件中央

運行結(jié)果：在測試窗口內(nèi)，原本箭頭狀鼠標指針被隱藏，取而代之的是學(xué)生自己繪制的指針樣式。

案例分析：此例在學(xué)習(xí)語句的基礎(chǔ)上，啟發(fā)學(xué)生回憶以往在游戲中見過的各種鼠標指針樣式，鼓勵自行繪制設(shè)計鼠標指針，設(shè)計樣式風(fēng)格需與使用環(huán)境相適合，如刀劍、飛鏢、魔法棒、手勢、樂器等等指向性比較明確的對象都是不錯的設(shè)計參考樣式。使用類似例子，不僅可以讓學(xué)生進一步建立起對編程的認識，更可以激發(fā)學(xué)生的創(chuàng)造設(shè)計能力。

二、加深學(xué)習(xí)，鞏固戰(zhàn)果

程序結(jié)構(gòu)包括三種基本結(jié)構(gòu)，即順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。順序結(jié)構(gòu)是按書寫順序執(zhí)行的結(jié)構(gòu)，是最簡單最常見的結(jié)構(gòu)，之前編寫的程序?qū)嵗紝儆陧樞蚪Y(jié)構(gòu)。分支結(jié)構(gòu)也稱為選擇結(jié)構(gòu)，根據(jù)給定的條件進行判斷，決定執(zhí)行某個分支程序。循環(huán)結(jié)構(gòu)是根據(jù)給定條件進行判斷，當(dāng)條件成立時，反復(fù)執(zhí)行某個程序段，通常稱給定條件為循環(huán)條件。這個階段中，要著重于選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)的講解和練習(xí)，采用結(jié)構(gòu)化程序設(shè)計方法，可以使程序的邏輯結(jié)構(gòu)清晰、層次分明、可讀性好、可靠性強，從而提高程序的開發(fā)效率，保證程序質(zhì)量改善程序的可靠性[3]。

（一）單個影片剪輯屬性改變案例

更改影片剪輯（簡稱MC）元件實例的可視屬性，如坐標、高度、寬度、大小比例、不透明度等等，引入MC元件實例的命名，并且逐一增加使用屬性語句如MC._x、MC._y、MC._height、MC._width、MC._xscale、MC._yscale、MC. _alpha等，并修改參數(shù)，實時測試并觀看結(jié)果變化。上文“自制鼠標”實例中還可以用以下語句來實現(xiàn)：“MC._x = _xmouse； MC._y = _ymouse；”。

（二）影片剪輯控制加強版案例

實現(xiàn)單個MC元件實例的變化后，引入循環(huán)語句和影片剪輯控制語句。例如，繪制一顆星星MC元件，實例命名為a，利用循環(huán)語句復(fù)制MC元件實例，隨機設(shè)置MC元件實例屬性，制作出滿天星星閃爍的效果。

for （i = 1； i <=20； i++） {

duplicateMovieClip（this.a，"aa"+i，i）；

this["aa" + i]._x = random（700）； //隨機設(shè)置X軸坐標

this["aa" + i]._y = random（300）； //隨機設(shè)置Y軸坐標

this["aa" + i]._alpha=random（80）； //隨機設(shè)置透明度

this["aa" + i]._rotation=random（360）； //隨機設(shè)置旋轉(zhuǎn)角度}

案例分析：通過更改循環(huán)次數(shù)設(shè)定星星的個數(shù)，修改屬性參數(shù)值可以獲得不同的星星，測試效果實時反饋，直觀明了。與本例類似的實例有如霓虹燈、滾動條幅、下雨、下雪等等，學(xué)生可以舉一反三，課后自行練習(xí)。

結(jié)合本階段的程序?qū)W習(xí)內(nèi)容，要求學(xué)生利用網(wǎng)絡(luò)搜索其他可改變的元件實例屬性，如顏色等。網(wǎng)絡(luò)資源龐大，善于使用網(wǎng)絡(luò)資源也是一個信息化社會的必備學(xué)習(xí)技能，鍛煉自學(xué)能力，拓展知識面，跳出課堂的局限。隨著學(xué)習(xí)的不斷深入，在后續(xù)的教學(xué)中逐漸引進新的函數(shù)，擴展現(xiàn)有的知識結(jié)構(gòu)，制作出實用的小作品，如時鐘、網(wǎng)頁導(dǎo)航菜單、滾動圖片等。

三、項目制作，拓展訓(xùn)練

在進行以上程序+動畫實例的強化練習(xí)后，下一階段將選擇使用較復(fù)雜的Flash小游戲進行綜合項目練習(xí)，例如拼圖游戲、猜拳游戲、找碴游戲等等經(jīng)典Flash小游戲。游戲是最典型的交互案例，有趣好玩，有適度的挑戰(zhàn)性，結(jié)果反饋及時，并且能夠吸引主體積極主動地參與活動。游戲案例是Flash程序教學(xué)中重要的大綜合項目，以游戲案例為載體，實施項目驅(qū)動教學(xué)，將能力的培養(yǎng)和知識的傳授相結(jié)合[4]。

（一）試玩游戲案例，進行游戲規(guī)則分析

玩游戲必先了解游戲規(guī)則，以“猜拳游戲”為例，玩家與電腦比大小，有布、拳頭和剪子3個選項，三者之間的大小關(guān)系為布>拳頭>剪子>布，按照玩家和電腦的出拳結(jié)果評判勝負。

（二）分解游戲流程，重視邏輯思維構(gòu)建

游戲項目的制作需要有清晰的思路。教師作為引領(lǐng)者，協(xié)助學(xué)生分解游戲進程，明確游戲各階段需要做些什么，繪制游戲流程圖，讓學(xué)生逐步把分解的各部分再拼成一個完整的游戲結(jié)構(gòu)。教師應(yīng)起到啟發(fā)引領(lǐng)的作用，應(yīng)盡量避免直接公布答案或得出結(jié)論。

（三）設(shè)計制作游戲，強調(diào)創(chuàng)新意識培養(yǎng)

游戲制作大體可以分為程序和美工兩大塊，程序決定了游戲的玩法，美工設(shè)計決定了游戲的印象分和趣味性。在制作過程中，應(yīng)多鼓勵學(xué)生自行設(shè)計游戲風(fēng)格和動畫表現(xiàn)方式，創(chuàng)作出具有個人風(fēng)格的作品。

“猜拳游戲”有三個階段：游戲初始界面、主體界面和出現(xiàn)對應(yīng)動畫。為了適當(dāng)降低整體實現(xiàn)難度，提高完成度，進行游戲項目制作時，根據(jù)游戲流程將制作步驟分解成對應(yīng)的三個階段。每個階段完成后先行進行測試，檢測程序?qū)﹀e與否，調(diào)整動畫效果。測試完畢后，再進行下一階段的制作。分階段制作測試可以在保證最終游戲成功率的同時，可以讓學(xué)生能夠逐漸加深對整個制作流程的理解，促使學(xué)生進一步地對游戲進行改進開發(fā)。

（四）項目分組，進行團隊合作

對于綜合性強的項目，教師組織學(xué)生分組進行游戲設(shè)計和制作，項目進行分解獲得相關(guān)知識和技能模塊，引導(dǎo)學(xué)生在完成項目的過程中模擬進入崗位角色，從游戲的構(gòu)思，到美工的設(shè)計，再到程序的編寫，進行游戲測試，讓學(xué)生體驗一個完整的制作流程，進行團體協(xié)作，強調(diào)合作精神，培養(yǎng)學(xué)生的實際操作能力和職業(yè)素質(zhì)。

四、結(jié)語

交流互動即交互，通過精心設(shè)計安排交互動畫案例教學(xué)，由淺入深地引導(dǎo)學(xué)生掌握AS的使用。動畫的加入讓程序的學(xué)習(xí)不再那么枯燥，程序測試結(jié)果可以直觀生動地呈現(xiàn)；游戲式的探索試驗過程讓學(xué)生能夠主動與作品進行互動，AS編程的教學(xué)效果有了明顯提高。

參考文獻：

[1] 葉仕灝.論電腦游戲在中職學(xué)校Flash程序設(shè)計教學(xué)中的應(yīng)用[J].黑龍江科技信息，2016（23）.

[2] 王大遠. 一定要會的Flash CS5精彩案例208例[M].電子工業(yè)出版社，2011.