Fireworks - 案例训练 - 图文

Fireworks 案例训练

目 录

实例1：立体感文字的制作效果 ........................................................................................................2 实例2：笔触特效 ................................................................................................................................5 实例3：自动形状属性面板的应用 ....................................................................................................9 实例4：制作精美网页效果图 ..........................................................................................................15 实例5：笔触与选区实现残破照片边缘特效 ..................................................................................22 实例6：蝴蝶翻飞巧写书法字 ..........................................................................................................26 实例7：制作旧照片效果 ..................................................................................................................30 实例8：制作照片连续滚动效果 ......................................................................................................34 实例9：Banner广告动画 .................................................................................................................40

实例1：立体感文字的制作效果

?实例说明

本例将利用【阴影和光晕】|【发光】和【斜角和浮雕】|【凸起浮雕】两种“效果”,制作一个富有立体感的文字效果，用它可以做网站的站标或图片的水印等等。最终效果如图1.9所示。 ?学习目标

通过本例学习，应能掌握【阴影和光晕】|【发光】和【斜角和浮雕】|【凸起浮雕】两种“效果”的应用。 ?操作步骤

（1） 启动Fireworks MX 8.0软件，新建一个Fireworks 文档。选择【文件】

|【新建】命令，打开“新建文档”对话框，将“宽度”设置为300像素，“高度”设置为100像素，“分辨率”为72像素/英寸，画面颜色为“白色”，如图1.1所示

图1.1所示

（2）选择【文本工具】，打开【属性】面板，设置字体为:华文新魏，字号为:50，颜色为:红色，如图1.2所示。

图1.2所示

（3）在文档编辑窗口中输入文字“网页设计”，如图1.3所示。

图1.3所示

（4）选择“指针”工具，选中文字，在【属性】面板点击“效果”后面的

选择【滤镜】|【阴影和光晕】|【发光】命令，如图1.4所示。

，

图1.4所示

（5）打开【发光】滤镜面板，如图1.5所示，设置各参数，然后在空白处单击一下鼠标。文字效果如图1.6所示。

图1.5所示 图1.6所示

（6）选择【滤镜】|【斜角和浮雕】|【凸起浮雕】命令，如图1.7所示。

图1.7所示

（7）在【凸起浮雕】面板中如图1.8设置各参数，最终效果如图1.9所示。

图1.8所示

图1.9所示

实例2：笔触特效

?实例说明 本例将利用【笔触选项?】, 【高级?】中【选项】、【形状】、 【敏感度】三个选项卡，进行“编辑笔触”，制作一个文字的笔触特效，最终效果如图2.10

所示。

?学习目标

通过本例学习，应能掌握文字添加描边、高级笔触特殊效果的应用。 ?操作步骤

（1）启动Fireworks MX 8.0软件，新建一个Fireworks 文档。选择【文件】|【新建】命令，打开“新建文档”对话框，将“宽度”设置为450像素，“高度”设置为300像素，“分辨率”为72像素/英寸，画面颜色为“白色”，如图2.1所示。

图2.1所示

（2）在工具面板中选择【文本】工具图2.2所示。

，输入“desk”（可以人任意输入）。如

图2.2所示

（3）在【文本属性】面板中更改文字字型、颜色和字体大小，字体为：Arial Black，颜色为：白色，字体大小为： 50，其他属性设置如图2.3所示。

图2.3所示

（4）在【属性】面板中为文字添加描边效果。笔触颜色为：#3399FF，钩选【在笔角上方填充】选项，如图2.4所示。

（5）单击图2.4下方的【笔触选项?】按钮，选择描边种类为：水彩，笔触名称为：加粗，将笔尖边缘柔化拉到最顶端，尖端大小设为：72，纹理总量为：0%，如图2.5所示。

图2.4所示 图2.5所示

（6）再点击图2.5 的【高级?】按钮，出现【编辑笔触】对话框，如图2.6所示。在【选项】选项卡中，墨量为：100%，、间距为：0%，流动速率为：0，勾选【建立】选项，纹理和边缘纹理全为：0，边缘效果也为：无。笔尖为：10，笔尖间距为：97%，变量为：阴影，虚线为：无。

