FW MX 2004教程

　　为了使更多的初学者能够尽快掌握Fireworks，编者选用了Fireworks MX 2004 中文版为蓝本进行系列教程讲解，希望能为大家学习Fireworks带来帮助。

　　第一部分中我们先来了解一下Fireworks MX 2004中文版的操作界面。

　　 一、创建新文档

　　在启动Fireworks MX 2004中文版时，会出现一个启始页面窗口，在这里你可以快速访问最近编辑过的文档或创建一个新文档，也可以访问帮助一类的文件或网页。

　　当我们选择“创建一个新文档”后，就会弹出“新建文档”的对话框，如图1—01。

图1—01

　　画布大小：设置文件画布的宽、高度，可以用象素、英寸或厘米为单位。

　　分辨率：文件的分辨率越高，图像越精细，但同时文件也会越大。

　　画布颜色：文档画布颜色有三个选项，依次为白色、透明色和自定义颜色。在自定义颜色下方的色彩选择框中，可以自行选择一种颜色。

　　单击“确定”后，新的文件就创建完成了。

二、Fireworks的工作界面

　　新建文档完成后就可以看到Fireworks的工作界面了，如图。 Fireworks的工作界面由“菜单栏”、“工具栏”、“工作区”、“工具条”、“组合面板”和“属性框”六个部分组成。

图1—02

　　工作区：在工作区上不仅可以绘制矢量图，也可以直接处理点阵图（位图）。工作区上有四个选项卡，当前是“原始”选项窗，也就是工作区，只有在此窗口中才能编辑图象文件。而在“预览”选项窗中则可以模拟浏览器预览制作好的图象。“2幅”和“4幅”选项卡则分别是在两个和四个窗口中显示图像的制作内容。

　　工具条：新版的Fireworks工具条除了新增了一些工具以外，还与原有的工具重新进行优化组合，使其更加的直观和人性化。

　　属性面板：当选择对像或选取工具的时候，其相关信息都会在属性面板中显示出来。同时也可以通过修改属性面板中的数据或内容来调整图像的相关属性。例如图像的大小、位置及色彩等等，如图1—03。

图1—03

　　点击窗口标题的“属性”可展开或折叠属性窗口。在标题栏右边的下拉列表中可以设置窗口只显示一半的高度和关闭该窗口。

　　组合面板：Fireworks的组合面板共有14个，分别为“信息、层、混色器、颜色样本、样式、URL、库、形状、帧、历史记录、行为、查找、优化和对齐面板”。每个面板即可相互独立进行排列又可与其它面板组合成一个新面板。但各面板的功能依然相互独立。点击面板上的名称可展开或折叠该面板。例如图1—04中，则是把“样式”面板与“对齐”面板进行组合，形成一个新的组合面板，如图1—05所示。

图1—04

图1—05

　　动画播放按钮：对于制作的动画文件可以用这些按钮进行播放、停止、到最后一帧、显示当前帧数等操作。

　　取消BMP模式：在引入了BMP格式的图形文件时，单击这个红色小叉就可以取消BMP模式，进入矢量编辑。

　　工作区的显示比例：在这里可以更改工作区的显示比例，以方便相关操作，但却不会更改图像的实际大小。

图1—06

 三、图像文件的导入

　　通过菜单栏上的“文件—打开”或工具栏上的“打开”按钮即可启动打开文件对话框，如图1—07。

图1—07

　　选中要导入的图形文件后在右边的预览框内会显示该文件的预览图。选中“打开为未命名”项是把选中的文件作为无名的文件打开。选中“以动画打开”项是把选中的文件作为动画打开。Fireworks还支持一次性同时打开多个相邻或不相邻的文件，也可以直接打开或导入Photoshop制作的PSD格式文件进行编辑处理。

四、修改画布

　　Fireworks中的画布也就相当于图像的背景，在绘图的过程中为了使画布的大小或色彩能够和前景的图象保持协调，我们经常要修改画布的相关属性。方法是，用鼠标点击画布，或在画布的工作区外点击一下，从而在属性栏中调出画布的属性对话框，如图1—08。

图1—08

　　修改画布颜色：在该属性对话框中，点击画布颜色选择框，可以重新点选新的画布颜色。

图1—09

　　画布大小：点击“画布大小”按钮将弹出设置对话框，从中可以看到，当前画布的宽为650像素，高是263像素。在“新尺寸”项内可以输入新的宽、高像素。在“锚定”右边是画布的固定点，当画布的大小被改变时会以选中的固定点不变来更改画布的大小。

图1—10

　　图像大小：对于图像区域大小的改变，也可以通过画布的属性对话框中的“图像大小”进行修改，如图1—11。

图1—11

　　在像素尺寸项下可以设置工作区的宽、高度数值。选中“约束比例”项后，当宽度或高度中某一数值被改哟后，另一个数值也会等比例地随着改变。如果取消此项选择，就可以单独改变宽度或高度的数值了。“图像重新取样”项是设置图像的重新取样功能。

　　符合画布：这是Fireworks MX 2004的新功能，可以使画布大小与图像所占用的位置大小相一至。

五、网格与辅助线

　　网格与辅助线经常用于在绘画过程中，对图像的摆放位置、角度、大小等进行辅助参考，从而为图像制作带来方便。点击“视图”菜单，从中即可启动“网格”与“辅助线”功能，如图1—12。

图1—12

　　网格：在网格的下级菜单中，当选择“对齐网格”时，可使绘图对象边缘与网格进行对齐。而“编辑网格”则可重新设置网格线的颜色及排列密度等等。如图1—13。

图1—13

　　辅助线：在启动标尺后，从上边或左边的标尺刻度中按下鼠标不放，并向画布方向进行拖拽，即可拉出一条辅助线出来，如图1—14。

图1—14。

　　当把辅助线再拖回标尺位置上时，即可取消该辅助线。而在辅助线的菜单选中，可以设置辅助线的相关属性。

图1—15

　　锁定辅助线——当辅助线从标尺中被拖拽到工作区后，就无法再进行移动；

　　对齐辅助线——使绘图对象与辅助线对齐；

　　编辑辅助线——可启动辅助线的编辑窗口，从而进一步为辅助线作相关设置。

和许多主流的图像处理软件一样，Fireworks的绘图工具主要都集中在“工具条”上。利用这些工具可以绘制出各种图形，并可为其设置相应的属性，如颜色、大小、位置等等。

　　Fireworks MX 2004的“工具条”中增加了不少新工具，并与原有的工具在一起被编排为六个类别：选择区、位图、矢量、Web、颜色和视图区。有些工具按钮的右下角有一个小三角，说明这个工具包含有其它几种不同的工具，按住这个工具按钮不放就能显示其它的工具。

　　我们先来介绍位图区的绘图工具。

　　文章导读：

　　1、选区工具
　　2、自由笔刷工具
　　3、图像修改工具
　　4、色彩填充工具
　　5、橡皮图章工具系列
　　6、路径工具
　　7、路径修改工具
　　8、形状工具

　　1、选区工具

　　图2—01为工具条中位图区的主要工具，其中的“矩形”、“椭圆形”、“套索”、“多边形套索”和“魔术棒”工具都用于约束位图的编辑范围，所有的位图编辑例如剪切、复制、填充等只能在该范围内有效。

图2—01

　　选区工具：用选区工具选取的区域以转动的黑白线（蚂蚁线）表示。当按住Shift键的同时，再画出一个选取框，即可组合成一个新的选取区域。如图2—02。

图2—02

　　而在按住Alt键的时候，再次画出来的矩形选区则会把原来选区的相交部分裁切掉。

图2—03

　　取消选区时可先点击选取工具，然后单击选区以外的任何地方。

　　在选取框的属性面板上显示了目前该选取框的大小及坐标位置，等相关信息。

图2—04

　　在样式选项中可使该选取框在“正常”、“固定大小”和“固定比例”这三个样式中切换。

　　正常——默认的选择方式，也最为常用。可以用鼠标拉出任意矩形或椭圆形选取区域。

　　固定比例——可以任意设定矩形或椭圆选区的宽高比。只需在该选项的下方输入相应的宽高比数值。

　　固定大小——在这种方式下可以通过输入宽和高的数值来精确确定矩形或椭圆选区的大小。

　　边缘选项可以对选区边缘的硬化程序进行设置。

　　实边——选区边缘呈锯齿状，没有任何的柔化过渡。

　　消除锯齿——可使选区边缘有最基本的柔化。

　　羽化——可以消除选取区域的正常硬变边缘，使其柔化。也就是使边界产生一个过渡段，该选项的取值为0—100之间，数值越大，柔化程度也越大。

