《Flash交互動畫》實訓(xùn)教學(xué)實踐

摘 要：本文通過將三個較典型的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í)能夠獨(dú)立完成控制Flash交互的程序。

2.1 使用腳本創(chuàng)建視差滾動

這部分實訓(xùn)教學(xué)內(nèi)容是通過鼠標(biāo)點(diǎn)擊場景中的按鈕控制角色動畫的左右移動。首先在PhotoShop中創(chuàng)建一個無縫銜接的背景。然后在Flash創(chuàng)建一個循環(huán)原地運(yù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)點(diǎn)擊控制交互之外，還可以通過鍵盤的按動定位角色的移動。首先制作一個場景變換的影片剪輯和一個循環(huán)原地運(yù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度的逐幀動畫影片剪輯。使用一張圓柱形的全景圖作為場景背景。為背景做一個位置移動的補(bǔ)間動畫。使用動作腳本控制場景與角色動畫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強(qiáng)大的交互功能。

參考文獻(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è)計與

制作.