图2.6所示

（7）在【形状】选项卡中，大小为：72，边缘为：100，方向为：2，角度为：336，如图2.7所示。

图2.7所示

（8）在【敏感度】选项卡中，在【笔触属性】中选择【角度】，再在【影响因素】项目中，把速度改为：100，如图2.8所示。同理，再把【离散】项目中的垂直改为：100，随机改为：7，其他都为：0，如图2.9所示。

图2.8所示

图2.9所示

（9）点击【确定】按钮，退出【编辑笔触】对话框，最终效果如图2.10所示。

图2.10所示

实例3：自动形状属性面板的应用

?实例说明 本例将利用Fireworks 8 新增的【自动形状属性】面板对【自动形状】对

象进行自由、精确的控制。通过【自动形状属性】面板上的数值控制，可以轻松的作出很多奇妙的效果，如图3.1所示，是通过对【圆角矩形自动形状】对象的调整得出的一系列效果。

图3.1所示

?学习目标

通过本例学习，应能掌握【自动形状属性】面板对【自动形状】对象进行自由、精确控制的应用。

【自动形状属性】面板及其使用如图3.2和2.3.3所示。

图3.2所示 图3.3所示

?操作步骤 一、预备知识

（1）启动Fireworks MX 8.0软件，新建一个Fireworks 文档。选择【文件】|【新建】命令，打开“新建文档”对话框，将“宽度”设置为：450像素，“高度”设置为：450像素，“分辨率”为：72像素/英寸，画面颜色为：“#FFCCCC”。 （2）选择【窗口】|【自动形状属性】命令，打开【自动形状属性】面板，如图3.2所示。

（3）单击【自动形状属性】面板上的插入新的【自动形状】下拉菜单，选择【圆角矩形】形状，在编辑区插入一个【圆角矩形】的自动形状对象。（本步也可通过单击工具箱上的【圆角矩形形状】按钮实现目的）

（4）按照原来掌握的方法，可以对【圆角矩形对象】的大小做一个调整，那就是通过拖拽位于自动形状右下方的“调整大小”的黄色菱形调节点来实现，如图3.4所示。这样拖拽的优点是快速，缺点是不准确。如果需要准确的来调整大小的话，通过【自动形状】属性面板的【宽】、【高】数值的调整即可实现精确设置了。

图3.4 所示

（5）单击【自动形状属性】面板上位于中心的边角形状按钮 ，如图3.5所示，即可实现对边角形状的调整。在锁定状态下，单击任何一个按钮，其余的三个按钮都会进行同样的调整变化。

图3.5

（6）单击【锁头】图标，即可解除对四个边角的统一锁定状态，此刻便可对单独的边角对象做形状、大小的数值调整了，如图3.7所示。

（7）如果对【圆角矩形形状】做了单独边角调整的话，就不要再次将【锁头】置于锁定状态了，如果再次单击锁头图标进行锁定的话，就又重新回到边角单独调整前的统一状态了，这点需要大家要注意。 二、具体制作

实例分解1：制作一个简单的高脚杯形状

（1）选择【窗口】|【自动形状属性】命令，打开【自动形状属性】面板，如图

3.2所示。

（2）单击【自动形状属性】面板上的插入新的【自动形状】下拉菜单，选择【圆角矩形】形状，在编辑区插入一个【圆角矩形】的自动形状对象。 （3）通过调整【自动形状属性】面板，将其【宽】、【高】分别设为“110、150”，并且【边角大小】设为“31”左右即可。具体设置如图3.6所示。

图3.6所示 图3.7所示

（4）单击位于中心的【边角形状】按钮 ，即可实现对【边角形状】的调整。将宽设为：1，其余部分不做调整，如图3.8所示。 （5）编辑区的形状已经发生了变化，“高脚杯”的形状已经基本出现了，如图3.9所示。

图3.9所示 图3.8

（6）对边角再作调整，配合【ALT】键，就可以作出如图3.10所示的种种变形效果了。

图3.10所示 图3.11所示

（7）选取【工具箱】中的【部分选定】工具，在“高脚杯”形状的路径上单击鼠标，出现如图3.11所示的【警告框】，直接点击【确定】按钮即可。如果嫌它烦的话，选中【不再显示此对话框】前面的复选框即可。

