Fireworks 3快速上手

韦蓓蓓
2000年 第53期 

#1    一、Fireworks简介
    美国Maorimedia公司出品的Fireworks是第一个完全为网页制作者设计的软件。作为一个图像处理软件，Fireworks能够自由地导入各种图像（如Macintosh的PICT、FreeHand，Illustrator，CorelDraw8的矢量文件、Photoshop文件、GIF、JPEG、BMP、TIFF），甚至是ASCII的文本文件，而且Fireworks可以辨认矢量文件中的绝大部分标记以及Photoshop文件的层。
    而作为一款为网络设计而开发的图像处理软件，Fireworks能够自动切图、生成鼠标动态感应的Javascript等等，而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器（Export功能）。
#1    二、Fireworks 3的特色功能
    与以前的版本相比，Fireworks 3提供了很多新的特性和功能来提高我们的网页设计水平。
    1.与Dreamweaver结合更紧密
    Fireworks 3的Behavior与Dreamweaver 3中的Behavior如出一辙；Fireworks 3导出的图像和关联的HTML将自动的放到准确的位置上，且自动更新链接。Fireworks 3和Dreamweaver 3一起工作，可以帮助我们更高效地将图形移动到页面中。
    2.在工作区预览页面效果
    在Fireworks 3中，你可以方便地预览所有你正在从事的工作，包括不离开工作区切割，将要输出的文件进行比较等。
    3.方便的历史记录面板
    Fireworks 3的历史面板记录了当前的所有操作步骤，可以使你自由地在多步操作之间进行重复或撤消。通过历史面板的滑动条，你可以在这些不同的步骤中进行回顾和移动。
    4.用JavaScript进行自动操作
    不管是Fireworks 3还是Dreamweaver 3的任务，都可以用JavaScript进行自动操作。你甚至能够创建从Dreamweaver中控制Fireworks的原本描述。
    5.Photoshop效果和文件的改良操作
    这些效果和文件的改进可以提高你在Fireworks里面使用Adobe Photoshop文件的能力。
    6.Illustrator和Flash的输出
    这种功能可以重新勾画你打算在Fireworks 3里面为打印或图片的生动性而创建的图形。
    7.加强图片生动性等图形特色
    这些功能使你可以在Fireworks里创建印象深刻的向导框、Rollovers和生动的GIF文件，并且更容易将它们转换成HTML文件。
    8.新的位图编辑选项
    利用新的位图编辑选项，你可以不必离开Fireworks环境就能够对图像进行更改等操作。
    9.Gamma预览
    Gamma预览可让你观察一张图片在另外一台计算机操作平台上的显示输出效果。当你工作在Windows平台上时，你可以看到该图片在Macintosh平台上运行的结果，相反，当你工作在Macintosh平台上时，你可以看到该图片在Windows平台上运行的结果。
    10.结构＆式样的方便访问和使用
    使用结构和式样去扩张你为纹理和填充所创建的选项。Fireworks 3可使你在任何形式的位图文件的基础上应用结构或式样，在你计算机的磁盘上进行查找。
    11.活动的效果
    可以观看众多的三棱镜的活动效果。包括Photoshop滤镜和大家喜爱的滤镜，象Alien Skin Eye Candy等。
#1    三、FireWorks3支持的主要图像文件格式
    FireWorks3结合了Photoshop（点阵图处理）与Coredraw（矢量图）的功能，支持十余种图像文件格式，这里介绍几种比较常用的图像格式：
    1.PNG（Portable Network Graphic）格式
    PNG格式是Web图像最通用的格式，是一种无损压缩格式，但是如果没有插件支持，有的浏览器可能不支持这种格式。PNG格式最多可支持到32位颜色，不支持动画。
    2.GIF（Graphics Interchange Format）格式
    GIF是Web上最常用的图像格式，可以用来存储各种图像文件，但特别适于存储线条、图标、简单的卡通和其它有大色块的图像。GIF文件比较小，它形成一种压缩的8位图像文件，所以最多支持256种不同颜色。GIF支持动态图，透明图和交织图。
    3.JPEG（Joint photographic Experts Group）格式
    JPEG是Web上仅次于GIF的常用图像格式。JPEG是一种压缩得非常紧凑的格式，专门用于不含大色块的图像。JPEG图像有一定的失真度，但在正常的损失量下肉眼分辨不出JPEG和GIF图像的差别，而JPEG文件只有GIF文件的1/4大小。JPEG不支持透明图和动态图。
    4.TIFF（Tag Inage File Format）格式
    对色彩通道图像来说是最有用的格式，支持24个通道，能存储多于4个通道的文件格式。TIFF格式的结构较其它格式更大更复杂。TIFF格式非常适合于印刷和输出。
    5.TGA（Targa）格式
    TGA格式与TIFF格式相同，都可用来处理高质量的色彩通道图像。另外PDD、PSD格式也是存储包括通道的RBG图像的最常见的文件格式。
    6.BMP（Windows Bitmap）格式
    BMP格式使用索引色彩，它的图像具有极其丰富的色彩，并可以使用16MB色彩渲染图像。此格式一般在多媒体演示、视频输出等情况下使用。
#1    四、Fireworks 3的基本操作
#1    （一）创建和使用热点区（Hotspots）与分割区（Slices）
    1.启动Fireworks，选择“File”、“Open”。
    2.进入Fireworks 3所在文件夹中的Tutorial目录，打开Tutorial-Final.png。
    3.点击工具条上的显示热点区和隐藏区（Show Hotspots and Slices）按钮，一个绿色和蓝色的矩形区域将出现并覆盖在图像中指定的“Hotspots”和“Slices”上。
    4.按下隐藏热点区和分割区（Hide Hotspots and Slices）按钮。
    5.选择“File”、“Open”，打开在Tutorial目录下的Tutorial_Start.png文件，然后选择“File”、“Save As”，将这个文件重新命名为my_work，然后点击保存。
#1    （二）制图工具
    Fireworks含有各种建立标准几何图形的工具，同时也是很好的绘制不规则图形的工具。
    1.画一个矩形
    （1）借助操作窗口中的辅助线（Guides）可以建立一个矩形。如果你看不到这个辅助线（亮绿色线条），从菜单中选择“View”、“Guides”即可。
    （2）从菜单中选择“View”、“Guide Options”、“Snap to Guides”（对齐到网格），以确保鼠标指针（Pointer）能对齐到辅助线（Guids）。
    （3）然后将你的鼠标指针放在工具条的矩形工具（Rectangle tool）上单击选定它。
    （4）最后再将矩形工具（Rectangle tool）指针贴近辅助线（Guides）矩形区域的一个角，按下鼠标并拖动到对角上，就画好了矩形。
    2.笔划（Stroke）与填充（Fill）
    在Fireworks中，线条加色被称作笔划（Stroke），将一个对象加色称作填充（Fill）。在工具栏的Color Wells中显示当前的笔划（Stroke）和填充（Fill）的颜色。你也可以通过它来设置笔划（Stroke）和填充（Fill）的颜色。
    （1）选择矩形工具后，单击“Fill Color Well”上的下拉列表按钮，将打开一个下拉菜单。默认状态下，这个颜色下拉菜单将只显示网页安全（Web-safe）调色板的216色。
    （2）将鼠标指针移动到颜色样本（Color Swatches）上并注意在下拉菜单上端显示的此颜色样本的十六进制值。单击一个颜色样本即可选择填充色。你也可以直接在这个下拉菜单的上端输入一个十六进制值。
    （3）如果你看不到这个笔划（Stroke）面板，请从菜单中选择“Window”、“Stroke”。笔划面板可以让你选择各种各样的笔划设置，包括笔划大小（Stroke size）、笔画形状（Stroke shape）、笔画颜色（Stroke color）和纹理（Texture）等。