　　“套索” 工具：可以随意圈画出所要的选取范围，主要用于选取一些不规则的图形选区。如果选取的曲线终点和起点未重合，Fireworks会自动用封闭成完整的线圈。

　　“多边形套索” 工具：可以在图像中选取出不规则的多边图形，在选取时同时按下Shift键可使选取线段成直线、水平、45度角方向。

图2—05

　　与选取框的属性面板相比，套索工具的属性框少了样式选项，其它选项的使用功能则完全样同。

　　“魔术棒” 工具：这是一个神奇的选取工具。可以用来选取图像中颜色相似的区域，当用魔术棒单击图像上某个点时，与该点颜色相相近的区域将被选中，可以在一些情况下节省大量的精力来达到意想不到的效果。

图2—06

　　通过魔术棒工具的属性对话框可以设置色彩的容差值和边缘的柔化度。容差值越大，所选取的范围也越大。

2、自由笔刷工具

　　“刷子” 工具和“铅笔” 工具都可以直接在画布上画出任意线条，如图2—07。

图2—07

　　在“刷子”工具的属性对话框中可以对刷子的色彩、大小、笔触类形、边缘柔化值、纹理、纹理透明度、刷子透明度、色彩模式等进行设置，如图2—08。

图2—08

　　在该属性框的笔触类形下拉列表里有各式各样的笔触类形可以选择，点击“笔触选项”可以编辑新的笔触。

图2—09

　　在纹理类型的下拉列表中有数十种填充纹理图案可供选择，同时你还可以从该列表中选择“其它”，从外部导入位图图像作为新的纹理填充。

　　在铅笔的属性框中同样可以对线段的色彩、是否选用柔化、透明度数值、自动擦除等进行设置。

3、图像修改工具

　　“橡皮擦” 工具：用于擦除位图的颜色。和使用画笔一样，在选中橡皮工具后，按住鼠标左键在图像上拖动即可，如图2—10。

图2—10

　　“模糊” 工具：该工具的工作原理就是降低像素之间的反差，使图像产生模糊效果，如图2—11。

图2—11

　　“锐化” 工具：与“模糊”工具正好相反，“锐化”工具是用于加深像素之间的反差，使图像更加锐化，效果如图2—12。

图2—12

　　“模糊”与“锐化”工具的属性面板完全相同，其中的强度表示模糊或锐化时的笔触强度。

图2—13

　　“减淡” 和“烙印” 工具：这两个工具都是用来改变图像的亮调与暗调。原理来源于胶片曝光显影后，经过部分暗化和亮化，来改善曝光效果。效果图分别如下。

图2—14 图2—15

　　“减淡”和“烙印”的属性框功能相同，如图2—16。

图2—16

　　其中的“范围”选项是对将要处理的特殊色调区域进行色调上的选择。

　　暗调——选中后“减淡”和“烙印”工具只作用于暗调区域；

　　中间调——选中后“减淡”和“烙印” 工具只作用于中间调区域；

　　亮调——选中后“减淡”和“烙印” 工具只作用于亮调区域。

　　“涂抹” 工具：该工具在使用时好像时用日常生活中的干笔刷在未干的油墨上擦过一样。也就是说笔触周围的像素会随着“涂抹”工具的笔触一起移动，如图2—17。

图2—17

4、色彩填充工具

　　“滴管” 工具：用于从图像中选取颜色来指定一种新的笔触颜色或填充色。可以选取单个像素的颜色、3x3像素区域内的平均颜色值或5x5像素区域内的平均颜色值。

　　“油漆桶” 工具：在绘制时应用于位图和矢量对象的“矩形”、“圆角矩形”、“椭圆”和“多边形”等绘制工具的填充属性。当前的填充会出现在属性对话框、“工具条”面板和组合面板中的“混色器”面板中。可以使用这些面板中的任何一个来更改“油漆桶”工具的填充色。如图2—18所示。

图2—18

　　在“油漆桶”的属性对话框中可以看到，该工具的填充类别有实心填充、网页抖动、渐变填充和图案填充四种。 其中各种填充方式又有诸多色彩及样式可供选择。

图2—19

　　下面两张图是用渐变填充模式中的“线性填充”和图案填充模式中的“木纹3”进行填充。其中我在“线性填充”时是从图像的左上角按住鼠标不放，然后向图像的右下角进行拖拽，而在用“木纹3”填充时是从图像的中心点上按住鼠标不放，然后向图像的右上角进行拖拽。

　　
图2—20　　　　图2—21

　　而这种用鼠标拖拽的填充方式也正是“渐变工具”的填充特点。而且“渐变”工具的属性对话框与“油漆桶”的属性框中的功能也非常一样的，所不同的是“渐变工具”的填充模式只有渐变填充。

5、橡皮图章工具系列

　　“橡皮图章” 工具：用来克隆图像的部分区域，以便将其压印到图像中的其它区域。在使用时先要把鼠标移到想要复制的图像上，然后点击鼠标左键以确定复制的起点，然后拖动鼠标在图像的任意位置开始复制。如图2—22和2—23是复制前后的图像。完全没有走样，而且你想复制多少都可以，对于我们这种懒人来说，简直方便极了。

　　
图2—22 　　　　　　　　图2—23

　　“替换颜色” 工具：选取一种颜色，可以在这种颜色的范围内，用类似笔刷的东西涂抹成另一种颜色。使用该工具时要先在属性面板中单击“更改”右边的色彩预览框以选取颜色，或在图像中单击以选取你要替换的颜色。然后在“终止”的色彩预览框内选择一种颜色，或在图像中选取将用来替换的颜色。

图2—24

　　如图2—25和2—26是替换颜色前后的图像。

　　
图2—25　　　　　　　　 图2—26

　　在“替换颜色”的属性框中还可以对“替换颜色”笔触的大小、形状、容差和强度进行设置。而“彩色化”是指用“终止”颜色去替换“更改”颜色。取消选择“彩色化”以便用“终止”颜色对“更改”颜色进行涂染，并保持一部分“更改”颜色不变。

　　“红眼消除” 工具：在一些照片中，主体的瞳孔是不自然的红色阴影。因此使用“红眼消除”工具就能轻松的解决这个问题。“红眼消除”工具仅对照片的红色区域进行绘画处理，并用灰色和黑色替换红色。如图2—27和2—28是红眼消除前后的图像。

　
图2—27 　　图2—28

　　位图区的工具介绍完了下面接着来介绍矢量区的主要工具，如图2—29。

图2—29

6、路径工具

　　“直线” 工具：使用“直线”工具可以在画布上直接画出直线，当按住Shift键时可以画出水平、垂直、45度角的直线。

图2—30

　　“指针” 工具：使用该工具可以方便地移动直线。用“部分选定” 工具点击直线时，直线的两端会出现控制点，按住鼠标左键拖动直线的一个控制点可以方便地任意改变直线的角度，并可以随意拉长或缩短直线，如图2—31。

图2—31

　　“钢笔” 工具：选中“钢笔”工具后单击画布上的不同位置，可以画出由线段组成的直线路径。如果鼠标单击后不松开，而是拖动鼠标，这样画出来的路径就是曲线路径，通过调整曲线的两条控制线可以设定曲线的弯曲度。

图2—32

　　在调整曲线的控制线时，按住Alt键可以单独控制一条控制线，从而确立下一个曲线线段的走向和弯曲度。

图2—33

　　要结束线段的绘制时只需在线段的结束点上进行双击即可。而在画封闭的路径时，则要用鼠标单击起始点或按住起始点拖动就可以了。当钢笔工具的指针位于非路径区域时，指针旁边会有一个小的叉号，如果指针处在路径上时，指针旁会有个十字的标志，此时单击鼠标会增加一个节点。

图2—34

　　而当指针处在节点上时，指针旁则会有个一字的标志，单击鼠标可删除该节点。

　　“矢量路径” 工具：“矢量路径”工具的使用和“刷子”工具一样，都可以任意画出自由路径。笔触色彩、大小及边缘的柔化值等的设置也都完全相同。

7、路径修改工具

　　“重绘笔刷” 工具：用“细部”工具可以对简单的封闭路径进行编辑。但对于图2—37中这种较复杂、节点较多的封闭路径，就要使用“重绘笔刷” 来处理。

图2—35

　　使用“重绘笔刷”沿着弯度重新画一条弧线，重绘的路径部分会以红色高亮显示，这样，原来路径就被新的路径取代了。如图2—36。

图2—36