当然，还有一种好办法，更省事儿：直接单击【修改工具栏】上的【合并】按钮，将【自动图形对象】转化为【路径对象】来操作。

（8）继续对形状的下部做一个细微的调整。可以使用【部分选定】工具，同时选定位于下方的三角形的三个路径节点，然后按键盘上的【向上】键，向上移动它，然后再对其高度做细微的调整，如图3.12所示。

（9）最终成图，如图3.13所示，需要进一步的细化。本节的“高脚杯”形状的制作，到此完毕。

图3.13所示 图3.12所示

实例分解2：风筝制作

本例中，如果使用插入【斜切矩形】和【斜面矩形】自动形状的方式，同样也能产生上述的效果。

（1）启动Fireworks MX 8.0软件，新建一个Fireworks 文档。选择【文件】|【新建】命令，打开“新建文档”对话框，宽度设置为：450像素，高度设置为：450像素，分辨率为：72像素/英寸，画面颜色为：“#6699FF”。

（2）选择【窗口】|【自动形状属性】命令，打开【自动形状属性】面板，如图3.2所示。

（3）在编辑区随意插入一个【圆角矩形】自动形状对象，描边颜色设为：无，如图3.14所示。

图3.14所示

（4）在【自动形状属性】面板进行调整，将【圆角矩形】对象的宽、高均设为：8（也可设为不同大小的数值，看看效果有何不同）。如图3.15所示。设置完毕后，编辑区的图形效果如图3.16所示。

图3.15所示 图3.16所示

备注：对于自动对象的宽、高数值的这种非正常取值范围的调整，只能在第一次设置时产生效果，如果已经输了数值，再次进行二次调整的话，图形的效果就会不复存在，而变成其应该根据数值正常反应的实际效果了。

（5）选取【工具箱】的【缩放工具】，直接对编辑区的形状对象进行放大变形的操作，编辑区的图形效果如图3.17所示。

图3.17所示

（6）选取【工具箱】的【扭曲工具】，对编辑区的图形对象做一个变形调整，如图3.18所示，直至出现如图3.19所示相近的效果，通过本步的操作，制作出风筝“飞”的姿态。

图3.18所示 图3.19所示

（7）按快捷键“Ctrl+J”，将【自动形状对象】转化为【路径对象】，做进一步的形状调整。为了方便上色，再将其转化成了【位图对象】，这样便可轻松的进

行颜色填充了。

小结：数值的精确调整，是【自动形状属性】面板的最成功之处，通过精确的数值调整，不仅可以更加精密的控制对象的形状，而且可以制作出一些原来不能想到的效果来。关于其他的几个自动形状的使用，就需要大家来共同挖掘了。

实例4：制作精美网页效果图

?实例说明 本例主要介绍Fireworks 8的位图工具的使用。最终效果如图4.1所示。

图4.1 所示

?学习目标

通过本例学习，应能掌握位图工具的使用。 ?操作步骤

（1）启动Fireworks MX 8.0软件，新建一个Fireworks 文档。选择【文件】|【新建】命令，打开“新建文档”对话框，宽度设置为：760像素，高度设置为：430像素，分辨率为：72像素/英寸，画面颜色为：白色，如图4.2所示。

图4.2所示

（2）选择【工具箱】中的绘图工具栏中的【选取框】工具，在【属性】面板中进行相应的设置，如图4.3所示。

图4.3所示

（3）使用【选取框工具】，在画布的右侧绘制一个矩形选区，如图4.4所示。

图4.4所示 图4.5所示

（4）选择绘图工具栏中的【渐变】工具，这时【属性】面板会自动变成渐变色的调节属性。设置【渐变类型】为【线性渐变】，【渐变颜色】为白色过度到绿色。如图4.5所示。

（5）使用【渐变】工具，在画布右侧的选区中单击鼠标左键，渐变色即可填充到当前选区中。如图4.6所示。填充完毕，按快捷键【Ctrl+D】退出位图编辑模式。

图4.6所示

