第8章图像与动画的制作与优化.ppt

《第8章图像与动画的制作与优化.ppt》由会员分享，可在线阅读，更多相关《第8章图像与动画的制作与优化.ppt（47页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1 图像的制作与优化 Fireworks是集创建、编辑和优化网页图形为一体的应用软件，它不仅可以创建与编辑位图和矢量图，而且可以通过修剪和优化图形图像来减小文件的大小。而在不影响图形图像质量的情况下，文件的体积越小，网页的下载速度就越快。这也是Fireworks大受欢迎的原因之一。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.1 Fireworks简介-1 Fireworks拥有与Dreamweaver相似的操作界面，同样由编辑区域、属性面板和浮动面板等组成。 第八章第八章 图像和动画的制作与优化图像和动画

2、的制作与优化 8.1.1 Fireworks简介-2 单击菜单栏上的“文件”，在下拉菜单中选择“新建”命令，打开“新建文档”对话框，在“新建文档”对话框中，可以通过更改宽度和高度的值，来更改画布的大小，还可以对分辨率和画布颜色进行修改。最后单击“确定”。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.1 Fireworks简介-3窗口左边的工具面板分为六个区域，分别有不同的功能。在该面板上集成了编辑图像所需的各种工具，只需要在面板上选择相应的工具就可以对矢量图、位图进行操作，这样就省去了在位图和矢量图之间的切换操作。 第八章第八章 图像和动画的制作与优化图像和动画的制作与

3、优化 8.1.1 Fireworks简介-4和Dreamweaver的属性面板一样，Fireworks的属性面板也是一个包含各种选项的动态面板。随着操作内容的变化，属性面板上的内容也随着发生相应的变化。如图8.6所示是选中画布时，属性面板的样子。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.1 Fireworks简介-5在默认的情况下，Dreamweaver的面板组停放在工作区的右侧。我们可以取消面板组，以及叠放面板，排列面板顺序等操作。在该面板组中可以完成许多高性能操作。如图8.7所示该面板组中有“优化”、“层”、“资源”、“帧和记录”和“答案”等面板，其中“层”和“

4、答案”面板是打开的。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.1 Fireworks简介-6在窗口中间是画布，它是对图像进行绘制、修改或编辑的地方。从图8.8中可以发现它提供了四种预览模式：原始、预览、2幅和4幅。具体的使用可以在下面的实例中给予说明。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.2 Fireworks中图片的制作-1更改画布单击菜单栏上的“修改”，弹出其子菜单，然后移动鼠标指针到画布上，在弹出其子菜单后，单击“画布大小”命令。在对话框中输入宽和高的值，单击“确定”按钮。 第八章第八章 图像和动画的制作与优化图像和动画的制作与

5、优化 8.1.2 Fireworks中图片的制作-2 画出红色的矩形区域 在工具面板的“矢量”区中单击“矩形”工具，然后在工具面板的“颜色”区中单击填充颜色块，在弹出的调色板中选择红色。在画布上拖动鼠标，画出一个红色的矩形区域。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.2 Fireworks中图片的制作-3 输入字母在工具面板的“矢量”区中单击“文本”工具，然后在编辑区的红色矩形块中单击鼠标，出现一个有光标闪动的文本框。在 文本框中输入大写的字母“JL”，然后拖动鼠标选中这两个字母，接着在“属性”面板中单击“颜色”块，在弹出的调色板中选择“黄色”。在属性面板中单击“

6、字体”框，在下拉列表中选择“Tahoma”字体，然后单击字号框右边的下拉按钮，拖动滑动指针，设置字号为31，在编辑区域单击鼠标，文字变成设置的效果。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.2 Fireworks中图片的制作-4 在工具面板的“选择”区中单击“选取”工具，然后在编辑区域中拖动文本框到合适的位置，使两个字母看起来更美观。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.2 Fireworks中图片的制作-5 输入汉字重复上述操作，在红色矩形块的右边输入“杰力”两个汉字，设置字体为“楷体”，字号为28。 单击菜单栏上的“文件”，在弹出

7、的文件菜单中单击“保存”命令。对文件进行保存。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.2 Fireworks中图片的制作-6 导出 图片单击菜单栏上的“文件”，在文件菜单中单击“导出”命令。 在对话框中输入文件名，单击“保存”按钮。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.3 FireworksFireworks中图片的优化中图片的优化-1-1 除了可以直接制作图片以外，Fireworks还可以对已有的图片进行优化，使图片在不影响视觉效果的情况下，体积更小，更有利于网络传输。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化

8、8.1.3 FireworksFireworks中图片的优化中图片的优化-2-2 打开图片单击菜单栏上的文件，打开“文件”菜单，在下拉菜单中单击“打开”命令，在“打开”对话框中，单击“查找范围”框，在下拉列表中找到存放图片文件的文件夹，然后选种要优化的文件，最后单击“打开”按钮。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.3 FireworksFireworks中图片的优化中图片的优化-3-3 在窗口右边的面板组中单击“优化”面板的“小三角”按钮，将“优化”面板展开。在“优化”面板中单击“设置”框，在下拉列表中选择“GIF接近256”,将图片优化成GIF文件，图片颜色