　　“自由变形” 工具：可以直接对矢量路径进行弯曲和变形操作，而不是对各个节点执行操作。Fireworks在更改矢量路径的形状时会自动添加、移动或删除路径上的节点。

图2—37

　　“更改区域形状” 工具：使用时，该工具的指针是两个同心圆，只有处于这两个同心圆范围内的路径才会被修改。

图2—38

　　“路径切割” 工具：该工具用于切割类如钢笔路径这样的矢量路径。使用时从要切割处按住鼠标左键移动划过。在切割处会增加一个控制点。使用“细部”工具移动一端就可以把线段分开了，如图2—39。

图2—39

　　 “路径洗刷” 工具：“路径洗刷”工具只能用在具有压力感应刷子描边的路径上。使用时通过在要修改的路径上不断变化的压力或速度来更改路径的笔触属性。这些属性包括路径原有的笔触大小、角度、墨量、离散、色相、亮度和饱和度。使用“笔触选项”对话框的“敏感度”选项卡可以指定这些属性中的哪个属性受到“路径洗刷”工具的影响。还可以指定影响这些属性的压力和速度的数量。

　8、形状工具

　　形状工具又被分为“基本形状”和“自动形状”，如图2—40。

图2—40

　　基本形状：有矩形、椭圆形和多边形这些简单的几何图形。使用时只需在画布上用鼠标进行拖拽即可画出相应的图形。如图图2—41。

图2—41

　　当按住Shift键不放的时候可以画出正方形和圆形，在各形状工具的属性框中都可以方便的为这些图形选择不同的填充模式加以填充。通过颜色的调节手柄可以自由的控制色的填充方向及范围。

　　在矩形工具属性框的“矩形圆度”中输入不同的数值，可以画出程度不一的圆角矩形。

　　在使用“多边形”工具时，可以在该属性框内先设置好多边形的形状、边数及角度，然后再进行图形绘制。

　　自动形状：这是一组智能的矢量绘图工具，这些对象组遵循特殊的规则以简化常用可视化元素的创建和编辑。和基本形状工具组不同，选定的“自动形状”除了有色彩填充手柄外，还具有菱形的控制点。每个控制点都与形状的某个特定变形属性相关联。通过拖动控制点可以改变与其关联的变形属性。大多数“自动形状”控制点都带有工具提示，描述它们会如何影响"自动形状"。将指针移到一个控制点上可看到描述该控制点控制的属性的工具提示，如图2—44。

图2—42

　　此外，在组合面板中的“形状”面板下还有一组图形较为复杂的智能形状工具。如图2—43。

图2—43

　　将这些对象用鼠标直接拖拽至画布内后，同样是通过调节对象上的每个菱形控制点即可改变对象相关属性。如图2—44。

图2—44

和许多矢量编辑软件一样，在Fireworks中绘制的矢量对象比位图对象的可修改性强很多。因此在进行无素材制图时，更多时候是制作成矢量图形，以方便随时保存，随时编辑。而对象的编辑则包括对对象的选取、移动、填充、旋转和变形等等。

　　1、改变路径

　　简化路径：为了使一条不规则的矢量路径变得更加的精简、圆滑，我们可以用简化路径的方法来减少它的路径节点。如图所示为一条不规则的路径。

图3—01

　　选中该路径后点击菜单栏上的“修改—改变路径—简化”命令，如图3—02。

图3—02

　　在“数量”栏中输入相应数值来设置要简化的程度。下图为输入25后的路径简化效果。

图3—03

　　扩张路径：点击菜单栏上的“修改—改变路径—扩展笔触”命令可以对任意路径进行加宽。如图3—04。

图3—04

　　宽度——设置路径的宽度；

　　角——当路径是曲线时，可以在此选择转角的样式；

　　尖角限量——用于限制曲线路径的锐角数量；

　　结束端点——可以选择路径结束点的样式。

　　设置完成后，路径被加宽的效果如图3—05。

图3—05

　　伸缩路径：使用此命令可以改变封闭型路径的范围。设置窗口如下图

图3—06

　　在“方向”栏上可以设定路径向“内部”或向“外部”的伸缩方向。效果图如图3—07。

图3—07

　　对于非封闭路径，使用伸缩路径命令可以自动把路径改为封闭路径。

2、对象的操作

　　对象的选择：用“指针” 工具可以对绘图对象进行直接的点选。当要选择多个对象时，可同时按下Ctrl+A键或直接进行框选，均可选中所有对象。对象被同时选中后拖动任意一个对象，其它的对象也会随着一起移动。

　　当一个对象完全处于另一个对象下面时，就很难用“指针”工具进行直接的点选。这时就可以使用工具条上的“选择后方对象” 工具来选择后面的对象，如图3—08。

图3—08

　　对象的填充：用钢笔工具画一个随意的封闭路径，然后在该路径的属性对话框中设置路径的描边填充色，如图3—09、3—10。

图3—09

图3—10

　　颜色样版——在描边颜色预览窗中可以选择一种色彩作为路径的描边色。预选的色彩及该色彩的网页色数值都会在样版的左上角中显示出来。同时也可以直接输入想要的网页色数值，然后按“回车”即可；

　　自定义颜色——点击自定义颜色按钮，从“颜色”窗口中选取或设定一种自定义色彩；

　　路径内——是指将描边色填充在钢笔路径之内；

　　居中于路径——将描边色填充在钢笔路径之内；

　　路径外——将描边色填充在钢笔路径之外；

　　取消描边——选择该项后将取消描边色。

　　接着我们再来为该路径设置内部的填充色。内部的填充类别分为“无填充色、实心填充、网页抖动、渐变填充和图案填充”五种。其中各种填充类别下又有诸多色彩和样式可供选择。我们先在填充选项中选择一种填充模式，如图3—11。

图3—11

　　然后在填充色预览框中设置渐变填充的色彩及透明度，如图3—12。点击颜色滑块可弹出如图3—10般的颜色预览窗。

图3—12

　　在透明度滑块或颜色滑块的空白位置上点击鼠标可以添加滑块。在“预置”下拉菜单中可以选择已有的线性填充样式。路径填充设置完成后效果如图3—13。

图3—13

　　通过调节该路径对象的填充句柄可以对路径的渐变填充进行修整。

图3—14

　　至于其它的路径填充类别及该类别下的诸多样式就由大家亲自动手去试了。

3、对象的变形

　　使用“修改—变形”菜单下的这些项可以对对象进行变形处理，如图3—15所示。

图3—15

　　任意变形：该功能中已包括“缩放”、“倾斜”和“扭曲”功能，这些功能与工具条上的“任意变形” 系列工具是一样的，选中后可以对对象进行随意的大小、高宽、倾斜度和旋转等拖拽变形。另外，也可以用工具栏上的四个常用的翻转按钮进行调整，如图3—16。

图3—16

　　数值变形：选择该项后会弹出“数值变形”对话框。在该对话框中可以按输入的数值，对对象进行“缩放”、“调整大小”和“旋转”的各种精确变形。

图3—16

　　旋转180度——将对象进行180度的旋转；

　　旋转90度顺时针——将对象顺时针旋转90度；

　　旋转90度逆时针——将对象逆时针旋转90度；

　　水平翻转——将对象以水平线为转轴，进行水平翻转；

　　垂直翻转——将对象以垂直线为转轴，进行垂直翻转。

4、对象的排列

　　同一层的不同对象在工作区上是有上下的排列顺序的，对于对象的上下排列顺序可使用菜单栏中“修改—排列”下的命令进行调整，如图3—30所示。

图3—17

　　另外，也可以用工具栏上的四个按钮进行调整，这也是一种较常用的方法，如图3—18。

图3—18

5、对象的对齐

　　选中多个对象后，使用“修改—对齐”下的各个选项可以用不同的方式对齐对象。如图3—26、3—27所示，是以水平方式进行对齐前和对齐后的效果。

图3—19

图3—20

　　在工具栏中的“对齐”方框内选择不同的工具，也可以对选择的对象进行对齐。方框内依次是“左对齐”、“垂直居中”、“右对齐”、“顶对齐”、“水平居中”、“底对齐”、“均分宽度”和“均分高度”。

图3—21

　　此外，通过组合面板中的“对齐面板”，也可以对选择的对象进行各种对齐方式，其中的“到画布”是指对象以画布边缘为对齐坐标。而“锚点”则可以对路径节点设置各种不同的对齐方式。

图3—22

6、对象相互结合

　　组合与取消：使用菜单栏上的“修改—组合”命令是对多个矢量对象进行群组，对象被群组后变成了一个整体，如图3—15所示。

