《Flash交互動畫》實訓教學實踐

摘 要：本文通過將三個較典型的Flash交互動畫的程序案例作為《Flash交互動畫》的實訓教學案例，循序漸進由簡到難，旨在讓學生初步掌握通過AS 3.0的腳本語言編程實現用鼠標或鍵盤對動畫播放的控制。

關鍵詞：Flash交互動畫；實訓案例教學；ActionScript 3.0

中圖分類號：G712 文獻標識碼：A

1 引言（Introduction）

交互動畫是指在動畫作品播放時支持事件響應和交互功能的一種動畫[1]，也就是說，動畫播放時可以接受某種控制。這種交互性提供了觀眾參與和控制動畫播放內容的手段，使觀眾由被動接受變為主動選擇。最典型的交互式動畫就是Flash動畫。觀看者可以用鼠標或鍵盤對動畫的播放進行控制。本文旨在通過三個循序漸進的Flash交互動畫的實訓案例讓學生初步掌握Flash交互動畫的制作方法。

2 實訓教學內容的設計（Content of practice training）

Flash交互動畫實訓案例內容：

（1）使用軟件：Flash CS 4.0。

（2）實訓目的：初步掌握Flash交互動畫制作方法。

（3）實訓時間：2周，每周28學時。三個部分，第一部分14學時，第二部分18學時，第三部分24學時。

（4）實訓要求：通過學習能夠獨立完成控制Flash交互的程序。

2.1 使用腳本創建視差滾動

這部分實訓教學內容是通過鼠標點擊場景中的按鈕控制角色動畫的左右移動。首先在PhotoShop中創建一個無縫銜接的背景。然后在Flash創建一個循環原地運動的角色動畫。通過腳本編程控制角色動畫的左右移動，效果如圖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 鍵盤定位角色

第二部分的實訓內容是旨在讓學生們掌握除了鼠標點擊控制交互之外，還可以通過鍵盤的按動定位角色的移動。首先制作一個場景變換的影片剪輯和一個循環原地運動的角色。通過AS 3.0腳本編程控制鍵盤定位角色實現角色在不同的場景中來回穿梭，效果如圖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度全景模擬

第三部分的實訓內容旨在讓學生掌握通過動作腳本實現模擬全景展示。首先創建一個角色的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 結論（Conclusion）

通過具體形象、程序原理、程序分析等內容的講解以及實踐應用，學生可以在這門課程的實訓中了解并初步掌握Flash強大的交互功能。

參考文獻（References）

[1] 權英卓，王遲.交互藝術新視聽[M].北京：中國輕工業出版社，

2007：73.

[2] 鄭伯鴻，張智龍.Flash ActionScript語法參考辭典[M].北京：中

國鐵道出版社，2005：110.

[3] 林德新.Flash游戲制作[M].北京：中國鐵道出版社，2005：306.

作者簡介：

陸 瑤（1982-），女，碩士，講師.研究領域：動漫設計與

制作.