《第2讲-fw应用介绍之动画》

《《第2讲-fw应用介绍之动画》》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第2章（2）--动画与弹出菜单7/23/202113.2.1制作动画动画可以为网站增加活泼生动、复杂多变的效果。在Fireworks中，可以通过创建动画元件自动生成动画。每个元件储存在对应的一个帧中，当按顺序播放所有帧时，就形成了动画。利用动画元件可以制作出淡入、淡出、变大、变小、旋转等效果。一个文档中可以有多个动画元件，从而创建较复杂的动画效果。Fireworks可以将动画作为GIF动画文件或SWF文件导出。7/23/202121.制作动画Fireworks中的动画是通过帧来实现的，一个动画是由多个帧构成，帧中包含组成每一个动画的图像和对象。下面我们将制作

2、一个简单的动画，具体操作步骤如下：　　步骤1：新建一个320×200画布。　　步骤2：利用矢量工具在画布中绘制六个不同形状的图形，如图3-26所示。7/23/20213步骤3：同时选中六个图形，在帧面板中单击底端的分散到帧按钮，则在帧面板中会自动生成六个帧，一个帧上有一个图形。步骤4：执行【窗口】→【帧面板】命令，打开帧面板，双击每一帧的名称，均可实现对帧的重命名。步骤5：在每一帧名称的右边都有一个“7”字。这个数字表示各帧的延迟时间，“7”表示该帧的延迟时间是0.07秒。双击此处即可重新设置帧的延迟时间，如图3-27所示。7/23/20214步骤6：单

3、击文档窗口底端的播放按钮，观看动画，保存文档。注意：利用工具箱中的L形、斜切矩形、斜面矩形、箭头、螺旋形、饼形等工具绘制图形时，每种图形上都有控制点，控制点的多少随绘图工具的不同而不同，可通过控制点来对图形进行调整，图3-28为使用斜切矩形工具绘制的图形，左图为绘制的原始图形，右图为调整控制点后的图形。7/23/202152.创建动画元件创建的动画元件被自动存放到库面板中，可使用它们再创建其他动画。通过创建动画元件制作动画步骤如下：步骤1：新建画布，导入一幅图像。步骤2：选中图像，按F8键，在弹出的“元件属性”对话框中设置“类型”选项为“动画”，然后单击【确

4、定】按钮，又弹出“动画”对话框。步骤3：在“动画”对话框中设置动画的各项参数，如图3-29（a）所示。单击【确定】按钮，画布上的图像对象将转换为动画元件实例，如图3-29（b）所示。7/23/20216步骤4：执行【窗口】→【帧面板】命令打开帧面板，按住Shift键选中所有的帧，双击“7”处将帧延时修改为30。步骤5：单击文档窗口底端的播放按钮，观看动画效果，图片在原地顺时针旋转、由大到小慢慢消影，保存文档。7/23/20217画布上的图像对象转换为动画元件实例后，会出现决定动画位移和方向的动画路径。动画路径上的关键点代表对应的帧。绿点代表动画的起点，红点代

5、表动画的终点，蓝点代表中间帧。将鼠标指向红点，按住鼠标左键拖动其位置，可以改变了动画运动的方向和位移。使用鼠标拖动画布中动画元件实例上的红点，改变的动画路径，如图3-30所示，将产生从左到右、由大到小、顺时针旋转的消影效果。图3-30修改动画路径7/23/202183.2.2制作弹出菜单弹出菜单在网页制作中起到重要的导航作用，当鼠标移到触发网页对象，如切片、热点、按钮上或单击这些对象时，浏览器中即显示弹出菜单，供用户选择浏览。一般在弹出菜单中都附加URL链接。    每个弹出菜单项都以HTML或图像单元格的形式显示，并具有“弹起”状态和“滑过”状态，并且

6、在这两种状态中都包含文本。要预览弹出菜单，可按F12键在浏览器中预览，Fireworks文档窗口中的预览状态不会显示弹出菜单。Fireworks提供了“弹出菜单编辑器”，利用它可以快速方便地创建垂直或水平弹出菜单。7/23/202191.创建弹出菜单本例将在以前制作的导航栏基础上介绍弹出菜单的制作过程，具体操作过程如下：步骤1：打开以前制作的daohang.png文件修改画布大小。步骤2：选中“动物趣闻”按钮元件实例，将鼠标移至中心控制点处单击，在弹出的操作选项中选择“添加弹出菜单”，打开“弹出菜单编辑器”。步骤3：在“内容”选项卡中添加相关内容如图3-31

7、所示7/23/202110“内容”选项卡中的为添加菜单项，为删除菜单项，用于将选中的菜单项变成上级菜单的子菜单，用于将子菜单还原为同级菜单，“文本”用于输入菜单项的名称，“链接”用于输入菜单项的对应链接地址，“目标”用于设置链接页面出现的形式。步骤4：单击“外观”选项卡，进行文本格式的设置，为“滑过状态”和“弹起状态”应用图形样式，选择菜单的形式为“垂直菜单”，如图3-32所示。图3-32弹出菜单的外观设置7/23/202111步骤5：单击“高级”选项卡，可进行单元格大小、边距和间距、文字缩进、菜单消失延时，以及边框宽度、颜色、阴影和高亮等设置，如图3-33

8、所示。图3-33弹出菜单的高级设置7/23/2021