图3—23

　　而使用“修改—取消组合”命令可以取消这两个对象的群组关系，使对象分离为群组前的独立状态。

　　接合与拆分：路径的接合功能用于将多个路径合并成单个路径对象。可连接两个断开路径的端点以创建单个封闭路径，或者可结合多个路径来创建一个复合路径。如图3—16、3—17中所示，使用接合路径前后的变化。所得到的复合路径具有放在最后面的对象的笔触和填充属性。

　　
　　图3—24　　　　　　　　　3—25

　　使用“拆分”功能，又可以将接合路径还原成相互独立的对象。

　　联合：联合是将几个图形对象结合成一个图形对象的操作，新的图形对象轮廓由被联合的图形对象边界组成。如图3—18、3—19所示，我们依次画了绿色和红色两个图形对象。同时选中两对象后使用“联合”命令。

　　
图3—26　　　 图3—27

　　联合后的对象颜色和联合前最下层对象的颜色是相同的。

　　交集：交集是把两个或多个对象的相交部分进行保留，使相交部分形成一个新的图形对象。如图3—20、3—21所示。在同时选中要相交的两对象后，使用“交集”命令。

　　
图3—28 　　　　图3—29

　　打孔：打孔命令是将位于底层的对象与上层对象的相交部分裁减掉，使底层对象的形态被改变。如图3—22、3—23所示。

　　
图3—30　　　　　　　图3—31

　　裁切：裁切是为多个对象设计的，如有三个对象，层次关系是绿色对象在最下层，红色在中间，蓝色在最上层，它们相互叠加，使用“裁切”命令后，所保留的是最上层对象与中间、下层对象的重叠部分，如图3—24、3—25所示。

　　
图3—32　　　　　　　图3—33

7、蒙版效果

　　蒙版又称为遮罩，是一种由最上层对象为下层对象提供外形，而下层对象为最上层对象提供色彩的一种图像处理效果。因此，我们把最上层对象称为“蒙版对象”，而下层对象则称为“被蒙版对象”。矢量和位图对象都可以成为蒙版对象或被蒙版对象。

　　较常用的一种蒙版效果就是先在工作区中引入一张图像，然后在图像上面画一个矢量椭圆，如图3—34。

图3—34

　　然后同时选中选中两个对象（按Ctrl+A键），使用菜单栏上的“修改—蒙版—组合为蒙版”命令，两个对象就被组合为蒙版图形了。用鼠标拖动蒙版图形的蓝色中心点即可移动下层的被蒙版对象（小狗图），效果如图4—18。

图4—18

　　可以看到，两个对象被组合为蒙版后会淡化显示两对象的重叠部分。而淡化的程度是由蒙版对象和背景色之间的明暗关系来决定。色彩越明亮，淡化度就越小，蒙版对象也就越清晰。

　　而在“层”面板中，两个对象被组合成蒙版后，就成了一个蒙版图形，被组合在同一个对象层里。如图4—19。

图4—19

　　用鼠标点击这一对象层的被蒙版对象时，该对象外围会有一个蓝色边框。当该被蒙版对象是位图时，则可以用各种位图工具对该被蒙版对象进行编辑。而当该被蒙版对象是矢量图时，则可用各种矢量工具对其进行编辑或修改。同样的，当该对象层中的蒙版对象是位图或矢量图时，也可以使用各种位图或矢量工具对其进行修改。如图4—20。

图4—20

　　对于蒙版图形，使用“修改—蒙版—禁用蒙版”命令时可暂时取消蒙版效果。同时在“层”面板中也可以看到，蒙版图形中的蒙版对象被禁用。如图4—21。

图4—21

　　此时使用“修改—蒙版—启用蒙版”命令时，又可恢复原来的蒙版效果。

　　而要删除蒙版效果时，可使用“修改—蒙版—删除蒙版”命令。此时会弹出一个对话框，如图4—22。

图4—22

　　选择“应用”时，将保留蒙版图形为独立的位图图形。但蒙版图形不再可以被编辑；

　　选择“放弃”时将会删除蒙版图形中的蒙版对象，只还原被蒙版对象。

　　当要恢复蒙版图形时只需点击菜单栏上的“修改—取消组合”命令，即可把蒙版图形中的蒙版对象和被蒙版对象进行分离还原。

　　为了实现更好的图形处理效果，在Fireworks中还可以为图像使用各种特效。特别是在网页按钮的制作中，使用这些特效会使按钮图象更加美观、更富立体感。而且一个图形对象可以使用多个特效进行反复处理，还可将这些特效处理的结果保存成样式。所以，样式是个集多种特效于一身的“组合特效”。

　　1．使用与编辑特效

　　使用特效：位图和矢量对象均可使用特效，因此我们可以先在画布上随意制作个图形对象，如图4—01。

图4—01

　　然后在该对象属性框右边的“效果”栏中，点击“添加特效” 按钮，从弹出的特效选项菜单中可以为该对象添加任意特效，如图4—02。

图4—02

　　当为对象添加“内斜角”和“投影”两个特效后，效果如图4—03。

图4—03

　　同时，在效果栏中会显示当前对象所用到的所有特效。

图4—04

　　编辑特效：当点击效果栏中“投影”特效前的“编辑特效”   按钮时，即可弹出该特效的编辑对话框，如图4—04。

图4—04

　　若要停止某项特效时，只需将特效名称前的对勾取消即可。而要删除效果栏中的某项特效时，可点击“删除特效” 按钮。

2、使用与导入滤镜

　　使用滤镜：在Fireworks中支持使用特效插件，也就是支持第三方滤镜。例如，在特效选项菜单中的Eye Candy 4000 Le项就是Alien Skin公司所提供的滤镜，如图4—05。

图4—05

　　选择好图形对象后即可通过特效选项菜单启动一个滤镜的设置窗口，如图4—06。

图4—06

　　通过该窗口左边的各项设置，可直接作用于右边的图像预览效果。对于所设置的各项内容还可以通过该窗口中的“Settings—Save”进行保存，以便随时调用。

　　导入滤镜：由于Fireworks支持第三方滤镜，因此除了可以使用Fireworks自带的滤镜之外,还可以使用外部滤镜。例如导入Photoshop5.5之前版本的滤镜。

　　首先启动Fireworks菜单栏中的“编辑—首选参数”窗口，如图4—07。

图4—07

　　在该窗口的“文件夹”选项卡中勾选“Photoshop增效工具”后，点击右边的“浏览”按钮。然后在路径选择框中选择Photoshop滤镜的所在目录。如图4—08。

图4—08

　　在Photoshop插件文件夹中将所需要的外部滤镜添加进来后，重新启动Fireworks即可使用。

3、建立样式

　　使用样式：在图形绘制中，除了使用特效为图形制作各种效果外，还可以使用“样式”面板中Fireworks提供的30个样式。如图4—09。

图4—09

　　样式的使用非常简单，只需选在对像后，从“样式”面板中单击所要使用的样式即可，如图4—10。

图4—10

　　使用一个样式后，在该对象的属性框中的效果栏中会自动出现某些特效。如图4—11。

如图4—11

　　可见，样式就是使用一些特效设计出来后，被保存起来的“组合特效”。只不过使用样式将会更简便、更直观而已。

　　在所提供的样式中，还有一些用ABC表示的文字样式。是为文字设计而用的。在选中文字后直接单击文字样式即可为文字添加效果。如图4—12。

图4—12

　　虽然文字样主要是为文字设计的，但图形对象也可以使用。

　　新建样式：为图形对象添加好各种特效或样式后，单击“样式”面板右下角的“新建样式” 按钮，即可将该对象当前所用到的所有样式或特效保存为一个新的样式，以方便反复使用。

图4—13

在“新建样式”对话框中，可在名称栏里输新建样式的名称。而在名称栏下方可根据不同属性的选择，来修改样式的相关保留效果，同时会在左边的预览窗口中显示设置的效果图。点击“确定”按钮后，新建立的样式会被添加到样式面板中。如图4—14。

图4—14

　　“样式”面板列表：点击“样式”面板右上角的按钮，即可弹出“样式”面板的下拉列表，如图4—15。而要对已建立的样式进行编辑时，可双击该样式，或点击“样式”面板右上角下拉列表，从中选择“编辑样式”选项。

图4—15

　　编辑样式——选择该项后会弹出与“新建样式”窗口相同的编辑对话框，在该对话框中可重新对所选样式进行相关属性的修改。如图4—16。

图4—16

　　删除样式——将所选的某个样式进行删除。或可直接单击“样式”面板右下角的“删除样式” 按钮；

