fireworks 轻松绘制 banner广告动画教程

横幅广告，也称为banner，是网站宣传、发布信息的重要工具。今天，我们将通过Fireworks制作一款变色的横幅广告，学习符号的使用、补间实例动画的制作技巧，以及层和帧的基本操作。让我们开始吧！

新建一个画布，尺寸设定为常见的横幅广告尺寸468×60，背景色设为黑色。接着，导入一张位图文件，这张图片将成为我们横幅广告的主体。为了方便操作，我们可以使用绘图工具绘制图像，或者选择外部图像进行导入。

接下来，将导入的位图进行两次克隆，调整其中一幅图像的色调，得到不同的颜色效果。这一步可以让我们的横幅广告更加引人注目。

然后，选中其中一张图片，将其转换为符号。在弹出的对话框中，为符号命名并选择动画符号类型。这一步是制作变色横幅广告的关键。

回到工作区后，我们会看到带有虚线边框的符号。使用相同的方法将其他两幅图像也转换为符号，并分别命名。然后，将这些符号删除，以便进行下一步的操作。

为了丰富横幅广告的内容，我们可以在左侧添加一些图片，并进行适当的调整。这些图片可以使横幅广告更加生动和有趣。

接下来，打开“窗口”菜单，分别显示“层”、“帧”和“库”面板。在层面板中，选中图层并命名为背景，然后开启共享图层功能。这一步是为了我们接下来创建动画做准备。

然后，新建一个图层，并将库面板中的symbol 1拖到画布上，放置在横幅广告的右下角。记住它的位置信息。选中这个符号，点击“修改”菜单，选择动画设置。在弹出的对话框中，设置帧数为10。

点击“确定”，此时会弹出对话框询问是否要自动添加帧。至此，我们已经完成了变色横幅广告的制作过程。通过这个例子，我们不仅学会了Fireworks的基本操作技巧，还掌握了制作横幅广告的关键步骤。希望这个例子能对你有所启发和帮助！在图13的对话框中，我们看到了一个关于是否自动添加帧的提示。选择“OK”后，我们的帧面板中神奇地出现了10个新帧，如图14所示。

接着，我们创建了一个新的图层3，并将symbol 2拖到场画布中。这个符号的位置需要与前一个符号（symbol 1）保持一致，即x282，y0。通过“modify”菜单，我们进入了“animation”设置，在弹出的对话框中设定动画为10帧，并让透明度从0变到100，如图15所示。

完成这些设置后，我们发现第一帧的层面板如图16所示，图像效果如图17所示，一种渐变效果已经初步形成。

紧接着，我们开始制作第二个渐变效果，由红色变成绿色。我们在帧面板中选择第10帧，发现画布上的图像此时是红色的，如图18所示。

随后，我们单击帧面板右上角的按钮，在弹出菜单中选择“duplicate frame”复制帧。在复制的帧对话框中，我们选择将复制的帧放置到当前帧之后，如图19所示。选择“OK”后，第11帧的图像出现，此时画布变成了背景图，如图20所示。

然后，我们在层面板中选中layer 2，将绿色的symbol 3拖到画布中，并设置其xy坐标。同样地，我们进入“animation”设置，设定动画为10帧。接着选择layer 3，将红色的symbol 2拖到画布中，并设置其xy坐标。然后设置其不透明度从100到0，帧数也是10，如图22所示，使得红色逐渐淡去，绿色显示出来。

最后一步是绿色再变回紫色的过程。我们在帧面板中选中20帧，再添加一帧。然后分别选中layer 3和layer 2，将紫色和绿色符号拖到画布中，并分别设置其透明度和帧数。为了让动画的速度更合适，我们按住shift键选择帧面板上的所有帧，双击鼠标，设置帧延时为15/100秒。至此，我们已经完成了banner动画的创建，接下来就可以为其添加文字效果了。

使用cambrian.render('body')这段代码，让我们的动画在网页上展现出来吧！让我们静静欣赏这充满动态与活力的作品，期待它在狼蚁网站SEO优化中的出色表现。