备注：使用【渐变】工具在选区单击，得到的渐变色方向默认为水平方向，如果希望得到不同方向的渐变色，可以使用【渐变】工具在选区中拖拽填充。 （6）在新窗口中打开事先准备好的图像素材“花草.jpg”，选择绘图工具栏中的【椭圆选取框】工具，在【属性】面板中进行相应的设置，如图4.7所示。

图4.7所示

（7）使用【椭圆选取框工具】在图像“花草.jpg”中绘制一个正圆的选区。如图4.8所示。

图4.8所示

（8）按住键盘的【Shift】键，这时在鼠标指针的右下角会显示一个小【+】号，表示添加选区。使用【椭圆选取框】工具在当前选区的基础上增加一个新的选区。如图4.9所示。

图4.9所示

（9）现在得到的是有点类似于望远镜的两个椭圆连接在一起的选区，如果需要调整选区在图像中的位置，在【椭圆选取框】工具选中的状态下，直接用鼠标移动即可。把选择的像素区域，复制到前面新建立的画布中来。如图4.10所示。

图4.10所示

（10）在新窗口中打开事先准备好的图像素材“模特.jpg”，选择绘图工具栏中的【多边形套索工具】，在【属性】面板中进行相应的设置，如图49所示。

图4.11所示

（11）使用【多边形套索】工具,把图像素材“模特.jpg”的人物区域选中，如图4.12所示。在选择的过程中，不需要完全的压边，因为有羽化的设置。同时如果不小心选择错误的话，必须重新绘制选区。

图4.12所示 图4.13所示

（12）把选中的像素区域复制到前面新建的画布中，如图4.13所示。

（13）选择绘图工具栏中的【椭圆选取框】工具，其属性设置和前面一致。在画布中绘制一个椭圆的选区。如图4.14所示。

图4.14所示 图4.15所示

（14）选择【选择】|【反选】命令或按下快捷键【Ctrl+Shift+I】），对选区进行反选操作，这样选中的就是椭圆选区以外的部分。如图4.15所示。

（15）在图层中选择图像素材“模特.jpg”所在的图层，按键盘的【Delete】键，即可删除所选中的像素区域。根据需要，可以适当移动选区，对图像素材“模特.jpg”的边缘部分进行多次删除，最终效果如图4.16所示。

图4.16所示 图4.17所示

（16）选择【修改】|【变形】|【水平翻转】命令，改变模特素材的水平方向。并且使用【缩放】工具适当调整图像的尺寸，对齐到相应的位置。

（17）打开【属性】面板中的【滤镜】|【调整颜色】|【亮度/对比度?】命令，适当增加其【亮度】和【对比度】属性，使图像素材更清晰明亮。如图4.17所示。

（18）使用绘图工具栏中的【直线】工具，在画布中绘制一个十字坐标，并且在【属性】面板中设置其【笔触样式】为【虚线】。如图4.18所示。

图4.18所示 图4.19所示

（19）在新窗口中打开事先准备好的图像素材“向日葵.jpg”，选择绘图工具栏中的【多边形套索】工具，其属性设置和前面一致，把向日葵选择下来，并且复制到当前画布中。如图4.19所示。 （20）首先把向日葵复制一个，选中复制的向日葵图像，选择【属性】面板的【滤镜】|【模糊】|【运动模糊?】命令。

（21）在弹出的【运动模糊】对话框中设置好相应的属性，效果如图4.20所示。

图4.20所示 （22）在【图层】面板中调整模糊后向日葵的排列顺序，拖拽到所有对象的下方，

并且同时设置其【透明度】为40。如图4.21所示。

图4.21所示 图4.22所示

（23）把另外一张向日葵的图像缩小到适当的尺寸，并且移动到十字坐标上，如图4.22所示。

（24）使用绘图工具栏中的【选取框】工具，选中图像中多余的像素区域，依次删除。如图4.23所示。

图4.23所示

（25）最后，在画布中添加文本和网站标志，整个页面效果图就制作完毕了。效果如图4.24所示。

图4.24所示

实例5：笔触与选区实现残破照片边缘特效

?实例说明 本例主要介绍Fireworks 8的笔触与选区来实现残破照片边缘特效。最终效果如图5.1所示。