　　导入样式——可从外部引入STL格式的样式文件，但当前所用的样式将会被全部替换掉；

　　导出样式——可将当前的样式面板输出成一个STL格式的样式文件；

　　重设样式——用于恢复样式面板中默认的30个样式，但新建立或导入的样式会被删除；

　　大图标——把样式的缩略图以大图显示，如图4—17。

图4—17

Fireworks为我们提供了强大的文字设计功能，为文字的输入和设置提供了专业的文本编辑功能，可以方便地对输入的文字进行诸如字体、大小、形状、填充、描边、上下左右的距离、自定义消除锯齿等各项操作。

　　1、文本属性窗

　　点选工具条上的“文字”   工具后在画布上进行单击，即会显示文本的输入框，如图5—01。

图5—01

　　在该框内即可自由输入各种文字，而在文字工具的属性框内则详细显示了文字工具的各种选项，如图5—02。

图5—02

　　在该属性框中可以对文字的字体、字号、颜色、文字间距、自定义消除锯齿等等进行设置。同时点击菜单栏中的“文本—编辑器”也同样可以对文字的各项属性进行相关设置，如图5—03。

如图5—03

2、文字的变形

　　文字的缩放：对于输入的文字同样可以和路径对象般用工具条上的“变形” 工具进行调整，如图5—04。

图5—04

　　点选“缩放”工具后在文本框内会出现八个控制点和一个缩放的中心点，当鼠标移到控制点上时指针会变成双向箭头，此时拖动该控制点即可改变对象的形状，如图5—05、5—06。当按住ALT键的同时拖动控制点时，对象则会以缩放点为中心，使对象产生对称式的缩放变形。

图5—05

图5—06

　　而当鼠标移到任意一个控制点的四个边角附近时，指针会变为圆形箭头，此时拖动该控制点进行移动，即可旋转改变文字的方向，如图5—07、5—08。此时改变缩放中心的位置所改变的则是旋转点的中心位置。

图5—07

图5—08

　　“倾斜”工具和“扭曲”工具的使用同样是通过拖动控制点来实现的。大家可以亲自动手实践一下。另外，文本框的形状被更改后，再次点选“文字”工具依然可以继续输入或编辑文字，如图5—09。

图5—09

　3、文字附加到路径

　　Freworks中文字的输入都在文本输入框内，如果希望文字不受矩形文本框的限制，可以绘制封闭路径并将文本附加到路径上，使文字顺着路径的形状进行排列并且保持可编辑性。如图5—10，按Chrl+A键同时选中文字和路径后，使用“文本—附加路径”命令。

图5—10

　　这样，文字就被附加到了封闭路径上，如图5—11。此时文字与路径成为了一个整体，而且该封闭路径会暂时失去其笔触、填充以及效果属性。随后对该路径所用的任何笔触、填充或效果属性都将应用到文字当中，而不是路径。

图5—11

　　如果觉得文字附边到路径的位置不理想，可以通过文本属性框中的“文本偏移”进行设置。输入“—92”时是将文字逆时针偏移92个像素，如图5—12。

图5—12

　　对于附加在路径上的文字不仅可以改变其位置，通过菜单栏上的“文本—倒转方向”还可以改变文字在路径内外的方向，如图5—13。

图5—13

　　文字被附加到路径后依然能继续为其添加或编辑各种文字，如图5—14。

图5—14

　　  如果要解除文字附加到路径的使用，只要选中文字与路径后使用“文本—从路径分离”命令，就可以分开附加在路径上的文字。文本从路径分离出来后，该路径会重新获得其笔触、填充以及效果属性。

4、文字转为路径

　　Freworks中可以把文字转变为路径，然后按矢量路径般对其进行操作，但无法再将它作为文本编辑。

　　在选中文本后点击“文本—转换为路径”命令，此时文字将被转换成组合路径，如图5—15。

图5—15

　　文字被转成组合路径后可以使用“部分选定”工具拖动文字上的路径节点改变字符的形状，如图5—16所示。

图5—16

　　也可以将该组合路径使用“修改—取消组合”命令，把字符作单个独立的路径进行拆分，如图5—17所示。

图5—17

GIF动画的实现，是由逐张图画在不同的时间段快速地显示出来，由于人眼有0.1秒的视觉暂留，所以图像看上去就像是动了起来。而每一张图画就叫作“帧”，它是组成动画的基本单位。 GIF图形动画为网页增添许多活泼生动、复杂多变的图形元素，因此GIF动画在网页制作中被广泛应用，甚至大家喜欢的QQ动态表情大多也是Gif动画呢。

 　　Fireworks正是制作GIF动画很好的工具，这一部分我们看看Fireworks MX 2004在动画制作方面的特色。

　　1、制作GIF动画

　　我们先来做一个简单的五帧动画例子。在工作区上随意画上五个对象，按住Shift键选中所有对象，如图6—01。

图6—01

　　然后点击菜单栏上的“窗口—帧”命令来启动“帧”面板，如图6—02

图6—02

　　点击“帧”面板右下角的“分配到帧”  按钮，在“帧”面板上会自动生成一个五帧的动画。这样，一个简单的动画就制作完成了。而这动画一至五帧的对象是按照对象建立的先后顺序生成的。完成后动画效果如图6—03。

图6—03

　　点击“帧”面板右下角的“添加”  或“删除”  按钮，可以添加或删除被选中的帧。而在“帧”面板左下角的“循环”  按钮可以设置动画的播放次数，如图6—04，当前所选择的是“永久”循环播放。

图6—04

2、“帧”面板的使用

　　在Fireworks中GIF动画的制作离不开对“帧”面板的操作，因此学会对“帧”面板的使用非常重要。

　　帧的重命名：在“帧”面板上双击帧的名称，即可为该帧重命名，如图6—05。

图6—05

　　帧的延迟时间：在每一帧名称的右边都有一个“7”字。这些数字表示各帧的延迟时间，这里的“7”表示该帧的延迟时间是0.07秒。双击该处即可重新设置帧的延迟时间，如图6—06。

图6—06

　　添加帧：点击“帧和历史记录”组合面板右上角的下拉菜单，如图6—07。

图6—07

　　选择“添加帧”可以为当前的动画添加新帧，如图6—08。

图6—08

　　数量——可直接输入要添加的帧数。
　　在开始——在动画的第一帧前进行添加；
　　当前帧之前——在当前被点选帧之前进行添加；
　　当前帧之后——在当前被点选帧之后进行添加；
　　在结尾——在动画的最后一帧后面进行添加；
　　重制帧：可以复制当前被选中的帧，设置对话框与“添加帧”对话框相同。
　　删除帧：删除当前被选中的帧。

　　复制到帧：单击该项，如图6—09。可把某帧在画布上的对象复制到其它的帧上。也可以在对话框中输入复制帧的“范围”。

图6—09

　　分散到帧：该项与前面所讲的“分配到帧”  功能相同。

3、使用“洋葱皮”功能

　　在动画制作当中使用“洋葱皮”功能可以方便地查看当前所选帧之前和之后的帧内容。从而为动画的制作带来方便。

　　点击“帧”面板左下角的小箭头  按钮，即可弹出“洋葱皮”功能选项，如图6—10与效果图6—11。

图6—10

图6—11

　　启动“自定义”项可以自行设置显示的帧数及不透明度等，如图6—12。

图6—12

　　而“多帧编辑”则是允许同时编辑多个帧的对象，从而免去了在多个帧之间来回切换的麻烦。

　　4、图层的使用

　　在Fireworks中绘制对象或图形的过程中，更多的时候是使用图层面板进行对象的选择与调度。而在动画制作当中，层面板的使用也同样重要。

在Fireworks 中，图像默认的保存格式是.PNG文件，该文件最大可能的保存了Fireworks 中所绘制的各种图形对象、切片的相关属性与信息，从而为图像文件的再次编辑再来最大的可操作性，此外在输出的文件格式中常用的还有GIF、GIF动画、BMP、JPEG等。下面我们就来详细了解这些格式的输出方法和设置选项。

　　1、图像的输出设置

　　“选项”设置：在Fireworks 中，制作完成图像，可以直接点击工具栏上的“保存”按钮，将图像保存成PNG文件。此外也可以用菜单上的“文件—导出预览”命令，进行文件的输出预览，如图7—01。

图7—01

　　格式——在该栏中可以选择将要输出的图像格式，常用的输出格式有GIF、GIF动画、BMP、JPEG等；

　　调色板——选择图像所使用的调色板。调色板中的颜色越少，图像中的颜色也越少，输出的图像文件也就越小。

