请输入您要查询的百科知识:

 

词条 firework
释义

firework英文原意:焰火。在软件界,Firework指网页三剑客之一的软件。原为Macromedia公司所有。在Macromedia被Adobe兼并之后,Adobe又进一步发展了此软件,但是与Macromedia的风格差别较大。将来有可能被Photoshop等取代。现最新版本AdobeFireworkCS3。

§

简介

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

firework

Fireworks提供专业网络图形设计和制作方案。通过它,你可以编辑网络图形和动画,支持位图和矢量图。同时它能dreamweaver、flash能实现网页的无缝连接,与其它图形程序各HTML编辑也能密切配合,为用户一体化的网络设计方案提供支持.

Fireworks提供专业网络图形设计和制作方案。通过它,你可以编辑网络图形和动画,支持位图和矢量图。同时它能dreamweaver、flash能实现网页的无缝连接,与其它图形程序各HTML编辑也能密切配合,为用户一体化的网络设计方案提供支持。

§ 切割图形

firework做过网页的朋友一定都知道:网站好,网页就得小。在不减少内容的情况下,网页当能够做得越小越好。而给网页瘦身最有效方法就是减小图片的尺寸,但当您不得不在网页中放入一大幅图象时,是否还有更好的解决之道呢?

切图就是一个不错的方法,为了尽量保持图形的完整又不庞大,我们可以将一整幅图片按照相近的色区切割成多个小图片,并将每个小图片保存为色深较浅的gif图形。这样可以达到又漂亮又快捷的效果。

但传统的切图工作十分繁琐,许多设计者都是使用Photoshop类软件将图一片片分好,然后在分别保存为不同色深的gif图象,虽然可以使用action之类的自动执行命令集,但实际工作量依旧十分惊人,而且非常容易切错尺寸。

现在用了Fireworks就可以非常轻松地切割图片了,首先用Fireworks打开要切割地图形文件(File>Open),当图片打开后选择工具栏最右下方的切割工具(SliceTool),在图中按住鼠标左键任意画出想要的切割效果(注意不要将选区重叠),图中那些红线表示就是最后生成的表格分栏情况。

等全部的切割区域完成后选择“FILE>EXPORT”进入导出,在Format中选择gif,再根据图象的具体情况设置色深、调色板和透明色,然后按下“Next”。

最后再导出成HTML文件的对话框中指定保存的目录,在“slicing:”选项中选择“UseSliceObjects:”按照刚才划分出的切割情况来切图,并分别保存。在“Style选项”中选择“Generic”导出成标准的HTML源码。OK,如果要和Dreamwever一同使用的话,可以选择“DreamweaverLibra-ry.lbi”将导出为DREAMWEAVER2的一个模板,而“Dreamweaver”选项将导出成DREAMWEAVER作出来的网页源码。

§ 动态效果切图

firework在上一章中,我们说到用fireworks2进行切图,可以将一个大图片分割成不同色深的多个小图片,并且生成相应的网页文件或代码,从而减小网页的重量。功能强大的fireworks2不仅可以制作静态切图,更能够导出javascript动态特效.

打开monitor.gif件后你可以看到那上面画的是一个电视机,现在我们要做的是将这个电视机放入一个网页,并且当浏览者的鼠标按下电视机上的开关后,会在屏幕中播放内容。

第一步,要在图象上制作用来调用javascript的热区,制作热区的方和上一章中切割图象的方法一样,都是使用工具栏最右下方的切割工具(SliceTool)。由于我们设想中的这个javascript是通过按下电视机开关后在屏幕上出现变化,所以需要定义两个热区,分别是电视机开关和电视机屏幕。