9、为256色。优化图片第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.3 FireworksFireworks中图片的优化中图片的优化-4-4 单击文件菜单，在下拉菜单中选择“导出”命令，打开“导出”对话框。在“导出”对话框中输入文件名，单击“保存”命令。 导出图片打开保存文件的文件夹，可以发现优化的效果是非常明显的。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.4 Fireworks与Dreamweaver 整合应用-1 网站的制作过程一般可分为网页组件制作准备、网页制作和网页管理三个阶段。在网页组件制作准备阶段主要使用Fireworks对图片进行处

10、理，其他两个阶段主要采用Dreamweaver 进行操作。通过两个软件的整合可以实现网站的决大部分操作。除了这种整合应用以外，在Dreamweaver中随时可以打开Fireworks，对网页中的图片进行编辑和优化。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.1.4 Fireworks与Dreamweaver 整合应用-2 在Dreamweaver窗口中，选中图片，然后在“属性”面板中单击“编辑”按钮，打开Fireworks。在Fireworks窗口中可以发现，图形文件被打开，特别是图片编辑区有“编辑自Dreamwea”的字样，表明该图片来自Dreamweaver。对图片进

11、行编辑或优化后，单击“完成”按钮，Fireworks编辑窗口自动关闭，同时Fireworks程序窗口最小化。Dreamweaver窗口中图片显示编辑后的样子。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2 动画的制作与优化 现在的网络可以说是Flash时代，越来越多的人喜欢Flash动画；越来越多的网站使用Flash制作的动画。不知Flash为何物，会直接被人认为是网络盲，甚至是电脑盲。 Flash功能强大，不仅仅是制作动画，甚至有人直接用它来制作网页。特别值得一提的是，它与Dreamweaver、Fireworks等软件整合使用天衣无缝。 第八章第八章 图像和动画的制作

12、与优化图像和动画的制作与优化 8.2.1 Flash简介-1 Flash为广大用户提供了三种不同的使用模式，我们多采用一般用户模式，设计者模式是专为动画设计师准备的；而开发者模式是给程序开发人员使用的。采用不同的模式可以屏蔽掉一些功能，为不同需求的用户带来极大的便利。单击“窗口”菜单，选择“面板设置”下的不同命令可以在不同的模式下进行切换。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.1 Flash简介-2 工具面板提供了一些常用的绘图工具。使用这些工具可以很容易地绘制出各种图形。该面板共分为4部分，工具部分主要用来创建或改变图像或文本；查看部分用来调整编辑的舞台；颜色

13、部分选择填充的颜色或线条的颜色；选项部分则随着选取工具的不同，而出现相应的修改工具。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.1 Flash简介-3 动作-帧面板是提供内嵌程序语言的编辑面板，作为初级使用者一般用不到。属性面板则用处很大，它和Dreamweaver、Fireworks的属性面板一样，其内容会根据所选对象的不同而发生变化。如图是新建一个文件时，属性面板的样子。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.1 Flash简介-4 在窗口中间的编辑区域，我们称其为舞台。它主要用于绘制或导入图片，添加文本或声音以及添加附加行为作为导航

14、按钮等等操作。在没有特殊效果的情况下，Flash动画都可以直接在舞台上播放，而不必转换成可播放的动画文件。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.1 Flash简介-5 Flash的时间轴主要用来组织和控制动画在一定时间内播放的层数和帧数。我们知道一帧一帧静止的图片连续起来就形成了动画。所以最简单的动画制作方法就是画出一帧一帧的图片，然后通过时间轴来控制他们的播放速度来实现。 时间轴由图层、帧和播放头组成。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.1 Flash简介-6 在默认的情况下，面板组包含“混色器”、“颜色样本”、“组件”和“问

15、题解答”四个。通过“窗口”菜单可以添加面板，当然也可以隐藏面板。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.2 使用Flash制作补间动画-1 补间动画是创建随时间移动或更改的动画的一种有效方法，并且最大程度地减小所生成的文件。在补间动画中，Flash能够自动地在两个关键帧之间插入帧的值或形状来创建动画，使动画变得生动。 补间动画分为运动渐变与形状渐变两种动画。运动渐变是指在一个时间点定义一个实例或文字块的位置、大小等特性，在另一个时间点改变这些属性，Flash自动插入动画帧，形成两者之间平滑的过度。形状渐变是指在一个时间点绘制一个形状，在另一个时间点更改该形状，Fl

16、ash自动插入动画帧，形成两者之间平滑的过渡。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.2 使用Flash制作补间动画-2 修改舞台大小单击菜单栏上的“修改”，在其下拉菜单中单击“文档”命令，在“文档属性”对话框中，修改尺寸值为图片的大小，注意默认单位为像素，单击“确定”后，舞台变为设置的大小。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.2 使用Flash制作补间动画-3 将图片导入到舞台中，作为背景 单击文件菜单，选择“导入”命令。在“导入”对话框中，选择查找范围，找到要导入的图片文件，单击“打开”按钮，单击选择工具，拖动图片，使它完全遮

17、盖住白色的舞台背景。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.2 使用Flash制作补间动画-4 使用鼠标单击第30帧，然后单击“插入”菜单，在下拉菜单中单击“帧”命令。这样，从第1帧到第30帧都使用了该图片作为背景。同时确定动画长度也设定了整个动画为30帧。第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.2 使用Flash制作补间动画-5 插入图层和文字 在时间轴面板中单击“插入图层”按钮，在图层1上插入一个新的图层。选中图层2的第1帧，然后单击“工具”面板中的“文本工具”。 在图片上方单击鼠标，出现文本框，输入一个字“欢”，然后选中这个字，在

18、属性面板中更改合适的字体和字号，并设置字体颜色为蓝色。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.2 使用Flash制作补间动画-6 选中图层2的第30帧，单击“插入”菜单，在下拉菜单中选择“关键帧”命令，在第30帧插入一个关键帧。 选择“工具”面板中的选取工具，拖动文字块“欢”到图片中的合适位置，插入关键帧第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.2 使用Flash制作补间动画-7 创建补间动画选中图层2上的第1帧，在属性面板中，单击“补间”右边的下拉框，在下拉列表中选择“运动”。为第1帧到第30帧之间设置上补间动画，可以发现两者之间有一条

19、黑色的箭头。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.2 使用Flash制作补间动画-8 创建补间动画重复上述步骤，插入图层3，在图片下面插入一个文本框，输入一个字“迎”，并设置字的字体、字号、字体颜色与“欢”相同。用同样的方法在图层3的第30帧插入一个关键帧，将“迎”拖入图片合适位置，并设置补间动画。第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.2 使用Flash制作补间动画-9 创建补间动画再次重复操作，在图片上面插入“光”，在图片下插入“临”，并设置上动画。单击“控制”菜单，在下拉菜单中选择“播放”命令。 可以看到四个字分别进入图片上的动

20、画效果。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.2 使用Flash制作补间动画-10 导出动画单击“文件”菜单，在下拉菜单中选择“导出”命令。 在“导出影片”对话框中，输入文件名，单击保存。将影片保存，将来可以随时将他插入到网页中。另外，也可以更改保存类型为GIF文件，生成GIF动画。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.3 使用Flash制作逐帧动画-1 逐帧动画是指更改每一帧中的内容，来实现动画效果。它最适合于每一帧中的图像都在更改而不是仅仅简单地在舞台上移动的复杂动画。逐帧动画增加文件大小的速度比补间动画快的多。在逐帧动画中，

21、Flash会保存每个完整帧的值。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.3 使用Flash制作逐帧动画-2 在Flash中建立一个新的文件，修改文档大小为图片大小，然后导入图片到图层1中，并拖动该图片到合适的位置。选中图层1中的第30帧，单击“插入”菜单，选择“帧”命令，设置前30帧为相同的背景。 建立文件第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.3 使用Flash制作逐帧动画-3 在时间轴面板中单击“插入图层”按钮，在图层1上插入一个新的图层。选中图层2的第1帧，然后单击“工具”面板的文字工具，在图片上输入“欢迎光临”四个字。使用选取工

22、具，调整文字在图片中的位置，并设置字体、字号和文字颜色等。 拖动鼠标，选中图层2中的第1帧到第30帧。保持选取状态，单击鼠标右键，在打开的快捷菜单中选择“转换为关键帧”命令。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.3 使用Flash制作逐帧动画-4 选中第5帧，将文字框中的“迎光临”几个字删除。 选中第10帧，将文字框中的“光临”几个字删除。 选中第15帧，将文字框中的“临”删除。 拖动鼠标，选中图层2中的第1帧到第4帧。保持选取状态，单击鼠标右键，在打开的快捷菜单中选择“清除关键帧”命令。如图8.65所示。然后按下键盘上的“del”键，将图层上的文字删除。 第八

23、章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.3 使用Flash制作逐帧动画-5 单击“控制”菜单，在下拉菜单中选择“播放”命令，这时可以看到文字依次出现的效果。 与补间动画一样，保存文件后选择“文件”菜单下的“导出”命令，将Flash影片导出，可以随时插入到Dreamweaver中。第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.4 Flash与Dreamweaver 整合应用1 Flash也能够与Dreamweaver整合使用。在网页制作过程中，插入Flash文本与Flash按钮就是整合使用的好例子。 Dreamweaver还可以直接调用Flash对网

24、页中已插入的图片或动画进行编辑。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.4 Flash与Dreamweaver 整合应用2 在“插入”面板中单击“媒体”选项卡，可以发现许多按钮，单击“Flash”按钮,在“选择文件”对话框中确定下查找范围，选中要编辑的文件，单击“确认”。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.4 Flash与Dreamweaver 整合应用3 在“属性”面板中可以发现，选中的图片出现在“文件”框中，单击“编辑”按钮可以打开Flash，同时图片文件处于编辑状态。 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.4 Flash与Dreamweaver 整合应用4第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.4 Flash与Dreamweaver 整合应用5 第八章第八章 图像和动画的制作与优化图像和动画的制作与优化 8.2.4 Flash与Dreamweaver 整合应用6