Fireworks4极速教程

文章类别：Fireworks | 发表日期:2008-9-20 19:31:21

文 / 5D多媒体 Candy

一、初识Fireworks4.0

　　Fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，假如你要在网页设计中使用，你可以将它输出为html文件，还能输出为可以在photoshop，illustrator和flash等软件中编辑的格式。

文件窗口

　　Fireworks 的文件窗口上有四个标签，可以同时编辑和预览图象，你可以同时预览四种不同的优化设定所产生的效果，选择最理想的一种设定。

工具条

　　工具条上包括各种选择、创建、编辑图象的工具,有的工具按钮的右下角有一个小三角，说明这个工具包含有几种不同的形式，按住这个工具不放就能显示其他的形式。

矢量模式与位图模式

　　Fireworks 可以进行矢量模式与位图模式的编辑，在默认状态下，Fireworks 在打开时是处于位图模式下，你所绘制的图形是作为矢量对象来处理的。当你在编辑它们时，你会看到你是在修改构成矢量图形的路径。

　　你可以打开或是输入位图，可以对构成位图的像素进行编辑，在处于位图状态下时，画布带斜纹的框包围着。

浮动面板

　　Fireworks的浮动面板包括有layer（图层），frames(帧），color mixs(颜色混合），behavor(行为)，optimize(优化)和object（对象）等。

　　在工作中你可能会发现有些面板经常会用到，你可以把工作起来最方便的面板排列方式保存起来，使用菜单命令command ->panel layout,假如下次要调出这种排列方式只要command ->panel layout set的子菜单内选择就行。

　　在工作区的右下角有一排快速启动栏，点击快速启动按钮就可以很迅速的调出相应的浮动面板。

库（Library）

　　库（Library）里储存了可以被重复使用的元素，称为symbol(符号)，你可以创建一个符号或是将已经存在的对象转化为符号。

　　符号分为图象、动画、和按钮三种，要调用符号只要把它拖到画布上就可以了，一个符号可以有多个instance（例图），假如你编辑了符号，那么画布上所有的instance（例图）都会改变。

文 / 5D多媒体 Candy

二、做一个按钮

画一个矩形

　　首先我们要在辅助线的帮助下，画一个矩形。

　　1、从菜单上将 View > Guides 的 Show Guides 和 Snap to Guides 选上，这样就可以显示辅助线并且确保对齐到辅助线(Guids)。

　　2、单击工具条上的矩形工具(Rectangle tool) 。

　　3、将矩形工具(Rectangle tool)指针贴近辅助线(Guides)矩形区域的一个角，按下鼠标并拖动到对角上。

渐变填充

　　为了让这个矩形更象一个按钮，我们要给这个矩形进行渐变填充并且加上立体效果。

　　1、打开fill（填充）面板，然后确保矩形仍然处于选中的状态，在fill面板上的Fill Category 下拉菜单上选择Linear（线型渐变）方式。

　　2、然后在Fill name下拉菜单上选择Black，White。

　　3、点击编辑按钮（edit）然后把左边的颜色样本象右边拖一点，使黑白渐变更加暗淡一点。

添加效果（Effects）

　　Effects面板可以给图象和文字加上非凡的效果，比如渐变和浮雕。

　　1、假如Effects（效果）面板不可见，从菜单中选择 Window > Effect。

　　2、在Effects（效果）面板最上面的下拉菜单中选择“Bevel and Emboss-Inner Bevel”（渐变和浮雕-内斜面）。

　　3、并且在斜边外形的下拉菜单中选择Sloped，然后把边缘宽度设为4。

　　注重：在加上效果以后假如想修改可以点击Effects面板上的按钮。

　　要创建一个JavaScript 按钮，必须先将物件转化为Symbols(符号),Fireworks中的(符号)是存储在文档的库(Library)中可以重复利用的元素。

转化为Symbols(符号)

　　1、选定这个矩形区域,从菜单中选择 Insert > Convert to Symbol.

　　2、在Name(名称)一栏中填入 MyButton 。

　　3、选择按钮(Button)选项，然后单击“ok”。

　　现在你可以看到，这个按钮被一层绿色所覆盖，并且在左下角有一个小箭头，这层绿色表示这是一个分割区(Slice)。而这个箭头表明这个矩形区域是存储在文档的库(Library)中Symbols的一个例图(Instance)。然后，你将会使用这个圆形的（behavior control ）动作控制器来创建一个翻转图象。

　　4、选择菜单 Window > Library可以看到在库(Library)中的按钮：

给按钮加上文字

　　1、双击这个按钮打开按钮编辑器

　　2、选择文字工具(Text tool)，然后在按钮编辑器中的按钮上单击鼠标。

　　3、在文字编辑器(Text Editor)中可以选择字体选择，字号对齐方式等，在这里我们选择Impact字体, 大小为16-point，居中对齐。颜色设顶为橘黄色。

　　4、输入“Adventure Planner ”，并单击ok。

对齐文字

　　对齐按钮上的文字，你需要使用菜单命令。

　　1、用指针(Pointer)选中按钮，并且按住shift同时选中文字。

　　2、点击菜单中的Modify > Align > Center Vertical(垂直中心对齐）

　　3、并且点击Modify > Align > Center Horizontal（水平中心对齐）这样将使文字对齐按钮中心。

创建翻转效果

　　1、单击按钮编辑器的滑过(Over)标签然后单击复制弹起图像( Copy Up Graphic)按钮。在滑过(Over)标签中的图像是指在已完成的网页中当鼠标指针滑过这个按钮时显示的图像。

　　2、选中文字，使用fill(填充）面板，将文字变为红色。

　　3、关闭按钮编辑器

记得要经常的保存你的工作哦

预览一下

　　1、点击工具面板下面的隐藏切片图标，就可以隐藏掉按钮上覆盖的绿色。

　　2、点击preview标签，

　　3、把鼠标移到按钮上面就可以看到变色的效果了。

给按钮加上链接

　　1、点击Object面板上的 Link Wizard （链接向导）

　　2、在Link Wizard （链接向导）上的link标签上输入链接地址。

文 / 5D多媒体 Candy

三、创建动画

创建一个物体来产生动画

　　1、新建一个文件，长和宽都是200pixel

　　2、用矩形工具画一个矩形，你可以使用你喜欢的任何颜色

动画的设定

　　1、选中这个矩形，选择modify菜单Animate->Animated selecation.

　　2、在frame 框中输入5

　　3、move框中输入180,这是设定移动的距离像素

　　4、在direction中输入45,设定移动的角度

　　5、单击ok,Fireworks 将会问你是否添加新的frame（帧）

　　6、单击ok，将会自动添加新的帧

　　现在图中的矩形上的右下角就会加上一个小小的箭头，表示这是一个动画符号（animation symbol),一条线表示这个符号的移动路径，线上的每一个点表示一帧。

动画预览

　　你可以直接在工作区内预览这个动画

　　1、假如frame（帧）面板不可见，选择window -> frames

　　2、点击画布下方的播放/停止按钮，就可以播放动画。

　　3、再次点击这个按钮可以停止。

　　4、在frames面板上你可以看到每一帧的动画

　　现在你可以给这个动画做一些修改

动画的编辑

　　可以使用object(对象）面板对动画进行编辑

　　1、打开object(对象）面板

　　2、点击frames面板上的第一帧

　　3、选中这个symbol,在object(对象）面板上就会显示这个动画的设定， 4，你可以对这个设定进行修改，比如在scaling（缩放比例）内输入110，使从第一帧到最后一帧图象放大10%

　　4，你可以对这个设定进行修改，比如在scaling（缩放比例）内输入110，使从第一帧到最后一帧图象放大10%

　　5、在opacity(透明度）左边的框内输入10，右边的框内输入100，这将使动画产生透明度的渐变

　　6、在rotation（旋转）中输入180，将使动画产生180度的旋转

　　7、再次点击播放按钮就可以看看效果了。

编辑运动路径

　　1、点击工作区上的symbol,运动路径就可以显示出来

　　2、你可以用鼠标拖动路径上的第一帧（绿色的点）和最后一帧（红色的点），来改变它们的位置

　　3、也可以拖动中间的帧（蓝色的点），改变整条路径

　　4、再预览一下看看吧

输出gif动画

　　要在浏览器中看到这个动画，就必须输出成gif动画格式或swf格式

　　1、打开optimize(优化）面板

　　2、输出格式设为animated gif（动画gif）

　　3、单击菜单上file -> export命令

　　4、保存类型选择 html and images就可以输出一个html文件

　　5、你可以用浏览器打开这个动画来看了

四、热点和切片

　　热点（hotspots ）和切片（slices ）是用来创建图象交互效果的重要工具，热点和切片被称为web对象，也就是说，它们不是图象而是一段html代码，在层面板上的Web Layer ，你可以查看，选择和重命名热点和切片。

　　在网页设计中热点（hotspots ）和影象地图（image maps ）被广泛的使用，热点是图象上带有超级链接的一块区域，同一副图上可以有几个热点链接到不同的地址，这就是影象地图。

　　2、使用热点工具在图象上拖拉画出你要创建热点的区域，按住alt键可以从中心画起

　　2、在图上点击鼠标，然后在另一点上点击，就会自动连起来构成多边型热点，就象使用钢笔工具一样。

　　2、假如你选择了不止一个对象，就会跳出一个对话框问你是创建一个还是多个热点。

　　3、你可以选择single创建一个热点或是选择mutiple创建多个热点

　　3、在alt 框内可输入替代图象的文字，在图象下载的过程中这些文字会显现出来

　　切片可以将一副大的图片分割开来，这样可以减低图象的大小，并且能创造交互的效果，如翻转图象等，还能将图象的一些区域用html来代替。

　　切片的区域上将会覆盖上一层半透明的绿色，切片四周显示红色的导线，在最后输出以后这些红色的导线将不会显现出来。

　　打开图层面板点击slice（切片）层上眼睛的图标，就可以显示和隐藏图标

　　除了创建按钮之外，Fireworks 还可以让您轻松的创建一个奇异的 Javascript 翻转效果。例如，当鼠标指针滑过一个按钮，除了改变这个按钮的显示状态，您还可以让它改变在这一页中的其他区域的显示，在 Fireworks 中，这种翻转效果被称作不相交翻转（disjoint rollover）。

　　2、将指针点中切片中心的behavior控制手柄，这时指针将变为手的外形

　　3、按住behavior控制手柄从中心往切片左上角拖动，这时就会出现一条蓝色的线条，同时会弹出一个窗口，在下拉的菜单上选择frame2

　　4、点中上面的切片上的behavior控制手柄，拖向下面的文字切片

　　6、这样就会建立一个不相交翻转，当鼠标擦过上面的图象时就会显示下面的文字

　　1，保持切片处于选中的状态，选择菜单insert -> pop menu,插入子菜单

　　2，在弹出的窗口内进行输入，text(文字）框内输入子菜单上要显示的文字

　　5，重复上面几步，直到要加入的子菜单项目全部加入完毕

　　6，可以拖拉下面的列表，对子菜单的项目进行排列，也可以进行编辑和删除

　　8，这里可以对子菜单的外观进行编辑，有两种格式的子菜单可以选择，html格式和图象格式

　　1，选中切片，你会发现一条蓝色的线组成的子菜单的外形

　　你可以使用history（历史）面板来建立command ，在下次要执行相同的操作时可以使用command来自动操作可以大大提高工作效率。

　　一个command录制好了，然后在要进行相同的操作的时候就可以使用这个command来自动操作了

　2，选择command菜单上的add draft layer，也就是我们刚才保存的那个command

　　你可以象这样录制各种复杂的command，可以包含任意的步数

　　但是在历史记录面板上带有红色的×的操作是不能被录制下来的

　　可以打开command菜单选择edit command list在列表里选中要删除的command，点击delete按钮就可以了

　　Optimize （优化）面板可以很方便的在工作区内进行图象优化，并且同时看到优化后的效果，在Optimize （优化）面板上预先设置了几种优化设定可供选择，你也可以按照自己的需要进行设定。

　　你可以对分割的图象的每一个切片进行不同的优化设定，比如你可以将图象上色彩丰富的部分设置为jpeg格式，色彩单一的部分设置为gif格式。

　　点击文件窗口上的Preview （预览）标签，你可以预览优化后的效果。点击2-up标签和4-up标签可以比较几种不同的优化设定所产生的效果。

　　JPEG选择压缩可以对图象的不同区域选择不同的压缩比率，在图象比较重要的部分可以选择较高的质量。不太重要的部分可以压缩的大一些。

　　要取消JPEG选择压缩可以选择菜单Modify -> Selective JPEG -> Remove JPEG Mask

　　将一副大的图象使用切割工具分成一个个小的切片以后，你就要把这些切片输出。

　　None：忽略所有的切片对象，输出成当前格式的整幅图像。

　　默认的设置是：Export Slice：输出切片包括所有的行为设置

　　Slice Along Guides：输出切片，但忽略所有该对象的行为设置

　　假如要只输出选中的一个或几个切片，可以勾选下面的Selected Slices Only

Windows操作 [文]	Word教程 [文]	Excel教程 [文]	PowerPoint [文]	Dreamweaver [文]	Fireworks [文]
Flash教程 [文]	PhotoShop [文]	CorelDraw [文]	C语言教程 [文]	Html教程 [文]	Div+Css布局 [文]
Javascript [文]	ACCESS数据库 [文]	ASP教程 [文]	SQLServer [文]	ASP.NET教程 [文]	FlashAS [文]

Word教程网	Excel教程网	Dreamweaver 教程网	Fireworks教程网	PPT教程网	FLASH教程网	PS教程网
HTML教程网	DIV CSS教程网	FLASH AS教程网	ACCESS教程网	SQL SERVER教程网	C语言教程网	JAVASCRIPT教程网
ASP教程网	ASP.NET教程网	CorelDraw教程网