然后选择“windows>Object”(Ctrl+I)选项,打开Object面板。先选中电视屏幕的热区,Object面板即将显示这个热区的属性,其中的连接地址默认为“NoURL(noHREF)”也就是当前网页的连接(#);项内容为鼠标放到图片上时显示的提示;这下面那个红色的靶心是target,用来确定连接标签的目标的,在这儿就不多说了;最关键的是:不要激活target下的“Auto-NameSlices”功能,而需手动给这个切割热区起一个名字,这样做是为了在指定behavior时能够方便的辨认目标。还要注意的是在给slice命名时,不能使用中文,否则生成的javascript代码会在浏览器中长时间报错。在这个例子中屏幕热区起的名字是“screen”,再以同样的方法给电视开关取名为“button”。

接着做一个电视上要显示的图象,选择“File>New”(Ctrl+N)命令新建一个和屏幕热区大小相同的图片(注意:尺寸过大或过小都会被javascript缩放到屏幕热区的大小)。新建文件后,您可以使用工具栏上各类工具随心所欲地画出自己喜欢的东东(工具栏中各个绘图工具的使用方法将在以后的教程中做详细介绍)。对自己的作品满意了吗?您画完后请选择“File>Export”(Ctrl+Shift+R)将图象导出为网络图形。

Fireworks的图象导出功能非常强大,但现在您只要一路NEXT就可以了,并将生成的gif文件保存到指定的目录下。

然后回到刚才编辑的电视机画面,选定开关热区,再选择“Windows>Behaviors”(Ctrl+Alt+H)选项,打开behaviors面板。按下添加按钮,选择“SwapImage”,在随后弹出的SwapImage对话框中的“SwapImageinSlice”选项中选择“screen”热区(也可以在右边的热区画面中直接选择screen热区,这样做就可以让button热区调用一个使screen热区产生变化的javascript);在“SourceofSwap”中选择“ImageFile”并在浏览面板中指定刚才制作的那个gif图象。最后激活“RestorImageonMouseOut”(激活这个功能后,浏览者将鼠标离开调用javascript的热区后,发生变化的图象将恢复正常。

当上面这步完成后,behaviors面板中将出现一个“OnMouseOver”的件处理器,这就说明刚才做的热区已经成功调用了javascript。但我们期的效果是当鼠标按下开关后才在电视屏幕中显示内容,所以请按下“OnMouseOver”旁的下拉菜单按钮,在弹出的菜单中选择“OnClick”。好,到这儿基本上该完工了。想看看作品的效果如何吗?选择“File>PreviewinBrowser>Previewin...”(F12)命令,就可以在新窗口中预览刚才的作品了。

达到预期效果了吗?满意的话就可以导出成品了,这儿有个小技巧,由于fireworks的预览功能已经生成了临时的图形和HTML文件,所以如您使用IE5行预览的话,可以直接在自己满意的预览窗口中将所以文另存,就可以免去导出步骤而得到完整的作品了。如果您没有IE,那只能乖乖地使用导出功能,具体地导出方法和我们在上一章中所说的静态切图的导出方法相同,在这儿就步重复了。

§ 制作动画

firework用Fireworks2制作动画一共有三中方法,由简到难的排列起来分别是:合并图象形成动画、使用符号(Symbol)生成动画效果和手工绘制。

合并图象形成动画,顾名思义就是将一系列图片按序排列生成不同的帧而形成动画(很象Director中的Spacetotime功能),不过这种排列完全是程序自动执行的,免去了大量的手工操作。具体的方法是这样的(当然使用这种方法的前提是必须有一连串连续的图片):选择“File>OpenMultiple”命令。进入系列图片所在的目录,然后按次序将一连串的图片加入(“Add”命令)对话框左下部的窗口,并且激活“OpenasAnimatio”选项,再按下“Done”按钮就OK了。

在动画生成后,按下“Windows>Frame”(Ctrl+Alt+K)命令,您就看到原来的一系列图片都按次序地从Frame1往下排到底。按下屏幕右下角的播放键就可以浏览动画效果了。这种纯粹的懒办法最合适我这样画不来线条的人了,一次有只用了10秒钟就搞定了一个小鸟飞飞的图片,效果棒极了!

不过,要是手头没有现成的连续图片,那只能劳驾,自己亲自动手了。而许多图画中有规则的动态效果若是用手工制作,既费时间也未必能够达到理想的效果。所以Fireworks2提供了一个Tween功能,使用户可以指定程序生成动态过度效果(感觉就更Flash里的一样)。

在绘制动画前,事先必须明确动画的工作原理。动画是有不变的物件(object)和会变的物件两部分组成。通常不变的物是只如背景之类始终在动画中显示的物件,而会变的物件是指通过变化形成动画的物件。所以在制作动画之前得先制作不变的物件,为此Fire-works2提供了一个共享层的概念(ShareLayer)。

我们都知道,动画是由一个个不同的帧(Frame)组成的,而共享层就是在所有帧中都显示的一个层,这样我们只要将动画中不变的物件全放在这个层中,以后只需要修改一个帧的共享层中内容就可以使所有的帧都达到相应变化,大大减少了工作量。设置共享层的命令是Layer面版的弹出菜单中的“ShareLayer”命令,设置为共享的层在Layer面版中都有一个特定的共享符号(WegbLayer是系统自动设置的共享层,用于放置热点、切割区)。

在完成不变的物件(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)命令,在弹出窗口中添入所要设定的过度帧数,并且激活“distrubutetoFrame”选框,OK,成功。

最后的一种动画方法是手工绘制,这可是一件累人的活,而且要手工画动画,您必须熟悉应用工具栏中的各种绘图工具。因此,我准备在以后的教程中陆续地向您介绍各种绘图工具的使用方法。而在这儿要告诉您的是Fireworks2中新增的洋葱皮功能(OnionSkining),为以后的教程埋下伏笔。

洋葱皮功能(OnionSkining)就象我的朋友们画动画用的半透明的纸一样,让用户在编辑当前帧的同时可以看到此前或此后的帧中的内容。这样在手绘动画时可以方便地确定图案路径。您可以在Layer面版(Windows>Layer)中找到洋葱皮功能,其中的选项分别是:

NoOnionSkinning关闭洋葱皮功能;

ShowNextFrame在当前帧中显示下一帧的内容;

BeforeandAfter在当前帧中显示前一帧和下一帧的内容;

ShowAll在当前帧中显示所有帧中的内容;

CustomEnter让用户设置洋葱皮的显示功能;

Multi-FrameEditing使用户可以透过洋葱皮编辑其他帧中的内容

空说无用,为了给您一个感性认识,我建议您打开一个动画GIF文件,然后在Layer面版中试试洋葱皮功能,就能具体感受到Fireworks的方便。

§ 相关词条

金山快译FRONTPAGE火狐浏览器

OUTLOOK腾讯TT浏览器ICQ

§ 相关链接

1.  SOHU教程:http://it.sohu.com/webcourse/webmonkey/1firework/lessons/05.html

2.  新浪网:http://tech.sina.com.cn/s/focus/FireWork04/

随便看

 

百科全书收录594082条中文百科知识,基本涵盖了大多数领域的百科知识,是一部内容开放、自由的电子版百科全书。

 

Copyright © 2004-2023 Cnenc.net All Rights Reserved
更新时间:2024/12/20 4:33:21