|
Firework的主要用途 Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。 新推出的Fireworks 3 更是增加了许多脍炙人口的新功能： 1. 可以输出SWF和 Illustrator7文件； 2. 与Dreamweaver紧密的配合； 3. 与网页编辑器的结合； 4. 可以直接编辑点阵图； 5. 更方便的Roll over； 6. 向量模式编辑； 7. 即时预览； 8. 允许加入Photoshop滤镜； 9. 可以读入Photoshop文件； 10. 提供MAC Gamme预览功能； 11. 提供GIF编辑环境； 12. 提供History panel来记录动作； 13. 提供全新的按钮制作工具； 14. 可编辑的操作环境； 15. 资料库（Library）的运用； 16. 提供图形与文字的样式库（Style）。 怎么样？Firework 3如此强大的网页编辑功能是不是很令人眼馋呀？！是不是恨不得马上就掌握这个网页编辑利器呀？！别急！就让我们一起来深入地研究它吧！ 第二节 基本概念firework的矢量图像 一、 矢量图像 矢量图像是用包含颜色和位置属性的直线或曲线（即称为矢量）来描述图像属性的一种方法。比如说一个椭圆，它就包括由通过椭圆边缘的一些点组成的轮廓和轮廓内的点两部分。 对于矢量图像，椭圆的颜色取决于椭圆轮廓曲线的颜色和轮廓封闭的区域颜色，与轮廓内单独的点无关。我们可以通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质，也可以移动、放缩、变形，或者在不改变图形显示质量的前提下，改变具有矢量性质的椭圆的颜色。 矢量图形具有独立的分辨率，也就是说我们以各式各样的分辨率来显示矢量图形，它都不会失真。 二、 位图图像 位图图像是用每一个栅格内不同颜色的点来描述图像属性的，这些点就是我们常说的像素。就拿前面的椭圆来说吧，也可以由所有组成该椭圆的像素的位置和颜色来描述。因为编辑位图时，修改的是像素，而不是直线和曲线。因此无法通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质。 位图图像的分辨率不是独立的，因为描述图像的数据是对特定大小栅格中图像而言的，因此，编辑位图会改变它的显示质量，尤其是放缩图像，会因为图像在栅格内的重新分配而导致图像边缘粗糙。在比位图图像本身的分辨率低的输出设备上显示图像也会降低图像的显示质量。 对于矢量图像和位图图像的转化，可以举一个简单的例子来说明，在firework 3.0中将文字变为路径（Convert to Path）时，可以看成是把文字变为矢量图像，若在对象监控板中选择Transform as Pixels，则可以转化为位图图像。 第三节：初识Firework 3 启动Firework 3，我们就会发现它并不陌生，它长得和Photoshop十分相像。 Firework 3视窗是由菜单栏、工具栏、工具箱和数个浮动面板组成，当我们开启或建立一个新文件时，视窗内还会出现一个绘图工作区，如图1所示。 图1 Firework视窗 一、 菜单栏 菜单栏位于Firework 3视窗的上方，当视窗内尚未开启任何文件时，菜单栏仅仅提供了“File（文件）”、“Edit（编辑）”、“View（视图）”、“Commands（命令）”、“Window（窗口）”与“Help（帮助）”六个菜单，而且菜单中所提供的项目也不多。不过当我们新建或开启一个文件时，菜单栏中的项目就热闹了许多，除了上述的六个菜单外，还增加了“Modify（修改）”、“Text（文本）”与“Xtras（滤镜）”三个菜单，而且菜单中的项目也增加了不少。 单击菜单后，就会弹出一个下拉式菜单，如果其中项目的右方有一个如图2的“箭头”符号，则表示该项目还有一个子菜单，单击该项目就会弹出它的子菜单，其中包含了更多的项目。 图2 菜单栏 二、 工具箱 Firework 3工具箱的预设位置是在视窗的左方，它提供了一套极为专业的向量路径绘制工具群，利用这些工具我们可以绘制出十分动人的图形。 将工具箱拖曳到空白的位置，就可以把它变成独立的浮动面板，除此之外，我们还可以将它拖曳到视窗的右方，这可依个人喜好而定。 如果我们想隐藏工具箱，可以单击 “Window\Toolbox”窗口 下的 工具 选项，使Toolbox左方的对钩消失即可，若想重新显示工具箱，单击选项，使对钩出现即可。 三、 工具栏 （窗口/工具栏/主要，修改） Firework 3工具栏（ Toolbars）（图3）包括Main（主工具栏）、Modify（修改工具栏）和View Control（视域控制栏）三种工具栏，预设状态下，它们都处于显示状态。 我们可以将这三个工具栏拖曳到任何位置，也可以将其拖曳成独立的浮动面板。 通过钩选和取消钩选 “Toolbars”菜单中的“Main、Modify或View Control”选项，我们可以将它们显示和隐藏。 图3 工具栏 四、 浮动面板 Firework 3提供了许多浮动面板来方便我们设计图形，但是如果开启了所有的浮动面板，则会占满整个视窗。为了能够获得一个最佳的工作视窗，我们可以自行开启、关闭、缩放或移动浮动面板，甚至还可以将某个浮动面板加入另一个面板群组中，来组合出适合自己的浮动面板。 就拿“Stroke”面板来说吧，我们钩选“Window”中的“Stroke”项目，就可以将其开启；如果我们想要关闭它，只需单击浮动面板右上角的“关闭”按钮即可。如果我们想要切换到“Fill”面板，只需单击“Fill”选项卡即可；拖曳“Stroke”面板到“Frames”浮动视窗中，就可以将它加入其中，或者将其拖曳到空白处，就可以独立成一个浮动视窗；如果我们觉得浮动面板占用了太多空间，双击浮动面板的标题栏，就可以将其最小化，再次双击就可将其还原（图4）。 好啦！发挥你的想象力和创造力为自己设计一个最佳的工作视窗吧！ 图4 浮动面板 五、 状态栏 状态栏位于Firework 3视窗的下方，它可以显示我们所选取的菜单项目、工具箱内的工具或工具栏上的按钮之简介，也可以显示目前所选取的物件种类，除此以外，它还包括了一个视窗检视控制栏来切换我们所要检视的Frame。 第四节：制作一个简单的例子 我们等不急了，能不能先演示一把！好吧，我们先来制作一个简单的动画（图1）。 图1 “闪烁的星”效果图 一、 新建文件 单击新建按钮 图2 新文件对话框
二、 选择工具 左键按住工具箱中的形状绘图工具，我们就会看到有三种形状可供选择 1. 形状（Shape）：Star 2. 棱角数目（Slides）：10 3. 内角角度（Angle）：15 图3 “Options”浮动面板 第四节：制作一个简单的例子 三、 绘制元件 图4 绘制元件 在画布上拖动鼠标即可画出一个十角星（如图 1. 填充方式：Solid 2. 填充颜色：白色 3. 边缘(Edge)：反锯齿（Anti-Alias） 4. 填充纹理（Texture）：Fiber 5. 纹理亮度值：0% 同理打开“Stroke”面板并将其设置为（如图5b）。 图5 Fill和Stroke属性浮动面板 用鼠标左键按住一个棱角的节点，拖动鼠标即可改变棱角的位置和方向，这样我们通过改变棱角的位置和方向就可以为十角星设计出一个新的形象（如图 选中白色十角星，然后Ctrl+c、Ctrl+v复制两个十角星，将它们的填充分别改为绿色、红色，其他不变（如图6b）。 图6 改变外观 复制图形 选中白色十角星，按下F8键，出现了元件属性对话框（Symbol Properties），我们为这个元件起一个名字，在名字（Name）栏中输入“xing1”；类型（Type）选择Graphic，单击“ok”按钮如（图 同理，将绿色、红色十角星定义为xing2、xing3元件。 选取菜单指令“Window\Library”开启“Library（资料库）”浮动面板，就会发现我们所编辑的十角星已经被加入到Library中了（图7b）。 图7 加入资料库 另外，原来画布内的图形自动转换成了分身（Instance），当我们选取元件分身时，它的左下方会出现“箭头”图示。（如图8） 图8 元件的分身 如果对刚才的元件不是很满意，我们还可以进一步编辑，双击Library中的元件图形，进入元件编辑窗口，我们就可以按照自己的意愿去进一步修改元件，编辑完元件后，将窗口关闭，这时我们就会发现不仅元件有了变化，而且分身也发生了相应的变化。 这种本体与分身的观念，很适合用来制作动画，我们可以通过修改元件方便地修改所有的分身；另外，由于分身是元件的复制品，因此，使用分身还可以大量减少GIF动画文件大小；如果不想让某个分身跟随元件而改变，我们可以这样来实现：选中该分身，然后选取菜单“Modify/Symbol/Break Link”切断分身与元件之间的链接，这时，该分身就成了一个独立的对象，将不再受元件的影响。 第四节：制作一个简单的例子 四、 制作动画 1. 选取“细部选取工具” 2. 选中一般选物工具 3. 首先单击“变形工具” 图8 变形与透明度的更改 4. 从Library拖拽白色十角星元件到画布的左下角，就出现了一个白色十角星的分身，同理，我们将它的不透明度设置为45。 5. 按住Shift键，用细部选取工具选中我们刚才编辑的两个白色十角星，选取菜单指令“Modify\Symbol\Tween Instances”，在弹出的Tween Instances对话框中，我们在Steps填入10，并钩选Distribute to Frames复选框，单击“ok”按钮。（如图 图9 插入帧 五、 加入特效 1. 按住Shift键，选中第一帧到第十一帧，双击其中的一帧，在弹出的Frame Delay对话框中将时间延迟设置为“1/100 second”（0.01秒），这样就加快了十角星的飞行速度，将产生一种流逝的效果。 （如图10） 图10 设置时间延迟 2. 左键按住第十二帧将它拖曳到“新建/复制帧”按钮 3. 同理我们再复制第十二帧，却发现原来的第十三帧被挤到了第十四帧（原来当前帧的复制帧会出现在当前帧的下一帧），好吧，现在就将它拽回来！按住第十四帧将它拖到第十三帧，第十三帧上边线出现黑线时松手即可恢复原来帧的顺序，同理，如果我们想要调整其他帧的位置，只需将它拖到相应的位置即可。 现在，大家可能会想，我们为何不直接复制第十三帧呢？聪明！其实这里直接复制第十三帧才是最佳方法；那我又为何复制第十二帧呢？其实我只是想告诉大家一种现象和调整位置的方法，提醒大家在编辑帧的时候，一定要有一个清晰的思路，否则，我们将不得不面对令人头疼的帧的调整。 4. 单击第十四帧，选中画布中的图片，将它的不透明度设置为100；选中“文字工具”按钮 图11 文本编辑器 图12 十角星中的“洪”字 5. 选中第十四帧，然后单击Frames 浮动面板右上角的箭头按钮（如图13），在弹出的菜单选择“Add Frames”，弹出“Add Frames”窗口，在“Number”输入7，在“Insert new frames”项中，我们选择“After current frame”，单击“ok”按钮，这样我们就在当前帧的后面新建了七个空帧，单击第十四帧，选中画布中的十角星，单击Frames 浮动面板中“Info”选项卡，开启信息面板，其中我们可以看到十角星的x（13）、y（43）坐标，然后切换到Frames 浮动面板，选中第十六帧，接下来我们开启Library浮动面板，选中xing2元件，并将其拖到画布中，这样就产生了一个xing2的分身，用键盘移动它，信息面板中的x、y坐标也会随之变化，我们将它移动到x（13+35）、y（43）；接下来我们为绿色十角星添加文字，那么怎样才能保证第十六帧的文字属性和第十四帧的一致呢？我们首先切换到第十四帧，选中“洪”，查看它的坐标信息，然后Ctrl+C，接下来我们再返回第十六帧，Ctrl+V，然后移动“洪”，将它的x 坐标增加35，使它处于绿色十角星的中心，然后双击“洪”，开启文本编辑器，将“洪”改为“恩”，并将“恩”的颜色改为白色，单击“ok”按钮将文本编辑器关闭。 图13 在当前帧后加入新的帧 6. 同理，我们可以分别在18、20帧完成相应的操作。 六、 调整时间延迟 为了能使动画更加具有“动”感，我们可以调整每一帧的时间延迟，来控制动画的效果，双击某一帧，然后在弹出的Frame Delay对话框中输入时间延迟，例如：“1/100 second”（0.01秒），设置完毕后，单击任何空白处即可关闭对话框。具体时间延迟设置如图14 图14 设置各帧时间延迟 现在我们来预览一下动画最终的效果，单击“状态栏”右方的播放按钮（如图15），画布中的动画就动了起来，如果我们觉得动画效果不够理想，单击“停止”按钮或者单击任何空白的地方将动画停止，然后调整不满意的地方，通过不断的修改和调试，我们就可以实现更加理想的动画效果。 图15 播放按钮 七、 输出动画 现在我们可以将动画保存为GIF格式了，选取菜单指令“File\Export Preview”，开启Export Preview窗口，选择“Option”选项卡，在“Format”栏中选择“Animated GIF”（如图16），然后切换到“Animation”选项卡，将动画效果设定为“反复播放”方式，最后单击“Export”按钮，在“Export”窗口中，选择保存路径，输入文件名，例如：闪烁的星，单击“保存”按钮，动画就以 .gif的格式保存起来了。 到此为止，整个GIF动画就全部完成了，感觉怎么样？是不是已经可以制作动画了！如果是这样，你已经领会了Firework 3 强大的GIF动画功能，当然如果你想彻底地精通Firework 3，掌握它更为强大的网络图形编辑功能，那就赶快和我们一起踏上征服Firework 3的轻松之旅吧！ 图16 输出动画
第一节：编辑向量图形 我们先来看一看下边的效果图（如图1） 图1 苹果中的笑脸 怎么样？是不是很有意思！下面我们就来看一下它是如何制作的？ 一. 绘制苹果 首先，我们新建一个文件（300x300 Pixels；颜色为绿色），然后设置Stroke面板（如图 图2 初始设置 图3 苹果的最初轮廓 现在我们再来为苹果添加一个小小的柄，按住自由格式工具，我们就会发现弹出了四种工具（其实，每个右下角带有一个小三角形的工具（如图 图4 自由格式工具参数选择 图5 苹果的基本轮廓 二. 美化苹果 下面我们来为苹果化妆一下，让它更加漂亮、更加具有立体感，首先选择“细部选取工具”并单击画布的空白处，取消对苹果的选择状态，然后将笔刷的颜色设置为白色 图6 填充和漆桶参数设置 图7 对苹果的美化 接下来，我们再为苹果添加一个特效，使它更加具有立体感，首先选中苹果，然后开启“Effect”面板，单击“特效”按钮并在弹出的菜单中选择“Shadow and Glow\Drop Shadow”（如图 图8 立体效果设置 这样，一个具有立体感、光泽鲜艳的苹果就浮现在我们的眼前了。（如图9） 图9 立体效果的苹果 三. 添加笑脸 怎样才能为苹果添加一副笑脸呢？ 图10 割图 首先单击“打开文件”按钮，双击“打开”对话框我们预先准备好的“笑脸.jpg”，笑脸.jpg就在一个新的工作区域中打开了；按下“形状选择工具”，选择“割图工具” 图11 选择笑脸 单击“新建文件”按钮 图12 橡皮工具和添加笑脸 四. 调整画布 为了便于编辑，我们可以将“笑脸”和“苹果”合并，首先选中它们，然后选取菜单指令“Modify\Group”即可。 接下来，我们选中“一般选物工具” 图13 画布大小参数面板 同理，如果我们想要调整画布的颜色，选取菜单指令“Modify\Canvas Color”，在弹出的窗口中选中Custom，并将颜色调整为最佳效果即可(如图14)。 图14 画布颜色参数面板 到此为止，整个“苹果中的笑脸”就编辑完了。 五. 保存文件（最佳化影像处理） 1、 保存为GIF格式 选取菜单指令“File\Export Preview”，开启Export Preview窗口，选择“Option”选项卡；要转存为GIF格式，我们首先必须在“Format”选项中选择“GIF”选项；然后在“Palette”选择适当的色盘，我们常用的色盘为： Adaptive 色盘：Adaptive的意思为最适合的色彩，如果我们要转存的图片不只是渐进式的色彩，那么这个色盘会先选用相对安全的色彩，然后再以延续渐进的方式来加入非安全性的色彩，因此，转存后的图片将会有不错的效果。 WebSnap Adaptive 的意思是接近网页的最适合色彩，如果我们转存的是相片图形，它会使图片获得更平顺的效果。 我们选择Adaptive 色盘，然后再在“Loss”选项中设置一下压缩比率，它的预设值为0，表示压缩的品质最好，但是图片的体积最大，若设为100，则压缩后的体积最小，但图片品质最差。我们可以根据需要设置适当的压缩比率。 另外，色彩数量也是影响图片大小的一个重要因素，色彩数量越少，图片的体积就越小，但相对的图片品质就会降低，我们可以在如图的选项中选择系统提供的色彩数量，也可以手动修改色彩数量，这样我们就可以通过使用最少的色彩，达到最好的图片品质。 大家都知道GIF文件可以设置透明色，那么在Fireworks 3中它是如何设置的呢？ 在窗口的下方，我们可以看到三个吸管状的按钮，使用它们就可以设置图片的透明色：透明色选择按钮可以选取一个色彩作为透明色；增加透明色按钮可以选取两个以上的颜色；删除透明色按钮可以恢复色彩原来的颜色。 如果图片已经设置了透明色，我们只需选择透明色下拉菜单中的“Index Transparency”或“Alpha Transparency”即可。 单击“Export”按钮就可以将图片保存为GIF文件了。（如图15） 图15 保存为GIF格式 2、 保存为JPG格式 转存为JPG要比GIF简单的多，首先在“Format”选项中选取“JPEG”格式，然后在“Quality”选项中指定图片的压缩品质即可，数值越大则品质越好，但相对的图片体积会变大；数值越小将会获得较小的文件，但图片品质会越差。（如图16） 图16 保存为JPG格式 另外，下面几项也会大大影响图片的大小和品质： 光滑度： 光滑度（Smoothing）可以使图片更加光滑，但同时会使图片模糊化，在“Smoothing”选项中可以指定图片的光华度，其中No Smoothing表示不使用光滑度的功能，而8 Maximum Smoothing为最大的光华度。（如图17） 图17 光滑度对比 渐进式效果： 钩选“Progressive”选项后会稍微增加文件的体积，其效果为浏览器下载这个文件时，会有从模糊到清晰般的渐进效果。 锐化效果： 钩选“Sharpen Color Edges”选项后，可以增加图片色彩边缘的锐化度。所谓色彩边缘指的是图片内因为色彩反差而形成的边缘，因此锐化的结果将会产生更加清晰的图片，但文件体积会变大。（如图18） 图18 锐化效果对比 3、 保存为png格式 gif是Firework 3的标准图片格式，将图片保存为png格式，其实就是保存一个源文件，以便于我们以后的进一步修改。 单击“保存按钮” 第二节：编辑点阵式图形 如果大家对Flash比较熟悉的话，那么对遮照效果肯定不会陌生。遮照效果就是将两个对象组合在一起，而处于下层的对象只能透过上层对象才能看到的一种效果。 我们有时真的不得不佩服Macromedia的能力。如此酷的效果（如图1），使用Firework我们只需要一条命令“Mask to Path”就可轻易实现。 图1 遮照效果 具体操作步骤如下： 1、打开一张图片，例如：zhezhao.gif。（如图2） 注意：在打开图片时，最好将“打开”对话框下方的Open as “Untitled”选项选中，这样文件将被复制成名字为“Untitled”的新文件，可以防止源文件被误修改。 图2 原图 2、选中“文字工具”，单击图片，在弹出的文本编辑器中输入“酷”字，具体设置如图3，单击“ok”按钮即可。 图3 输入文字 3、单击“一般选物工具”，将“酷”移到人物的头部，拖动鼠标将图片和文字全部选中，然后选取菜单指令“Modify\Mask Group\Mask to Path”。 （如图4） 图4 Mask Group菜单 4、OK，一切搞定（如图5）。 图5 遮照效果 细心的朋友可能会发现，在菜单“Modify\Mask Group”中还有另外一个选项Mask to Image，其实，这是Firework3.0新增的功能。 以往我们要创作如图的渐变效果，需要先对图片作渐变特效，然后运用Mask to Path来实现。现在有了Mask to Image，我们就再不用为此发愁了。 1、打开一张图片：zhezhao.gif。 2、创建渐变字：在图片上输入“酷”字并选中“酷”，将笔刷颜色设置为深色（例如：黑色），将漆桶颜色设置为浅色（例如：白色），将“Stroke”面板设置为“None”，将“Fill”面板填充属性设置为Linear，然后选取“漆桶”对文字进行渐变填充（如图6）。 图6 渐变填充 3、将文本对象移到图片对象上合适的位置，按Ctrl+A将文本对象和图片对象选中。 4、选取菜单“Modify\Mask Group\Mask to Image”。（如图7） 图7 渐变填充后的遮掩效果 如果想对已经作了遮照处理的文字进行修改，我们只需要打开它的gif源文件，选中“一般选物工具”，单击图片，图片就呈现选中状态，并且图片中心出现如图标识；选中“文字工具”，单击图片，弹出文本编辑器，其中我们就可以按照自己的意愿进行修改文字；如果单击“漆桶”，画布中就会出现填充手柄，通过拖动圆形手柄和方形手柄就可以改变渐变效果。 另外，如果我们用“一般选物工具”选中图片，然后选择菜单“Modify\Ungroup”将图形对象和文本对象分组，就回到了遮照处理前的效果，这样我们就可以进行大规模的修改和调整了。 Mask to Image和Mask to Path的区别： Mask to Image：以上方对象作为遮色物件，颜色较深的部分会保留下方物件，而颜色较浅的区域则对下方物件产生淡化效果。 （如图7） Mask to Path：以上方的遮色物件来剪裁下方物件，因此，位于上方物件的尺寸应该比下方物件小，这样才能产生剪裁的效果，Mask to Path仅对下方物件做剪裁，不会有其他效果。 （如图8） 图8 Mask to Path效果 第三节：文字 一、 文本特效 对于其它图形软件来说，要创建空心字、各种填充色的描边字或带底纹的各种效果字，那不仅是件非常繁琐的差事，甚至是无法做到的事情，但是在Firework中，我们轻而易举便能实现。 首先输入文字（例如：“洪恩在线”），选中文本对象，这时被选中的文本外围会出现一个蓝色的框（如图 图1 选择文字 调整Stroke １. 笔型：Basic ２. 笔的力度：SoftLine ３. 羽化半径：如图所示 ４. 线条宽度：４ ５. 填充纹理（Texture）：颗粒 ６. 纹理亮度值：0% 至此，我们已经可以看到字体多了层边缘；开启Fill填充面板，在Fill填充面板中我们可以为字体选取不同的颜色填充效果，如渐变、加底纹、辐射效果等等。当然，如果将填充类型设定为None，字体的实心部分就会消失，这样我们就可以得到如图的空心字。（如图2） 图2 字体效果 Firework 3还提供了方便有效的Styles面板，我们只需要选中文本对象，然后单击Styles面板中的任何一种样式，这时我们便能以最快捷的方法制作出各种各样的特效字（如图3）；如果配合其它面板如Fill面板、Effect面板等一起使用，我们还可以做出更多更美的的特效。 图3 样式效果 当然Styles面板中的样式不仅对文字有效，而且对图片同样有效。 单击Styles面板右上角的小三角形，在弹出的菜单中我们会发现其中包含有“New Style”、“Edit Style”等等选项，原来Firework还允许我们新建Style、编辑Style、导入／导出Style等功能。 （如图4） 图4 Styles浮动面板 二、 制作文字路径 Firework作为一种图形处理软件，集合了矢量、位图等绘图工具的优点，它可以象其它矢量绘图软件一样方便地编辑文字。 首先输入文字：天，并选中文本对象；选取菜单“Text／Convert to Paths”，这时文本对象中的每个字符都被转换成路径；利用“细部选取工具”可以对字符进行任意的拖拉变形。 如果我们想对多个或所有的字符进行自由变形、旋转、斜切、水平翻转、垂直翻转等处理，可以按住shift键来同时选取多个字符，然后选取菜单“Modify／Transform”中相应的选项即可。 三、 文字和路径的结合 利用Firework中的“Attach to Path”，我们可以让文本按照设定的路径进行排列；另外，为文本设定不同的对齐方式，我们还可以获得风格各异的文字排列效果，不仅如此，最令人惊叹的是，附在路径上的文本还仍然保留着可以在Text Editor中编辑的特性。 将文本按照路径进行排列的具体步骤如下： 1、输入文字，例如：洪恩在线www.。 2、选取“钢笔工具” 图5 绘制弧形 3、按住Shift键同时选取文本对象和路径对象。 4、选取菜单“Text／Attach to Path”，这时被选中的文本就会沿着路径排列。（如图6） 图6 文本沿路径排列 5、选取菜单“Text／Align（对齐）”中上一栏的“Justified（左右两端对齐）”对齐方式，选取菜单“Text／Orientation（方向）”中的“Rotate Around Path（绕着路径旋转）”，“洪恩在线www.”就摇身一变，成了另外一个样子（如图7）。 图7 绕着路径旋转 6、如果我们要修改文本，只需双击文本对象就可以在打开的Text Editor中对文本进行重新编辑，例如，我们单击“文本排列顺序”的反向按钮，文本就变成了水平反向排序（如图8）。 图8 水平反向排列 ７、如果我们想让文本垂直反向排列，只需选中文本对象，然后选取菜单“Text／Reverse Direction（反方向）”即可。（如图9） 图9 垂直反向排列 ８、如果我们想要改变路径，就需要执行“Text／Detach from Path”将文本和路径分离，然后才能对路径做进一步的编辑。 ９、文本附加路径通常是以路径的起点作为文本环绕路径的起点，我们可以通过改变“Object”面板中“Text Offset（文本偏移量）”来调整文本环绕路径的位置，例如，将“Text Offset”改为20，效果如图10。 图10 起始位置变更的效果 合并已有图片 第一节：制作GIF动画 当我们在网上冲浪时，看到形形色色的动画效果，一定会有一种冲动，那就是将这个漂亮的动画存储到自己的硬盘上，那么你知道这些动画是如何制作的的吗？ 其实动画的原理很简单，就是让图片有秩序地轮流显示。 利用Firework 3制作动画总共有三种方法，由易到难分别为：合并已有图片生成动画，利用Tween Instances生成动画和手工绘制。 一、 合并已有图片生成动画 合并已有图片形成动画，顾名思义就是将一系列图片按顺序排列在不同的帧中从而生成动画，当然，首先我们必须有一串连续的图片，然后，在Fireworks中，选择菜单指令“File/Open Multiple”，这时将弹出“打开”对话框（如图1）， 进入所需图片所在的目录，然后按照动画中图片显示的顺序依次选取图片，并单击“Add”按钮将这三张图片加入到对话框下面的窗口；注意：我们还必须勾选对话框最下面的“Open as Animation”（以动画打开）选项，不然的话，我们打开的将是三张分开的静态图片；最后，单击“Done”（完成）按钮。 图1 以动画打开 单击窗口右下角状态栏的播放按钮，怎么样？效果还不错吧！ 现在只是一只海鸥在不停地飞，如果为它再添加一副背景，效果一定会更好，好吧，下面我们就为海鸥添加一副大海的背景。 添加背景的方法有两种：自动复制和共享图层。 １. 自动复制 图2 添加帧 首先，单击“Frames”面板右上角如图2按钮，选择“Add Frames”，在弹出的对话框中选择“Number”为1和“At the end”，单击“ok”按钮。 图3 编辑模式状态 然后将画布的大小改为200x150（Pixels）；接下来，打开背景图片，发现图片周围有一个如图3的边框，说明图片处于图像编辑模式，选择“Modify/Exit Image Edit (Ctrl+Shift+D)”，使图片进入对象编辑模式，如果想让图片打开时总为对象编辑模式，我们将“File/Preferences”的“Editing”面板中“Open in Image Edit Mode”复选框前面的对钩去掉即可。（如图4） 图4 Prefernces对话框 选中新添加的“Frame 图4 拷贝帧 打开“Frames”面板，我们发现前三帧的图片都被背景图片遮住了，单击第一帧，然后选中画布中的图片，执行菜单指令“Modify/Arrange/Send”；或者单击修改工具栏的置后工具（如图5），将背景图片移到动画图片的后面，其它帧同理。 图5 置后工具 最后双击“Frame 图6 延时设置 至此，背景添加完毕，赶快预览一下动画的效果吧！（如图7） 图7 动画效果图 ２. 共享图层 共享图层就是使用“Layers”图层面板，将指定的背景图片设定为共享图层，如此即可在所有的帧中看到该背景。 我们有时可能会误认为每一帧都拥有一个图层，其实不论设定的帧有多少，这些帧都位于同一图层上，只是出现的时间不同罢了。 下面我们就利用此方法为刚才的动画添加一个背景： 首先，将画布的大小改为200x150（Pixels），然后开启“Layers”图层面板，单击“Layers”图层面板右上角如图按钮，选择“New Layer”，在弹出的“New Layer”对话框中，为新层起一个名字，例如：background，钩选“Share Across Frames”复选框，单击“ok”按钮，“background”图层就成了共享图层，（如图8）左键按住“background”图层，将它拖到“Layer 1”图层下面；然后打开背景图片，单击“矩形选择工具” 图8 共享图层
其他制作方法 二、 利用Tween Instances生成动画 利用Tween Instances生成动画是Firework 3十分强大的功能之一，它的原理是将图片转化为元件（symbol），然后，确定元件的初始和结束分身（instance），再利用Tween Instances将这些分身转换为具有过渡效果的连续帧（frame）。 Tween Instances功能支持元件的位移、旋转、缩放、扭曲、倾斜以及不透明度的过渡。 具体的动画制作过程我们可以参见第一章的第四节，这里就不再重复。 三、 手工绘制 如果我们要手工绘制动画，就需要用到Firework 3的洋葱皮功能（Onion Skinning），它就象我们制作卡通用的半透明纸一样，在编辑当前帧的同时，可以看到此前或此后帧中的内容，这样，我们在手绘动画时就可以方便地绘制图案。 下面我们就来认识一下洋葱皮功能，开启“Frames”面板，单击“洋葱皮功能”按钮（如图９），弹出菜单中选项分别为： · No Onion Skinning： 关闭洋葱皮功能； · Show Next Frame： 在当前帧中显示下一帧的内容； · Before and After： 在当前帧中显示前一帧和下一帧的内容； · Show All Frames： 在当前帧中显示所有帧中的内容； · Custom： 可以设置洋葱皮的显示功能； · Multi-Frame Editing： 可以透过洋葱皮编辑其他帧中的内容。 图9 洋葱皮功能菜单 空说无用，打开我们先前制作的“海鸥”动画，然后选中Show All Frames，我们不仅可以看到当前帧的海鸥，还可以看到其他两帧中海鸥的淡化效果（如图10）；Firework 3的洋葱皮功能十分强大，而且方便高效，我们可以在以后的手工绘制动画中慢慢地体会。 图10 淡化效果 第二节：外挂程序 Xtras 一、 基本特效 打开“Xtras”菜单，我们就可以看到Firework 3的各种特效：（如图1） Adjust Color： 色彩特效； Blur： 模糊特效； Other： 其他特效； Sharpen：清晰特效。 图1 Xtras菜单 使用Xtras的特效指令，其效果和特效面板相同，但对图片赋予的任何特效，基本上不会出现在特效面板上。 二、 Eye Candy 3.1 LE 滤镜 Firework 3本身自带有两个特效滤镜：Cutout滤镜和Motion Trail滤镜。 Cutout滤镜 Cutout滤镜可以将点阵式图片背景透明化，并在图片上加入阴影等特效。（如图2） 图2 Cutout滤镜 具体操作步骤如下： 首先打开一副图片（例如：lanqiu.gif），然后单击“魔术棒”工具，点击图片的背景；选取菜单指令“Xtras\Eye Candy 3.1 LE\Cutout”，进入Cutout视窗，它的各个选项功能如下： A 设定阴影方向； B 设定阴影效果：Distance（像素间距）、Blur（模糊效果）、Opacity（淡化效果）； C 设定阴影颜色和填充颜色； D 设定阴影模式（共十一种）； E 启动和关闭预览效果； F 图片预览比例。 设置完毕后，单击视窗右上方的“对钩”即可。 Motion Trail滤镜 Motion Trail滤镜可以让图片产生移动痕迹，进而产生视觉上的运动效果。（如图3） 图3 Motion Trail滤镜 具体的操作步骤如下： 首先打开图片lanqiu.gif ，然后单击“魔术棒”工具，点击图片的背景，再按下Ctrl+Shift+I，从而将图片反选，并将它复制到剪贴板中；新建一个240x220(Pixels)，画布颜色为透明（Transparent）的文件，然后粘贴篮球图片，并将它移到适当的位置，选取菜单命令“Xtras\Eye Candy 3.1 LE\Motion Trail”，进入Motion Trail视窗，其中各个选项的功能如下： A 轨迹效果设定：Length（轨迹长度）、Opacity（淡化效果）； B Direction：轨迹方向； C Just Smear Edges： 加强轨迹模糊效果； D 轨迹模式（共十一种）； E 启动和关闭预览效果； F 图片预览比例。 设置完毕后，单击视窗右上方的“对钩”即可。 三、 Adobe Photoshop 增强模组 对于Photoshop的老手来说，用惯了强大的滤镜效果之后，如果换成另外一套图形处理软件，可能就无法发挥百分之百的创造力。当然Fireworks 3不会让我们产生这方面的尴尬现象，我们可以将Photoshop内建的滤镜效果加到Xtras菜单中（如图4）。 图4 菜单中的Photoshop滤镜 接下来我们以Adobe Photoshop 5.5 版为例，将Photoshop的滤镜加入到Fireworks 3中，当然，首先我们必须安装有此套软件，如果版本不同时，请参照以下步骤： 第一步：首先选取菜单指令“File\Preferences”，开启Preferences对话框，切换到Folders选项卡，然后钩选Photoshop_Plug-Ins复选框。 第二步：单击“Browse”按钮，指定Photoshop滤镜路径。如果我们在安装Photoshop时，采用预设目录，请将路径设定为\Adobe\Photoshop\Plug-Ins\Effects；然后单击Select“Effects”按钮。 第三步：回到Preferences对话框，在“Browse”按钮下就会出现指定的滤镜路径；单击“确定”按钮。（如图5） 图5 Preferences对话框 重新启动Fireworks 3，打开Xtras菜单，我们就可以看到外挂的滤镜项目。 网页强化 第一节：设置网页超连接 一、 设置热区 Fireworks 3提供了三种热区设置工具：矩形热区工具 下面我们就运用这三种工具分别为图片设置热区： 打开一副图片：llt.gif，单击矩形热区工具 图1 热区 切换至圆形热区工具 图2 变换热区形状 切换至多边形热区工具 图3 多边形热区 如果我们想隐藏热区该怎么办呢？其实Fireworks 3预设了一个图层----Web Layer层专门用来存放热区；当Web Layer层最左方出现眼睛图标（如图4）时，表示该层处于显示状态，如果想隐藏热区，只需单击眼睛使它消失即可。 图4 Layers浮动面板 Web Layer层是一个十分特殊的图层，我们无法更改它的名字，也无法删除该图层，但是可以任意调整该层的位置。 二、 设置URL链接 完成热区设置后，我们就需要指定该热区所链接的URL，这样浏览者单击鼠标后，才能开启指定的网页画面。 下面我们就为人物“李白”添加一个链接：单击该热区，然后开启“Object”面板，在链接栏中输入它的URL：http://www./edu/dgkt/index1.htm；我们还可以在“<alt>”栏中为此链接加上说明文字：每日诗词；为了让浏览者在打开热区链接后，还保持有原来的页面，我们可以将Link target选项选为：_blank ，这样单击热区后，会打开一个新的窗口。另外，单击“Shape”下拉列表按钮和热区颜色下拉列表按钮我们可以选择热区的形状和颜色。（如图5） 图5 热区链接设置 三、 善用URL面板 当网页中有很多链接时，利用“Object”面板一一输入就十分麻烦，这时我们就可以利用URL面板快速地为热区指定链接。 在“Library”选项中所显示的是目前使用的URL资料库（URLs.htm），该资料库所包含的URL都会列在下方的清单中，如果我们是第一次使用URL面板，则清单中并无任何URL资料。（如图6） 图6 URL浮动面板 那么我们如何将URL输入到资料库中呢？ １.从无到有输入URL 单击新建按钮（如图7），弹出“New URL”窗口，输入URL后，单击“ok”按钮即可。 图7 输入URL ２.从已有的URL来建立新的URL 选择想要修改的URL，然后单击“URL”面板右上角的如图按钮，在弹出菜单中选择“Add URL”，将弹出“New URL”窗口，修改完URL后，单击“ok”按钮即可。（如图8） 图8 添加URL ３.输入网页中的URL 我们可以将某个网页中所有链接导入到目前的资料库中。 首先选择“选项”菜单中的“Import URLs”指令，然后在弹出的“打开”窗口中选择我们想要导入的html文件：index.htm，单击“打开”按钮即可。 ４.将热区的URL加入资料库 如果想把用“Object”添加的URL导入到资料库中，我们只需选取“选项”菜单中的“Add Used URLs to Library”指令即可。 现在我们就可以为热区添加链接了，单击热区，然后选取资料库中相应的URL即可，是不是很简单！此外，我们还可以配合“Object”面板来检查URL是否添加正确。 第二节：大图的切割 大家在上网的时候，可能会经常碰到这种情况：浏览某个网页的时候，大部分内容已经下载完毕，唯独一副大图迟迟不肯露面，让人等得很心烦！这也就是我们为什么要切割大图的原因了。 把大图切割成几个小图，会大大加快图片的下载速度；另外，切割图片还可以用于链接设定。 Fireworks 3可以轻松地将大图切割为几个小图： 首先打开我们要切割的图片，然后选择“Slice Tool” 在如图1的切割图片中，红色的线条代表的是切割线，而绿色的区块，我们可以设置URL链接，设置方法如同热区链接的设置。 图1 切割图片示例 如果我们不想在切割图片的时候产生链接区块，那么我们只需在选取“Slice Tool” 接下来，我们来调整一下切割区域的比例分配，选取“一般选物工具”，拖动某个切割区域（必须是拖曳产生的Image可链接区域），即可改变区域的个数和比例；另外，使用“一般选物工具”拖曳切割区域的控制点，也可以调整切割区域的比例。（如图2） 图2 调整切割区域 大家可能会问：热区是存放在Web Layer层的，那么切割区域存放在什么地方呢？ 其实，切割区域也存放在Web Layer层中，同样我们单击眼睛使它消失即可将切割区域隐藏；另外，单击图标 下面我们为图片添加一些文字： 首先我们在图片的右下角拖曳出一个Image可链接区域，适当地调整它的大小和位置，然后开启“Object”面板，在“Type”选项中选择“Text”（文本），输入需要的文字（例如：li bai）即可（如图3）。 图3 输入文字 第三节：文件内容的设定和转存 在前两节所介绍的热区链接和大图切割，其最终的目的还是要将它们转存为指定的格式，从而应用于网页中，而在转存前，我们需要设定一下转存的模式。 选取菜单指令“File\HTML Properties”，打开“HTML Properties”对话框，进行如下设置： （如图1） 图1 HTML Properties对话框 一、 分割选项（Slice Options） 分割选项栏主要用于设置分割图片在转存时的命名方式，以及分割图片间隙的处理方式等 1. Auto-Naming（自动命名）：用于设定分割图片的命名方式，我们一般选择为“Basename_Row#_Col#”，就是HTML文件名称+所在行+所在列，例如：HTML文件名称为：llt.htm，那么第一行、第一列的分割图片名称就是llt_r1_c1.gif；但是我们必须钩选“Object”面板中的“Auto-Name Slices”，这样才能自动命名。 2. Table（分割图片的间隙）：当图片被分割转存后，Fireworks 3会自动产生一个文件名为Shim的填空图片，我们选择间隙模式为“1-Pixel Transparent Shim”，表示1Pixel宽度的透明图片。 3. Export Undefined Slice：选中此项后，才会转存所有分割的区域。 4. Multiple Nav Bar HTML Pages（转存为可变换的图片）：我们暂且不用理会。 二、 图片对应（Image Map） 1. Map Type（对应类型）：图片对应的方式可分为Client-side（客户端）和Server-side（服务端）两种，我们一般选择Client-side（客户端），Client-side设定方便，而且执行时反应较快，而Server-side必须配合服务器的支持。 2. Background URL：用于设定背景图片的链接URL，如：http://www./edu/dgkt/index1.htm。 3. Alternate Image Description：设置图片的说明文字，如：每日诗词。 为了能够让其它网页编辑器使用，我们需要将它转换成HTML格式文件。 首先选取菜单指令“File\Export”，打开“Export”对话框；然后指定图片保存路径和输入HTML文件名称，在Style（HTML文件类型）选项中选择我们常用的Dreamweaver 3，这样转存后的HTML文件就可以在Dreamweaver 3中被顺利地打开了。 （如图2） 图2 输出切割图片 单击“保存”按钮，图片就被转存成了一个HTML文件和八个GIF图片，还有一个shim.gif图片，它就是我们在前面提到的分割间隙图片（如图3）。 图3 输出的图片文件 第四节：与网页编辑器的紧密结合 一、 与Dreamweaver的结合 如何才能将Fireworks 3转存的HTML格式文件插入到Dreamweaver 3中呢？其实十分简单： 首先开启Dreamweaver 3，选择好插入位置，打开“Object”面板，然后单击“Insert Fireworks HTML”按钮 图1 Insert Fireworks HTML对话框 网页中常用的图片格式不外乎GIF、JPG、PNG，由于Dreamweaver无法编辑这类图片，我们可以调用Fireworks 3来修改网页中的图片，当然我们应当首先将Fireworks 3设置为Dreamweaver的外部编辑器，具体步骤如下： 选取菜单指令“Edit\Preferences”，然后在“Category”清单中选择GIF、JPG、PNG，发现它们的主外部编辑器为：iexplore，我们选择Fireworks 3，然后单击“Make Primary”按钮，Fireworks 3就设置成了主外部编辑器。 （如图2） 图2 Preferences对话框 下面就来使用Fireworks 3编辑Dreamweaver中的图片，单击想要编辑的图片，然后单击“Properties（属性）”面板中的“Edit”按钮，弹出“Find Source”对话框，我们单击“No”，图片就在Fireworks 3中打开了。（如图3） 图3 编辑图片 我们选择菜单指令“Xtras\Blur\Gaussian Blur”，弹出“Gaussian Blur”对话框，我们将“Blur Radius（模糊半径）”适当地调整一下，单击“ok”按钮，图片就被模糊化了；（如图４） 图4 图片模糊效果 然后选择菜单指令“File\Update”；切换回Dreamweaver中，我们就发现图片已经被自动更新了。（如图５） 图5 图片的更新 我们在Dreamweaver中还可以不打开Fireworks 3，就执行它的最佳化功能，首先选择菜单指令“Commands\Optimize Image in Fireworks”，单击“Find Source”对话框中“No”按钮，弹出Fireworks 3 的“Optimize”窗口，我们将图片的压缩比调到50，这样图片就小了许多，单击“Update”按钮，Dreamweaver中的图片就变成了另外一副样子。（如图6） 图6 50％压缩比的画质 二、 与FrontPage 2000的结合 我们同样可以将Fireworks 3文件转存为适合FrontPage 2000的HTML文件，只需在转存文件时，将“Style”选项选为FrontPage即可。 将Fireworks 3转存的HTML格式文件插入到FrontPage 2000也十分简单，首先选好插入点，然后选择“插入\文件”，在弹出的“选择文件”窗口选择我们需要的文件，单击“打开”按钮即可。 动态按钮制作 第一节：动态按钮的制作 我们先来欣赏一下动态按钮的效果，移动鼠标到如图的按钮上并单击它，然后再次移动鼠标到按钮上，再次单击，我们就会发现这个按钮有四种状态： Up状态：鼠标尚未经过按钮时的状态； Over状态：鼠标移到按钮上的状态； Down状态：单击按钮后的状态； Over While Down状态：当按钮被单击过之后，鼠标移到按钮上时的状态。 所谓动态按钮其实就是将按钮分成这四种不同的状态，从而产生了动态的视觉效果。 下面我们就一起来尝试着制作一个动态按钮： 首先我们新建一个文件（大小：120x40 Pixels；颜色为：Transparent（透明）），然后选取菜单指令“Insert\New Button”，弹出“Button”对话框，我们可以看到“Button”对话框共有Up、Over、Down、Over While Down与Active Area五个选项卡，其中的Up、Over、Down、Over While Down就是用来设置按钮的四种变换状态的；而Active Area则是用来为按钮设置链接的。 （如图1） 图1 Button对话框 动态按钮其实是由四个Frame（帧）组合而成的，开启“Frame”面板，就会发现新按钮拥有四个Frame，也就是Up、Over、Down、Over While Down四个状态。（如图2） 图2 四个状态 接下来，我们就按照按钮的状态设置顺序来一步一步制作： Up 状态 首先切换至Up选项卡，然后将漆桶的颜色设置为蓝色，同时将“Stroke”面板设置为“None”，将“Fill”面板设置为“Solid”；双击“矩形绘图工具”，在弹出的“Options”面板将“Conner”设置为“50”；然后在画布中绘制一个矩形；接下来 ，我们为图片添加一些特效，首先选中图片，然后开启“Effect”面板，单击效果下拉菜单按钮，在弹出的菜单中，我们选择“Bevel and Emboss\Inner Bevel”；下面我们再来调整一下效果，双击“Effect”面板下方列表框中“Inner Bevel”特效，在弹出的菜单中，选择特效设置。 （如图3） 图3 Up状态设置 Over状态 切换至“Over”选项卡，当然此时它为空，我们单击 图4 Over状态设置 注意：由于合并后的图片无法再回到原来的状态进行编辑，所以我们一定要确定无误时再将它们合并。 Down状态 首先我们将“Up”选项卡的图片复制到“Down”选项卡中，然后将它的特效设置改为如图5；然后将它的填充方式改为“Web Dither（网页混色效果）”----可以选择两种颜色混合成一个新的颜色，我们双击四个颜色表格之一，将其中的一种颜色设置为如图的颜色。 图5 Down状态设置 这样，按钮Down状态就变成了另外一副模样！ 注意：我们千万要钩选“Include Nav Bar Down State”复选框，否则我们单击按钮后，将不会看到Down状态，而是仍然停留在“Up”状态。 （如图6） 图6 Down选项卡 Over While Down状态 Over While Down的表现时机是在按钮被单击过后，在将鼠标放在按钮上的时候；一般来讲，Over和Over While Down状态的动作方式都一样，差别在于Over是当按钮未被单击过所表现的按钮外观，而Over While Down则是不管按钮被单击过几次，只要将鼠标放到按钮上，按钮都会呈现的外观。 我们首先将“Up”选项卡中的图片复制过来，然后将它的特效改为高亮状态（如图7）；接下来，我们再为它输入文字“再点一次”。 图7 Over While Down状态设置 至此，我们已将按钮的四种状态编辑完毕，下面我们来预览一下按钮的效果，切换回编辑视窗，然后单击“Preview”选项卡或按下F12即可预览我们的作品。 Active Area 设置 如图8，Fireworks 3已经自动为我们设置好了感应区域，当然，如果我们不满意，可以用热区设置工具和大图切割工具设置自己喜欢的感应区域；然后我们单击“Link Wizard”按钮 图8 Link Wizard对话框 至此，动态按钮制作完毕，我们就可以将它转存为HTML文件了。 如图9中的四副GIF图分别对应按钮的四种状态。 图9 保存的文件 现在，我们打开button.htm文件，就可以看到我们设置的各种效果了。 第二节：简单翻转图 简单翻转图的工作原理与动态按钮的一样，而且同样具备超链接的功能，不过它们的制作方法却大不相同。简单翻转图只包括Up与Over两种变化，因此只需要两个Frame。 区别动态按钮制作过程的是：我们需要使用Behaviors与Frames两种面板，不过制作出来的效果会与使用“Insert\New Button”指令所制作出的动态按钮相同。 下面我们就来制作一个简单的翻转图； 首先打开图片“llt.gif”，然后Ctrl+Shift+D使它进入对象编辑模式，然后选取菜单指令“Insert\Hotspot”；下面我们为图片添加翻转动作，首先开启“Behaviors”面板，单击“添加动作”按钮，在弹出的菜单中我们选择“Simple Rollover”。（如图1） 图1 Behaviors浮动面板 这时，双击“Behaviors”面板中刚刚产生的“onMouseOver”选项，就弹出了“Simple Rollover”信息框，提示我们要执行“Simple Rollover”功能必须在Frame1建立Up状态图，以及在Frame2建立Over状态图。（如图2） 图2 Simple Rollover信息框 接下来，我们就来编辑一下Frame1和Frame2中的图片，打开Frames面板，复制Frame1产生Frame2，单击隐藏切割区按钮，选中图片，然后选取菜单命令“Xtras\Blur\Gaussian Blur”，弹出“Gaussian Blur”对话框，我们将“Blur Radius（模糊半径）”适当地调整一下，单击“ok”按钮，图片就被模糊化了。（如图3） 图3 模糊的llt.gif图片效果 好了，现在按下F12就可以看到翻转图的效果了。 另外，我们还可以通过“Object”面板或“URL”面板来为它设置URL链接，在这里就不再赘述，请参看第四章的第一节。 第三节：动态翻转图 动态翻转图和简单翻转图的表现方法大不相同，简单翻转图是在图片的原位置上变换图片，而动态翻转图则可以在其它位置显示出不同的图片，如下所示，当鼠标移到“电脑教育”上，就会显示出我们预设的图片，另外，如果单击“电脑教育”还可以链接到指定的URL。说到这里，大家一定已经猜到这是切割图片（Slice）的衍生功能了。 首先新建一个180x80的文件，然后建立如图1的三个文本并将它们全部选中，选取菜单指令“Insert\Slice”，弹出“Fireworks”信息框(如图2)，由于我们需要建立三个分割区块，因此，我们单击“Multiple”按钮，这样我们就建立了三个分割区块（如图1）。 图1 分割区块 图2 Fireworks信息框 对应三个切割区域，我们需要编辑三个调换图片，首先我们先来编辑“电脑教育”所需要的调换图片。 开启“Frames”面板，新建并选中Frame2，然后使用“文字工具”和“矩形工具”绘制出如图的图片群，选取菜单指令“Modify\Group”将它们群组起来，并适当地调整一下位置，最后执行菜单指令“Insert\Slice”即可。 （如图3） 图3 所要调换的图片 如何才能让切割区域和调换图片产生关联呢？这就需要借助“Behaviors”面板的力量了。 首先切换至Frame1，选取“电脑教育”，然后单击“Behaviors”面板的添加动作按钮，在弹出的菜单中选择“Swap Image”，弹出“Swap Image”对话框，其中我们需要进行以下操作： （如图4） 图4 Swap Image对话框 1. 首先我们需要确定调换图片的来源，在“Show the swapped image from”栏中，我们钩选“Frame No.”，并指定Frame2帧； 2. 选取需要的调换图片； 3. 钩选“Restore image onMouseOut”选项，这样当鼠标离开“电脑教育”后就会自动关闭调换图片； ４. 单击“ok”按钮，在“Behaviors”面板中显示出了Fireworks 3预设的调换图片的打开方式------“onMouseOver”。 （如图5） 图5 Benhaviors浮动面板 至此，“电脑教育”的动态翻转图已经设置完毕，我们按下F12来欣赏一下（插入dongfan1.html）。 另外，Fireworks 3还为我们提供了其它三种动作变换的方式：onMouseOut、onClick和onLoad，下面我们就来认识一下它们： onMouseOut onMouseOut是指当鼠标先移入感应区内，再移出感应区时才会显示调换图片，不过使用此功能时，我们必须在“Swap Image”对话框中取消钩选“Restore image onMouseOut”选项，否则调换图片将无法显示出来。 (如图6) 图6 Swap Image对话框中的选项 话又说回来，一旦我们取消钩选“Restore image onMouseOut”选项，我们就会发现不管鼠标移到何处，调换图片将一直显示着，别担心，Fireworks 3还为我们提供了“Swap Image Restore”，它也将提供四种方式来关闭调换图片。 （如图7） 图7 behaviors浮动面板中的菜单 onClick onClick是指当我们感应区内单击鼠标时，调换图片才会显示出来；如果在“Swap Image”对话框中钩选“Restore image onMouseOut”选项，则当鼠标离开感应区后，会自动关闭调换图片。 （如图8） 图8 onClick事件 onLoad onLoad是指当图片下载后就会立即显示调换图片，如果我们想要关闭调换图片，只要将鼠标移入再移出感应区即可（条件：必须在“Swap Image”对话框中钩选“Restore image onMouseOut”选项）。 前面我们提到了“Swap Image Restore”，它可以将显示中的调换图片运用onMouseOver 、onMouseOut、onClick和onLoad的方式予以关闭；不过当我们在使用这个功能时，一定要在“Swap Image”对话框中取消钩选“Restore image onMouseOut”选项，否则，一旦鼠标离开感应区后，调换图片也会自动关闭的。 下面我们就为“电脑教育”添加一个关闭动作： 选中“电脑教育”，双击onMouseOver，弹出“Swap Image”对话框，然后我们取消钩选“Restore image onMouseOut”选项，单击“ok”按钮；单击“Behaviors”面板的添加动作按钮，在弹出的菜单中选择“Swap Image Restore”，这时在“Behaviors”面板中出现了Fireworks 3 预设的关闭方式“onMouseOut”，我们单击它右边的下拉按钮，并选择“onClick”，ok，按下F12 ，在浏览器窗口中我们将鼠标移到“电脑教育”上，这时有关教育的产品就呈现在我们的眼前；将鼠标移出“电脑教育”，产品介绍并不消失，但当我们单击“电脑教育”时，产品介绍就会消失。 在“Behaviors”面板中还提供了一个显示Message（信息）的功能，这个Message会显示在浏览器下方的状态栏中，如图9所示。 图8 设置状态栏中的文字 单击“Behaviors”面板中添加动作按钮，然后从菜单中选择“Set Text of Status Bar”指令，（如图8）弹出“Set Text of Status Bar”对话框，接着在Message框内输入要在状态栏中显示的文字，例如：Gold Human，单击“ok”按钮即可。（如图9） 图8 Set Text of Status Bar对话框 新建立的状态栏信息其作用方式为onMouseOver，也就是当鼠标移到感应区后，就会将指定的文字显示在浏览器的状态栏上。 如果我们想重新编辑信息文字，只要双击“Set Text of Status Bar”，这样就会显示“Set Text of Status Bar”对话框让我们编辑信息文字；另外，状态栏信息文字的出现方式也可以加以改变，其设定方式和Swap Image一样。首先选取“Set Text of Status Bar”，然后单击下拉按钮，从下拉菜单中选取onMouseOver 、onMouseOut、onClick和onLoad指令即可。 自动化处理 第一节：查找和替换 相信大家都十分熟悉WORD等文字处理软件的查找、替换功能，可是你见过图形处理软件具有此项功能吗？Fireworks 3就是这么一款独到的图形处理软件，它提供了强大的查找、替换功能，我们可以方便地查找、替换已有文件的文字、字体、颜色等等。 下面我们就试着将上次制作的动态翻转图中的“教育”替换为“软件”： 首先打开动态翻转图.png，然后选取菜单指令“Window\Find and Replace”开启“Find and Replace”浮动面板，接下来，我们就对查找、替换进行具体的设置（如图1）： 图1 Find and Replace浮动面板 1. 设定搜寻范围：单击搜寻范围下拉按钮，选取“Search Document”（当前开启的所有文件）； 2. 设置搜寻类型：单击搜寻类型下拉按钮，选取“Find Text”； 3. 在“Find”框中输入“教育”； 4. 在“Change to”框中输入“软件”； 单击“Find”按钮，“教育”就变成了另外一种颜色，单击“Replace”按钮，“教育”就被替换成了“软件”，这样我们可以以手动加上自动的方式，来一一过滤要替换的文字；如果我们确定不需要过滤而直接替换文字，单击“Replace All”按钮即可。（如图2） 图2 替换完成 当替换完成后就会弹出信息框，我们可以从中了解到有多少文字被替换过了。（如图3） 图3 替换完成时的信息框 当然Fireworks 3查找替换功夫不止这么肤浅，现在，我们就来看一下它的兵器谱： 一、 搜寻范围 （如图4） 图4 搜寻范围 1. Search Selection：由我们自己选择搜寻范围； 2. Search Frame：表示将目前所编辑文件中的所有Frame作为搜寻范围； 3. Search Document：表示将目前开启的所有文件作为搜寻范围，当然所有文件中的Frame都会成为搜寻的目标； 4. Search Project Log：将记录在“Project Log”面板中的所有文件作为搜寻范围。 5. Search Files：将我们指定的文件群作为查找的范围，选取这个选项后会弹出“打开”对话框，然后选取我们要查找的文件并单击“Add”按钮来加入列表中，文件选取完后，最后单击“Done”按钮即可。 二、 搜寻类型 （如图5） 图5 搜寻类型 1. Find Text：表示搜寻的类型为指定的文字； 2. Find Font：搜寻条件可以设置为字体、字体样式与字号大小。 3. Find Color：表示搜寻的类型为指定的颜色。另外，我们还可以在“Apply to”栏中设置它的应用范围。 4. Find URL：选择它，我们可以搜寻链接的URL。 5. Find Non-Web216：搜寻文件中非Web216的颜色，并将这些颜色转换成相容于浏览器的Web216色彩。注：所谓Web216就是Web的安全色彩，其数量为216色。 三、 替换条件 （如图6） 图6 替换条件 1. Whole Word：整词都符合替换内容时才替换，比如：“abc”是一同键入的且相连，与其它词有空格分开，就被判断为一个单词，若选中该项，则只替换其中任何两个或一个字母都是不行的，必须三个字母同时替换，但若不选中此项，则可以只替换其中一个或两个字母。 2. Match Case：大小写匹配即区分大小写； 3. Regular Expressions：查找、替换的是表达式。 前面我们提到了“Project Log”浮动面板，那你知道它究竟是干什么的吗？ “Project Log”（项目清单）面板可以自动存储查找、替换过的文件，如图7所示；使用项目清单面板，可以方便地按照上次的导出设置将选中的文件导出，或者对被选文件进行批处理等。单击右上角如图的按钮，将弹出一个菜单，其中的具体内容为： 图7 Project Log浮动面板 1. Export Again：按照上次的导出设置，重新导出文件。 2. Add Files to Log：将要查找、替换或者要批处理的文件加入到该面板的文件列表中。 3. Clear Selection：从项目清单面板中删除当前选中的文件。 4. Clear All：清除项目清单面板中的所有文件。 第二节：批处理 如果说“查找、替换”功能可以迅速地完成文件编辑的工作，那么“批处理”将会使编辑工作更加出神入化。 第一步：选取菜单指令“File\Batch Process”开启“Batch Process”对话框； 第二步：选择要处理的文件，我们可以在“Files to Process”选项清单中选择文件来源：（如图1） 图1 选择文件来源 “Current Open Files”：将目前开启的所有文件作为要处理的文件； “Project Log（All Files）”：将“Project Log”面板中所列出的文件作为文件来源； “Project Log（Selected Files）”：将“Project Log”面板中所选取的文件作为文件来源； “Custom”：使用Custom选项时，会弹出“打开”对话框，我们将要处理的文件加入文件清单即可。注：我们可以单击“Batch Process”对话框中浏览按钮来直接打开“打开”对话框。 第三步：指定批处理要执行的操作，在“Action（操作）”有两个选项： “Find and Replace”（成批替换）：钩选“Find and Replace”选项后，会弹出“Batch Replace”对话框，它和“Find and Replace”面板设定方式一样，不过它仅供我们设定搜寻条件和替换内容，当设定完后，单击“ok”按钮即回到“Batch Replace”对话框。（如图2） 图2 成批替换操作 要注意的是：在“Batch Replace”对话框中所有选项的应用范围，只局限于Fireworks和Freehand文件，如果只是纯图片文件（如：GIF或JGG文件）则无法应用。除此以外，钩选“Update Project Log”可以将“Project Log”面板内的文件一并更新，因此建议钩选此项。 （如图3） 图3 Batch Replace对话框 “Export”（批处理转存）： （如图4） 图4 批处理转存操作 钩选“Export”选项后，弹出“Batch Export”对话框，其中有三项设置：（如图5） 图5 Batch Export对话框 “Export Settings”：用于设置转存的图片类型； “File Name”：设定转存后的文件名称，它的三项设置如下： （如图6） 图6 File Name选项 1. Original Name：使用原来的文件名； 2. Add Prefix：在原文件名前添加文字； 3. Add Suffix：在原文件名尾端添加文字。 如果我们选用“Add Prefix”和“Add Suffix”，则必须在选项后方的方块中输入文字。 下面这一项用于设定转存时的文件缩放大小，其预设值为“No Scaling”，表示不缩放文件。 在执行批处理时，Fireworks 3可以同时备份原来的文件，钩选“Batch Process”对话框中的“Backup Files”选项，会弹出“Save Backups”对话框（如图7），其中我们可以设定文件备份的形式，若钩选“Overwrite Existing Backups”选项，则会覆盖原来的备份；若钩选“Incremental Backups”选项，则会将上一次的备份重新命名。 图7 Save Backups对话框 一切设置完毕后，我们单击“ok”按钮，Fireworks 3开始批处理文件，批处理结束后，会弹出一个“Batch Process”信息框告诉我们有多少个文件被处理过，单击“ok”按钮即可。 （如图8） 图8 Batch Process消息框 第三节：脚本的储存和使用 我们可以将批处理的所有设定存储为脚本文件（.jsf），这样以后我们还可以将这个脚本内的所有设定加以执行，使得编辑工作更加轻松。 当我们“Batch Process”对话框中设定完所有选项后，单击“Script”按钮，将弹出“另存为”对话框，输入脚本文件名称，然后单击“保存”按钮即可。 下面先来看一下脚本文件是怎样的一个文件，用记事本打开Script.jsf脚本文件（如图1），我们就发现脚本文件就和程序一样，里面包含了一堆指令和参数，我们不需要去了解脚本文件内的指令和语法，因为Fireworks 3会自动生成我们在“Batch Process”对话框中所有设置的Script。 图1 脚本文件内容 那么如何执行脚本文件呢？ 首先我们选取菜单指令“File\Run Script”，然后在弹出的“打开”对话框中选中需要的脚本文件，单击“打开”按钮，这时会弹出“Files to Process”对话框，从中我们指定文件的来源，单击“ok”按钮即可开始执行脚本文件。 （如图2） 图2 Files to Process对话框 好了，到终点了，谢谢大家和一起度过美好的Fireworks 3之旅！ |
|
|
