Adobe Animate CC Html5动画实例-摩天轮的控制

.

• 知识目标：

1、掌握按钮命令和帧命令。

2、掌握STOP命令。

3、理解补间动画的加速度和减速度。

4、掌握影片剪辑的具体运用方式。

.

• 能力目标：

1、熟练添加实例名称。

2、能够制作按钮热区，添加按钮命令。

3、能够将绘制矢量图转换为图形元件，并且添加补间动画。

4、学会旋转动画制作，并且用按钮控制动画的旋转和停止。

.

• 课程重难点：

1、重点：按钮热区的制作。

2、难点：按钮控制影片剪辑的运动和停止命令添加、侦听数值的改变。

.

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

课程概况：

1、热区按钮的制作。图形转换为按钮，按钮里面第一帧拖到最后一帧。

2、按钮的实例名称添加和影片剪辑实例名称的添加。

3、点击按钮，添加HTML5  canvas语言，点击转到帧停止。

4、修改命令：mouseover,mouseout,this.

5、最终命令：

教学主要内容：

3、选择转盘图层的所有内容，右键选择转换为元件。添加实例名称，名称自己用拼音就可以。

4、这里要选择图形元件，并设置注册点在中心位置。

5、在转盘层第80帧右键选择插入关键帧，或者使用快捷键f6。

6、接下来创建传统补间动画。

7、选择补间帧，在属性面板中设置旋转参数。

8、这时，转盘就可以转动了。 

三、制作吊舱的转动动画

摩天轮的转动动画比较复杂的就是吊舱的转动了，因为不仅需要转动还要保持吊舱水平。所以这里就单独讲如何让吊舱随着转盘转动。

1、上面讲到了让转盘转动起来的动画，一个循环的时间是80帧。

2、现在以一个吊舱的动画制作为例，选择最上面的吊舱，选择并右键转换为元件，或使用快捷方式f8。

四、制作空白按钮，为按钮添加命令。

空白按钮和转盘都要有实例名称，为空白按钮添加动作。鼠标移入时候，停止到第一帧，鼠标一出时候，从第二帧开始播放。

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

function fl_ClickToGoToAndStopAtFrame()

{

this.momo.gotoAndStop("0");

this.wenwen.gotoAndStop("1");

}

.

this.anniua.addEventListener("mouseout", fl_ClickToGoToAndStopAtFrame_1.bind(this));

function fl_ClickToGoToAndStopAtFrame_1()

{

this.momo.gotoAndPlay("1");

this.wenwen.gotoAndStop("0");

}

观看视频：