版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、8.1 图像的制作与优化,Fireworks是集创建、编辑和优化网页图形为一体的应用软件,它不仅可以创建与编辑位图和矢量图,而且可以通过修剪和优化图形图像来减小文件的大小。而在不影响图形图像质量的情况下,文件的体积越小,网页的下载速度就越快。这也是Fireworks大受欢迎的原因之一。,8.1.1 Fireworks简介-1,Fireworks拥有与Dreamweaver相似的操作界面,同样由编辑区域、属性面板和浮动面板等组成。,8.1.1 Fireworks简介-2,单击菜单栏上的“文件”,在下拉菜单中选择“新建”命令,打开“新建文档”对话框,在“新建文档”对话框中,可以通过更改宽度和高度的
2、值,来更改画布的大小,还可以对分辨率和画布颜色进行修改。最后单击“确定”。,8.1.1 Fireworks简介-3,窗口左边的工具面板分为六个区域,分别有不同的功能。在该面板上集成了编辑图像所需的各种工具,只需要在面板上选择相应的工具就可以对矢量图、位图进行操作,这样就省去了在位图和矢量图之间的切换操作。,8.1.1 Fireworks简介-4,和Dreamweaver的属性面板一样,Fireworks的属性面板也是一个包含各种选项的动态面板。随着操作内容的变化,属性面板上的内容也随着发生相应的变化。如图8.6所示是选中画布时,属性面板的样子。,8.1.1 Fireworks简介-5,在默认的
3、情况下,Dreamweaver的面板组停放在工作区的右侧。我们可以取消面板组,以及叠放面板,排列面板顺序等操作。在该面板组中可以完成许多高性能操作。如图8.7所示该面板组中有“优化”、“层”、“资源”、“帧和记录”和“答案”等面板,其中“层”和“答案”面板是打开的。,8.1.1 Fireworks简介-6,在窗口中间是画布,它是对图像进行绘制、修改或编辑的地方。从图8.8中可以发现它提供了四种预览模式:原始、预览、2幅和4幅。具体的使用可以在下面的实例中给予说明。,8.1.2 Fireworks中图片的制作-1,更改画布,单击菜单栏上的“修改”,弹出其子菜单,然后移动鼠标指针到画布上,在弹出其
4、子菜单后,单击“画布大小”命令。在对话框中输入宽和高的值,单击“确定”按钮。,8.1.2 Fireworks中图片的制作-2,画出红色的矩形区域,在工具面板的“矢量”区中单击“矩形”工具,然后在工具面板的“颜色”区中单击填充颜色块,在弹出的调色板中选择红色。在画布上,拖动鼠标,画出一个红色的矩形区域。,8.1.2 Fireworks中图片的制作-3,输入字母,在工具面板的“矢量”区中单击“文本”工具,然后在编辑区的红色矩形块中单击鼠标,出现一个有光标闪动的文本框。在 文本框中输入大写的字母“JL”,然后拖动鼠标选中这两个字母,接着在“属性”面板中单击“颜色”块,在弹出的调色板中选择“黄色”。在
5、属性面板中单击“字体”框,在下拉列表中选择“Tahoma”字体,然后单击字号框右边的下拉按钮,拖动滑动指针,设置字号为31,在编辑区域单击鼠标,文字变成设置的效果。,8.1.2 Fireworks中图片的制作-4,在工具面板的“选择”区中单击“选取”工具,然后在编辑区域中拖动文本框到合适的位置,使两个字母看起来更美观。,8.1.2 Fireworks中图片的制作-5,输入汉字,重复上述操作,在红色矩形块的右边输入“杰力”两个汉字,设置字体为“楷体”,字号为28。,单击菜单栏上的“文件”,在弹出的文件菜单中单击“保存”命令。对文件进行保存。,8.1.2 Fireworks中图片的制作-6,导出
6、图片,单击菜单栏上的“文件”,在文件菜单中单击“导出”命令。 在对话框中输入文件名,单击“保存”按钮。,8.1.3 Fireworks中图片的优化-1,除了可以直接制作图片以外,Fireworks还可以对已有的图片进行优化,使图片在不影响视觉效果的情况下,体积更小,更有利于网络传输。,8.1.3 Fireworks中图片的优化-2,打开图片,单击菜单栏上的文件,打开“文件”菜单,在下拉菜单中单击“打开”命令,在“打开”对话框中,单击“查找范围”框,在下拉列表中找到存放图片文件的文件夹,然后选种要优化的文件,最后单击“打开”按钮。,8.1.3 Fireworks中图片的优化-3,在窗口右边的面板
7、组中单击“优化”面板的“小三角”按钮,将“优化”面板展开。在“优化”面板中单击“设置”框,在下拉列表中选择“GIF接近256”,将图片优化成GIF,文件,图片颜色为256色。,优化图片,8.1.3 Fireworks中图片的优化-4,单击文件菜单,在下拉菜单中选择“导出”命令,打开“导出”对话框。在“导出”对话框中输入文件名,单击“保存”命令。,导出图片,打开保存文件的文件夹,可以发现优化的效果是非常明显的。,8.1.4 Fireworks与Dreamweaver 整合应用-1,网站的制作过程一般可分为网页组件制作准备、网页制作和网页管理三个阶段。在网页组件制作准备阶段主要使用Firework
8、s对图片进行处理,其他两个阶段主要采用Dreamweaver 进行操作。通过两个软件的整合可以实现网站的决大部分操作。,除了这种整合应用以外,在Dreamweaver中随时可以打开Fireworks,对网页中的图片进行编辑和优化。,8.1.4 Fireworks与Dreamweaver 整合应用-2,在Dreamweaver窗口中,选中图片,然后在“属性”面板中单击“编辑”按钮,打开Fireworks。,在Fireworks窗口中可以发现,图形文件被打开,特别是图片编辑区有“编辑自Dreamwea”的字样,表明该图片来自Dreamweaver。对图片进行编辑或优化后,单击“完成”按钮,Fire
9、works编辑窗口自动关闭,同时Fireworks程序窗口最小化。Dreamweaver窗口中图片显示编辑后的样子。,8.2 动画的制作与优化,现在的网络可以说是Flash时代,越来越多的人喜欢Flash动画;越来越多的网站使用Flash制作的动画。不知Flash为何物,会直接被人认为是网络盲,甚至是电脑盲。,Flash功能强大,不仅仅是制作动画,甚至有人直接用它来制作网页。特别值得一提的是,它与Dreamweaver、Fireworks等软件整合使用天衣无缝。,8.2.1 Flash简介-1,Flash为广大用户提供了三种不同的使用模式,我们多采用一般用户模式,设计者模式是专为动画设计师准备
10、的;而开发者模式是给程序开发人员使用的。采用不同的模式可以屏蔽掉一些功能,为不同需求的用户带来极大的便利。单击“,窗口”菜单,选择“面板设置”下的不同命令可以在不同的模式下进行切换。,8.2.1 Flash简介-2,工具面板提供了一些常用的绘图工具。使用这些工具可以很容易地绘制出各种图形。该面板共分为4部分,工具部分主要用来创建或改变图像或文本;查看部分用来调整编辑的舞台;颜色部分选择填充的颜色或线条的颜色;选项部分则随着选取工具的不同,而出现相应的修改工具。,8.2.1 Flash简介-3,动作-帧面板是提供内嵌程序语言的编辑面板,作为初级使用者一般用不到。属性面板则用处很大,它和Dream
11、weaver、Fireworks的属性面板一样,其内容会根据所选对象的不同而发生变化。如图是新建一个文件时,属性面板的样子。,8.2.1 Flash简介-4,在窗口中间的编辑区域,我们称其为舞台。它主要用于绘制或导入图片,添加文本或声音以及添加附加行为作为导航按钮等等操作。在没有特殊效果的情况下,Flash动画都可以直接在舞台上播放,而不必转换成可播放的动画文件。,8.2.1 Flash简介-5,Flash的时间轴主要用来组织和控制动画在一定时间内播放的层数和帧数。我们知道一帧一帧静止的图片连续起来就形成了动画。所以最简单的动画制作方法就是画出一帧一帧的图片,然后通过时间轴来控制他们的播放速度
12、来实现。,时间轴由图层、帧和播放头组成。,8.2.1 Flash简介-6,在默认的情况下,面板组包含“混色器”、“颜色样本”、“组件”和“问题解答”四个。通过“窗口”菜单可以添加面板,当然也可以隐藏面板。,8.2.2 使用Flash制作补间动画-1,补间动画是创建随时间移动或更改的动画的一种有效方法,并且最大程度地减小所生成的文件。在补间动画中,Flash能够自动地在两个关键帧之间插入帧的值或形状来创建动画,使动画变得生动。,补间动画分为运动渐变与形状渐变两种动画。 运动渐变是指在一个时间点定义一个实例或文字块的位置、大小等特性,在另一个时间点改变这些属性,Flash自动插入动画帧,形成两者之
13、间平滑的过度。 形状渐变是指在一个时间点绘制一个形状,在另一个时间点更改该形状,Flash自动插入动画帧,形成两者之间平滑的过渡。,8.2.2 使用Flash制作补间动画-2,修改舞台大小,单击菜单栏上的“修改”,在其下拉菜单中单击“文档”命令,在“文档属性”对话框中,修改尺寸值为图片的大小,注意默认单位为像素,单击“确定”后,舞台变为设置的大小。,8.2.2 使用Flash制作补间动画-3,将图片导入到舞台中,作为背景,单击文件菜单,选择“导入”命令。在“导入”对话框中,选择查找范围,找到要导入的图片文件,单击“打开”按钮,单击选择工具,拖动图片,使它完全遮盖住白色的舞台背景。,8.2.2
14、使用Flash制作补间动画-4,使用鼠标单击第30帧,然后单击“插入”菜单,在下拉菜单中单击“帧”命令。这样,从第1帧到第30帧都使用了该图片作为背景。同时,确定动画长度,也设定了整个动画为30帧。,8.2.2 使用Flash制作补间动画-5,插入图层和文字,在时间轴面板中单击“插入图层”按钮,在图层1上插入一个新的图层。选中图层2的第1帧,然后单击“工具”面板中的“文本工具”。,在图片上方单击鼠标,出现文本框,输入一个字“欢”,然后选中这个字,在属性面板中更改合适的字体和字号,并设置字体颜色为蓝色。,8.2.2 使用Flash制作补间动画-6,选中图层2的第30帧,单击“插入”菜单,在下拉菜
15、单中选择“关键帧”命令,在第30帧插入一个关键帧。,选择“工具”面板中的选取工具,拖动文字块“欢”到图片中的合适位置,,插入关键帧,8.2.2 使用Flash制作补间动画-7,创建补间动画,选中图层2上的第1帧,在属性面板中,单击“补间”右边的下拉框,在下拉列表中选择“运动”。为第1帧到第30帧之间设置上补间动画,可以发现两者之间有一条黑色的箭头。,8.2.2 使用Flash制作补间动画-8,创建补间动画,重复上述步骤,插入图层3,在图片下面插入一个文本框,输入一个字“迎”,并设置字的字体、字号、字体颜色与“欢”相同。用同样的方法在图层3的第30帧插入一个关键帧,将,“迎”拖入图片合适位置,并
16、设置补间动画。,8.2.2 使用Flash制作补间动画-9,创建补间动画,再次重复操作,在图片上面插入“光”,在图片下插入“临”,并设置上动画。单击“控制”菜单,在下拉菜单中选择“播放”命令。,可以看到四个字分别进入图片上的动画效果。,8.2.2 使用Flash制作补间动画-10,导出动画,单击“文件”菜单,在下拉菜单中选择“导出”命令。,在“导出影片”对话框中,输入文件名,单击保存。将影片保存,将来可以随时将他插入到网页中。另外,也,可以更改保存类型为GIF文件,生成GIF动画。,8.2.3 使用Flash制作逐帧动画-1,逐帧动画是指更改每一帧中的内容,来实现动画效果。它最适合于每一帧中的
17、图像都在更改而不是仅仅简单地在舞台上移动的复杂动画。逐帧动画增加文件大小的速度比补间动画快的多。,在逐帧动画中,Flash会保存每个完整帧的值。,8.2.3 使用Flash制作逐帧动画-2,在Flash中建立一个新的文件,修改文档大小为图片大小,然后导入图片到图层1中,并拖动该图片到合适的位置。选中图层1中的第30帧,单击“插入”菜单,选择“帧”命令,,设置前30帧为相同的背景。,建立文件,8.2.3 使用Flash制作逐帧动画-3,在时间轴面板中单击“插入图层”按钮,在图层1上插入一个新的图层。选中图层2的第1帧,然后单击“工具”面板的文字工具,在图片上输入“欢迎光临”四个字。使用选取工具,
18、调整文字在图片中的位置,并设置字体、字号和文字颜色等。,拖动鼠标,选中图层2中的第1帧到第30帧。保持选取状态,单击鼠标右键,在打开的快捷菜单中选择“转换为关键帧”命令。,8.2.3 使用Flash制作逐帧动画-4,选中第5帧,将文字框中的“迎光临”几个字删除。,选中第10帧,将文字框中的“光临”几个字删除。,选中第15帧,将文字框中的“临”删除。,拖动鼠标,选中图层2中的第1帧到第4帧。保持选取状态,单击鼠标右键,在打开的快捷菜单中选择“清除关键帧”命令。如图8.65所示。然后按下键盘上的“del”键,将图层上的文字删除。,8.2.3 使用Flash制作逐帧动画-5,单击“控制”菜单,在下拉菜单中选择“播放”命令,这时可以看到文字依次出现的效果。,与补间动画一样,保存文件后选择“文件”菜单下的“导出”命令,将Flash影片导出,可以随时,插入到Dreamweaver中。,8.2.4 Flash与Dreamweaver 整合应用1,Flash也能够与Dreamweaver整合使用。在网页制作过程中,插入Flash文本与Flash按钮就是整合使用的好例子。,Dreamweaver还可以直接调用Flash对网页中已插入的图
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 苏少版四年级音乐教案下
- DB11-T 1945-2021 屋面防水技术标准
- 景观河道砖块运输服务协议
- 互联网金融服务居间协议
- 教育机构半包装修合同样本
- 保健用品居间合同样本
- 农产品冷链配送合同
- 家庭维修居间服务合同
- 医药用品个人承运合同模板
- 商业规划与运营
- 学习科学与技术智慧树知到期末考试答案章节答案2024年山东师范大学
- (正式版)SHT 3533-2024 石油化工给水排水管道工程施工及验收规范
- 30题药品质量检测岗位常见面试问题含HR问题考察点及参考回答
- 金坛区苏科版六年级上册劳动《05土培吊兰》课件
- 天翼云-高级解决方案架构师考前冲刺
- 工程变更联络单模板
- 仓库物料标识卡
- 国家、省、市级重点专科肛肠科汇报材料
- 食品安全自查、从业人员健康管理、进货查验记录、食品安全事故处置保证食品安全的规章制度
- (完整版)监理质量保证体系
- 10以内加法练习题直接打印(最新整理)
评论
0/150
提交评论