　　失真——设置图像的压缩质量。压缩比越高，图像失真就越大。在失真栏后面的输入框中，可设置图像所使用的最大色彩数。

　　抖动——通过替换图像中色彩相近的象素，以模拟出当前调色板中没有的颜色，从而产生缺失颜色的外观。在导出具有复杂混合或渐变的图像，以及将照片图像导出为诸如GIF的8位图形文件格式时，抖动尤其有用。但同时也会增加图像文件的容量。抖动选项仅适用于GIF、其它8位图形文件格式和WBMP。

　　颜色表——显示的是输出对象时使用到的各种颜色。

　　在颜色表下有用于编辑颜色的六个工具按钮，如图7—02。

图7—02

　　替换选中色彩——在颜色表中选中一种色彩后，使用该工具重新选择一种色彩进行替换；

　设置透明度——将颜色表中某一色彩设置为透明色；

　　接近网页安全色——强置图像色彩接近于网页安全色，使其在显示设置为256色的计算机上进行网页浏览时不会或降低色彩抖动；

　　锁定色彩——锁定被选中的颜色，以便在更改调色板或减少调色板的颜色数目时无法将其删除或更改。当颜色被锁定之后切换到另一个调色板时，锁定的颜色将被保留在新的调色板中。

　　新增色彩——为颜色表新添一种色彩；

　　删除色彩——删除颜色表中的色彩。

　　在颜色表左下角边上还有三个用来设置图像透明度的工具，如图7—03。

图7—03

　　使用左起第一个工具可把颜色表中的某一色彩或对象中的色彩设置成透明色。如图7—04，在图像的“预览”框中，点击白色部分后，图像中所有白色都变成了透明。

图7—04

　　使用第二、第三两个工具是增加或删除透明色彩。

　　在这三个设置图像透明度工具右边还有一个下拉菜单，如图7—05。

7—05

　　不透明——图像中不设置任何透明色；

　　索引色透明——我们在Fireworks中所绘制的图像即使背景为透明，但在导出为GIF格式后，它的背景却并非是透明的。因此在导出前就要事先选择“索引色透明”，以确保图像在导出后背景色为透明；

　　Alpha透明度——用于导出具有渐变透明和半透明象素的图形。

　　删除未使用的颜色——删除颜色表内未在图像中使用的颜色；

　　交错式浏览器显示——使图像在浏览器中观看时先以低分辨率进行显示，到图像下载结束时后再显示为完整的分辨率。该选项仅适用于GIF和PNG文件格式。

　　在“选项”卡的右下角还有两个按钮，分别为“导出向导”和“优化到指定大小”如图7—06。

图7—06

　　导出向导——可按该向导的一步步提示进行选择，从面导出图像；

　　优化到指定大小——可自行设定导出文件的大小。

　　“文件”设置：点击“导出预览”窗口中的“文件”选项卡，如图7—07。

图7—07

　　缩放区——可以设置导出图像的缩放比例和宽、高度；

　　导出区域——选择该项后可直接在X，Y栏中输入起始坐标，在W，H栏中输入宽、高度。此时，在图像的预览区中，图像四周会出现六个控制点，通过拖动这些控制点也可以设定图像的导出区域。

2、输出GIF动画

　　在“导出预览”窗口中导出GIF动画时，可以先在“选项”设置中的格式栏内选择“GIF动画”，然后对该动画进行相关的优化设置后点击“动画”选项卡，如图7—08。

图7—08（点击可放大观看）

　　帧的处置——在该选项卡的上面有个垃圾桶图标，可用于指定帧的处置方法；

　　帧的延迟——在该项上面有个时钟的图标，可设置被选中帧的延迟时间；

　　帧的播放次数——在“永久”下拉菜单中可以设置动画文件在导出保存为网页格式时的播放次数；

　　裁剪每个帧——可将动画中的每一帧都裁剪成一个矩形区域，只输出各帧之间不同的图像区域；

　　保存帧之间的差异——取消该项后，只会输出各帧之间有变化的图像；

　　各项设置完成后点击“导出预览”窗口右下角中的“导出”按钮，然后选择文件的保存格式及存放路径即可。

3、输出JPEG文件

　　由于JPEG格式的文件总是以24位颜色进行保存和输出，因此无法像GIF格式那样通过编辑其调色板进行优化。所以当选择输出JPEG格式的图像时，颜色表为空。如图7—09。

图7—09

　　品质——设置JPEG图像的输出品质。品质越高文件也就越大；

　　平滑——设置图像表面的光滑度；

　　渐进式浏览器显示——选择该项后，在浏览器上查看此图像时，将由模糊逐渐到清晰的方式来显示；

　　锐化颜色边缘——将强化图像色边缘的锐化值，使图像更加清晰。

　　在前面的几章中我们已领略了Fireworks MX 2004在图像绘制上的出色表现。从本章开始，我们将来学习Fireworks MX 2004在在网页支持上的强大功能。我们先从动态按钮的制作开始。

　　1、设置鼠标事件

　　先在画布上随便画个蓝色矩形的按钮形状，然后按F8键将该对象转化为“按钮”元件。此时该按钮在画布上的情况如图8—01。

图8—01

　　双击应该按钮对象后，将弹出按钮元件的鼠标事件设置窗口，如图8—02。

图8—02

　　该窗口中前面的“释放”、“滑过”、“按下”和“按下时滑过”是用来设置鼠标在触及按钮时，按钮所呈现的四种状态。而“活动区域”则用来设置按钮在响应鼠标指针时的有效范围。

　　如果我们现在打开“帧”面板的话，就可以看到该面板下已自动为按钮元件生成了四个帧，如图8—03。但此时只有第1帧中有按钮图像，其它三帧均还没有任何内容。

图8—03

　　点击“导入按钮”则可以从Fireworks的按钮元件库中直接选取一种按钮进行导入，如图8—04。

图8—04

　　“释放”选项卡是用来绘制按钮的一般状态。当我们把普通的图形对象直接转换为按钮元件时，Fireworks会自动将该对象作为按钮的一般状态，放在“释放”选项卡中作为按钮的第一帧。

“滑过”选项卡是绘制当鼠标移动到按钮上及按下时，按钮所呈现的状态。在这里我们可点击“复制弹起时的图形”按钮，将“释放”选项卡中的按钮图形复制过来，然后只更改其色彩，以便区分。如图8—05。或者你也可以在此绘制你想要的其它图形。

图8—05

　　“按下”选项卡是绘制鼠标在按钮上按过之后，按钮所呈现的状态。在该选项中只有选中了“包括导航栏按下状态”时此帧中的内容才会生效，否则此帧中的内容将不会在网页浏览中出现。我们同样将上一帧的按钮状态通过“复制滑过时的图形”按钮复制过来，然后将按钮色由绿色改为桔红，如图8—06。同样，你也可以在这里绘制任何一种你想要的按钮图形。

图8—06

　　“按下时滑过”选项是设置按钮在被按过之后鼠标再次滑到按钮上时，按钮所呈现的形状。该项同样是在选中“包括导航栏按下状态”后才能生效。我们点击“复制按下时的图形”后，把上一帧的按钮色彩改为黑色，以便区别。

图8—07

　　此时，按钮的四个鼠标事件都有了，点击“完成”按钮后回到工作区中的“原始”选项窗中。我们可以点击紧挨“原始”选项窗右边的“预览”窗（或按F12键启动浏览器）查看测试刚制作的按钮，如图8—08。

8—08

　　 回到“原始”选项窗口后双击该按钮图形，或在“库”面板中双击该按钮元件都可以对该按钮进行重新编辑。

2、按钮的链接区域

　　在“按钮”元件的制作选项卡中，还有一个“活动区域”选项，如图8—09。

图8—09

在该选项中可以对按钮的链接区域进行具体的设置。通过拖动四条红色边线，可以调整鼠标在该按钮内的有效链接范围。而当要对圆形按钮或不规则按钮设置这样的链接区域时，矩形的链接区域就会给按钮造成一部分不必要的鼠标响应区，如图8—10。

图8—10

　　这时，我们可以使用工具条中专门为网页链接而设立的“Web”工具区，从中选择“多边形切片”工具，如图8—11。

图8—11

用该工具沿着图形的边缘进行依次单击，每点击一次，就会产生一个类似钢笔路径中的直线线段，直到该图形圈选进去，如图8—12。

图8—12

　　 绿色区域内的就是该按钮有效的链接范围。用“指针”或“部分选定”工具拖动链接范围边上的控制点，可以对该范围进行修改或调整。

