内页-下拉菜单的制作绘制

.

• 知识目标：

1、掌握下拉菜单的绘制方式。

2、掌握按钮动画的制作形式。

3、理解和掌握空白按钮控制帧制作下拉菜单。

.

• 能力目标：

1、能够运用图形工具，绘制菜单按钮。

2、运用空白按钮添加命令，控制影片剪辑。

3、熟练使用鼠标移入移出命令，添加和修改命令。

.

• 课程重难点：

1、重点：按钮添加命令，控制影片剪辑。

2、难点：使用鼠标移入移出命令，添加和修改命令。

.

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

1、新建一个文件，这里我采用宽100，高120，背景为白色。

2、按ctrl+f8新建立一个movie clip符号，在movie clip编辑舞台中画一个菜单，你可以发挥想象自己画一个。

3、按ctrl+f8新建立一个按钮符号，在按钮编辑舞台中的hit帧处按f6，然后画一个正方形的图形，小一些，完成后按scene1返回主场景。

4、然后按ctrl+f8，在按钮编辑舞台中制作下拉出现的按钮，完成后按scene1返回主场景。

5、打开库文件，在刚才制作的下拉菜单的按钮上按鼠标右健，复制一个，然后再复制一个。

6、双击库文件中复制的第一个按钮，在弹出的舞台中将按钮上的文字改变一下，ok后继续双击库文件中复制的第二个按钮，在弹出的舞台中将按钮上的文字改变一下，完成后按scene1返回主场景。

7、双击库文件中的movie clip，在movie clip编辑舞台中,按“加号”新建一个层（layer2），注意，新建这个层只是为了方便以后操作，不建立也可以。

8、选中layer2层的第一帧，（为了不容易出现误操作，可以按“锁”锁住第一层）将库文件中第一次建立的按钮拖入场景中如图1所示的位置（就是所画图形的“三角处”）如果先前所画按钮太大或太小，可以利用缩放工具调整，使其正好覆盖“三角形”。

9、分别在第一层和第二层的第二帧按f6，建立关键帧，然后按一下第一层的第二帧，将库文件中的三个下拉按钮拖入“下拉菜单”的下面。

10、完成后我们将要设置actions，分别在第一层的第一帧和第二帧双击鼠标左健，选择actions标签，按“加号”选stop，两帧都设置成stop，然后在第二层的第一帧的按钮上按鼠标右健选择properties，再选择actions标签，按“加号”选择goto指令，设置为goto and stop，在number处填2，同样在第二层的第二帧的按钮上按鼠标右健选择properties，再选择actions标签，按“加号”选goto指令，设置为goto and stop，在number处填1。

11、返回主场景，将movie clip拖入场景，按ctrl+enter看一下吧，下面为完成的下拉菜单动画。

注意：其中三个按钮设置了get url指令，你也可以随便为这些按钮设置各种指令。

由于在第一层的两帧都设置了stop，因此也可以在按钮中设置goto指令为play，当然因为第一帧的按钮设置成为goto and stop(2)，所以第一层的第二帧无需设置stop也可以。

主要内容概括：

1、菜单图标绘制，运用图形工具绘制图标，并且上色，转换成图形元件。

3、将全部图标转换成影片剪辑，点击进去后，图片从第一帧依次放入。

3、下拉数字内容从第二帧开始放入，第一帧空白。

4、在图标上分别放置空白按钮。

5、放置命令，鼠标移入第一个按钮，转到第二帧，第二个按钮跳到第三帧，一次类推。mouseover    mouseout      gotoAndStop();    this.stop)();

.

.

二、视频讲解：

1、素材寻找和图形绘制和出场动画：

首先绘制图形，转换为图形元件，其次将图标分层排列好，运用补间动画进入。

.

.

四、作业练习：

1、完成课程案例，绘制好下拉菜单的图标按钮。

2、认真学习以下课件内容，动态导航菜单，绘制一个导航条。

作业图片：

仔细学习，完成例子作业。