图5.1所示

?学习目标

通过本例学习，应能掌握位图工具的使用。 ?操作步骤、

（1）启动Fireworks MX 8.0软件，新建一个Fireworks 文档。选择【文件】|【新建】命令，打开“新建文档”对话框，宽度设置为：760像素，高度设置为：430像素，分辨率为：72像素/英寸，画面颜色为：白色。

（2）选择【文件】|【导入】命令，打开“导入”对话框，选择欲打开加残破边缘效果的照片文件，如图5.2所示。

图5.2所示

（3）使用【矩形】或【圆形】工具，绘制并覆盖欲处理成残破边缘的区域轮廓，如果想要不规则形状的区域，也可以使用【钢笔】工具，绘制出闭合路径。使用【钢笔】工具，建议将【填充边缘】选择为【实心】，为了能更好的看到轮廓位置，先不要填充颜色，只加笔触颜色，如图5.3所示。

图5.3所示

（4）绘制好路径后，使用【指针】工具选择路径，在属性栏中设置【笔触类型】，选择的类型主要以【非自然】类型笔触中【不规则图形】为主，在此，最终效果选择的是【非自然]】中的【油漆泼溅】，如图5.4所示。

图5.4所示 图5.5所示

（5）选择【笔触选项】，详细设置笔触。设置笔触的【笔尖】|【边缘柔化】为0，如图5.5所示。

图5.6所示 图5.7所示

（6）再选择【高级?】选项，如图5.6所示，进一步设置笔触效果。笔触设置不同的参数，如图5.7、2.5.8所示。

图5.8所示 图5.9所示

（7）笔触设置好后，将路径填充为和笔触相同的颜色，对填充进行适当的羽化，如图5.9所示。

（8）选择路径，并选择【修改】|【平面化所选】命令，将路径转化为位图。 （9）选择【魔术棒】工具，设置【容差】为60，【边缘】为【实边】，在路径的填充颜色上单击，获取不规则边缘的选区，再选择【选择】|【选择相似】命令，如图5.10所示。

图5.10所示

（10）按下快捷键Ctrl+Shift+I进行反选，在图层面板中选择下方的欲加残破边缘的照片位图层为当前层，按键盘上的Delete键删除选区，如图5.11所示。

图5.11所示

（11）删除照片上方的图层，得到最终残破边缘效果，如图5.1所示。

实例6：蝴蝶翻飞巧写书法字

?实例说明

本例主要介绍Fireworks 8的共享层、帧动画、导出GIF。最终效果如图6.12所示。

图6.12所示

?学习目标

通过本例学习，应能掌握共享层、帧动画、导出GIF。 ?操作步骤

（1）启动Fireworks MX 8.0软件，新建一个Fireworks 文档。选择【文件】|【新建】命令，打开“新建文档”对话框，将“宽度”设置为100像素，“高度”设置为120像素，“分辨率”为72像素/英寸，画面颜色为“#C6E0FF”。如图6.1所示。

图6.1所示

（2）在【工具箱】中选择【矩形工具】，设置属性如图6.2所示。其中颜色值为：

#69ACFF，制作边框。如图6.3所示。

图6.2所示

图6.3所示 图6.4所示

备注：如果这个矩形大小不合适，可利用“Ctrl+T”变形进行调整。

（3）鼠标双击此图层，勾选【共享交叠层】选项。如图6.4所示，将此层共享，然后按下按钮，新建一个图层。

（4）使用【文字】工具，在上面输入合适的文字，字的大小、颜色等自行调整。本例设置的字体为华文行楷。如图6.5所示。

图6.5所示 图6.6所示

（5）选中文字后，选择菜单【修改】|【平面化所选】命令，将这个文字层转化为位图。如图6.6所示。

（6）在【帧面板】中选择【重制帧】命令，复制在22帧左右。（复制帧数按根据字的笔画多少有所不同）如图6.7所示。

图6.7所示 图6.8所示

（7）将素材中的蝴蝶复制在这些帧中（注意单数帧上放置合起翅膀的蝴蝶，双数帧放置张开翅膀蝴蝶）。