#1    （三）JavaScript按钮
    Fireworks可以让你不用写一行Javascript代码就可以轻松的创建一个交互式的按钮。你只需要将一个矩形区域转换为一个按钮并使用按钮编辑器（Button Editor）来完成这个JavaScript按钮。
    1.创建按钮
    （1）选定窗口中已有的矩形区域，从菜单中选择“Insert”、“Convert to Symbol”。在Fireworks中，按钮是对象（Object）的一个特殊类型，被称作符号（Symbols），它们存储在文档的库（Library）中。
    （2）在名称（Name）栏中输入Button。选择按钮（Button）选项，然后单击“OK”按钮。
    注意：此时这个矩形区域将变成一个亮绿色并且在左下角有一个小箭头。这个填充无需改变，相反，这个亮绿色象征一个分割区（Slice）。而这个箭头表明这个矩形区域是一个按钮的例图（Instance）。这个按钮的原始作品被存储在文档的库（Library）中。
    （3）双击该按钮打开按钮编辑器，或从菜单中选择“Modify”、“Symbol”、“Edit Symbol”。在按钮编辑器中，你可以为这个按钮建立它在各种状态下的图形。首先你将要为这个按钮添加一个文字标签。
    （4）选择文字工具（Text tool）然后在按钮编辑器中的矩形区域中心单击鼠标。
    （5）在文字编辑器（Text Editor）中从字体下拉菜单中选择一种字体，输入字体大小，从颜色下拉菜单中选择一种颜色，然后单击居中对齐（center alignment）按钮。
    （6）在文字编辑器对话框下方的大文字栏中输入按钮名称，如our story，然后单击“OK”按钮。现在你将要使用对齐文字到矩形中心的命令。
    （7）使用指针（Pointer），选择这个矩形然后按下Shift键并单击（Shift-click）这个文字。
    （8）从菜单中选择“Modify”、“Align”、“Center Vertical”然后再选择“Modify”、“Align”、“Center Horizontal”。
    Fireworks将移动这个文字到矩形的中心且不会移动这个矩形。这个对齐命令将保持第一次选择的对象的位置，移动第二次选择的对象实现对齐。
    （9）单击按钮编辑器的滑过（Over）选项卡，然后单击复制弹起图像（Copy Up Graphic）按钮。在滑过（Over）选项卡中的图像是指在已完成的网页中当鼠标指针滑过这个按钮时显示的图像。为了使这个图像清楚的反映弹起的动作，你将需要从图像中选择另一种颜色改变这个填充色。
    （10）使用指针（Pointer）选定这个矩形。单击工具栏中的Color Well，选择滴管（dropper），然后单击欢迎消息的棕褐色区域。这个滴管可以让你选取屏幕上的任何一种颜色。你创建的每一个按钮都将连接到一个Internet地址。
    （11）单击按钮编辑器的激活区域（Active Area）选项卡然后单击右下方的连接向导（Link Wizard）按钮。
    （12）单击连接（Link）选项卡。在上端的文字栏中输入一个地址（URL）。使用一个有效的地址（比如：http://togo.myrice.com）以便你能在浏览器中测试这个按钮。
    （13）单击“OK”按钮。最后关闭按钮编辑器。
    2.复制按钮
    Fireworks可以很容易的建立一些外观相似但连接和文字不同的按钮。
    （1）按下Alt键同时拖动这个按钮。使用“Alt+-”拖动，你可以移动一个选定对象的副本。
    （2）如果你现在看不到对象面板（Object inspector），请从菜单中选择“Window”、“Object”。
    （3）在按钮文字（Button Text）栏中输入“Gifts”然后按下Enter键。
    此时将出现一个消息框询问你是希望编辑这个按钮的当前例图（Instance）还是所有例图（Instance）。因为你是复制的Our Story按钮，所以在同一个按钮就拥有了两个例图（Instance）。当你编辑一个按钮，Fireworks将更新所有的例图（instance）。在当前的情况下，你已经拥有了两个例图，所以这里请选择编辑当前按钮。
    （4）单击当前（Current）按钮。
    （5）在对象面板中（Object inspector）单击连接向导（Link Wizard）进入连接向导对话框。
    （6）单击连接（Link）选项卡修改这个连接地址。
    （7）最后单击“OK”按钮。此时可以看到这个按钮上的文字已经更新了。
#1    （四）特殊效果
    Fireworks含有一些可用于路径和位图图像的特殊效果与图像调整命令。当你使用这个效果面板将效果应用于对象后仍会保留可编辑区域。它们甚至可以被移除。
    1.选定上面建立的Our Story按钮。
    2.此时打开效果面板，应用斜角和阴影效果工具使这个按钮产生三维的效果。
    3.单击效果面板上方的下拉菜单，然后选择“Bevel and Emboss”、“Inner Bevel”。这样Fireworks将显示一个斜角的设置选项。
    4.将斜角边缘的宽度设置为3个像素（你可以将鼠标在每一个选项上暂停一下，Fireworks将显示这个选项的名称）。
    5.在效果面板上方单击下拉菜单，然后选择“Shadow and Glow”、“Drop Shadow”。
    6.最后单击“Outside”选项并接受默认设置。
#1    （五）自动操作
    在你工作的时候，Fireworks将记录每一个步骤并将它们放到历史记录（History）面板中。你可以使用历史记录面板来撤销某一个步骤，恢复文档到以前的状态。你还可以通过历史记录面板来自动完成一些重复的步骤。
    1.选定Gifts按钮。
    2.打开历史记录面板，用Shift+单击最后两个步骤，它们的名称是Effect。这两个步骤就是你应用到Our Story按钮的斜角和阴影效果。
    3.单击历史记录面板上的重复（Replay）按钮，Fireworks将把斜角和阴影效果自动应用到Gifts按钮。
#1    （六）蒙板
    蒙板（Masks）覆盖对象是指只显示文档中某一对象的一部分。这里的示例中，我们使用一白色的矩形来掩盖一个咖啡杯图像（Fireworks 3所在文件夹下的Tutorial目录自带），并给咖啡杯加上一个黑色的边框。
    1.使用指针（Pointer）将白色的矩形拖动到咖啡杯上。
    2.使用Shift+单击咖啡杯图像，同时选定咖啡杯图像和这个白色矩形区域。
    3.从菜单中选择“Modify”、“Mask Group”、“Mask to Path”，让矩形覆盖在咖啡杯上。咖啡杯中心的小菱形就是蒙板的手柄（handle）。
    4.用指针拖动蒙扳手柄以使咖啡杯在蒙板里面即可。
#1    （七）热点区
    在Fireworks 3中，将图像的一部分连接到一个URL非常简单。当你想建立一个链接但又不想使用交互状态的按钮时，可以建立一个热点区（Hotspots）来实现。在Fireworks 3中创建热点区（Hotspots）就是建立一个图像映射（Map）。
    1.选定含有“Order Our”的矩形区域。请注意确认选择了整个区域而不仅是文字。
    2.从菜单中选择“Insert”、“Hotspot”。Fireworks会插入一个透明的蓝色矩形表示热点区。
    3.在对象（Object）面板上方的文字栏中输入一个URL地址。
    注意：在对象面板的标题栏显示选定对象的类型。
