FLASH CS3实例弹出式菜单.docx

FLASH CS3实例弹出式菜单.docx

《FLASH CS3实例弹出式菜单.docx》由会员分享，可在线阅读，更多相关《FLASH CS3实例弹出式菜单.docx（10页珍藏版）》请在冰豆网上搜索。

FLASHCS3实例弹出式菜单

FLASHCS3实例弹出式菜单

当网站中的信息过多，导致导航栏目繁多时，可以将栏目归类，采用二级栏目的形式放置在网页导航菜单中。

但是由于每一个菜单栏目中的二级栏目个数不等，这里采用了弹出式菜单形式，将主栏目与二级栏目组合在一起，形成隐藏式菜单。

这样能够单独选择某个主栏目中的某个二级栏目，而不影响其它栏目，如图8-63所示。

在制作弹出式菜单过程中，由于栏目过多，按钮必须嵌套按钮，并且还需要制作弹出动画，而按钮元件无法满足所有的要求。

这时可以使用影片剪辑元件替代按钮元件制作主栏目，按钮元件作为二级栏目，只要在为影片剪辑元件定义鼠标事件即可实现按钮效果。

图8-63弹出式导航菜单效果

制作导航背景

弹出式菜单是为了在不破坏网页整体布局的情况下，显示更多的导航栏目而设计的。

所以为了使弹出式菜单效果更加完整，这里还需要制作与菜单相连的网页Banner，以及周围的网页元素。

（1）在新建的550×500像素的空白文档中，导入素材图像。

然后将图像BJ.jpg拖入舞台左侧，如图8-64所示。

图8-64导入素材图像

（2）选择工具箱中的【矩形工具】

，在舞台右侧绘制蓝色渐变矩形，其尺寸如图8-65所示。

图8-65绘制渐变矩形

（3）选择【线条工具】

，分别绘制相同宽度，不同渐变颜色的横线，垂直排列在一起，如图8-66所示。

图8-66绘制渐变线条

具有颜色渐变的线条，可以直接通过【线条工具】绘制完成

。

只要设置【笔触颜色】为渐变颜色即可。

（4）将两条横线组合成组后复制4份，平均分布在渐变矩形图形中，形成具有凹陷效果的栏目分隔线，如图8-67所示。

图8-67复制并分布线条

（5）结合【矩形工具】

与【椭圆工具】

分别绘制一个浅灰色矩形与正圆图形，并且将其合并后复制一份，如图8-68所示。

图8-68绘制矩形与正圆

（6）继续使用【椭圆工具】

绘制具有灰色边框的白色正圆，并且复制一份，其摆放位置如图8-69所示。

图8-69绘制正圆

（7）选择【多角星形工具】

，绘制深灰色三角形后，使用【文字工具】

输入同颜色文字，如图8-70所示。

图8-70绘制三角形与输入文字

（8）最后将【库】面板中的PSD图像拖入舞台中，放置在白色正圆内部。

至此菜单背景绘制完成，效果如图8-71所示。

图8-71菜单背景

制作弹出式动画

菜单背景制作完成后，就可以根据背景中的色调来制作弹出式动画。

这里主要制作的是二级栏目所在区域的隐藏与显示动画。

（1）新建“图层2”，选择【文字工具】

在舞台右上角区域输入不属性的文字，如图8-72所示。

图8-72输入文字

（2）选中该图层中的所有文字后按F8转换为影片剪辑元件“列表1”。

进入该元件编辑模式后，新建“图层2”，绘制3×60像素的黑色矩形，并且转换为图形元件“矩形”，如图8-73所示。

图8-73绘制矩形并转换为元件

（3）设置实例“矩形”的Alpha为20%后，分别在第15和30帧处插入关键帧，如图8-74所示。

图8-74设置实例属性

（4）选中第15帧中的实例，设置其【宽度】为145像素，并且移动其位置如图8-75所示。

图8-75设置实例属性

（5）在3个关键帧之间创建补间动画，形成矩形展开与合并动画，如图8-76所示。

图8-76创建补间动画

（6）新建“图层3”并且在第15帧处插入空白关键帧，输入栏目名称后，将其转换为按钮元件，如图8-77所示。

图8-77创建按钮元件

（7）双击进入按钮元件编辑模式后，在【指针经过】动画帧处插入关键帧后，更改该帧中的文本颜色，如图8-78所示。

图8-78更改文本颜色

（8）在【按下】动画帧插入普通帧后，在【点击】动画帧处插入空白关键帧，并且在相同区域中绘制全透明矩形，如图8-79所示。

图8-79制作热区

（9）使用相同方法，制作其它二级栏目按钮元件后，新建“图层4”，在如图8-80所示的位置绘制全透明矩形。

图8-80绘制全透明矩形

（10）新建“图层5”并且在第15帧处插入空白关键帧，然后分别在第1与15帧处添加停止动作，如图8-81所示。

图8-81添加停止动作

（11）至此第一个弹出式栏目动画制作完成，使用相同方法制作其它动画。

组合导航菜单

由于这里制作的弹出式动画不是按钮元件，没有鼠标经过、单击等动画帧。

所以将所有菜单元素制作完成后，将影片剪辑元件拖入场景中，然后为其定义鼠标事件，即可将影片剪辑作为按钮使用。

（1）返回场景后，依次将影片剪辑元件“列表2”至“列表6”拖入舞台中，位置如图8-82所示。

图8-82将元件拖入舞台中

（2）依次选中实例“列表1”至“列表6”，在【属性】面板中分别设置实例名称为lb1至lb6，如图8-83所示。

图8-83设置实例名称

（3）新建“图层3”，打开【动作－帧】面板，在其中输入如图8-84所示的鼠标单击与按下事件。

图8-84添加鼠标事件

该鼠标事件中说明，当鼠标单击实例“列表1”时，开始播放列表1中第2帧；当鼠标按下该实例时，开始播放列表1中第16帧。

（4）由于每个影片剪辑元件中的动画相同，所以只要复制该脚本，然后更改实例名称即可完成动画中6个弹出式栏目的制作。

至此弹出式菜单制作完成，保存文档后预览动画，如图8-63所示。