FlashCS3入门可视化导航.pdf

《FlashCS3入门可视化导航.pdf》由会员分享，可在线阅读，更多相关《FlashCS3入门可视化导航.pdf（6页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、Flash CS3 入门 可视化导航 虽然网页中的导航菜单是用作于网站之间的导向链接，但是由于按钮包括多种状态，这些状态即可以是简单的图片与文字，也可以是富有动感的动画。本案例就是在鼠标经过状态添加了动画效果，但是该动画不是在按钮范围内显示，而是在按钮左侧播放，从而成为特殊的网页 Banner。练习要点 导入序列图片 影片剪辑元件 设置实例名称 练习过程（1）在 Flash 中新建一个【宽】和【高】为 500280 像素，【背景颜色】为#DCCD94的文档，按 CtrlS 键保存文档为可视化导航。执行【文件】|【导入】|【导入到库】命令，将配套光盘中的图片导入到【库】面板中，如图 63-1 所

2、示。图 63-1 在新建文档中导入图片到库（2）按 CtrlF8 键打开【创建新元件】对话框，设置【名称】为“图片”，启用【影片剪辑】选项，单击【确定】按钮进入工作区。将【库】面板中的图片 HUA-001 拖至舞台，利用【对齐】面板使之相对于舞台中心对齐，按 F7 直接在第 2 帧插入空白关键帧，如图 63-2所示。图 63-2 将图片拖至新建元件中（3）接着将【库】面板中的图片 HUA-002 拖至空白关键帧中，与第 1 帧中的图形重叠。依此类推，分别在第 2、3 和 4 插入空白关键帧，依次将【库】面板中的图片 HUA-003、HUA-004和 HUA-005，如图 63-3 所示。插入空

3、白关键 图 63-3 添加停止脚本（4）按快捷键 CtrlF8 创建影片剪辑元件“动画”，使用【矩形工具】绘制 50070像素的任意颜色矩形后，新建“图层 2”，将该矩形原位置复制一份，并且设置 Alpha 为 0%，如图 63-4 所示。图 63-4 绘制矩形（5）在所有图层最下方新建“图层 3”，将【库】面板中的图形元件“图片”拖入舞台中，通过单击【对齐】面板中的【水平中齐】按钮，使实例“图片”在舞台中的位置如图63-5 所示。图 63-5 拖入元件（6）在第 50 帧处插入关键帧后，垂直向下移动该帧中的实例，如图 63-6 所示，并且在两个关键帧之间创建补间动画。图 63-6 创建移动动

4、画（7）右击“图层 1”选择【遮罩层】命令，创建遮罩动画效果。在所有图层上方新建“图层 4”，在第 50 帧处插入空白关键帧后，分别在第 1 与 50 帧中添加停止动作，如图 63-7所示。图 63-7 创建遮罩动画（8）返回场景后，将素材图片 HUA-005.jpg 导入舞台中心，按快捷键 F8 将其转换为影片剪辑元件“背景”。然后在【属性】面板中设置【混合模式】为荧幕，如图 63-8 所示。图 63-8 设置影片剪辑元件属性（9）新建“图层 2”，将【库】面板中的影片剪辑元件“动画”拖入场景中，设置该实例与舞台水平中齐和顶对齐。然后重复将该元件拖入舞台中，并且垂直摆放后，分别为其设置实例名

5、称，如图 63-9 所示。图 63-9 设置实例名称（10）新建“图层 3”，选择工具箱中的【矩形工具】，绘制 75280 像素的淡黄色矩形，并且通过【对齐】面板，使矩形与舞台垂直中齐与右对齐，如图 63-10 所示。图 63-10 绘制矩形（11）选择工具箱中的【文字工具】，在矩形区域中输入文本“花卉 1”至“花卉 4”，设置文本属性如图 63-11 所示，并且使用【对齐】面板中的分布功能，使文本平均分布。图 63-11 输入文本（12）在【库】面板中双击元件“动画”进入该元件编辑模式后，分别选中“图层 3”中的两个关键帧，在【属性】面板中设置相同的实例名称 pic，如图 63-12 所示。

6、图 63-12 设置实例名称（13）选中“图层 2”中的透明矩形，按快捷键 F8 将其转换为影片剪辑元件“热区”后，在【属性】面板中设置实例名称为 bt_1，如图 63-13 所示。图 63-13 转换影片剪辑元件（14）在【库】面板中双击元件“图片”进入该元件编辑模式后，选中第 1 帧后按快捷键 F5 插入普通帧，然后单击第 1 帧的同时向右拖动，使第 1 帧成为空白关键帧，如图 63-14所示。图 63-14 编辑动画帧（15）返回场景后，新建“图层 4”，在空白关键帧中打开【动作帧】面板，在其中输入以下代码。使鼠标经过不同的热区后，动画自动播放；鼠标离开热区后，动画返回第 1帧。func

7、tion out(event:MouseEvent):void this.Com_1.gotoAndStop(1);this.Com_1.pic.gotoAndStop(1);this.Com_2.gotoAndStop(1);this.Com_2.pic.gotoAndStop(1);this.Com_3.gotoAndStop(1);this.Com_3.pic.gotoAndStop(1);this.Com_4.gotoAndStop(1);this.Com_4.pic.gotoAndStop(1);function Com_1_Mo(event:MouseEvent):void thi

8、s.Com_1.gotoAndPlay(2);this.Com_1.pic.gotoAndStop(2);Com_1.bt_1.addEventListener(MouseEvent.MOUSE_OVER,Com_1_Mo);Com_1.bt_1.addEventListener(MouseEvent.MOUSE_OUT,out);function Com_2_Mo(event:MouseEvent):void this.Com_2.gotoAndPlay(2);this.Com_2.pic.gotoAndStop(3);Com_2.bt_1.addEventListener(MouseEve

9、nt.MOUSE_OVER,Com_2_Mo);Com_2.bt_1.addEventListener(MouseEvent.MOUSE_OUT,out);function Com_3_Mo(event:MouseEvent):void this.Com_3.gotoAndPlay(2);this.Com_3.pic.gotoAndStop(4);Com_3.bt_1.addEventListener(MouseEvent.MOUSE_OVER,Com_3_Mo);Com_3.bt_1.addEventListener(MouseEvent.MOUSE_OUT,out);function Com_4_Mo(event:MouseEvent):void this.Com_4.gotoAndPlay(2);this.Com_4.pic.gotoAndStop(5);Com_4.bt_1.addEventListener(MouseEvent.MOUSE_OVER,Com_4_Mo);Com_4.bt_1.addEventListener(MouseEvent.MOUSE_OUT,out);（16）至此，可视化导航动画制作完成，按快捷键 CtrlS 保存文档后，按快捷键 CtrlEnter 预览动画，效果如图 63-15 所示。图 63-15 可视化导航动画