#1    （八）魔幻翻转
    除了创建按钮之外，Fireworks还可以让你轻松地创建一个奇异的Javascript翻转效果。例如，当鼠标指针滑过一个按钮，除了改变这个按钮的显示状态，你还可以让它改变在这一页中的其他区域的显示，在Fireworks中，这种翻转效果被称作不相交翻转（Disjoint rollover）。
    1.如果你现在看不到图层（Layer）面板，从菜单中选择“Window”、“Layers”。单击Layer1使之成为活动层。
    2.从菜单中选择“Window”、“Frames”，打开帧（Frames）面板。
    3.单击帧（Frames）面板下方的新建/复制帧（New/Duplicate Frame）按钮。
    4.在帧（Frames）面板中单击Frame2。除了这个按钮之外其他的图像都将消失不见了，这是因为这个作品是在第一帧中。而这个按钮将共享于其他的所有帧。接下来，你将要在第二帧上放一个图像作为翻转的来源。打开描图纸（Onion skinning）可以将第二帧与第一帧对齐。描图纸（Onion skinning）让你可以在同一时间看到其他帧的一个稍暗的版本。
    5.单击帧（Frames）面板中第一帧（Frame1）左侧的方框。Fireworks将用一个半透明的形式显示第一帧的内容。你可以把它用作以后的翻转源调用。
    6.如果你看不到库（Library）面板，可以从菜单中选择“Choose Window”、“Library”弹出库（Libarary）面板中存储按钮和其他一些你想再次使用的图案。
    7.单击项目列表中的“Swap Text”。在库（Library）面板上方将显示这个作品的预览。
    8.从库（Library）面板的预览窗口中拖动Swap Text作品并把它对齐到欢迎消息的上面。
    9.在帧（Frame）面板中单击第一帧将它激活，并使用指示器（Pointer）工具选定欢迎消息的棕色区域然后选择“Insert”、“Slice”，让Fireworks插入一个亮绿色的透明的矩形到图像上以表示分割区（Slice）。
    10.在对象（Object）面板中不要选择自动命名（Auto-Name）分割区（Slice）选项，直接在面板下方的文字栏中输入text_slice。这种清楚的分割区命名将帮助你在维护和更新网站时区分分割区图像。
    你可以添加一个Behavior（预先写好的Javascript代码）到Gifts按钮，指向当鼠标滑过按钮时改变的分割区：
    （1）选定Gifts按钮。
    （2）打开Behaviors面板（从菜单中选择“Window”、“Behaviors”），单击加号（+）按钮然后从下拉菜单中选择“Swap Image”。这时将出现Swap Image对话框。
    （3）确认在对话框左侧的分割区列表中已经选定了Text-slice，然后单击“OK”按钮。
    （4）单击工具栏中的隐藏热点区和分割区（Hide Hotspots and Slices）按钮，再单击工作区的预览（Preview）标签，然后将指针移到按钮上指向Gifts按钮并注意右边的消息的变化。
    预览标签所显示的图像、按钮和Javascript Behavior，你会发现这与Web浏览器中所显示的没有什么区别。
#1    （九）图像优化
    Fireworks可以让你优化一个文档中的不同部分。每一个文档有一个默认的优化设置，但是你可以使用分割区来优化一个文档的个别区域。
    首先，确定这个文档的默认设置。这些设置应用于图像中非分割区对象的任何部分。
    1.从菜单中选择“Edit”、“Deselect”取消所有对象的选取状态。
    2.打开优化面板。注意面板的标题栏会显示当前选定对象的设置。
    3.确认面板上方的下拉菜单中选定了“GIF WebSnap 128”。你可以使用面板底部的选项来定制选定部分的优化设置。现在我们在咖啡杯上建立一个分割区，请按以下步骤：
    （1）使用指针工具选定咖啡杯图像，然后选择“Insert”、“Slice”，Fireworks将建立一个与选定对象同样大小的分割区对象。
    （2）从优化（Optimize）面板上端的下拉菜单中选择“JPEG-Smaller File”。
    （3）单击工作区上端的2-Up标签。如果需要的话，使用手形（Hand）工具拖动左边的图像以便你能看到这个咖啡杯，这时Fireworks将显示这个文档的两个版本。面板左侧的图像是原始图像，右侧的是优化后的图像。当你对原始图像作修改的时候，Fireworks同时更新优化的图像。如果Web对象（热点区和分割区）可见，选定左侧的分割区对其进行优化。
    （4）选定咖啡杯分割区后，在优化面板中改变优化设置并注意观察右边图像的相应变化。
