《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交互动画制作方法。

（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 = false；

moveRight = false；

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 = 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 = false；

} else if （e.keyCode == 39） {

rightArrow = false；

}

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 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强大的交互功能。