|
AOE3 STUDIO 文 / 5D多媒体 Candy www.edu4u.com.cn 一、初识Fireworks4.0
Fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可以将它输出为html文件，还能输出为可以在photoshop，illustrator和flash等软件中编辑的格式。 www.edu4u.com.cn 文件窗口 www.edu-cn.com Fireworks 的文件窗口上有四个标签，可以同时编辑和预览图象，你可以同时预览四种不同的优化设定所产生的效果，选择最理想的一种设定。 漂亮MM女性网 
AOE3 STUDIO 中国教育网 工具条 AOE3 STUDIO 工具条上包括各种选择、创建、编辑图象的工具,有的工具按钮的右下角有一个小三角，说明这个工具包含有几种不同的形式，按住这个工具不放就能显示其他的形式。 中国教程网 
edu-cn.com www.edu-cn.com 矢量模式与位图模式 中国论文网 Fireworks 可以进行矢量模式与位图模式的编辑，在默认状态下，Fireworks 在打开时是处于位图模式下，你所绘制的图形是作为矢量对象来处理的。当你在编辑它们时，你会看到你是在修改构成矢量图形的路径。 中国教育网  edu4u.com.cn
www.edu4u.com.cn 你可以打开或是输入位图，可以对构成位图的像素进行编辑，在处于位图状态下时，画布带斜纹的框包围着。 漂亮MM女性网  edu-cn.com
www.edu-cn.com 浮动面板 edu4u.com.cn Fireworks的浮动面板包括有layer（图层），frames(帧），color mixs(颜色混合），behavor(行为)，optimize(优化)和object（对象）等。 中国教程网 在工作中你可能会发现有些面板经常会用到，你可以把工作起来最方便的面板排列方式保存起来，使用菜单命令command ->panel layout,如果下次要调出这种排列方式只要command ->panel layout set的子菜单内选择就行。 edu4u.com.cn 在工作区的右下角有一排快速启动栏，点击快速启动按钮就可以很迅速的调出相应的浮动面板。 中国论文网  中国教程网
www.edu-cn.com 中国教育网 库（Library） www.edu4u.com.cn 库（Library）里储存了可以被重复使用的元素，称为symbol(符号)，你可以创建一个符号或是将已经存在的对象转化为符号。 www.edu4u.com.cn  AOE3 STUDIO
www.edu4u.com.cn 符号分为图象、动画、和按钮三种，要调用符号只要把它拖到画布上就可以了，一个符号可以有多个instance（例图），如果你编辑了符号，那么画布上所有的instance（例图）都会改变。 中国教程网 www.edu4u.com.cn edu4u.com.cn 中国论文网 文 / 5D多媒体 Candy edu4u.com.cn 二、做一个按钮 漂亮MM女性网 画一个矩形 AOE3 STUDIO 首先我们要在辅助线的帮助下，画一个矩形。 中国教程网 1、从菜单上将 View > Guides 的 Show Guides 和 Snap to Guides 选上，这样就可以显示辅助线并且确保对齐到辅助线(Guids)。 中国教育网 2、单击工具条上的矩形工具(Rectangle tool)  。 www.edu-cn.com 3、将矩形工具(Rectangle tool)指针贴近辅助线(Guides)矩形区域的一个角，按下鼠标并拖动到对角上。 www.edu-cn.com 
AOE3 STUDIO www.edu-cn.com 漂亮MM女性网 渐变填充 www.edu4u.com.cn 为了让这个矩形更象一个按钮，我们要给这个矩形进行渐变填充并且加上立体效果。 中国教育网 1、打开fill（填充）面板，然后确保矩形仍然处于选中的状态，在fill面板上的Fill Category 下拉菜单上选择Linear（线型渐变）方式。 中国教育网 2、然后在Fill name下拉菜单上选择Black，White。 中国教育网  中国教育网
漂亮MM女性网 3、点击编辑按钮（edit）然后把左边的颜色样本象右边拖一点，使黑白渐变更加暗淡一点。 edu-cn.com edu-cn.com 添加效果（Effects） 中国教育网 Effects面板可以给图象和文字加上特别的效果，比如渐变和浮雕。 漂亮MM女性网 1、如果Effects（效果）面板不可见，从菜单中选择 Window > Effect。 中国教育网 2、在Effects（效果）面板最上面的下拉菜单中选择“Bevel and Emboss-Inner Bevel”（渐变和浮雕-内斜面）。 edu-cn.com 3、并且在斜边形状的下拉菜单中选择Sloped，然后把边缘宽度设为4。 中国教程网 
中国教育网 中国教育网 漂亮MM女性网 注意：在加上效果以后如果想修改可以点击Effects面板上的  按钮。 www.edu-cn.com AOE3 STUDIO 要创建一个JavaScript 按钮 ，必须先将物件转化为Symbols(符号),Fireworks中的(符号)是存储在文档的库(Library)中可以重复利用的元素。 edu4u.com.cn 转化为Symbols(符号) AOE3 STUDIO 1、选定这个矩形区域,从菜单中选择 Insert > Convert to Symbol. 漂亮MM女性网 2、在Name(名称)一栏中填入 MyButton 。 edu-cn.com 3、选择按钮(Button)选项，然后单击“ok”。 中国教育网 
www.edu4u.com.cn www.edu4u.com.cn 现在你可以看到，这个按钮被一层绿色所覆盖，并且在左下角有一个小箭头，这层绿色表示这是一个分割区(Slice)。而这个箭头表明这个矩形区域是存储在文档的库(Library)中Symbols的一个例图(Instance)。 然后，你将会使用这个圆形的（behavior control ）动作控制器 来创建一个翻转图象。 AOE3 STUDIO www.edu-cn.com 4、选择菜单 Window > Library可以看到在库(Library)中的按钮： 中国教育网  www.edu-cn.com
edu-cn.com 给按钮加上文字 中国教育网 1、双击这个按钮打开按钮编辑器 漂亮MM女性网 2、选择文字工具(Text tool)，然后在按钮编辑器中的按钮上单击鼠标。 中国教程网 3、在文字编辑器(Text Editor)中可以选择字体选择，字号对齐方式等，在这里我们选择Impact字体, 大小为16-point，居中对齐。颜色设顶为橘黄色。 edu4u.com.cn  www.edu4u.com.cn
www.edu-cn.com edu-cn.com 4、输入“Adventure Planner ”，并单击ok。 www.edu-cn.com 
edu4u.com.cn AOE3 STUDIO 对齐文字 AOE3 STUDIO 对齐按钮上的文字，你需要使用菜单命令。 edu-cn.com 1、用指针(Pointer)选中按钮，并且按住shift同时选中文字。 中国论文网 2、点击菜单中的Modify > Align > Center Vertical(垂直中心对齐） edu-cn.com 3、并且点击Modify > Align > Center Horizontal（水平中心对齐）这样将使文字对齐按钮中心。 www.edu-cn.com 中国教程网 创建翻转效果 edu-cn.com 1、单击按钮编辑器的滑过(Over)标签然后单击复制弹起图像( Copy Up Graphic)按钮。在滑过(Over)标签中的图像是指在已完成的网页中当鼠标指针滑过这个按钮时显示的图像。 edu4u.com.cn 2、选中文字，使用fill(填充）面板，将文字变为红色。 www.edu-cn.com 
漂亮MM女性网 漂亮MM女性网 3、关闭按钮编辑器 中国教育网 记得要经常的保存你的工作哦 AOE3 STUDIO 预览一下 中国教程网 1、点击工具面板下面的隐藏切片图标，就可以隐藏掉按钮上覆盖的绿色。 漂亮MM女性网 
edu4u.com.cn edu-cn.com 2、点击preview标签， www.edu-cn.com 3、把鼠标移到按钮上面就可以看到变色的效果了。 www.edu4u.com.cn 给按钮加上链接 中国教程网 1、点击Object面板上的 Link Wizard （链接向导） 中国论文网 2、在Link Wizard （链接向导）上的link标签上输入链接地址。 漂亮MM女性网 
中国教程网 www.edu-cn.com 中国论文网 文 / 5D多媒体 Candy 漂亮MM女性网 三、创建动画 中国教程网 创建一个物体来产生动画 edu-cn.com 1、新建一个文件，长和宽都是200pixel 漂亮MM女性网 2、用矩形工具画一个矩形，你可以使用你喜欢的任何颜色 edu-cn.com  www.edu4u.com.cn
edu4u.com.cn 动画的设定 漂亮MM女性网 1、选中这个矩形，选择modify菜单Animate->Animated selecation. edu4u.com.cn 2、在frame 框中输入5 AOE3 STUDIO 3、move框中输入180,这是设定移动的距离像素 edu4u.com.cn 4、在direction中输入45,设定移动的角度 edu4u.com.cn 5、单击ok,Fireworks 将会问你是否添加新的frame（帧） 漂亮MM女性网 6、单击ok，将会自动添加新的帧 中国论文网 现在图中的矩形上的右下角就会加上一个小小的箭头，表示这是一个动画符号（animation symbol),一条线表示这个符号的移动路径，线上的每一个点表示一帧。 中国论文网 动画预览 中国教程网 你可以直接在工作区内预览这个动画 中国教育网 1、如果frame（帧）面板不可见，选择window -> frames www.edu-cn.com 2、点击画布下方的播放/停止按钮，就可以播放动画。 edu4u.com.cn  edu-cn.com
中国教程网 3、再次点击这个按钮可以停止。 漂亮MM女性网 4、在frames面板上你可以看到每一帧的动画 AOE3 STUDIO 现在你可以给这个动画做一些修改 漂亮MM女性网 动画的编辑 edu-cn.com 可以使用object(对象）面板对动画进行编辑 www.edu-cn.com 1、打开object(对象）面板 www.edu-cn.com 2、点击frames面板上的第一帧 www.edu-cn.com 3、选中这个symbol,在object(对象）面板上就会显示这个动画的设定， 4，你可以对这个设定进行修改，比如在scaling（缩放比例）内输入110，使从第一帧到最后一帧图象放大10% AOE3 STUDIO 4，你可以对这个设定进行修改，比如在scaling（缩放比例）内输入110，使从第一帧到最后一帧图象放大10% www.edu-cn.com 5、在opacity(透明度）左边的框内输入10，右边的框内输入100，这将使动画产生透明度的渐变 edu-cn.com 6、在rotation（旋转）中输入180， 将使动画产生180度的旋转 中国教程网 7、再次点击播放按钮就可以看看效果了。 中国教程网 编辑运动路径 中国教育网 1、点击工作区上的symbol,运动路径就可以显示出来 edu-cn.com 2、你可以用鼠标拖动路径上的第一帧（绿色的点）和最后一帧（红色的点），来改变它们的位置 漂亮MM女性网 3、也可以拖动中间的帧（蓝色的点），改变整条路径 漂亮MM女性网 4、再预览一下看看吧 漂亮MM女性网 输出gif动画 www.edu4u.com.cn 要在浏览器中看到这个动画，就必须输出成gif动画格式或swf格式 AOE3 STUDIO 1、打开optimize(优化）面板 中国论文网 2、输出格式设为animated gif（动画gif） 中国论文网 
中国论文网 edu4u.com.cn 3、单击菜单上file -> export命令 中国论文网 4、保存类型选择 html and images就可以输出一个html文件 edu-cn.com 5、你可以用浏览器打开这个动画来看了 AOE3 STUDIO www.edu4u.com.cn edu4u.com.cn 文 / 5D多媒体 Candy www.edu4u.com.cn 四、热点和切片
热点（hotspots ）和切片（slices ）是用来创建图象交互效果的重要工具，热点和切片被称为web对象，也就是说，它们不是图象而是一段html代码，在层面板上的Web Layer ，你可以查看，选择和重命名热点和切片。 edu4u.com.cn 热点和影象地图 www.edu4u.com.cn 在网页设计中热点（hotspots ）和影象地图（image maps ）被广泛的使用，热点是图象上带有超级链接的一块区域，同一副图上可以有几个热点链接到不同的地址，这就是影象地图。 edu-cn.com 在Fireworks中你可以作出不同形状的热点 AOE3 STUDIO 创建矩形或圆形热点 www.edu-cn.com 1、选择矩形或圆形热点工具 漂亮MM女性网  www.edu4u.com.cn 2、使用热点工具在图象上拖拉画出你要创建热点的区域，按住alt键可以从中心画起 AOE3 STUDIO 创建多边型热点 中国教程网 1、选择多边形热点工具 www.edu4u.com.cn  www.edu4u.com.cn 中国教育网 2、在图上点击鼠标，然后在另一点上点击，就会自动连起来构成多边型热点，就象使用钢笔工具一样。 中国教程网 沿选择的对象边缘创建热点 漂亮MM女性网 1、选择菜单命令Insert > Hotspot插入热点 www.edu4u.com.cn 2、如果你选择了不止一个对象，就会跳出一个对话框问你是创建一个还是多个热点。 edu-cn.com  中国论文网
中国教育网 3、你可以选择single创建一个热点或是选择mutiple创建多个热点 www.edu4u.com.cn 添加链接 漂亮MM女性网  edu4u.com.cn
AOE3 STUDIO 1、打开object 面板 中国论文网 2、在link框内添入链接地址 中国教程网 3、在alt 框内可输入替代图象的文字，在图象下载的过程中这些文字会显现出来 edu-cn.com 给切片加上链接的方式也是一样的 edu4u.com.cn 切片 edu-cn.com 切片可以将一副大的图片分割开来，这样可以减低图象的大小，并且能创造交互的效果，如翻转图象等，还能将图象的一些区域用html来代替。 中国教育网 创建规则的切片 edu-cn.com 规则的切片是最常见的 中国教程网 1、打开图象文件（File > Open） 中国教育网 2、选择图象上的一块区域， 中国教育网 3、选择菜单 insert > slice edu4u.com.cn 4、当然你也可以使用切割工具  进行切割 中国教程网  AOE3 STUDIO
edu4u.com.cn 切片的区域上将会覆盖上一层半透明的绿色，切片周围显示红色的导线，在最后输出以后这些红色的导线将不会显现出来。 漂亮MM女性网 创建不规则图形切片 www.edu-cn.com 1、选择工具面板上的不规则切割工具 AOE3 STUDIO 
中国论文网 漂亮MM女性网 2、沿图象边缘进行不规则切割 edu-cn.com  edu-cn.com
edu-cn.com 显示和隐藏切片 中国论文网 打开图层面板点击slice（切片）层上眼睛的图标，就可以显示和隐藏图标 www.edu-cn.com 
edu4u.com.cn www.edu-cn.com 五、翻转图象 中国论文网 除了创建按钮之外，Fireworks 还可以让您轻松的创建一个奇异的 Javascript 翻转效果。例如，当鼠标指针滑过一个按钮，除了改变这个按钮的显示状态，您还可以让它改变在这一页中的其他区域的显示，在 Fireworks 中，这种翻转效果被称作不相交翻转（disjoint rollover）。 edu-cn.com 加入引发翻转的图象 中国论文网 
edu4u.com.cn 中国论文网 1、打开图象 漂亮MM女性网 2、选择菜单上的 Insert > Slice，给图象加上切片 中国论文网 加入新的帧 www.edu-cn.com 1、在frames(帧）面板上加入新的帧 中国教程网 2、选中新增加的这一帧 中国教程网 3、用矩形工具画和一个切片同样大小的长方形 中国教育网 加上拖放behavior 中国教育网 1、选中切片 中国教育网 2、将指针点中切片中心的behavior控制手柄，这时指针将变为手的形状 中国论文网 
中国论文网 中国教育网 3、按住behavior控制手柄从中心往切片左上角拖动，这时就会出现一条蓝色的线条，同时会弹出一个窗口，在下拉的菜单上选择frame2 www.edu-cn.com  edu4u.com.cn
edu4u.com.cn 4、点击preview标签，就可以预览到翻转的效果了 www.edu4u.com.cn 创建一个不相交翻转 edu4u.com.cn 1、选中frame2 www.edu-cn.com 2、用文字工具输入文字 www.edu-cn.com 3、选择菜单上的Insert > Slice，将文字变为切片 www.edu4u.com.cn 4、点中上面的切片上的behavior控制手柄，拖向下面的文字切片 www.edu4u.com.cn  AOE3 STUDIO
AOE3 STUDIO 5、在弹出的窗口的弹出菜单上确定选中了frame2 edu4u.com.cn 6、这样就会建立一个不相交翻转，当鼠标掠过上面的图象时就会显示下面的文字 edu4u.com.cn AOE3 STUDIO 六、下拉菜单 AOE3 STUDIO 创建标题 漂亮MM女性网 1，新建一个图象 中国教程网 2， 用矩形工具画一个长方形 www.edu-cn.com  edu4u.com.cn
edu4u.com.cn 3,用文字工具输入文字 www.edu-cn.com  中国论文网
创建切片 中国论文网 选中这个矩形,然后选择菜单insert -> slice（插入-切片）. edu-cn.com 加上下拉菜单 中国教育网 1，保持切片处于选中的状态，选择菜单insert -> pop menu,插入子菜单 AOE3 STUDIO 2，在弹出的窗口内进行输入，text(文字）框内输入子菜单上要显示的文字 漂亮MM女性网 3,在link（链接）内输入要连接的地址 漂亮MM女性网 4,点击+按钮加入下拉菜单 edu-cn.com 5，重复上面几步，直到要加入的子菜单项目全部加入完毕 AOE3 STUDIO 6，可以拖拉下面的列表，对子菜单的项目进行排列，也可以进行编辑和删除 www.edu4u.com.cn 7，点击next进入下一步 AOE3 STUDIO 8，这里可以对子菜单的外观进行编辑，有两种格式的子菜单可以选择，html格式和图象格式 AOE3 STUDIO 9，当所有的设定完成后，可以单击finish退出 www.edu4u.com.cn 子菜单定位 AOE3 STUDIO 1，选中切片，你会发现一条蓝色的线组成的子菜单的形状 中国教育网 2，将鼠标的指针移到菜单的位置，指针会变为手的形状 www.edu4u.com.cn  中国教育网
3，你可以把菜单拖到合适的位置 edu-cn.com 预览 中国教程网 要预览下拉菜单的效果，必须要在浏览器中进行 www.edu4u.com.cn 1，点击菜单file->preview in browser www.edu-cn.com 2，把鼠标放上去，你就可以看到弹出下拉菜单的效果了 漂亮MM女性网 AOE3 STUDIO 文 / 5D多媒体 Candy edu4u.com.cn 七、查找替换颜色 www.edu-cn.com 1，打开一个文件 中国教育网 
www.edu-cn.com 2，打开查找替换（Finding and replacing)面板 漂亮MM女性网 3,在查找替换（Finding and replacing)面板上面的下拉菜单上选择 search document 中国教程网 4,在下一个下拉菜单内选择find color 漂亮MM女性网 
www.edu-cn.com www.edu4u.com.cn 5，指定find的颜色，将鼠标移到文件窗口，在红色区域上点击，然后在change to 内指定要替换成的颜色，比如绿色。 edu-cn.com  www.edu-cn.com
6，在apply下拉菜单中选择fill,最后点击replace all 按钮，查找替换颜色就完成了，图上所有的红色都替换成了绿色 www.edu-cn.com |
|
|
edu-cn.com www.edu4u.com.cn edu4u.com.cn 文 / 5D多媒体 Candy 漂亮MM女性网 八、自动操作 www.edu4u.com.cn 录制command edu-cn.com 你可以使用history（历史）面板来建立command ，在下次要执行相同的操作时可以使用command来自动操作可以大大提高工作效率。 中国教程网 - 建立一个新文件
- 在层面板上建立一个新层
- 用文字工具输入draft
- 选择window菜单上的history打开历史面板
- 你可以看到刚才的操作都被记录在历史面板上了
 edu4u.com.cn
www.edu-cn.com - 将两条记录全部选中，点击history(历史）面板右下角的保存按钮
- 在跳出的对话框内输入command的名字，在这里我们给这个command命名为add draft layer
使用command 中国教育网 一个command录制好了，然后在要进行相同的操作的时候就可以使用这个command来自动操作了 www.edu-cn.com 1，建立新文件 中国教程网 2，选择command菜单上的add draft layer，也就是我们刚才保存的那个command 中国教程网  edu-cn.com
3，这样fireworks就会自动执行同样的操作了 edu4u.com.cn 你可以象这样录制各种复杂的command，可以包含任意的步数 漂亮MM女性网 但是在历史记录面板上带有红色的×的操作是不能被录制下来的 中国教程网  edu-cn.com
如果你想删除command 中国教程网 可以打开command菜单选择edit command list在列表里选中要删除的command，点击delete按钮就可以了 AOE3 STUDIO www.edu4u.com.cn edu-cn.com edu-cn.com 文 / 5D多媒体 Candy edu4u.com.cn 九、图象优化 漂亮MM女性网 使用Optimize （优化）面板 漂亮MM女性网 Optimize （优化）面板可以很方便的在工作区内进行图象优化，并且同时看到优化后的效果，在Optimize （优化）面板上预先设置了几种优化设定可供选择，你也可以按照自己的需要进行设定。 AOE3 STUDIO  中国论文网
edu4u.com.cn 切片优化 漂亮MM女性网 你可以对分割的图象的每一个切片进行不同的优化设定，比如你可以将图象上色彩丰富的部分设置为jpeg格式，色彩单一的部分设置为gif格式。 AOE3 STUDIO 优化效果预览 AOE3 STUDIO 点击文件窗口上的Preview （预览）标签，你可以预览优化后的效果。点击2-up标签和4-up标签可以比较几种不同的优化设定所产生的效果。 中国教程网  www.edu-cn.com
JPEG选择压缩 edu4u.com.cn JPEG选择压缩可以对图象的不同区域选择不同的压缩比率，在图象比较重要的部分可以选择较高的质量。不太重要的部分可以压缩的大一些。 edu4u.com.cn - 在图象上画一个选区
- 选择菜单Modify -> Selective JPEG -> Save Selection as JPEG Mask
- 在弹出的窗口内勾选Enable Selective Quality 并且输入选择区域所要设定的压缩比率
- 点击ok后，你就可以在预览窗口内看到效果了
修改JPEG选择压缩的区域 中国教育网 - 选择菜单Modify > Selective JPEG -> Restore JPEG Mask as Selection，将会出现一个选区
- 用选择区域工具或其他工具对选区进行修改
- 再选择菜单Modify -> Selective JPEG -> Save Selection as JPEG Mask
要取消JPEG选择压缩可以选择菜单Modify -> Selective JPEG -> Remove JPEG Mask 漂亮MM女性网 中国论文网 AOE3 STUDIO 文 / 5D多媒体 Candy 中国教育网 十、输出 中国教育网 输出图象 漂亮MM女性网 当图象优化完成以后，就可以输出了 www.edu4u.com.cn 1，选择File -> Export to 可以直接进行输出 中国论文网 
edu-cn.com 2，选择Images Only只输出图象 edu4u.com.cn 3，选择html and images可输出图象和html文件 中国教程网 输出一个区域的图象 中国教程网 - 选择工具条上的输出区域工具，在图上画出需要输出的区域范围
- 双击输出区域，会跳出输出预览窗口，在输出预览窗口内可以调整图象输出的设置
- 最后按export按钮就可以输出图象了
输出切片 edu4u.com.cn 将一副大的图象使用切割工具分成一个个小的切片以后，你就要把这些切片输出。 中国论文网 - 选择File -> Export
- 在Slicing下有几个选项
None：忽略所有的切片对象，输出成当前格式的整幅图像。 漂亮MM女性网 默认的设置是：Export Slice：输出切片包括所有的行为设置 中国论文网 Slice Along Guides：输出切片，但忽略所有该对象的行为设置 edu4u.com.cn 如果要只输出选中的一个或几个切片，可以勾选下面的Selected Slices Only edu-cn.com 输出flash格式 www.edu4u.com.cn 你可以将图象和动画输出为flash的swf格式 中国教程网 - 选择File -> Export
- 在保存类型下拉菜单内选择Flash SWF
- 点击Options 按钮进行设置
www.edu-cn.com
| 
最新文章: