第2讲-FW应用介绍之动画.ppt

第2章（2）--动画与弹出菜单 3.2.1制作动画 动画可以为网站增加活泼生动、复杂多变的效果。在Fireworks中，可以通过创建动画元件自动生成动画。 每个元件储存在对应的一个帧中，当按顺序播放所有帧时，就形成了动画。 利用动画元件可以制作出淡入、淡出、变大、变小、旋转等效果。 一个文档中可以有多个动画元件，从而创建较复杂的动画效果。Fireworks可以将动画作为GIF动画文件或SWF文件导出。 1.制作动画 Fireworks中的动画是通过帧来实现的，一个动画是由多个帧构成，帧中包含组成每一个动画的图像和对象。下面我们将制作一个简单的动画，具体操作步骤如下：　　步骤1：新建一个320×200画布。　　步骤2：利用矢量工具在画布中绘制六个不同形状的图形，如图3-26所示。 步骤3：同时选中六个图形，在帧面板中单击底端的 分散到帧按钮，则在帧面板中会自动生成六个帧，一个帧上有一个图形。 步骤4：执行【窗口】→【帧面板】命令，打开帧面板，双击每一帧的名称，均可实现对帧的重命名。 步骤5：在每一帧名称的右边都有一个“7”字。这个数字表示各帧的延迟时间，“7”表示该帧的延迟时间是0.07秒。双击此处即可重新设置帧的延迟时间，如图3-27所示。 步骤6：单击文档窗口底端的 播放按钮，观看动画，保存文档。 注意：利用工具箱中的L形、斜切矩形、斜面矩形、箭头、螺旋形、饼形等工具绘制图形时，每种图形上都有控制点，控制点的多少随绘图工具的不同而不同，可通过控制点来对图形进行调整，图3-28为使用 斜切矩形工具绘制的图形，左图为绘制的原始图形，右图为调整控制点后的图形。 2.创建动画元件 创建的动画元件被自动存放到库面板中，可使用它们再创建其他动画。通过创建动画元件制作动画步骤如下： 步骤1：新建画布，导入一幅图像。 步骤2：选中图像，按F8键，在弹出的“元件属性”对话框中设置“类型”选项为“动画”，然后单击【确定】按钮，又弹出“动画”对话框。 步骤3：在“动画”对话框中设置动画的各项参数，如图3-29（a）所示。单击【确定】按钮，画布上的图像对象将转换为动画元件实例，如图3-29（b）所示。 步骤4：执行【窗口】→【帧面板】命令打开帧面板，按住Shift键选中所有的帧，双击“7”处将帧延时修改为30。 步骤5：单击文档窗口底端的播放按钮 ，观看动画效果，图片在原地顺时针旋转、由大到小慢慢消影，保存文档。　　 画布上的图像对象转换为动画元件实例后，会出现决定动画位移和方向的动画路径。动画路径上的关键点代表对应的帧。绿点代表动画的起点，红点代表动画的终点，蓝点代表中间帧。将鼠标指向红点，按住鼠标左键拖动其位置，可以改变了动画运动的方向和位移。 使用鼠标拖动画布中动画元件实例上的红点，改变的动画路径，如图3-30所示，将产生从左到右、由大到小、顺时针旋转的消影效果。 3.2.2制作弹出菜单 弹出菜单在网页制作中起到重要的导航作用，当鼠标移到触发网页对象，如切片、热点、按钮上或单击这些对象时，浏览器中即显示弹出菜单，供用户选择浏览。一般在弹出菜单中都附加URL链接。????每个弹出菜单项都以HTML或图像单元格的形式显示，并具有“弹起”状态和“滑过”状态，并且在这两种状态中都包含文本。要预览弹出菜单，可按F12键在浏览器中预览，Fireworks文档窗口中的预览状态不会显示弹出菜单。Fireworks提供了“弹出菜单编辑器”，利用它可以快速方便地创建垂直或水平弹出菜单。 1.创建弹出菜单 本例将在以前制作的导航栏基础上介绍弹出菜单的制作过程，具体操作过程如下： 步骤1：打开以前制作的daohang.png文件修改画布大小。 步骤2：选中“动物趣闻”按钮元件实例，将鼠标移至 中心控制点处单击，在弹出的操作选项中选择“添加弹出菜单”，打开“弹出菜单编辑器”。 步骤3：在“内容”选项卡中添加相关内容如图3-31所示 “内容”选项卡中的 为添加菜单项， 为删除菜单项， 用于将选中的菜单项变成上级菜单的子菜单， 用于将子菜单还原为同级菜单，“文本”用于输入菜单项的名称，“链接”用于输入菜单项的对应链接地址，“目标”用于设置链接页面出现的形式。 步骤4：单击“外观”选项卡，进行文本格式的设置，为“滑过状态”和“弹起状态”应用图形样式，选择菜单的形式为“垂直菜单”，如图3-32所示。 步骤5：单击“高级”选项卡，可进行单元格大小、边距和间距、文字缩进、菜单消失延时，以及边框宽度、颜色、阴影和高亮等设置，如图3-33所示。 步骤6：单击“位置”选项卡，对弹出菜单位置和方向进行设置，如图3-34所示。 步骤7：最后单击【完成】按钮，按F12在浏览器中浏览，效果如图3-35所示。 2.导出弹出菜单 Fireworks生成了