|
网页设计综合实例(下)(3) 10、 打开Optimize优化面板,设定此切片的类型为Animated GIF,并设定颜色数为32色,如下图所示:

11、 此动画完成,您可以打开帧面板设定动画帧之间显示的时间。
十二、 创建实时动画Live Aniamation
Fireworks4新增了一种实时动画创作方式,这种方式可以快速的创建一个动画符号,生成的动画具有即时编辑性能,及您可以在任意时间修改形成动画的各种元素属性。
1、 在文档左上角新增一个切片,点击工具面板最下方的 按钮关闭切片显示[点击旁边的 按钮可以打开切片显示]。 2、 在层面板中切换到Logo层,在刚才的左上角位置处输入文字"Karsong"。 3、 选择此文字对象,按F8快捷键将其转换为一个动画符号,将其命名为"Animate Logo",符号类型为"Animation",如下图所示:

4、 在弹出的设置窗口中设置插入帧数为8,并进行如下设置:

5、 拖动生成的动画符号中心的小红点,将其向右拖动到适当位置,注意不要将其拖出刚才创建的切片范围之外。

6、 打开优化面板Optimize设定此切片的类型为"Animated GIF",颜色数为32,如下图所示:

十三、 优化图像
我们的设计稿基本完成,下面我们需要针对不同对象设定各自的优化参数和输出格式。
1、 根据不同的输出质量要求及各部分功能,分别设定各自的切片,注意切片应尽可能划分整齐、简单。 2、 选中左边人像部分的切片,打开优化面板,设定输出格式为JPEG,质量为60。 3、 我们可以切换到2-Up预览窗口观察优化前后的结果,如下图所示:

4、 对于上面创建的两个动画,我们已经设置了输出类型为Animated GIF。 5、 我们还可以对文档正中的切片设定为文字切片,及将来输出时此部分输出为文字内容。 6、 选中文档中间部分的切片,打开Object面板,在对象类型里选择Text,在下部的窗口输入最终的文字内容。需要注意的是,您在这里不仅可以输入普通的文字内容,还可以输入标准的HTML格式内容,如我们输入的<center>和<font color="white">。这样最终的输出结果将根据这里的定义自动格式化文本。如下图所示:

十四、 输出HTML文件到Dreamweaver
|