内页-下拉菜单的三级菜单制作
.
知识目标：
1、掌握三级菜单的动画制作方式。
2、掌握按钮命令的添加方式。
3、理解和掌握空白按钮控制帧制作下拉菜单。
.
能力目标：
1、能够用按钮命令控制三级菜单的运动。
2、运用空白按钮添加命令，控制三级菜单的影片剪辑。
3、熟练使用鼠标为三级菜单添加移入移出命令，添加和修改命令。
.
课程重难点：
1、重点：按钮添加命令，控制影片剪辑。
2、难点：使用鼠标移入移出命令，添加和修改命令。
.
课程概况、教学主要内容：
1、菜单图标绘制，运用图形工具绘制图标，并且上色，转换成图形元件。
3、将全部图标转换成影片剪辑，点击进去后，图片从第一帧依次放入。
3、下拉数字内容从第二帧开始放入，第一帧空白。
4、在图标上分别放置空白按钮。
5、放置命令，鼠标移入第一个按钮，转到第二帧，第二个按钮跳到第三帧，一次类推。mouseover mouseout gotoAndStop(); this.stop)();
具体命令添加，需要设定如，鼠标移出后下来菜单消失，不然菜单会重叠。
/* 在此帧处停止
时间轴将在插入此代码的帧处停止/暂停。
也可用于停止/暂停影片剪辑的时间轴。
*/
this.stop();
/* 单击以转到帧并播放
单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。
可在主时间轴或影片剪辑时间轴上使用。
说明:
1. 单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字 5。
2. EaselJS 中的帧编号从 0 开始而不是从 1 开始
*/
this.fc.addEventListener("mouseover", fl_ClickToGoToAndPlayFromFrame_2.bind(this));
function fl_ClickToGoToAndPlayFromFrame_2()
{
this.fczl.gotoAndPlay("2");
this.bqzl.gotoAndStop("0");
this.gwzl.gotoAndStop("0");
this.clzl.gotoAndStop("0");
this.fjzl.gotoAndStop("0");
}
/* 单击以转到帧并播放
单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。
可在主时间轴或影片剪辑时间轴上使用。
说明:
1. 单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字 5。
2. EaselJS 中的帧编号从 0 开始而不是从 1 开始
*/
this.bq.addEventListener("mouseover", fl_ClickToGoToAndPlayFromFrame_3.bind(this));
function fl_ClickToGoToAndPlayFromFrame_3()
{
this.bqzl.gotoAndPlay("2");
this.fczl.gotoAndStop("0");
this.gwzl.gotoAndStop("0");
this.clzl.gotoAndStop("0");
this.fjzl.gotoAndStop("0");
}
/* 单击以转到帧并播放
单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。
可在主时间轴或影片剪辑时间轴上使用。
说明:
1. 单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字 5。
2. EaselJS 中的帧编号从 0 开始而不是从 1 开始
*/
this.gwc.addEventListener("mouseover", fl_ClickToGoToAndPlayFromFrame_4.bind(this));
function fl_ClickToGoToAndPlayFromFrame_4()
{
this.gwzl.gotoAndPlay("2");
this.fczl.gotoAndStop("0");
this.bqzl.gotoAndStop("0");
this.clzl.gotoAndStop("0");
this.fjzl.gotoAndStop("0");
}
/* 单击以转到帧并播放
单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。
可在主时间轴或影片剪辑时间轴上使用。
说明:
1. 单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字 5。
2. EaselJS 中的帧编号从 0 开始而不是从 1 开始
*/
this.cl.addEventListener("mouseover", fl_ClickToGoToAndPlayFromFrame_5.bind(this));
function fl_ClickToGoToAndPlayFromFrame_5()
{
this.clzl.gotoAndPlay("2");
this.fczl.gotoAndStop("0");
this.bqzl.gotoAndStop("0");
this.gwzl.gotoAndStop("0");
this.fjzl.gotoAndStop("0");
}
/* 单击以转到帧并播放
单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。
可在主时间轴或影片剪辑时间轴上使用。
说明:
1. 单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字 5。
2. EaselJS 中的帧编号从 0 开始而不是从 1 开始
*/
this.fj.addEventListener("mouseover", fl_ClickToGoToAndPlayFromFrame_6.bind(this));
function fl_ClickToGoToAndPlayFromFrame_6()
{
this.fjzl.gotoAndPlay("2");
this.fczl.gotoAndStop("0");
this.bqzl.gotoAndStop("0");
this.gwzl.gotoAndStop("0");
this.clzl.gotoAndStop("0");
}
一、案例图片：
.
二、视频讲解：
.