（8）用橡皮擦写字数的笔划（可以从后往前每帧擦掉一笔），并将该层的蝴蝶放在合适的位置。制作出的效果如图6.8所示：

备注：擦时注意调整橡皮擦大小，随时进行调节。 （9）画笔字完成后，将没有蝴蝶的最后一帧重置18帧（与提供的素材相同帧数，方便导入）。然后每帧调整文字的透明度，从99%每帧下调一点，一直到文字透明。

（10）选中倒数第18帧（即刚制作好擦写完成的文字），选择菜单【文件】|【导入】命令，将素材动画蝴蝶导入进来。 （11）最后在帧中选中制作文字的部分帧（可利用shift一次加选），设置其【帧延时】为30/秒。如图6.9所示。剩下的蝴蝶效果为15/秒。如图6.10所示。

图6.9所示 图6.10所示

（12）利用下方的播放预览后，最后就是导出漂亮的动画了。选择【文件】| 【图像预览】，在保存设置中选择【动画GIF接近网页128】（这种图片效果不错而且比较小），单击【导出】按钮即可。如图6.11所示。

图6.11所示

实例7：制作旧照片效果

?实例说明 本例主要学习了【调整颜色】|【转化为棕褐色色调】命令，同时通过【滤镜】命令的操作及其位图处理工具的使用，使得大家对于新增的【图像编辑】面板有了一个比较全面的了解。 ?学习目标

通过本例学习，应能掌握【图像编辑】面板, 掌握【调整颜色】|【转化为棕褐色色调】命令和【滤镜】命令的使用方法。 ?操作步骤

（1）启动Fireworks 8软件，选择【文件】|【打开】命令，打开需要处理的一张图片。

（2）选中打开的图片对象，选择【图像编辑】面板上的【调整颜色】| 【自动色阶】命令，使得图像呈现比较自然的色彩效果，本步操作后效果如图7.1所示。

图7.1所示

（3）选择【图像编辑】面板上的【调整颜色】|【转化为棕褐色色调】命令，编辑区的图像就变成了如图7.2所示的效果了。经过这一步的操作，我们所要实现的“旧照片”效果其实已经基本上呈现了，不过后面我们继续对其进行一些附加的操作，使得旧照片的效果更为自然些。

图7.2所示

备注：其实本步的操作在属性检查器上的滤镜框内可以明白的显示出来，那就是对图像作了一个【色相】|【饱和度】的调整。

（4）选取【图像编辑】面板上的【滤镜】| 【锐化】、【滤镜】|【进一步锐化】命令，突出荷花花瓣的边缘。如图7.3所示。

图7.3所示

（5）选取【图像编辑】面板上的【滤镜】|【添加杂点】命令，在弹出的“新增杂点”设置框中进行如图7.4所示的设置即可。

图7.4所示

（6）选取【图像编辑】面板上的【滤镜】|【模糊】、【滤镜】|【进一步模糊】命令，出现如图7.5所示的效果。

图7.5所示

（7）选取【图像编辑】面板上的【减淡】工具，同时在属性检查器上作如图7.6所示的设置，注意【范围】选择【中间影调】，【大小】不要太大，【曝光】数也不要太大。

图7.6所示

（8）设置完毕，拖动鼠标，在照片上随意画上几下，这样就会加上一些随意的划痕效果了，使得总体的“旧”的感觉更为逼真了，如图7.7所示。

图7.7所示

（9）选取【工具箱】上的【橡皮擦】工具，对照片的边缘进行部分擦除处理，

同样，和上一步添加划痕的方法类似，随意擦除一些你认为照片应该丢失的边缘即可，本例结束操作后的图片如图7.8所示。

图7.8所示

（10）结束，保存。

实例8：制作照片连续滚动效果

?实例说明 本例建立一个具有胶片形式的动态影视Banner。首先制作一个具有胶片效果的边框，接着使用帧面板制作GIF动画效果。 ?学习目标

通过本例学习，应能掌握Fireworks中组合、帧面板、修改画布大小、动画面板等。 ?操作步骤

（1）启动Fireworks MX 8.0软件，新建一个Fireworks 文档。选择【文件】|【新建】命令，打开“新建文档”对话框，将“宽度”设置为353像素，“高度”设置为51像素，“分辨率”为72像素/英寸，画面颜色为“黑色”。如图8.1所示。