#1    （十）导出文档
    当导出你的文档的时候，Fireworks把每一个分割区导出为一个单独的文件。同时生成在浏览器中显示这个文档所需的HTML和Javascript代码。Fireworks可以很轻松的将图像、HTML和Javascript导出到用Macromedia Dreamweaver创建和管理的站点。
    1.选择“File”、“Export”导出这个文档，这将为每一个分区建立一系列的图像文件和一个HTML文件。这样你可以在稍后删除它们，或者导出到另一个新文件夹。
    2.选择一个目录，单击“New Folder”按钮，并给该文件夹命名。
    3.接受默认的基础命名。Fireworks使用建立的HTML文件作为基础名，并根据创建分割区时设置的GIF或JPEG作为扩展名。你可以修改Fireworks命名文件的方法，如单击设置（Setup）按钮，设置导出HTML的其他属性。
    4.从分割区（Slicing）下拉菜单中选择使用分割区（Slcie）对象。这将确保所有的按钮、Behaviors和优化设置在浏览器中得到体现。
    5.从样式（Style）下拉菜单中选择Dreamweaver 3，建立针对Dreamweaver 3优化的HTML代码。
    6.确认位置（Location）菜单中设置的是同一个目录。这个选项让你指定将HTML文件保存到哪里，并能关联到已导出的图像文件。你甚至可以复制所有的HTML到剪贴板中然后直接粘贴到Dreamweaver文件中。
    7.单击保存来导出这个文件。这个HTML文件现在就可以在浏览器中查看或者在Dreamweaver中打开进行进一步的修改。
    8.打开浏览器，选择文件（File）、打开（open），然后选择你导出的这个文档。也可以在Firworks中直接选择“File”、“Preview in Browser”然后选择一个浏览器。如果没有列出浏览器，请选择设置浏览器（Set Browser），添加一个主要（Primary）和一个次要（Secondary）浏览器到列表中。
    9.测试完导出的HTML文件，返回Firworks然后关闭这个文件。
#1    五、使用Fireworks 3制作动画
    在Firworks中创建动画使用的是帧（Frame）的概念。每一个帧（Frame）含有一个不同的图像。你需要把帧中显示的图案放在一个单独的图层中，以共享于其他所有的帧。帧的排列顺序即是播放的顺序，由它来建立一个动作的过程。
    1.打开Tutorial文件夹下的Animated-Start.png。
    2.打开图层（Layer）面板然后单击面板底部的“New”、“Duplicate Layer”按钮。在下面过程中我们将这个缩图移动到新的图层当面。
    3.使用“Shift+”单击每一幅图像，选定Tutorial文件夹下的四个缩图。图层面板中Layer1右边出现的蓝色正方形表示选定部分在这一帧中。
    4.将这个蓝色正方形拖到新建的图层Layer2上。现在你就可以共享Layer1了，也就是说，Layer1中的这些文字将出现在这个动画的每一个帧中。
    5.在图层面板中选定Layer1图层。
    6.打开选项菜单（单击面板上端的下拉列表按钮），然后选择共享层（Share Layer）。注意这时在图层名称的右边将出现一个胶片的图标，这表示这个图层共享于其他的帧。
    7.利用“Shift+”单击再次选定它们，并拖动文字上方的缩图，使它们与最后的四个字母图案对齐。接下来，我们要将这些缩图分配到指定的帧来创建这个动画。
    8.打开帧（Frame）面板，然后单击面板下方的分配到帧（Distribute to Frames）按钮。
    9.接着打开优化面板，然后从导出文件格式菜单中选择（Animated GIF）。你必须使用“Animated GIF”以导出所有的帧。如果使用GIF将只能导出第一帧。
    10.在帧面板中使用“Shift+”单击选定所有的帧，然后从面板的选项菜单（单击面板上端的下拉列表按钮）中选择属性（Properties）。
    11.设置帧的延迟时间为50（半秒）然后按下回车键。通过设置帧的延迟时间来设置动画的速度。
    12.单击应用程序窗口的播放（Play）按钮，开始播放制作的动画。注意这时的播放按钮变为停止按钮。开始播放刚才制作的动画，单击停止按钮停止播放动画。
    13.选择“File”、“Save As”，命名后单击“Save”按钮即可保存动画。如果需要可以在浏览器中测试一下这个按钮。