《firework应用》由会员分享，可在线阅读，更多相关《firework应用（78页珍藏版）》请在金锄头文库上搜索。
1、Firework的主要用途Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。 新推出的Fireworks 3 更是增加了许多脍炙人口的新功能： 1. 可以输出SWF和 Illustrator7文件；2. 与Dreamweaver紧密的配合； 3. 与网页编辑器的结合； 4. 可以直接编辑点阵图； 5. 更方便的Rol
2、l over； 6. 向量模式编辑； 7. 即时预览； 8. 允许加入Photoshop滤镜； 9. 可以读入Photoshop文件； 10. 提供MAC Gamme预览功能； 11. 提供GIF编辑环境； 12. 提供History panel来记录动作； 13. 提供全新的按钮制作工具； 14. 可编辑的操作环境； 15. 资料库（Library）的运用； 16. 提供图形与文字的样式库（Style）。 怎么样？Firework 3如此强大的网页编辑功能是不是很令人眼馋呀？！是不是恨不得马上就掌握这个网页编辑利器呀？！别急！就让我们一起来深入地研究它吧！ 第二节 基本概念firework的
3、矢量图像一、 矢量图像 矢量图像是用包含颜色和位置属性的直线或曲线（即称为矢量）来描述图像属性的一种方法。比如说一个椭圆，它就包括由通过椭圆边缘的一些点组成的轮廓和轮廓内的点两部分。 对于矢量图像，椭圆的颜色取决于椭圆轮廓曲线的颜色和轮廓封闭的区域颜色，与轮廓内单独的点无关。我们可以通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质，也可以移动、放缩、变形，或者在不改变图形显示质量的前提下，改变具有矢量性质的椭圆的颜色。 矢量图形具有独立的分辨率，也就是说我们以各式各样的分辨率来显示矢量图形，它都不会失真。 二、 位图图像 位图图像是用每一个栅格内不同颜色的点来描述图像属性的，这些点就是我们常说
4、的像素。就拿前面的椭圆来说吧，也可以由所有组成该椭圆的像素的位置和颜色来描述。因为编辑位图时，修改的是像素，而不是直线和曲线。因此无法通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质。 位图图像的分辨率不是独立的，因为描述图像的数据是对特定大小栅格中图像而言的，因此，编辑位图会改变它的显示质量，尤其是放缩图像，会因为图像在栅格内的重新分配而导致图像边缘粗糙。在比位图图像本身的分辨率低的输出设备上显示图像也会降低图像的显示质量。 对于矢量图像和位图图像的转化，可以举一个简单的例子来说明，在firework 3.0中将文字变为路径（Convert to Path）时，可以看成是把文字变为矢量图像，
5、若在对象监控板中选择Transform as Pixels，则可以转化为位图图像。 第三节：初识Firework 3启动Firework 3，我们就会发现它并不陌生，它长得和Photoshop十分相像。Firework 3视窗是由菜单栏、工具栏、工具箱和数个浮动面板组成，当我们开启或建立一个新文件时，视窗内还会出现一个绘图工作区，如图1所示。图1 Firework视窗一、 菜单栏 菜单栏位于Firework 3视窗的上方，当视窗内尚未开启任何文件时，菜单栏仅仅提供了“File（文件）”、“Edit（编辑）”、“View（视图）”、“Commands（命令）”、“Window（窗口）”与“Hel
6、p（帮助）”六个菜单，而且菜单中所提供的项目也不多。不过当我们新建或开启一个文件时，菜单栏中的项目就热闹了许多，除了上述的六个菜单外，还增加了“Modify（修改）”、“Text（文本）”与“Xtras（滤镜）”三个菜单，而且菜单中的项目也增加了不少。 单击菜单后，就会弹出一个下拉式菜单，如果其中项目的右方有一个如图2的“箭头”符号，则表示该项目还有一个子菜单，单击该项目就会弹出它的子菜单，其中包含了更多的项目。 图2 菜单栏二、 工具箱 Firework 3工具箱的预设位置是在视窗的左方，它提供了一套极为专业的向量路径绘制工具群，利用这些工具我们可以绘制出十分动人的图形。 将工具箱拖曳到空白
7、的位置，就可以把它变成独立的浮动面板，除此之外，我们还可以将它拖曳到视窗的右方，这可依个人喜好而定。 如果我们想隐藏工具箱，可以单击 “WindowToolbox”窗口 下的 工具 选项，使Toolbox左方的对钩消失即可，若想重新显示工具箱，单击选项，使对钩出现即可。 三、 工具栏 （窗口/工具栏/主要，修改）Firework 3工具栏（ Toolbars）（图3）包括Main（主工具栏）、Modify（修改工具栏）和View Control（视域控制栏）三种工具栏，预设状态下，它们都处于显示状态。 我们可以将这三个工具栏拖曳到任何位置，也可以将其拖曳成独立的浮动面板。 通过钩选和取消钩选
8、“Toolbars”菜单中的“Main、Modify或View Control”选项，我们可以将它们显示和隐藏。 图3 工具栏四、 浮动面板 Firework 3提供了许多浮动面板来方便我们设计图形，但是如果开启了所有的浮动面板，则会占满整个视窗。为了能够获得一个最佳的工作视窗，我们可以自行开启、关闭、缩放或移动浮动面板，甚至还可以将某个浮动面板加入另一个面板群组中，来组合出适合自己的浮动面板。 就拿“Stroke”面板来说吧，我们钩选“Window”中的“Stroke”项目，就可以将其开启；如果我们想要关闭它，只需单击浮动面板右上角的“关闭”按钮即可。如果我们想要切换到“Fill”面板，只需
9、单击“Fill”选项卡即可；拖曳“Stroke”面板到“Frames”浮动视窗中，就可以将它加入其中，或者将其拖曳到空白处，就可以独立成一个浮动视窗；如果我们觉得浮动面板占用了太多空间，双击浮动面板的标题栏，就可以将其最小化，再次双击就可将其还原（图4）。 好啦！发挥你的想象力和创造力为自己设计一个最佳的工作视窗吧！ 图4 浮动面板位于软件右侧五、 状态栏 状态栏位于Firework 3视窗的下方，它可以显示我们所选取的菜单项目、工具箱内的工具或工具栏上的按钮之简介，也可以显示目前所选取的物件种类，除此以外，它还包括了一个视窗检视控制栏来切换我们所要检视的Frame。 第四节：制作一个简单的例
10、子我们等不急了，能不能先演示一把！好吧，我们先来制作一个简单的动画（图1）。 图1 “闪烁的星”效果图一、 新建文件 单击新建按钮 ，弹出New Document（新文件）对话框（图2），设置画布为180x87像素（Pixels），分辨率（Resolution）为：72 像素/英寸（Pixels/Inch），画布颜色选择自定义（Custom）中的黑色，单击“ok”按钮，视窗内就出现了一个绘图工作区。图2 新文件对话框二、 选择工具 左键按住工具箱中的形状绘图工具，我们就会看到有三种形状可供选择，选择“多边形绘图工具” ；双击“多边形绘图工具”按钮，即可开启“Options”浮动面板（图3），在
11、浮出的“Options”浮动面板中选择： 1. 形状（Shape）：Star 2. 棱角数目（Slides）：10 3. 内角角度（Angle）：15 图3 “Options”浮动面板第四节：制作一个简单的例子三、 绘制元件 图4 绘制元件在画布上拖动鼠标即可画出一个十角星（如图4a）；选取“细部选取工具” ，单击十角星，就会发现十角星图片四周出现了许多节点（如图4b），说明十角星已经被选中，选取菜单指令“WindowFill”，开启Fill（填充）浮动面板，在填充浮动面板中我们选择（如图5a）： 1. 填充方式：Solid 2. 填充颜色：白色 3. 边缘(Edge)：反锯齿（Anti-Al
12、ias） 4. 填充纹理（Texture）：Fiber 5. 纹理亮度值：0% 同理打开“Stroke”面板并将其设置为（如图5b）。 图5 Fill和Stroke属性浮动面板用鼠标左键按住一个棱角的节点，拖动鼠标即可改变棱角的位置和方向，这样我们通过改变棱角的位置和方向就可以为十角星设计出一个新的形象（如图6a）。 选中白色十角星，然后Ctrl+c、Ctrl+v复制两个十角星，将它们的填充分别改为绿色、红色，其他不变（如图6b）。 图6 改变外观 复制图形选中白色十角星，按下F8键，出现了元件属性对话框（Symbol Properties），我们为这个元件起一个名字，在名字（Name）栏中输
13、入“xing1”；类型（Type）选择Graphic，单击“ok”按钮如（图7a）。 同理，将绿色、红色十角星定义为xing2、xing3元件。 选取菜单指令“WindowLibrary”开启“Library（资料库）”浮动面板，就会发现我们所编辑的十角星已经被加入到Library中了（图7b）。图7 加入资料库另外，原来画布内的图形自动转换成了分身（Instance），当我们选取元件分身时，它的左下方会出现“箭头”图示。（如图8） 图8 元件的分身如果对刚才的元件不是很满意，我们还可以进一步编辑，双击Library中的元件图形，进入元件编辑窗口，我们就可以按照自己的意愿去进一步修改元件，编辑
14、完元件后，将窗口关闭，这时我们就会发现不仅元件有了变化，而且分身也发生了相应的变化。 这种本体与分身的观念，很适合用来制作动画，我们可以通过修改元件方便地修改所有的分身；另外，由于分身是元件的复制品，因此，使用分身还可以大量减少GIF动画文件大小；如果不想让某个分身跟随元件而改变，我们可以这样来实现：选中该分身，然后选取菜单“Modify/Symbol/Break Link”切断分身与元件之间的链接，这时，该分身就成了一个独立的对象，将不再受元件的影响。 第四节：制作一个简单的例子四、 制作动画 1. 选取“细部选取工具” ，按住Shift键，连续选中绿色、红色十角星，按下Delete键将它们
15、删除。 2. 选中一般选物工具 ，用左键按住白色十角星，将它拖到画布的右上角。 3. 首先单击“变形工具” ，选中右上角的十角星，它的四周就出现了八个黑色的小方块，拖动它们可以改变图片的大小，这就是我们经常说的拖拽手柄（如图8a），拖动拖拽手柄右下角的小方块将十角星缩小一点；把鼠标放到拖拽手柄外面工作区域的空白处，我们就会看到一个环绕箭头，拖动鼠标绕着拖拽手柄旋转，看！十角星在随着鼠标的旋转而不断地旋转，现在我们将十角星旋转180度。然后选取菜单指令“WindowObjiect”开启对象监控板，选中十角星，将不透明度设置为19（如图8b）。图8 变形与透明度的更改 4. 从Library拖拽白色十角星元件到画布的左下角，就出现了一个白色十角星的分身，同理，我们将它的不透明度设置为45。 5. 按住
