大话西游游戏交互动画（二）

.

• 知识目标：

1、了解游戏页面交互动效的基本规则。

2、了解企业网页产品中交互动效的作用。

.

• 能力目标：

1、能够制作游戏页面的交互动画效果。

2、能够通过按钮去调配页面的各类动画效果。

.

• 课程重难点：

1、重点：按钮动效制作，影片剪辑动效制作。

2、难点：按钮控制影片剪辑交互动效制作。

.

课程概况、教学主要内容：

1、为空白按钮分别添加命令，控制影片剪辑。被控制的影片剪辑要添加实例名称。

2、目的是点击热区按钮，让动画从第一帧播放。主要命令是：

/* 单击以转到帧并播放

单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。

可在主时间轴或影片剪辑时间轴上使用。

说明:

1. 单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字 5。

2. EaselJS 中的帧编号从 0 开始而不是从 1 开始

*/

this.anniua.addEventListener("mouseover", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()

{

this.diyi.gotoAndPlay("31");

}

/* 在此帧处停止

时间轴将在插入此代码的帧处停止/暂停。

也可用于停止/暂停影片剪辑的时间轴。

*/

this.stop();

/* 单击以转到帧并播放

单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。

可在主时间轴或影片剪辑时间轴上使用。

说明:

1. 单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字 5。

2. EaselJS 中的帧编号从 0 开始而不是从 1 开始

*/

this.anniua.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_2.bind(this));

function fl_ClickToGoToAndPlayFromFrame_2()

{

this.gotoAndPlay("0");

}

this.anniub.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_3.bind(this));

function fl_ClickToGoToAndPlayFromFrame_3()

{

this.gotoAndPlay("10");

}

this.anniuc.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_4.bind(this));

function fl_ClickToGoToAndPlayFromFrame_4()

{

this.gotoAndPlay("20");

}

this.anniud.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_5.bind(this));

function fl_ClickToGoToAndPlayFromFrame_5()

{

this.gotoAndPlay("30");

}

3、用线条工具绘制小标志，并且转换为按钮元件。圆形用圆形工具绘制，

4、点击进入按钮，鼠标经过时候是影片剪辑，将笔制作成移动补间动画。笔的动画第一帧和最后一帧打上关键帧，中间也打上关键帧，移动中间关键帧的图形位置。

一、导航栏动画制作：

. 

二、按钮控制影片剪辑

.

三、命令添加控制

.

四、标志设计和动画制作

三、作业布置

依据下面图片效果，将大话西游游戏网页制作成动效网页效果，具体为各个元素的分层动效制作和按钮控制元件动画，点击按钮打开不同的页面文字。最终上交源文件和播放文件。