《Flash交互動畫》實訓(xùn)教學(xué)實踐
2015-04-29 00:00:00陸瑤
軟件工程 2015年1期
摘 要：本文通過將三個較典型的Flash交互動畫的程序案例作為《Flash交互動畫》的實訓(xùn)教學(xué)案例，循序漸進(jìn)由簡到難，旨在讓學(xué)生初步掌握通過AS 3.0的腳本語言編程實現(xiàn)用鼠標(biāo)或鍵盤對動畫播放的控制。
關(guān)鍵詞：Flash交互動畫；實訓(xùn)案例教學(xué)；ActionScript 3.0
中圖分類號：G712 文獻(xiàn)標(biāo)識碼：A
1 引言（Introduction）
交互動畫是指在動畫作品播放時支持事件響應(yīng)和交互功能的一種動畫[1]，也就是說，動畫播放時可以接受某種控制。這種交互性提供了觀眾參與和控制動畫播放內(nèi)容的手段，使觀眾由被動接受變?yōu)橹鲃舆x擇。最典型的交互式動畫就是Flash動畫。觀看者可以用鼠標(biāo)或鍵盤對動畫的播放進(jìn)行控制。本文旨在通過三個循序漸進(jìn)的Flash交互動畫的實訓(xùn)案例讓學(xué)生初步掌握Flash交互動畫的制作方法。
2 實訓(xùn)教學(xué)內(nèi)容的設(shè)計（Content of practice training）
Flash交互動畫實訓(xùn)案例內(nèi)容：
（1）使用軟件：Flash CS 4.0。
（2）實訓(xùn)目的：初步掌握Flash交互動畫制作方法。
（3）實訓(xùn)時間：2周，每周28學(xué)時。三個部分，第一部分14學(xué)時，第二部分18學(xué)時，第三部分24學(xué)時。
（4）實訓(xùn)要求：通過學(xué)習(xí)能夠獨立完成控制Flash交互的程序。
2.1 使用腳本創(chuàng)建視差滾動
這部分實訓(xùn)教學(xué)內(nèi)容是通過鼠標(biāo)點擊場景中的按鈕控制角色動畫的左右移動。首先在PhotoShop中創(chuàng)建一個無縫銜接的背景。然后在Flash創(chuàng)建一個循環(huán)原地運動的角色動畫。通過腳本編程控制角色動畫的左右移動，效果如圖1所示。
Fig.1 Uses ActionScript to create scrolling difference
核心程序代碼如下[2]：
Function moveLayers（e：MouseEvent）：void {
if （e.target.name ==\"forward_btn\"）{
moveLeft = true；
} else {
moveRight = true；
}
walker_mc.play（）；
}
Function stopLayers（e：MouseEvent）：void {
moveLeft = 1；
moveRight = 1；
walker_mc.gotoAndStop（1）；
}
stage.addEventListener（Event.ENTER_FRAME， timeToScroll）；
Function timeToScroll（e：Event）：void {
if（moveLeft）{
parallax（middleground_mc， 5）；
parallax（background_mc， 2）；
walker_mc.scaleX = 1；
} else if （moveRight）{
parallax（middleground_mc， -5）；
parallax（background_mc， -2）；
walker_mc.scaleX = -1；
}
}
Function parallax（layer：MovieClip，speed：Number）：void {
if （layer.x <= 0）{
layer.x = layer.x + layer.width/2；
}else if （layer.x >= layer.width/2）
{layer.x = layer.x - layer.width/2；
}
layer.x -= speed；
}
2.2 鍵盤定位角色
第二部分的實訓(xùn)內(nèi)容是旨在讓學(xué)生們掌握除了鼠標(biāo)點擊控制交互之外，還可以通過鍵盤的按動定位角色的移動。首先制作一個場景變換的影片剪輯和一個循環(huán)原地運動的角色。通過AS 3.0腳本編程控制鍵盤定位角色實現(xiàn)角色在不同的場景中來回穿梭，效果如圖2所示[3]。
Fig.2 Keyboard positioning role
核心程序代碼如下：
function keyPressedDown（e：KeyboardEvent） {
if （e.keyCode == 37） {
leftArrow = true；
} else if （e.keyCode == 39） {
rightArrow = true；
}
walking_mc.play（）；
}
function keyPressedUp（e：KeyboardEvent） {
if （e.keyCode == 37） {
leftArrow = 1；
} else if （e.keyCode == 39） {
rightArrow = 1；
}
walking_mc.gotoAndStop（1）；
}
function moveMan（e：Event） {
if （leftArrow） {
walking_mc.x -= speed；
walking_mc.scaleX = -1；
}
if （rightArrow） {
walking_mc.x += speed；
walking_mc.scaleX = 1；
}
if （walking_mc.x >= stage.stageWidth + walking_mc.width）{
walking_mc.x = 0 - walking_mc.width；
currentBackdrop++；
changeBackground（）；
}else if （walking_mc.x <= 0 - walking_mc.width）{
walking_mc.x = stage.stageWidth + walking_mc.width；
currentBackdrop--；
changeBackground（）；
}
}
function changeBackground（）{
if（currentBackdrop> totalNumFrames）{
currentBackdrop = 1
}else if（currentBackdrop < 1）{
currentBackdrop = totalNumFrames
}
backdrop_mc.gotoAndStop（currentBackdrop）；
}
2.3 360度全景模擬
第三部分的實訓(xùn)內(nèi)容旨在讓學(xué)生掌握通過動作腳本實現(xiàn)模擬全景展示。首先創(chuàng)建一個角色的360度的逐幀動畫影片剪輯。使用一張圓柱形的全景圖作為場景背景。為背景做一個位置移動的補間動畫。使用動作腳本控制場景與角色動畫360度的同步的全景展示，效果如圖3所示。
Fig.3 Panoramic simulation
核心程序代碼如下：
Function setClockWise（e：MouseEvent）{
moveIt = -1；}
Function setCounterClockWise（e：MouseEvent）{
moveIt = 1；
}
Function stopRotation（e：MouseEvent）{
moveIt = 0；
}
character_mc.addEventListener（Event.ENTER_FRAME， spinObject）；
function spinObject（e：Event）：void {
Var thisFrame：Number=character_mc.currentFrame； thisFrame += moveIt；
if （thisFrame > totalNumFrames） { thisFrame = 1； }
if （thisFrame < 1）
{ thisFrame = totalNumFrames； }
character_mc.gotoAndStop（thisFrame）；
world_mc.gotoAndStop（thisFrame）；
}
3 結(jié)論（Conclusion）
通過具體形象、程序原理、程序分析等內(nèi)容的講解以及實踐應(yīng)用，學(xué)生可以在這門課程的實訓(xùn)中了解并初步掌握Flash強大的交互功能。
參考文獻(xiàn)（References）
[1] 權(quán)英卓，王遲.交互藝術(shù)新視聽[M].北京：中國輕工業(yè)出版社，
2007：73.
[2] 鄭伯鴻，張智龍.Flash ActionScript語法參考辭典[M].北京：中
國鐵道出版社，2005：110.
[3] 林德新.Flash游戲制作[M].北京：中國鐵道出版社，2005：306.
作者簡介：
陸 瑤（1982-），女，碩士，講師.研究領(lǐng)域：動漫設(shè)計與
制作.