　　点选“自动设置活动区域”选框时，又可把链接范围恢复到原来的矩形状态。

　　在该多边形按钮链接切片的属性框中，可以进一步为该按钮设置链接目标和按钮图像的色彩输出模式等，如图8—13。

　　Alt——在网页浏览时，当鼠标移到该按钮上时将要显示的提示内容；

　　目标——选择是否在新的浏览窗口中打开所链接的内容。

　　对于按钮链接区域的设置还可以使用“Web”工具区中的“多边形热点”工具为按钮或图绘制链接区域，如图8—14。

图8—14

　　“多边形热点”工具的使用方法与“多边形切片”工具是一样的。

　　在为链接区域添加链接对象时还也可以使用“UBL”面板，如图8—15。

图8—15

　　在该面板的第二个输入栏中可直接输入“切片”或“热点”区域的链接地址，然后点击“添加链接” 按钮将地址添加到下面的链接窗口中。使用时只需在该窗口中点选当前“切片”或“热点”区域所要用到的链接地址即可。在“UBL”面板右下角的“新建URL” 按钮中，可以直接为链接窗口添加链接，或对链接窗口中已有的链接地址进行修改，如图8—16。

图8—16

　　图像变换技术在网页中经常被用到，即当鼠标移动到某图像或按钮上时，会触发另一个图形的显示。在Fireworks中，图像变换的制作原理就是使“帧”面板中某帧中的图形对象与来自任何帧的图象进行交换，从而达到在网页浏览时产生图形变换的效果。

　　1、简单的图像变换

　　在Fireworks中制作简单的图像变换，就是把“帧”面板中第1帧里的对象与第2帧中的图像进行交换。

　　我们先制作或引入一个按钮的一般状态图，选中图形后单击鼠标右键，从弹出菜单中选择“插入切片”或“插入热点”命令，如图9—01。

图9—01

　　然后在“帧”面板中新增加一帧，并在此帧上引入鼠标经过按钮时将要变换的图像，如图9—02。

图9—02

　　选中切片后，启动“行为”面板，点击“添加”  指令按钮，从中选择“简单变换图像”，如图9—03。

图9—03

　　这样，一个简单的变换按钮就制作完成了，按F12键就可以在浏览器中进行测试了。

图9—04

　　可以看到，不管你在第二帧中所导入的图像有多大，在网页浏览时也只能在相同的切片范围内看到两张图形的变换效果。因此，这种图象的变换又被称为“相交变换”。

　2、复杂的图像变换

　　先在画布上绘制或引入三个图形对象，然后同时选中这些对象，并在任意一个对象上单击右键，从弹出菜单中选择“插入切片”。这时会弹出一个提示窗口，如图9—07。

图9—07

　　选择“单一”按钮时，是把选中的全部对象设置在同一个大的切片区域内，而“多重”按钮则是为所有对象各设置一个独立的切片区域。在这里我们选择“多重”按钮后，如图9—08。

图9—08

　　接着，我们在“帧”面板内添加三个空白帧，如图9—09。

图9—09

　　在第2帧中引入“小猫”按钮切片所要变换的图形，并在该图形上点击右键选择“插入切片”命令，如图9—10。

图9—10

　　同样的，我们在第3和第4帧中也分别引入用于“鹦鹉”和“鲜花”按钮所要变换的图像，然后都在图像上点击右键，选择“插入切片”项。

图9—11

　　接着，点选“小猫”的按钮切片后使用“行为”面板上的“交换图像”指令，如图9—12，从而启动“交换图像”的详细设置对话框（图9—15）。

图9—12

　　或者用鼠标左键按住“小猫”按钮切片中间的圆形控制手柄不放，然后拖拽鼠标到与其进行图像交换的切片上，这时会出现一条蓝色的链接曲线，如图9—13。

图9—13

松开鼠标后会弹出一个“交换图像”的设置窗口，在下拉菜单上选择与“小猫”按钮切片进行交换的图像所在的帧。在这里我们选择“帧2”。

图9—14

　　如果点击“更多选项”按钮，也可以启动“交换图像”的详细设置对话框，如图9—15。

图9—15

　　在该窗口中，左上边所列出来的是所有切片区块的名称，右边是所有切片区块所在位置的缩略图。在这里我们可以从中任意选择一个图象的切片区块用来与“小猫”按钮切片进行图象交换。

　　帧编号——选择交换图像所在的帧数，在这里我们选择的是第2帧；

　　图像文件——如果第2帧的图形没有事先导入工作区里，也可以通过这里另行引入图象；

　　预先载入图像——在浏览测试图像的变换效果时可以预先载入图像；

　　鼠标移开时复原图像——在网页浏览时，当鼠标离开按钮后，图形会自动恢复原来的状态。

　　设置完成后点击“确定”按钮即可回到工作区。此时，“小猫”按钮的切片和它所要交换的图形切片间多了一条曲线。它表明这两个区域已建立了链接关系，如图9—16。

图9—16

　　用同样的方法为“鹦鹉”和“鲜花”按钮在“交换图像”对话框中设置不同的交换图像。三个按钮切片设置完成后如图9—17。

图9—17

　　按F12键即可在浏览器上测试制作效果了，如图9—18。

图9—18

　　可以看到，点击不同的按钮图像，就会在不同的位置上显示相应的变换图形。因此，这种图象的变换效果又被称为“不相交变换”。

　　要修改设置内容时，选择切片后，点击“行为”面板右下角的“编辑” 按钮即可，如图9—19。

图9—19

　3、输出HTML文件

　　点击Fireworks菜单栏中的“文件—导出”命令即可把制作的内容输出为HTML格式的文件，如图9—20。

图9—20

　　文件名——输入导出文件的名称；

　　保存类型——选择输出文件的保存格式。默认情况下是以HTML格式输出；

　　HTML——导出成HTML文件或把制作内容以GIF图像格式复制到剪切版中；

　　切片——可以选择是否导出切片；

　　仅已选切片——只导出事先被选取的切片；

　　仅当前帧——当制作对象有多个帧数时，可以事先选中某帧进行单独导出；

　　包括无切片区域——选择是否将无切片区域一并导出；

　　将图像放入子文件夹——可选择是否把导出的HTML文件与图片一起放在一个文件夹内。点击下面的“浏览”按钮可为图片选择一个子文件夹进行保存。

在Fireworks中，为图像设置链接区域是靠“切片”或“热点”工具来完成，因此“切片”或“热点”区域又被称为链接区域。它们不是以图像的形式存在，而是在图像导出成网页格式后，以HTML代码的形式出现。

　　1、切片与热点

　　网页层：所有的“切片”和“热点”区域都被保存在“层”面板中的“网页层”内，以划分它们与图像层的区别。但同时也可以像对待图像层那样对网页层进行例如重命名、选择、删除、展开/折叠层、隐藏/显示层、锁定/编辑层等操作，如图10—01。

图10—01

　　链接区的变形：对于各种形状的图形可为其选择不同的“切片”或“热点”工具，为图象划分出所需的切片或热点区域。同时也可以使用各种“变形”工具对该区域进行变形处理，如图10—02。

图10—02

　　设置链接：为图像设置好“切片”或“热点”的链接区域后，在其区域的属性对话框中就可以输入或设置链接的相关内容。如图10—03。

图10—03

　　而对于“切片”区域除了可以为图像设置一个链接范围以外，还可以将该范围作为HTML的语言区域进行导出。只需在“切片”属性框中的类型下拉列表里选择“HTML”项，如图10—04。

图10—04

　　然后点击类型列表下的“编辑”按钮即可在“编辑HTML切片”窗口中输入HTML代码。如此一来，也就把该切片区域转成了HTML的语言区域。

图10—05

　控制手柄：在“切片” 区域的中心有一个圆形的控制手柄，右键点击即可弹出这个切片目前所能用到的所有行为指令。如图10—06。

图10—06

　　导出所选切片——可把图像中的切片区域作为图像进行导出保存。在导出前，还可以使用“优化”面板对该区域进行各项设置，如图10—07。

图10—07

　　排列——调整该切片在网页层中上下的排列位置；

　　添加简单变换图像行为——为图形的切片区域建立简单的图形变换效果；

　　添加交换图像形为——可启动“变换图像”的详细设置窗口，为切片区域的图像建立较复杂的图形变换效果；

　　添加状态栏信息——选择该项后会弹出一个 “设置状态栏文本”对话框，在消息栏中可输入要显示在浏览器状态栏上的文字信息。如图10—08。

图10—08

