前言
第一章 用Fireworks切割图形
第二章 用Fireworks制作具有动态效果的切图
第三章 如何做动画
第四章 Fireworks的绘图工具的使用
第五章 文字工具以及文字特效
来自爱搜书:
前 言
嗨，大家好！
我是Arky，自从上一期的《中国网络指南》中把Dreamweaver2给结果后，我一直在思量，今天该拿什么东东和大家聊呢...
对了，还记得Dreamweaver2有个弟弟叫Fireworks2，虽然他出生晚些，可论名气不比Dreamweaver2和Flash3小。又看了《PC&IT周末特刊》中连载的《Fireworks之笑傲江湖》，觉得它太值得一写了。不过，话再说回来，至于Fireworks2，Arky就不能象对付Dreamweaver那样信手拈来了，我这是一边学习一边汇报，至于好坏如何，也就由各位读者朋友评判了。
Fireworks的来头实在不小，它使Web作图发生了革命性的变化，因为 Fireworks是第一个彻底为Web制作者们设计的软件。作为一个图象处理软件，Fireworks能够自由地导入各种图象（如Macintosh的PICT、FreeHand， Illustrator，CorelDraw8的矢量文件、Photoshop文件、GIF、JPEGBMP、TIFF），甚至是ASCII的text文本文件，而且Fireworks可以辨认矢量文件 中的绝大部分标记以及Photoshop文件的层。
而作为一款为网络设计而开发的图象处理软件，Fireworks能够自动切图、生成鼠标动态感应的javascript等等，而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图象生成器（Export功能）。
在今年的2月14日（情人节？！），Macromedia公司发布了Fireworks 2.0。与一代相比，Fireworks 2在许多关键功能上作了彻底的更新。比如：增加了式样（style）功能使用户在几秒种里就可以作出专业水平得特效、在层方面增加了多种效果（有阴影、凹凸、幻灯...只是越看越象Photosho5 的Layer Effect）、新增得object面板可以让您更加直观、方便地控制单个图案的属性、并且增强了与dreamweaver的联系，可以直接生成dreamweaver的Libaray甚至能够导出为配合CSS式样的网页及图片！
在整个教程的安排上，我想可能和dreamweaver2的有些不同。因为我也是摸索着前进，所以Fireworks2的教程将由一个个实例组成。我无法给一个详细的目录索引，因为自己也不知道下次的教程中将说些什么，但部教程绝不会让您看了失望，因为它至少能够告诉您如何去使用Fireworks2制作自己心仪的图形。
来自爱搜书:
第 一 章
用Fireworks切割图形
做过网页的朋友一定都知道：网站好，网页就得小。在不减少内容的情况下，网页当能够做得越小越好。而给网页瘦身最有效方法就是减小图片的尺寸，但当您不得不在网页中放入一大幅图象时，是否还有更好的解决之道呢？
021yin.com /看到使用这个方法的实例。
但传统的切图工作十分繁琐，许多设计者都是使用Photoshop类软件将图一片片分好，然后在分别保存为不同色深的gif图象，虽然可以使用action之类的自动执行命令集，但实际工作量依旧十分惊人，而且非常容易切错尺寸。
现在用了Fireworks就可以非常轻松地切割图片了，首先用Fireworks打开要切割地图形文件（File > Open），当图片打开后选择工具栏最右下方的切割工具（SliceTool），在图中按住鼠标左键任意画出想要的切割效果（注意不要将选区重叠），图中那些红线表示就是最后生成的表格分栏情况。
等全部的切割区域完成后选择"FILE > EXPORT"进入导出，在Format 中选择gif，再根据图象的具体情况设置色深、调色板和透明色，然后按下 "Next"。
最后再导出成HTML文件的对话框中指定保存的目录，在"slicing:" 选项中选择"Use Slice Objects:"按照刚才划分出的切割情况来切图， 并分别保存。在"Style选项"中选择"Generic"导出成标准的HTML源码。 OK，如果要和Dreamwever一同使用的话，可以选择"Dreamweaver Library.lbi"将导出为DREAMWEAVER2的一个模板，而"Dreamweaver" 选项将导出成DREAMWEAVER作出来的网页源码。
就这样，仅几秒种的时间，就完成了一个非常专业的图形切割。怎么样，您是不是感受到了Fireworks的强大功能。
来自爱搜书:
第 二 章
用Fireworks制作具有动态效果的切图
在上一章中，我们说到用fireworks2进行切图，可以将一个大图片分割成不同色深的多个小图片，并且生成相应的网页文件或代码，从而减小网页的重量。今天我要接着告诉您的是，功能强大的fireworks2不仅可以制作静态切图，更能够导出javascript动态特效！
为了使文章更加生动，能够被您轻松理解，所以我想用Fireowlks2目录下的Tutorials\Tutorial_6\T6_Images目录中monitoir.gif作为素材。在fireworks2完全安装后其自带的十个特效制作教程（你可以在Help菜单中找到它们）中的第6讲就关于是这种具有动态效果的切图，可惜是E文的:(
打开monitor.gif 件后你可以看到那上面画的是一个电视机，现在我们要做的是将这个电视机放入一个网页，并且当浏览者的鼠标按下电视机上的开关后，会在屏幕中播放内容。
第一步，要在图象上制作用来调用javascript的热区，制作热区的方和上一章中切割图象的方法一样，都是使用工具栏最右下方的切割工具 （ SliceTool）。由于我们设想中的这个javascript是通过按下电视机开关后在屏幕上出现变化，所以需要定义两个热区，分别是电视机开关和电视机屏幕。
然后选择"windows > Object"（Ctrl+I）选项，打开Object面板。先选中电视屏幕的热区，Object面板即将显示这个热区的属性，其中的连接地址默认为"No URL(noHREF)"也就是当前网页的连接（#）；项内容为鼠标放到图片上时显示的提示；这下面那个红色的靶心是target，用来确定连接标签的目标的，在这儿就不多说了；最关键的是：不要激活 target下的"Auto-Name Slices"功能，而需手动给这个切割热区起一个名字，这样做是为了在指定behavior时能够方便的辨认目标。还要注意的是在给slice命名时，不能使用中文，否则生成的javascript 代码会在浏览器中长时间报错。在这个例子中我给屏幕热区起的名字是"screen"， 再以同样的方法给电视开关取名为"button"。
接着做一个电视上要显示的图象，选择"File > New"（Ctrl+N） 命令新建一个和屏幕热区大小相同的图片（注意：尺寸过大或过小都会被 javascript缩放到屏幕热区的大小）。新建文件后，您可以使用工具栏上各类工具随心所欲地画出自己喜欢的东东（工具栏中各个绘图工具的使用方法将在以后的教程中做详细介绍）。对自己的作品满意了吗？您画完后请选择"File > Export"（Ctrl+Shift+R）将图象导出为网络图形。
Fireworks的图象导出功能非常强大，但现在您只要一路NEXT就可以了，并将生成的gif文件保存到指定的目录下。
然后回到我们刚才编辑的电视机画面，选定开关热区，再选择" Windows > Behaviors"（Ctrl+Alt+H）选项，打开behaviors面板。按下添加按钮，选择"Swap Image"，在随后弹出的Swap Image对话框中的" Swap Image in Slice"选项中选择"screen"热区（也可以在右边的热区画面中直接选择screen热区，这样做就可以让button热区调用一个使screen 热区产生变化的javascript）；在"Source of Swap"中选择"Image File"并在浏览面板中指定刚才制作的那个gif图象。最后激活"Restor Image onMouseOut"（激活这个功能后，浏览者将鼠标离开调用javascript 的热区后，发生变化的图象将恢复正常。
当上面这步完成后，behaviors面板中将出现一个"OnMouseOver"的件处理器，这就说明刚才做的热区已经成功调用了javascript。但我们期的效果是当鼠标按下开关后才在电视屏幕中显示内容，所以请按下" OnMouseOver"旁的下拉菜单按钮，在弹出的菜单中选择"OnClick"。好，到这儿基本上该完工了。想看看作品的效果如何吗？选择"File > Preview in Browser > Preview in ..."（F12）命令，就可以在新窗口 中预览刚才的作品了。
达到预期效果了吗？满意的话就可以导出成品了，这儿有个小技巧， 由于fireworks的预览功能已经生成了临时的图形和HTML文件，所以如您使用IE5行预览的话，可以直接在自己满意的预览窗口中将所以文另存，就可以免去导出步骤而得到完整的作品了。如果您没有IE，那只能乖乖地使用导出功能，具体地导出方法和我们在上一章中所说的静 态切图的导出方法相同，在这儿就步重复了。
来自爱搜书:
第 三 章
下面告诉你如何做动画，COOL！
用Fireworks2制作动画一共有三种方法，由简到难的排列起来分别是：合并图象形成动画、使用符号（Symbol ）生成动画效果和手工绘制。
合并图象形成动画，顾名思义就是将一系列图片按序排列生成不同的帧而形成动画（很象Director中的Space to time功能），不过这种排列完全是程序自动执行的，免去了大量的手工操作。 具体的方法是这样的（当然使用这种方法的前提是必须有一连串连续 的图片）：选择"File > Open Multiple "命令。进入系列图片所在的目录，然后按次序将一连串的图片加入（"Add"命令）对话框左下部的窗口，并且激活"Open as Animatio"选项，再按下"Done"按钮就OK了。
在动画生成后，按下"Windows > Frame"（Ctrl+ Alt+K）命令，您就看到原来的一系列图片都按次序地从Frame1往下排到底。按下屏幕右下角的播放键就可以浏览动画效果了。这种纯粹的懒办法最合适我这样画不来线条的人了，一次有只用了10 秒钟就搞定了一个小鸟飞飞的图片，效果棒极了！
不过，要是手头没有现 成的连续图片，那只能劳驾，自己亲自动手了。而许多图画中有规则的动态效果若是用手工制作，既费时间也未必能够达到理想的效果。所以Fireworks2提供了一个Tween功能，使用户可以指定程序生成动态过度效果（感觉就更Flash里的一样）。
在绘制动画前，我们事先必须明确动画的工作原理。我想简单的说，动画是有不变的物件（object）和会变的物件两部分组成。通常不变的物是只如背景之类始终在动画中显示的物件，而会变的物件是指通过变化 形成动画的物件。所以在制作动画之前得先制作不变的物件，为此Fireworks2提供了一个共享层的概念（Share Layer）。
我们都知道，动画是由一个个不同的帧（Frame）组成的，而共享层就是在所有帧中都显示的一个层，这样我们只要将动画中不变的物件全放在这个层中，以后只需要修改一个帧的共享层中内容就可以使所有的帧都达到相应变化，大大减少了工作量。设置共享层的命令是Layer面版的弹 出菜单中的"Share Layer"命令，设置为共享的层在Layer面版中都有一个特定的共享符号（Web Layer是系统自动设置的共享层，用于放置热点、切割区）。
在完成不变的物件（object）后就可以使用Tween功能制作动画效果了。Tween功能的原理是将物件（object）转化为符号（symbol），然后确定符号的初始和结束样例（instance），再将这些样例转换为具有过度 效果的连续帧（frame）。Tween功能支持物件的位移、旋转、缩放、扭曲、 以及透明度和层效果（effect）的过度。下面我来举个实例：通过十个帧让我的名字"Arky"从图象的左上角移动到右下角同时逐渐变深。
使用工具栏中打字工具（type）在图象的左上角键入"Arky"，字体、大小任意。选择"Windows > Object"（Ctrl+I）命令显示Object面版，在Object面版中将物件的透明度设为20。
选定键入的文件（此时文字及为组成图象的一个物件--object），然后选择"Insert > Symbol"（Ctrl+Alt+Shift+M）命令，将这个物件转变符号。
将这个符号复制到图象的右下角（千万别跟我您不知道如何复制！告诉您最简单的方法是拖动物件以后再按下Alt键）。并且在Object面版中 将物件的透明度设为100。此时的符号已经变成了样例（instance）
按住鼠标左键拉一个大选框，同时选定样例和符号，然后选择"Insert > Tween"（Ctrl+Alt+Shift+T）命令，在弹出窗口中添入所要设定的过度帧数，并且激活"distrubute to Frame"选框，OK，成功。
按下播放按钮欣赏自己的作品吧。
用类似的方法还可以制作更多的动态过度，赶快动手试试吧:)
最后的一种动画方法是手工绘制，这可是一件累人的活，而且要手工画动画，您必须熟悉应用工具栏中的各种绘图工具。因此，我准备在以后 的教程中陆续地向您介绍各种绘图工具的使用方法。而在这儿要告诉您的是Fireworks2中新增的洋葱皮功能（Onion Skining），为以后的教程埋 下伏笔。
洋葱皮功能（Onion Skining）就象我的朋友们画动画用的半透明的纸一样，让用户在编辑当前帧的同时可以看到此前或此后的帧中的内容。这样在手绘动画时可以方便地确定图案路径。您可以在Layer面版（Windows > Layer）中找到洋葱皮功能，其中的选项分别是：
No Onion Skinning 关闭洋葱皮功能；
Show Next Frame 在当前帧中显示下一帧的内容；
Before and After 在当前帧中显示前一帧和下一帧的内容；
Show All 在当前帧中显示所有帧中的内容；
Custom Enter 让用户设置洋葱皮的显示功能；
Multi-Frame Editing 使用户可以透过洋葱皮编辑其他帧中的内容
021yin.com
第 四 章
Fireworks的绘图工具的使用
在上一章中，我们了解了用Fireworks2制作动画的三种方法。当然喽，要做出最佳的动画效果就不能偷懒，必须用手绘方法。所以在这章中我要告诉你一些关于Fireworks的绘图工具的使用方法。首先是矩形工具，我想这个工具可以说是Fireworks，甚至是所有绘图工具都必不可缺的一个基本元素。你可以在Fireworks2的工具栏中一眼 就认出它，就是左边第五个矩形按钮。如果在这个位置上找不到矩形工具，而图标是一个椭圆或者六边型的话，只要用鼠标在图标上按一会，就可以在随后弹出的菜单中选取矩形工具了。矩形工具有两个主要的功能--创建矩形（当然包括正方形）和创建圆角矩形。画个矩形当然人人都会，只是在画的时候有几个功能键，我想应该说一说：按住"shift"键可以画一个正方形，而按住"alt"键，画出的矩形不是从左上方向右下方长大，而是由中心向四周发展，很有趣的，试试看呀:)另外，同时按住"shift"和"alt"键，就可以画一个从中心张大的正方形了。要画圆角矩形，只要在矩形图标上双击，呼出"option"面版，在"corner"一栏里填上圆角的大小，以后画出的矩形就带圆角了。如果要改画尖角矩形的话，只要将corner设为0就行了。
和矩形工具属于同一类的还有椭圆工具（elipse）和多边形工具（polygon），它们的用法和矩形工具相同，当然也包括功能键的使用。不过，多边形工具（polygon）还可以制作星形，设置的方法是双击多边形工具工具的图标，呼出option面版，在"polygon"选项中选择star，接着就可以画出星形了。并且还可以在option面版中设置星形的夹角大小，方法很简单，这儿就不多说了。
和矩形工具一样属于基本模块的还有线形工具。只是画直线比画矩形还简单，没有什么属性可以设置的。当然线形工具也支持功能键，按住" shift"键可以画出水平或竖直的直线，而按住"alt"键可以画出45度直线。 除此之外，Fireworks还有"铅笔（pencial）"工具和"刷笔（brush）"工具（工具按钮就在矩形工具的下面）。这两个工具给用户提供一个自由手绘的方式，您可以用它画出各种各样的曲线、直线，甚至是乱七八糟的线性图案。不过单靠鼠标来画，要得到令人满意的效果非常困难，如果您有压敏书写板的话，这两个工具的效果就会好得多。
而对于使用鼠标的用户来说绘制曲线的最好方法是使用"钢笔（pen）"工具。pen工具可以帮助您绘制路径（path），一条路径是由曲线连接 起来的多个节点，而每给节点的两侧各有以个句柄，用来控制此节点两旁的曲线方向，您可以通过修改节点和句柄的方向或长短来修改整条曲线的 形状。
由于Fireworks是一款结合了矢量和点位图编辑于一身的图象编辑软件，所以无论是使用矩形工具还是使用铅笔或者钢笔工具绘制出的图形，都是基于路径（path）的形状。路径一般有两中方式--闭合的路径（closed path，比如矩形或多边形）和敞开的的路径（opened path，比如用线形工具绘制的直线）。而所有的路径都可以被"副选（subselection）" 工具（快捷键为"a"）选取，再次进行编辑。
路径的着色方法分为描边（stroke）和填充（fill）两种，描边的作 用是让路径拥有不同的笔触，而填充是使用不同的材质填满路径所包围的 区域。为了说得更生动一些，请您打开Fireworks，新建一个图象（"File > New"），图象的大小随意，选择透明背景（transparent）。然后按下"d"将前景色和背景色恢复到默认色（黑与白），再使用pan工具制作一 个半圆形的路径。
选择"Windows > Stroke"（Ctrl+Alt+B）打开描边工具面板，然后按下"v"键使用"选择（pointer）"工具选定刚才绘制的半圆形路径。选定路径后描边工具面板将显示此路径的描边情况（本例中的描边情况是 Pencil/1 pixel soft/color:black/texture:Grain 0%）。在这个描边面板中，您可以看到Fireworks不仅提供了大量的描边选择，并且允许用户自由定义描边笔触以及描边时使用的材质（texture）和质感大小。
比如，我们需要将当前的路径使用具有小点材质的红色喷枪描绘，只要在描边面板中将Pencil改为Air Bruch ，将颜色改为红色，并在texture中选择"Dots"将质感设为80%，最后Apply一下就行了。
如果您觉得一个新建描边效果很不错，希望保留的画，就请按下描边 面板的弹出菜单按钮，选择"Save Stroke as"就可以将特效笔触保存下来，以便日后再次使用。
填充面板的使用方法和描边面板的非常相似，您可以选择"Window > Fill"（Ctrl+Alt+F）打开填充面板。Fireworks2提供多达15种填充特效，其中的一些十分怪异有趣，我建议您一定要亲自试试，如果有新的发现不要忘了及时将效果另存，以便日后使用。
在本章的最后，我告诉您一个小技巧。Fireworks的描边和填充的材质都是可以扩充的（就和phototshop一样）！如果您找到自己喜欢的连续性图案，只要用Fireworks将之打开，然后选择"Xtra > other > Convert to Alpha"将图片转变成灰度图象，然后选择"File > Save as"给它起个好听的名字并保存在Fireworks目录下的Setting文件夹中的Textures目录下。当再次启动Fireworks时就可以使用您自己的texture了。
来自爱搜书:
第 五 章
文字工具以及文字特效
这章教程，我想单单给你介绍Fireworks的文字工具以及文字特效，之所以要将对文字功能版块的介绍独立成一章，是因为Fireworks中的文字以及相关功能，是目前我所见的图象编辑软件中最强大，最完善！
＃完整的文字格式化功能，支持双字节文字
这是所有成功的图象设计软件所必备的特点，当然Fireworks也不例外。您可以在工具栏中按下文字按钮（图标为"A"的那个按钮），再在工作窗口中单击以呼出文字编辑面版（Text Editor）。Fireworks的文字面版十分直观，完全支持双字节文字（当然，前提是系统拥有相应的字库 ），使用的方法与普通图象编辑软件中的同类功能十分相似，如果您有一些图象设计经验的话，完全可以轻松上手。但与众不同之处在于：Fireworks2的Text Editor功能支持定义单个文字的属性。当您在Text Editor中输入一串文本后，可以自由地改变此文本中任意字的属性。也就是说，用户可以在Text Editor面版中同时输入一串字体、颜色、大小等等属性完全不同的语句。
不仅如此，在用Fireworks编辑图片的过程中，文字始终保持一种特殊路径形式。所以用户可以随时随地地修改文字内容，而不会象Photoshop5那样，一旦进行"Rend Layer"操作，用户就再也无法对文字层中的内容 进行修改了:(
＃方便的文字色彩填充功能
Firework将文字作为一种特殊的物件（object），它既能够让Text Editor工具识别，对文字的内容进行修改，又允许用户象编辑普通路径那 样给文字着色、描边（方法详见教程的上一章）。这种特殊的设定给用户 带来了前所未有的方便，甚至当用户使用变形工具（快捷键为"Q"）给 选定的文字进行变形后，聪明的Firewoks仍然能够自动匹配变形后的文字 的大小，依旧允许用户使用Text Editor对文字进行编辑。
＃别出心裁的文字对齐选项
Fireworks 提供了一个矢量绘图软件所特有的文字对齐功能。您只要在画面中文字上单击右键，就可以在随后弹出的菜单中的"Align"一项内选择文字的对齐方式。Fireworks2共提供了八种文字对齐方式：
左对齐（left）；
右对齐（right）；
水平居中（center-1）；
左右扩展（Justified-1，这种方式是通过调节文字的水平间距使文字按文字框的长度对齐，使用非常广泛）；
左右拉伸（Stretched-1，这种方式是通过拉伸文字的宽度，使之按文字框的长度对齐）；
顶端对齐（top）；
竖直居中（center-2）；
底对齐（bottom）
上下扩展（Justified-2，这种方式是通过调节文字的垂直间距使文字按文字框的高度对齐，使用非常广泛）；
上下拉伸（Stretched-2，这种方式是通过拉伸文字的高度，使之按文字框的高度对齐）；
＃文字的特色效果
Fireworks2 新增一个Style功能面版（"Windows > Styles"快捷键 为Ctrl+Alt+J）。Style功能提供了近300种内值的路径填充和描边的特效，可以最快捷地生成适用于网页制作的文字特效，当然，Style也适用于所有普通路径。并且Fireworks2允许用户自由扩充Style，您可以将自己新创的路径定义为一个Style（方法是使用Styles面版的弹出菜单中的"New Style"命令），以便今后反复使用。
＃文本环绕路径功能
这无疑是Fireworks2的文本功能中最激动人心的效果，这个以前只有在矢量绘图中才可能具备的功能大大缩短了用户制作环绕文本的工序。您只须选定文字和文字要环绕的路径，然后选择"Text > Attach to Path" （快捷键为Ctrl+Alt+Y）,就可以将文字结合到特殊的路径上。并且，结合后的文字依旧可以通过Text Editor进行编辑，也可以使用不同的Align方式定义不同的路径围绕效果，还可以用上述的方法修改文字的填充效果或套用Style。
＃查找和替换功能（Find & Replace）
这样的新增功能听上去似乎是一款文字编辑软件才应该具备的，不过细心macromedia已经为用户考虑到了方方面面，Fireworks2中的Find & Replace功能（"Windows > Find & Replace"）不仅提供了普通的文字查找替换功能，并且可以修改文件中使用的颜色、字体、URL！这些匠心独具的设计使Firework2成为最具创造力的图象设计软件，它完全体现了macromedia的设计决心--让您的工作更具效率（Productivty）。