图8.1所示

图8.2所示

（2）由于图像相对较小，为了方便编辑需要改变视图大小，选择【视图】|【缩放比例】为150％。如图8.2所示。

（3）点击【工具箱】的【矩形】图标，在图像上画一矩形，并设置【填充色】为“白色”，如图8.3所示。

（4）选择矩形并按Ctrl+C复制，然后Ctrl+V粘贴。并用方向键移动复制所得矩形到适当位置。

（5）不断重复步骤4得到如图8.4所示。这样就做出了一个胶卷的样子，下一步就为其添加一些“相片”。

图8.3所示

图8.4所示

（6）选择【文件】|【导入】命令，导入准备好的素材图片，改变导入图像的大小，并排列使其与“胶卷”符合，得到图8.5所示。

图8.5所示

（7）选择【文件】|【保存】命令，保存文档为“照片连续滚动.png”。下一步来制作一个滚动的Gif图片。选择【选择】|【全部】命令，选定所有的元素。如图8.6所示。

图8.6所示

（8）选择【修改】|【组合】命令，将所有元素组合成一个对象，如图8.7所示。

图8.7所示

（9）为了实现滚动效果，需要图像右边移出时，左边有图像能够补进。需要两幅相同图像来制作滚动效果。首先选择【修改】| 【画布】|【画布大小】命令，

修改画布大小【宽】为706像素，【高】为 51像素，得到图8.8所示。

图8.8所示

（10）选择所选组合，按Ctrl+C复制后再按Ctrl+V粘贴，然后排列好两个对象并再次组合，得到图8.9所示。

图8.9所示

（11）按Ctrl+X剪切所选组合，选择【修改】| 【画布】|【画布大小】命令，修改画布大小【宽】为353像素，【高】为 51像素，再按Ctrl+V粘贴组合，将所选组合右侧与画布右侧对齐，得到图8.10所示。

图8.10所示

（12）现在开始制作滚动动画。首先选择【修改】| 【动画】|【选择动画】命令，得到如图8.11所示窗口。将【移动】设为“353”，使其恰好能够左右衔接上。并将【帧】设为70，其他参数如图8.12所示。

图8.11所示

图8.12所示

（13）单击【确定】按钮，会跳出如图8.13所示窗口。

图8.13所示

（14）选择【窗口】| 【帧】命令，打开帧面板，选择第一帧，按住Shift键并拖动至第七十帧，单击鼠标左键选定所有帧，双击帧面板右侧，修改【帧延时】为“10/100秒”。如图8.14所示。

图8.14所示”

（15）下一步就可以播放动画，看看效果如何了。播放动画，效果如图8.15所示。

图8.15所示

（16）最后一步导出图像，选择【文件】| 【图像预览】命令，如图8.16所示，点击【导出?】按钮，将做好的图片保存为“照片连续滚动.gif”文件。

图8.16所示

实例9：Banner广告动画

?实例说明 Banner，一般翻译为旗帜广告、横幅广告等。Banner是网站用来作为盈利或者是发布一些重要的信息的工具。Banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。 ?学习目标

本文中我们用Fireworks来制作一个变色的Banner，从中我们可以掌握元件的使用、补间实例动画的制作、层和帧的基本用法，结尾进行精彩的技巧总结。 ?操作步骤

（1）首先我们新建一个大小为468×60像素的文件，并设置画布颜色为黑色，如图9.1所示。

图9.1所示

（2）然后我们导入一个要进行变色效果的位图文件，如图9.2所示。当然我们同样可以使用绘图工具绘制这个图像，这里是为了方便讲解选用外部图像的。

图9.2所示

（3）选中该幅图像按Ctrl＋Shift＋D两次，克隆图像两次。然后选中其中的一幅图像，点击【滤镜】，选择【调整颜色】|【色相/ 饱和度】，这时在弹出对话框中调整色调的值，如图9.3所示。同样方式调整另外一幅图像的颜色，最终得到图9.4所示的图像效果。

图9.3所示

本文来源：https://www.bwwdw.com/article/y0kg.html