　　添加导航栏——将图形的切片区域设置为网页的导航栏；

　　添加弹出菜单——在切片位置添加一个弹出菜单的按钮；

　　编辑弹出菜单——可重新设置弹出菜单中的各项内容。

同样的，在“热点”区域的中心位置上也有个控制手柄，点击右键即可弹出相关行为，如图10—09。

图10—09

　　为 “切片”或“热点”所添加的全部指令都保存在“行为”面板中。同时，点击“行为”面板上的“添加” 或“删除” 按钮也可以为切片、热点添加或删除相关的行为指令，如图10—10。

图10—10

2、制作弹出菜单

　　先制作或引入一个要用来制作弹出式菜单的主按钮，如图10—11。

图10—11

　　接着为该按钮添加一个切片或热点，并在其控制手柄的弹出菜单中选择“添加弹出菜单”项，如图10—11。

图10—11

　　此时将会启动“弹出菜单编辑器”窗口，如图10—12。

如图10—12

　　在“内容”选项卡中，点击“添加菜单项” 或“删除菜单项” 按钮，可在文本栏中加入或删除一个菜单项；

　　文本栏——可输入弹出菜单中各选项的名称；

　　链接栏——输入菜单菜单项所要链接的地址；

　　目标栏——选择链接对象在浏览器中的打开方式。

　　如果要把文本栏中某个菜单选项再设置为另一个菜单的下一级目录时，只需点击“下级菜单” 按钮即可。如图10—13；

图10—13

　　   可以看到，“菜单2”已成了“菜单1”的下级目录了。而点击“上级菜单” 按钮则可以将“菜单2”又向上恢复一级。

　　   菜单项上下位置的调整可能用鼠标的拖拽来完成，如图10—14，我们把“菜单5”向上移动了一格。

图10—14

　　在“内容”选项卡的设置完成之后，点击右下角的“继续”按钮，进入下“外观”选项卡，如图10—15。

图10—15

在单元格选项中，可以将弹出式菜单的风格设定为“HTML”或“图像”，而两种风格都可以在下面的预览框中先行查看；

　　在单元格右边的下拉列表中可以选择菜单的排列方式，分别有“垂直菜单”和“水平菜单”；

　　字体栏及旁边的文字设置工具，都是用于对菜单文字的各项设置；

　　在“弹起状态”框中有两个颜色选择框，分别用于菜单在弹起状态时，文字颜色及其背景色的设置；

　　在“滑过状态”框中也有两个颜色选择框，是用于菜单在鼠标滑过状态时，文字颜色及背景色的设置。

　　在“外观”选项卡的设置完成后，我们点击“继续”按钮，进入下一个选项卡。如图10—16。

图10—16

　　在“高级”选项卡中可以进一步对菜单的边框及边框颜色等进行详细的设置。完成后点击“继续”按钮。

　　在“位置”选项卡中可以对弹出菜单的弹出方式及位置进行设定，如图10—17。

图10—17

　　菜单位置——设置主菜单的弹出位置。也可以直接输入主菜单弹出位置的坐标值；

　　子菜单位置——选择子菜单的弹出位置，同样也可以在下面的坐标中直接输入相关数值。而取消“放在同一位置”选项时，则子菜单总会与它的上一级菜单在同一水平位置上弹出。

　　点击“完成”按钮后，弹出式菜单的制作就大功告成了，按F12键即可在浏览器中查看效果。

图10—18

　　在Fireworks中，自动化的应用可以为我们省去不少在图像处理或网页制作过程中一些相同步骤的操作，从而有效地节约时间和提高工作效率。

　　1、“查找”面板

　　使用“查找”面板可方便快捷地查找或替换文件中的文字、字体、颜色等内容。这对于较大的网页制作或图像处理都将带来极大的方便。

图11—01

　　先要在“搜索所选范围”栏中选择搜索范围。可按“搜索帧”、“搜索文档”和“搜索文件”进行范围选取。

　　当选择“搜索帧”时，将对当前文件中的所有帧列为搜索范围；

　　选择“搜索文档”时，则对当前Fireworks中打开的所有文件进行搜索；

　　“搜索文件”则对被选中的外部文件进行展开搜索。

　　在“搜索文件类型”栏中，还可以再进一步按文件或制作对象的类型进行搜索，如图11—02。

图11—02

　　选择不同的文件或制作对象，在该栏下就会显示与该搜索相对应的设置。例如，当选择“查找颜色”时“查找”面板如图11—03。

图11—03

　　在“查找”右边的颜色预览窗中选择所要查找的色彩，然后在“更改为”右边的颜色预览窗选择一种用来替换新的颜色。当点击下方的“查找”按钮时，只会把“查找”右边颜色预览窗的色彩找出来，而点击“替换”或“全部替换”时，则会将查找到的色彩进行更换。

2、使用批处理

　　当有大量的文件要做相同的处理操作时，使用“批处理”功能即可将这些文件按指定的操作步骤进行处理。点击菜单栏上的“文件—批处理”，如图11—04。

图11—04

　　在浏览框中选择要处理的文件后点击“增加”按钮即可把文件添加到列表框内；

　　选择“添加全部”时则是把浏览窗中的所有文件添加到列表框中；

　　点击“删除”按钮，又可以把列表框中被选中的文件名单删除。

　　将要处理的文件选择完后，点击“继续”按钮进入批处理的执行动作或命令选择窗口，如图11—05。

图11—05

　　在该窗口的左边的“批次选项”中选择执行文件处理的动作后点击“添加”按钮，即可把动作加入到右边的列表中。一次可以添加多个处理动作，而且点击右边列表中的两个箭头按钮    ，还可以设置执行动作时的先后顺序。对于不需要的动作指令也可以从列表中选中后点击“删除”按钮。在这里我们试着把刚才导入的两张图片的原有名称面前加上“时钟”两字，然后点击“继续”按钮，进入下一个设置步骤。

图11—06

　　在“批次输出”中，可以选择对图像执行批处理后的保存路径；

　同时，你还可以选择是否对原图像文件进行备份。选择“覆盖现有备份”时，将覆盖原来的文件。选择“增量备份”时，将对上一次的备份文件进行重命名，也就是备份原来的文件；

　　当点击“保存脚本”时，则可将这次批处理的动作过程用脚本形式进行保存，以便下次再对其它文件进行相同的动作处理时，可直接调用该脚本文件。

　　设置完成后点击“批次”按钮，批处理动作被正式开始执行。同时，会有一个提示窗口显示当前已被处理完成的文件数量，如图11—07。

图11—07

　　点击“确定”后，整个批处理的过程就完成了。而那两张图像的名称也被成功的重命名了，如图11—08。

图11—08

　　而当下次还要使用这个批处理的动作时，可以点击菜单栏中的“命令—运行脚本”命令，如图11—09。

图11—09

　　然后在弹出的文件浏览窗中选择上次保存的那个脚本文件。此时还会弹出一个窗口，从中选择所要处理的文件。如图11—10。

图11—10

　　细心的朋友一定会发现，菜单栏中的“命令”列表里所列的动作指令与图11—05窗口左侧批次选项中的“命令”列表，其内容是完全一样的。其实，“命令”菜单中的动作指令也属批处理中的动作脚本。只不过在批处理窗口中还可以进一步为这些动作指令作出相关设置及执行上的时间安排。

3、“历史记录”面板

　　在图形或网页的制作过程中难免会用到工具栏上的“撤消” 或“重做” 按钮，以恢复上一步或前一步的操作。但当所要撤消或重做的次数较多时，就可以直接在“历史记录”面板里点击左侧的箭头滑块，从而返回到想要的那一步操作。如图11—11。

图11—11

　　在默认的情况下，“历史记录”面板只能记录20条操作步骤。也就是说，当“撤消”的次数超出这个记录范围时，就不能再执行撤消命令。若想修改这个记录范围，可通过菜单栏上的“编辑—首选参数”。在常规选项卡内重新输入“撤消步骤”的数值。

　　因为“历史记录”面板里忠实地记录了每一步的操作过程，因此我们又可以把这些操作过程保存为脚本文件，方便下次再有相同的图像处理步骤时进行调用。方法是先在“历史记录”面板里把需要的操作步骤选中，如图11—12。

图11—12

　　然后点击面板右下角的“保存”按钮，此时会弹出一个“保存命令”的对话框。在“名称”栏中为这些操作记录取个名称，然后点击“确定”按钮。

图11—13

　　此时点击菜单栏上的“命令” 菜单，就会在最后一项中看到“图形变形记录”的操作脚本命令已被保存其中。

图11—14