《fireworks应用》ppt课件.ppt

第14章 Fireworks 应用,4.1 Fireworks 基础 4.2 处 理 位 图 4.3 制作 Web 特效 4.4 绘 制 图形,4.1 Fireworks 基础,4.1.1 Fireworks 的界面 启动 Fireworks MX 之后，默认情况下并没有打开任何文档，按【Ctrl + N】键新建一个文档或者按【Ctrl + O】键打开一个文档，此时它的界面如图4.1 所示返回目录,图4.1 Fireworks MX 界面,4.1.2 常用操作 1．新建 Fireworks 文档 新建文档的步骤如下 （1）单击“文件”菜单中的“新建”命令（或按【Ctrl + N】快捷键），打开“新建文档”对话框，如图4.3 所示图4.3 “新建文档”对话框,,（2）在打开的对话框中输入宽度（文档在水平方向上的尺度）和高度（文档在垂直方向上的尺度）的设定数值，单位可以是像素、英寸或者厘米 （3）输入指定的分辨率，单位是“像素/英寸”或者“像素/厘米”对于在 Web 上显示的图像，通常设置为“72 像素/英寸” （4）画布颜色的设置有3种选择，分别为“白”、“透明”和“自定义”如果指定自定义颜色，可以使用颜色面板进行选择。

（5）将所需的选项设置好之后，单击“确定”按钮，则可以打开新文档进行创作2．设置文档的显示大小 Fireworks 可以在 6% ~ 6400% 的缩放范围内显示图像可以使用3种方法放大与缩小图像的显示：① 在工具面板（如果工具面板没有显示，请选择“窗口”菜单中的“工具”命令）中单击“缩放工具” ，在需要放大的位置单击，则被单击的图像就会依照放大比例的排列依次放大显示，如果选择了放大镜工具后，按住【Alt】键单击画布，图像会依照缩小的比例逐次缩小；② 从文档窗口的缩放比例列表中选择一项放大或者缩小比例来进行图像的缩放操作，如图4.1所示；③ 单击“视图”菜单中的“放大”命令来放大图像，也可使用【Ctrl + =】快捷键来放大图像，单击“视图”菜单中的“缩小”命令来缩小图像，或者按【Ctrl + -】快捷键来缩小图像3．改变图像大小 制作 Web 图像时，在很多情况下都需要扩大或者缩小图像的大小，以便适应 Web 页面的要求要改变图片的大小，可以选择“修改”菜单中“画布”命令，然后在其子菜单中选择“图像大小”命令，再在打开的“图像大小”对话框中进行设置，如图4.4 所示图4.4 “图像大小”对话框,4．改变画布设置 5．使用标尺、引导线和网格 6．以不同的模式显示图像,,7．将图像优化导出为 GIF 格式 要使图像能够应用在网页上，通常需要将其导出为 GIF 格式或者 JPEG 格式。

图4.5 GIF 格式优化面板,为了预览优化后的图像效果，单击图像窗口上的“2 幅”标签进入该模式显示图像，如图4.6 所示图4.6 在文档窗口预览图像导出效果,8．将图像优化导出为 JPEG 格式,图4.7 JPEG 格式优化面板,,对于 JPEG 格式，图像质量是指图像被压缩后的质量，它是由图像文件的压缩程度来决定的，图像压缩程度越大，优化后的图像文件越小，则图像质量越差，即效果最差；图像的压缩程度越小，优化后的图像文件越大，则图像质量越好平滑是另一种有效减小图像文件大小的手段，设置平滑度后，图像会变得光滑（实际上是图像变得模糊了），图像文件也就相应地变小了，即平滑度越大，文件越小4.2 处 理 位 图,4.2.1 位图处理工具概览,图4.8 位图处理工具,返回目录,4.2.2 简单的位图处理实例,,4.3 制作 Web 特效,4.3.1 制作简单动画 动画的基本原理就是通过多帧连续播放而产生动态效果在 Fireworks 中可以方便地制作这样的多帧动画，下面以“流动的线”动画为例来介绍制作动画的基本过程返回目录,制作“流动的线”动画的步骤如下 （1）按【Ctrl + N】键新建一个文档，设置文档宽度为 300 个像素，高度为 5 个像素，分辨率为 72 像素/英寸，设置画布的颜色为“白色”。

（2）单击“工具”面板中的“刷子”工具 ，在“属性检查器”中设置其属性，然后在画布上拖动鼠标，绘制一小段线，如图4. 12 所示图4.12 利用“刷子”工具绘制线段,（3）在文档中的画布区域以外单击，取消选中所画的线段在“属性检查器”中更改“刷子”的颜色，然后在画布上绘制第 2 条线段，如图4.13 所示图4.13 利用“刷子”工具绘制第 2 条线段,（4）重复步骤（3），再绘制若干条不同颜色的线段，效果如图4.14 所示图4.14 在第 1 帧绘制的所有线段,（5）在“帧”面板右下角单击“新建/复制帧”按钮 新建一帧，此时帧面板如图4.15 所示在“帧”面板中单击“帧 1”后按【Ctrl + A】键将该帧上的所有内容选中，然后按【Ctrl + C】键复制单击“帧 2”，然后按【Ctrl + V】键将其粘贴图4.15 “帧”面板,（6）用“指针”工具 单击最右边的一条线段将其选中，按【Ctrl + X】键将其剪切，然后用“指针”工具 框选择其他所有线段，按右方向键使它们右移，接着按【Ctrl + V】键将刚才剪切的线段粘贴，并将其拖动到画布的最左边，最后的效果如图4.16 所示（相当于图4.14 中的 ② 线段移动到了最左边，而 ① 整体右移）。

图4.16 第 2 帧的效果,（7）用步骤（5）~（6）相同的方法再创建几帧 （8）选择“文件”菜单中“导出预览”命令，在弹出的“导出预览”对话框的“选项”选项卡中选择“格式”为“GIF 动画”格式，如图4.17 所示图4.17 设置动画格式,（9）单击“导出预览”对话框上的“动画”选项卡，在该选项卡中按住【Shift】键分别单击第 1 帧和最后 1 帧将它们全部选取，在帧延时（即播放每帧用的时间，单位为1/100 秒）框中输入“30”如果要让动画循环播放，请确认在该选项卡下方选中的是“循环”按钮 ，并在后面的选项中选择“永久”选项，如图4.18 所示；如果只想让动画播放一次，请在该选项卡下方选中“播放一次”按钮 图4.18 设置动画帧延时,（10）单击“导出”按钮将文件导出，然后保存文档，之后按【F12】键即可在浏览器中预览动画效果 如果要将动画应用到网页中，请启动 Dreamweaver，打开需要插入动画的网页，在“插入”栏的“常用”选项卡中单击“图像”按钮 将动画插入到网页中即可4.3.2 制作按钮 以下通过一个简单实例说明在 Fireworks 中制作按钮的步骤。

（1）按【Ctrl + N】键新建一个文档，在“新建文档”对话框中设置宽度为 80 个像素，高度为 30 个像素，分辨率为 72 像素/英寸，设置画布的颜色为“白”，最后单击“确定”按钮 （2）单击“工具”面板上的“圆角矩形”工具 ，然后在“属性检查器”中的“矩形圆度”框中输入“60”，在画布上拖动鼠标绘制一个圆角矩形 （3）单击“资源”面板中的“样式”选项卡，然后选择一种样式应用于刚绘制好的圆角矩形，如图4.19 所示图4.19 给按钮图形应用样式,在 Fireworks 中，用户可以通过使用样式将统一的外观应用到任何对象上，样式可以包含许多信息，如笔画、填充、颜色、字体和特效等在此步骤中还可以在“属性检查器”设置一些特殊的效果，如斜角、浮雕、阴影等 （4）按【F8】键将圆角矩形转化为按钮元件，在弹出的“元件属性”对话框中选择“类型”为“按钮”，在“名称”文本框中输入“按钮”，最后单击“确定”按钮，如图4.20 所示图4.20 “元件属性”对话框,（5）用“指针”工具 双击画布上的按钮元件进入按钮的编辑状态，此时默认是按钮的“释放”帧状态，如图4.21 所示图4.21 “按钮”编辑器,（6）单击“工具”面板上的“文本”工具 ，然后在“属性检查器”中设置文本的字体为“华文行楷”，大小为“18”，颜色为“白色”，样式为“粗体” ，其他设置保持默认，最后输入文字“游戏厅”，用“指针”工具 调整文本位置，如图4.22 所示。

图4.22 按钮“释放”状态,（7）单击“滑过”标签，并单击窗口右下角的“复制弹起时的图形”按钮用“指针”工具 选择按钮图像，在“属性检查器”中或“工具”面板中设置一种填充颜色（其十六进制值为 #CC00FF） （8）单击“按下”标签，并单击窗口右下角的“复制滑过时的图形”按钮用“指针”工具 选择按钮图像，在“属性检查器”中或“工具”面板中设置一种填充颜色（其十六进制值为 #FF00FF） （9）单击“完成”按钮，然后选择“修改”菜单中“画布”命令，然后在子菜单中选择“符合画布”命令10）单击“工具”面板中的“隐藏切片和热点”按钮 ，然后单击文件窗口的左上角的“预览”标签，将鼠标移动到按钮上并在按钮上单击鼠标左键预览按钮的效果，如图4.23 所示图4.23 预览按钮效果,释放状态,滑过状态,按下状态,（11）按【Ctrl + S】键，在弹出的“另存为”对话框中输入一个文件名，按“保存”按钮将文件保存4.3.3 制作翻转图 翻转图是一些可以在浏览器中显示的图形，当鼠标移动到这些图形上或单击这些图形时，就会发生图像的替换效果 例如，图4.24 就显示了翻转图的效果（鼠标移动到下面和右边的图标时，也会显示相应图片）。

初始状态 鼠标移到上面图标时 鼠标移到左边图标时 图4.24 翻转图效果,4.3.4 制作弹出菜单,4.4 绘 制 图形 4.4.1 绘图工具概览,,图4.39 绘制矢量图形工具,返回目录,。