动态网页设计与制作实用教程第二版ppt课件(完整版).ppt

《动态网页设计与制作实用教程第二版ppt课件(完整版).ppt》由会员分享，可在线阅读，更多相关《动态网页设计与制作实用教程第二版ppt课件(完整版).ppt（273页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、动态网页设计与制作动态网页设计与制作实用教程实用教程（第二版）（第二版）21世纪高等院校计算机系列教材第第2章章 Flash 8基础知识基础知识本章学习导读本章学习导读 网页动画是一种重要的网页元素。一个合适的动画可使网页动画是一种重要的网页元素。一个合适的动画可使整个页面生动流畅，充满生机。本章主要讲整个页面生动流畅，充满生机。本章主要讲Flash8的基础知的基础知识，通过本章学习，读者应该掌握以下内容：识，通过本章学习，读者应该掌握以下内容：Flash 8的新增功能的新增功能Flash 8的工作界面的工作界面Flash 8的浮动面板的浮动面板第第2章章 Flash 8基础知识基础知识2.1

2、 认识认识Flash 82.1.1 Flash 8的发展的发展 Flash的前身是的前身是Future Splash，是早期网上流行的矢量动画插件。，是早期网上流行的矢量动画插件。Macromedia公司收购了公司收购了Future Splash以后便将其改名为以后便将其改名为Flash 2，一，一直到现在的直到现在的Flash 8。用户可以使用。用户可以使用Flash创建导航栏、动态指标、带有创建导航栏、动态指标、带有声音的动画，甚至一个完整的、丰富多彩的网站。声音的动画，甚至一个完整的、丰富多彩的网站。Flash动画是一种专为网络而创建的交互式矢量图形动画。由于动画是一种专为网络而创建的交

3、互式矢量图形动画。由于Flash动画使用的是矢量图形，所以下载速度快，而且能够缩放，使浏动画使用的是矢量图形，所以下载速度快，而且能够缩放，使浏览者能够全屏幕观看。览者能够全屏幕观看。第第2章章 Flash 8基础知识基础知识2.1.2 安装安装Flash 8 Flash 8可在可在Windows系列操作系统和系列操作系统和Macintosh系列操作系统中系列操作系统中运行，本书主要在运行，本书主要在Windows系统下进行讲解。系统下进行讲解。安装安装Flash 8的系统基本要求如下：的系统基本要求如下：（1）600MHz Intel Pentium III处理器或同等处理器。处理器或同等处

4、理器。（2）128 MB内存（建议内存（建议256MB）。）。（3）190 MB可用磁盘空间。可用磁盘空间。（4）Windows 98、Windows 2000、Windows 2003或或Windows XP操作系统。操作系统。第第2章章 Flash 8基础知识基础知识2.1.2 Flash 8的新增功能的新增功能 与与Flash MX 相比，相比，Flash 8增强和增加了一些新功能，这些新增功增强和增加了一些新功能，这些新增功能提高了工作效率，增强了丰富的媒体支持，并简化了发布流程。下面能提高了工作效率，增强了丰富的媒体支持，并简化了发布流程。下面对其简单介绍：对其简单介绍：（1）渐变增

5、强）渐变增强（2）对象绘制模型）对象绘制模型（3）FlashType。（4）脚本助手模式）脚本助手模式（5）文档选项卡）文档选项卡（6）自定义缓动控制）自定义缓动控制（7）图形效果滤镜）图形效果滤镜（8）混合模式）混合模式（9）位图平滑）位图平滑（10）改进的文本消除锯齿功能）改进的文本消除锯齿功能（11）新的视频编码器）新的视频编码器（12）视频）视频Alpha通道支持通道支持第第2章章 Flash 8基础知识基础知识2.2 Flash 8的工作界面的工作界面2.2.1 菜单栏菜单栏2.2.2 工具栏和绘图工具箱工具栏和绘图工具箱1工具栏工具栏2绘图工具箱绘图工具箱 绘图工具箱通过绘图工具箱

6、通过“窗口窗口/工具工具”菜单启动，默认位置在启动界面的左菜单启动，默认位置在启动界面的左侧。侧。绘图工具栏集中了绘画、文字及修改等常用工具，使用这些工具可以绘绘图工具栏集中了绘画、文字及修改等常用工具，使用这些工具可以绘制、选取、喷涂及修改作品。在制、选取、喷涂及修改作品。在Flash 8 中，绘图工具箱由工具区、视图中，绘图工具箱由工具区、视图区、颜色区和工具选项区区、颜色区和工具选项区4个区域构成，其中工具选项区的内容随着所选个区域构成，其中工具选项区的内容随着所选工具的不同而变化的，用于对绘图工具进行细节的设置。工具的不同而变化的，用于对绘图工具进行细节的设置。2.2.3 时间轴时间轴

7、 一个动画可以看作是静态图片按照一定的时间顺序先后播放的结果，一个动画可以看作是静态图片按照一定的时间顺序先后播放的结果，而播放时间和顺序的控制是通过时间轴来进行的。由于牵扯到帧与图层的而播放时间和顺序的控制是通过时间轴来进行的。由于牵扯到帧与图层的概念，因此在这里，不做详细解说，大家只需了解时间轴窗口在哪里就行概念，因此在这里，不做详细解说，大家只需了解时间轴窗口在哪里就行了在后面将会结合帧与图层进行综合的讲解，在后面将会结合帧与图层进了在后面将会结合帧与图层进行综合的讲解，在后面将会结合帧与图层进行综合讲解。时间轴面板在行综合讲解。时间轴面板在“窗口窗口/时间轴时间轴”菜单中启动。菜单中启

8、动。第第2章章 Flash 8基础知识基础知识2.2.4 “属性属性”面板面板 “属性属性”面板用来显示当前所选对象的常用属性。在舞台中选中某一对面板用来显示当前所选对象的常用属性。在舞台中选中某一对象，选择象，选择“窗口窗口/属性属性”菜单，启动属性面板，在菜单，启动属性面板，在“属性属性”面板上将显示对面板上将显示对象象的属性参数。如图所示，是椭圆对象的属性面板。的属性参数。如图所示，是椭圆对象的属性面板。2.2.5 其他面板其他面板 在在 Flash 8 中，还有几类设置面板，它们往往是进行元件设置的关键，中，还有几类设置面板，它们往往是进行元件设置的关键，因此我们必须熟练地掌握它们。这

9、些设置面板在因此我们必须熟练地掌握它们。这些设置面板在“窗口窗口”菜单中启动。菜单中启动。1“库库”面板面板 “库库”面板是存放元件的地方，它用于存储和组织导入的文件，包括位面板是存放元件的地方，它用于存储和组织导入的文件，包括位图图形、声音文件和视频剪辑等，可以在库中建立文件夹对元件进行管理。图图形、声音文件和视频剪辑等，可以在库中建立文件夹对元件进行管理。第第2章章 Flash 8基础知识基础知识2“信息信息”面板面板 用来显示选定对象的宽、高，以及鼠标光标处的颜色值、坐标值等信用来显示选定对象的宽、高，以及鼠标光标处的颜色值、坐标值等信息，如图所示。息，如图所示。3“混色器混色器”面板面

10、板 通过本面板可以选择颜色和填充的样式。颜色包括轮廓色、填充色、通过本面板可以选择颜色和填充的样式。颜色包括轮廓色、填充色、默认黑白色、轮廓色与填充色对换等。右下角的红、绿、蓝默认黑白色、轮廓色与填充色对换等。右下角的红、绿、蓝3个输入框，个输入框，显示了颜色的显示了颜色的 RGB 值，可以通过直接输入数值的方式指定某种颜色；左值，可以通过直接输入数值的方式指定某种颜色；左下方是色彩板，也可以直接用鼠标点选自己中意的颜色。另外有填充样式下方是色彩板，也可以直接用鼠标点选自己中意的颜色。另外有填充样式与填充颜色与填充颜色Alpha值两种设置功能。值两种设置功能。第第2章章 Flash 8基础知识

11、基础知识4“变形变形”面板面板 “变形变形”面板主要用于缩放、选装和倾斜所选的对象，只需在相应的输面板主要用于缩放、选装和倾斜所选的对象，只需在相应的输入框内填入合适的数字，再单击最下排两个按钮的第一个按钮就可以了。入框内填入合适的数字，再单击最下排两个按钮的第一个按钮就可以了。“变形变形”面板在面板在“窗口窗口/变形变形”菜单中启动，如图所示。菜单中启动，如图所示。5“对齐对齐”面板面板 本面板用来处理多个物件的相应位置关系，分别有左、中、右本面板用来处理多个物件的相应位置关系，分别有左、中、右3种水平对齐，种水平对齐，上、中、下上、中、下3种垂直对齐和顶、中、底种垂直对齐和顶、中、底3种分

12、散对齐方式。此外，还有宽度匹配、种分散对齐方式。此外，还有宽度匹配、高度匹配、宽度与高度都匹配高度匹配、宽度与高度都匹配3种匹配方式；空白高度匹配、空白宽度匹配两种间种匹配方式；空白高度匹配、空白宽度匹配两种间隔匹配方式。隔匹配方式。第第2章章 Flash 8基础知识基础知识6“颜色样本颜色样本”面板面板 使用使用“颜色样本颜色样本”面板可以方便选取存放在其中的预设在其中的预设面板可以方便选取存放在其中的预设在其中的预设好好的各种色彩和渐变色进行填充，从而减少重复设置颜色，提高工作效率。的各种色彩和渐变色进行填充，从而减少重复设置颜色，提高工作效率。7“动作动作”面板面板 Flash 8中的中

13、的“动作动作”面板用于为影片添加脚本，动画的交互性都是面板用于为影片添加脚本，动画的交互性都是通通过脚本实现的。要熟练地掌握脚本，就得有一定的过脚本实现的。要熟练地掌握脚本，就得有一定的 Flash 编程基础。选编程基础。选择择“窗口窗口/动作动作”菜单，启动动作面板。菜单，启动动作面板。8“组件组件”面板面板 “组件组件”面板中提供了一些常用的组件。面板中提供了一些常用的组件。第第2章章 Flash 8基础知识基础知识2.3 创建与保存动画创建与保存动画2.3.1 创建与保存动画创建与保存动画 双击桌面上或双击桌面上或“开始开始”菜单中的菜单中的Flash 8图标，程序打开工作界面。图标，程

14、序打开工作界面。运运用工具栏上的绘图工具创建和绘制图形，制作完成后，单击用工具栏上的绘图工具创建和绘制图形，制作完成后，单击“文件文件”菜单菜单中中的的“保存保存”菜单项就可以将你创建的动画保存。菜单项就可以将你创建的动画保存。2.3.2 文档属性设置文档属性设置 文档属性包括动画尺寸等内容。动画的尺寸就是动画在播放时画面的文档属性包括动画尺寸等内容。动画的尺寸就是动画在播放时画面的大小，在设置动画之前，必须根据需求首先设置动画的尺寸，同时还可以大小，在设置动画之前，必须根据需求首先设置动画的尺寸，同时还可以设置动画的播放速度和背景色等属性。操作如下：选择设置动画的播放速度和背景色等属性。操作

15、如下：选择“修改修改/文档文档”菜菜单，单，打开打开“文档属性文档属性”对话框，如图所示。对话框，如图所示。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑本章学习导读本章学习导读 在制作动画之前我们应该先掌握绘制、编辑动画角色的在制作动画之前我们应该先掌握绘制、编辑动画角色的基本工具和技巧。在基本工具和技巧。在Flash 8中绘制、编辑动画角色主要通中绘制、编辑动画角色主要通过绘图工具箱来进行。本章主要讲述绘图工具的使用和图形过绘图工具箱来进行。本章主要讲述绘图工具的使用和图形编辑过程。通过本章学习，读者应该掌握以下内容：编辑过程。通过本章学习，读者应该掌握以下内容：矢量图形和位图矢量图

16、形和位图Flash 8绘图工具箱的使用绘图工具箱的使用Flash 8的图形编辑功能的图形编辑功能图形绘制与编辑举例图形绘制与编辑举例第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.1 矢量图形和位图矢量图形和位图 在计算机中，图形的显示格式有两种：矢量图和位图。学会区分两在计算机中，图形的显示格式有两种：矢量图和位图。学会区分两种格式的图形对于动画的创作非常有用，同时可以提高工作效率。种格式的图形对于动画的创作非常有用，同时可以提高工作效率。3.1.1 矢量图矢量图 矢量图通过直线和曲线来描述图形，这些直线和曲线称为矢量。矢矢量图通过直线和曲线来描述图形，这些直线和曲线称为矢量。矢量根

17、据图形（包括文字）的几何特性来对其进行描述。矢量图的形状是量根据图形（包括文字）的几何特性来对其进行描述。矢量图的形状是由曲线通过的点来描述的，而它的颜色则由曲线的颜色和曲线所包围区由曲线通过的点来描述的，而它的颜色则由曲线的颜色和曲线所包围区域的颜色确定。在对一副矢量图进行编辑时，实际上修改的是其中曲线域的颜色确定。在对一副矢量图进行编辑时，实际上修改的是其中曲线的属性，可对曲线进行移动、缩放、改变形状和颜色等操作而不影响它的属性，可对曲线进行移动、缩放、改变形状和颜色等操作而不影响它的显示质量。的显示质量。矢量图具有分辨率无关行，换句话说，用户将它缩放到任意大小和矢量图具有分辨率无关行，换

18、句话说，用户将它缩放到任意大小和以任意分辨率在输出设备上打印出来，都不会遗漏细节或清晰度。因此，以任意分辨率在输出设备上打印出来，都不会遗漏细节或清晰度。因此，矢量图是文字（尤其是文字）和粗略图形的最佳选择。矢量图是文字（尤其是文字）和粗略图形的最佳选择。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.1.2 位图位图 位图通过把叫做像素的不同颜色的点安排在网格中而形成图像。成位图通过把叫做像素的不同颜色的点安排在网格中而形成图像。成像的原理是指定像素在网格中的位置和颜色值，方式与拼接而成的图形像的原理是指定像素在网格中的位置和颜色值，方式与拼接而成的图形十分类似。十分类似。对位图文件

19、进行编辑时，对象是像素而不是曲线。所以位图显示的对位图文件进行编辑时，对象是像素而不是曲线。所以位图显示的质量与分辨率有关，因为图像的每一个数据是根据特定大小的网格的。质量与分辨率有关，因为图像的每一个数据是根据特定大小的网格的。对位图进行编辑有可能改变显示的质量，尤其是缩放操作可使图形边缘对位图进行编辑有可能改变显示的质量，尤其是缩放操作可使图形边缘呈锯齿状，在一个比图形本身分辨率低的输出设备上显示图形时也会使呈锯齿状，在一个比图形本身分辨率低的输出设备上显示图形时也会使现实质量下降。现实质量下降。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.1.3 位图转换为矢量图位图转换为矢量

20、图 在新建的在新建的Flash 8文档中导入一幅位图图片，从主菜单上选择文档中导入一幅位图图片，从主菜单上选择“修改修改/位图位图/转换位图为矢量图转换位图为矢量图”，就会弹出，就会弹出“转换位图为矢量图转换位图为矢量图”对话框对话框:（1）“颜色阀值颜色阀值”选项的参数范围：选项的参数范围：1-500 它的作用是在两个像素相比时，颜色差低于设定的颜色阀值，则两它的作用是在两个像素相比时，颜色差低于设定的颜色阀值，则两个像素被认为是相同的。阀值越大转换后的矢量图的颜色减少。个像素被认为是相同的。阀值越大转换后的矢量图的颜色减少。（2）“最小区域最小区域”选项的参数范围：选项的参数范围：1-10

21、00 它的作用是在指定的像素颜色时需要考虑周围的像素数量，最小区它的作用是在指定的像素颜色时需要考虑周围的像素数量，最小区域是跟踪位图平均不同的颜色值。域是跟踪位图平均不同的颜色值。（3）“曲线拟合曲线拟合”选项的参数范围：像素选项的参数范围：像素 它是决定生成的矢量图的轮廓和区域的粘合程度。它是决定生成的矢量图的轮廓和区域的粘合程度。（4）“角阀值角阀值”选项的参数范围：较多转角选项的参数范围：较多转角 它是决定生成的矢量图中保留锐利边缘还是平滑处理。实践表明，它是决定生成的矢量图中保留锐利边缘还是平滑处理。实践表明，如果要创建最近原始位图的矢量图形，上图中为最佳的设置。设置完成如果要创建最

22、近原始位图的矢量图形，上图中为最佳的设置。设置完成后单击后单击“确定确定”按钮，就可以将位图转换为矢量图形了。按钮，就可以将位图转换为矢量图形了。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.2 图形角色的绘制与填充图形角色的绘制与填充3.1.1 图形角色的绘制图形角色的绘制 图形绘制主要通过绘图工具箱来完成，本节主要讲述绘图工具箱的图形绘制主要通过绘图工具箱来完成，本节主要讲述绘图工具箱的使用。在图形绘制过程中，可通过使用。在图形绘制过程中，可通过“属性属性”面板调整绘制工具和绘制图形面板调整绘制工具和绘制图形的属性。有些绘图工具选中后，在工具箱的选项栏中会出现其模式选项。的属性。

23、有些绘图工具选中后，在工具箱的选项栏中会出现其模式选项。模式选项使绘图更加灵活、准确。模式选项使绘图更加灵活、准确。钢笔工具部分选取工具选择性工具任意变形工具线条工具椭圆工具铅笔工具墨水瓶工具滴管工具填充变形工具套索工具文本工具矩形工具刷子工具颜料桶工具橡皮擦工具第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑（1）直线工具：主要用于绘制线段。选中该工具后，可在属性面板中调）直线工具：主要用于绘制线段。选中该工具后，可在属性面板中调整线型和粗细。线条的属性主要有笔触颜色、笔触高度和笔触样式整线型和粗细。线条的属性主要有笔触颜色、笔触高度和笔触样式3种。种。（2）钢笔工具：主要用于绘制贝赛尔

24、曲线，通过对贝赛尔曲线的调整，）钢笔工具：主要用于绘制贝赛尔曲线，通过对贝赛尔曲线的调整，可以得到复杂的曲线图形。可以得到复杂的曲线图形。（3）铅笔工具：可以在舞台上自由绘制线条和几何图形。）铅笔工具：可以在舞台上自由绘制线条和几何图形。（4）文本工具：该工具用来在场景中添加文本角色。）文本工具：该工具用来在场景中添加文本角色。（5）椭圆工具：可以在舞台上绘制出椭圆或者圆形，绘制出的图形包括）椭圆工具：可以在舞台上绘制出椭圆或者圆形，绘制出的图形包括轮廓线和填充色。轮廓线和填充色。（6）矩形工具：可以在舞台上绘制矩形或者正方形图形，操作方法与）矩形工具：可以在舞台上绘制矩形或者正方形图形，操作

25、方法与“椭椭圆工具圆工具”完全相同。完全相同。（7）多角星形工具：）多角星形工具：“多角星形工具多角星形工具”与与“矩形工具矩形工具”占据同一位置，占据同一位置，按住按住“矩形工具矩形工具”按钮不放，会弹出工具选择列表，切换到按钮不放，会弹出工具选择列表，切换到“多角星形工具多角星形工具”，使，使用用“多角星形工具多角星形工具”可以在舞台上绘制等边多边形或者等边星形图形。可以在舞台上绘制等边多边形或者等边星形图形。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.1.2 颜色的填充颜色的填充（1）墨水瓶工具：本工具用来给图形对象的线条或几何图形的笔画边框）墨水瓶工具：本工具用来给图形对象

26、的线条或几何图形的笔画边框上色。上色。（2）颜料桶工具：对图像进行填色，根据选项的不同可以采取多种填充）颜料桶工具：对图像进行填色，根据选项的不同可以采取多种填充方式。方式。（3）笔刷工具：既然是）笔刷工具：既然是“刷子刷子”，它起着涂刷的功能。，它起着涂刷的功能。（4）滴管工具：本工具用来进行颜色取样，将一个图形或线条的颜色复）滴管工具：本工具用来进行颜色取样，将一个图形或线条的颜色复制到其他图形或线条上。制到其他图形或线条上。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.2 编辑图形角色编辑图形角色3.2.1 选取角色选取角色利用魔术棒工具可在分离的位图上选取相近色块，操作步骤如

27、下：利用魔术棒工具可在分离的位图上选取相近色块，操作步骤如下：（1）选择位图，通过）选择位图，通过“修改修改/分离分离”菜单，分离图像。菜单，分离图像。（2）选取套索工具选项中的魔术棒图标。）选取套索工具选项中的魔术棒图标。（3）单击）单击“阀值阀值”调节图标，设置阀值，阀值越大选取范围越大。调节图标，设置阀值，阀值越大选取范围越大。（4）在位图上的任意处单击，就会选取与单击处颜色相近的区域。）在位图上的任意处单击，就会选取与单击处颜色相近的区域。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑3.2.2 复制和删除复制和删除 先选中要复制或删除的对象，然后在对象上按右键，选择复制或删除先

28、选中要复制或删除的对象，然后在对象上按右键，选择复制或删除功能菜单（也可通过功能菜单（也可通过“编辑编辑”菜单进行）。菜单进行）。3.2.3 擦除角色工具擦除角色工具 本工具用来擦除一些不需要的线条或区域。本工具用来擦除一些不需要的线条或区域。3.2.4 变形工具变形工具（1）任意变形工具：本工具可实现对动画角色的大小和旋转变形。）任意变形工具：本工具可实现对动画角色的大小和旋转变形。（2）填充变形工具：本工具可实现对填充内容的缩放和旋转变形，像前）填充变形工具：本工具可实现对填充内容的缩放和旋转变形，像前面讲过的位图填充的变形。面讲过的位图填充的变形。第第3章章 动画角色的绘制与编辑动画角色

29、的绘制与编辑3.3 角色创作实例角色创作实例例例1：人物的绘制：人物的绘制制作思路：利用箭头选取工具拉弯线条，组成简笔画。制作思路：利用箭头选取工具拉弯线条，组成简笔画。制作步骤：制作步骤：（1）建立一个新文件（以后实例的第一步都是这个操作，就不再一一指）建立一个新文件（以后实例的第一步都是这个操作，就不再一一指明）。明）。（2）用画圆工具画出空心圆，在眼睛和嘴巴部位画出线条。）用画圆工具画出空心圆，在眼睛和嘴巴部位画出线条。（3）选取）选取“黑色箭头黑色箭头”工具，让鼠标逐渐靠近线段，当鼠标箭头末端虚工具，让鼠标逐渐靠近线段，当鼠标箭头末端虚线线框框 变为圆弧时变为圆弧时，按住左键拉弯线段，

30、构成简笔画。，按住左键拉弯线段，构成简笔画。第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑例例2：水晕的制作：水晕的制作制作思路：利用混色器面板制作透明的奇特效果。制作思路：利用混色器面板制作透明的奇特效果。制作步骤如下：制作步骤如下：（1）建立）建立Flash 8文件，背景设为灰黑色。启动混色器面板，选择文件，背景设为灰黑色。启动混色器面板，选择“放射状放射状”填填充充模式。设置模式。设置3个颜料桶，两端桶的颜色为灰色（或淡紫色），中间桶的颜色为白个颜料桶，两端桶的颜色为灰色（或淡紫色），中间桶的颜色为白色，选中左端的颜料桶，调整色，选中左端的颜料桶，调整Alpha值为值为0，即将颜色

31、设为透明。同样将右端的颜，即将颜色设为透明。同样将右端的颜料桶设为透明色。中间颜色的料桶设为透明色。中间颜色的Alpha值不变，如图值不变，如图3-20所示。所示。（2）利用图形绘制工具（不要边框）绘出正圆，并将其变形，效果如图）利用图形绘制工具（不要边框）绘出正圆，并将其变形，效果如图3-21所所示，圆圈中间为白色，向两边颜色逐渐过渡为透明，显示出背景色。示，圆圈中间为白色，向两边颜色逐渐过渡为透明，显示出背景色。图图 3-20 填充色设置填充色设置 图图 3-21 水晕图效果水晕图效果第第4章章 动画的基本形式动画的基本形式本章学习导读本章学习导读 在在Flash 8中，动画的制作分为帧动

32、画、移动动画和形中，动画的制作分为帧动画、移动动画和形变动画变动画3种基本形式。本章我们将分别讲述有关动画制作的种基本形式。本章我们将分别讲述有关动画制作的基本概念和基本概念和3种动画形式的制作过程，通过本章学习读者应种动画形式的制作过程，通过本章学习读者应该掌握以下内容：该掌握以下内容：场景、时间轴、帧、元件在动画制作中的作用场景、时间轴、帧、元件在动画制作中的作用帧动画、移动动画和形变动画的特点与制作过程帧动画、移动动画和形变动画的特点与制作过程第第4章章 动画的基本形式动画的基本形式4.1 动画制作的有关概念动画制作的有关概念4.1.1 场景场景 在在Flash 8动画中，场景是进行动画

33、中，场景是进行Flash创作的工作区域。在场景中可创作的工作区域。在场景中可以对当前帧的内容进行编辑，只有在场景的矩形区域中的内容才会最终以对当前帧的内容进行编辑，只有在场景的矩形区域中的内容才会最终被导出成为被导出成为Flash作品。场景可以不止一个，多个场景可以集合在一起作品。场景可以不止一个，多个场景可以集合在一起并按它们在场景面板上排列的先后顺序进行播放。下面是关于场景的几并按它们在场景面板上排列的先后顺序进行播放。下面是关于场景的几个基本操作：个基本操作：（1）改变场景属性。使用）改变场景属性。使用“修改修改/文档文档”菜单或在工作区按右键选菜单或在工作区按右键选“文文档属性档属性”

34、，弹出文档属性窗口，设置属性参数。，弹出文档属性窗口，设置属性参数。（2）场景的缩放与移动。在动画制作中为了方便操作，可以通过菜单命）场景的缩放与移动。在动画制作中为了方便操作，可以通过菜单命令缩放工作区域。令缩放工作区域。第第4章章 动画的基本形式动画的基本形式4.1.2 时间轴时间轴 时间轴是时间轴是Flash中最重要、最核心的部分，如图中最重要、最核心的部分，如图4-2所示。所示。Flash是是通过时间轴把一幅幅画面组织起来的，所以，时间轴在通过时间轴把一幅幅画面组织起来的，所以，时间轴在Flash动画制作动画制作中扮演导演的角色。中扮演导演的角色。时间轴是进行有关帧和层操作的地方，主要

35、由图层、帧和播放头组时间轴是进行有关帧和层操作的地方，主要由图层、帧和播放头组成，可以分为左右两部分，左边部分用来对图层进行管理和操作，右边成，可以分为左右两部分，左边部分用来对图层进行管理和操作，右边部分用来对帧进行操作。部分用来对帧进行操作。4.1.3 帧帧 前面我们讲到了时间轴，随着时间的推进，动画会按照时间轴的前面我们讲到了时间轴，随着时间的推进，动画会按照时间轴的横轴方向播放，而时间轴正是对帧进行操作的场所。在时间轴上，每横轴方向播放，而时间轴正是对帧进行操作的场所。在时间轴上，每一个小方格就是一个帧，每一帧相当于场景中的一个镜头。在默认状一个小方格就是一个帧，每一帧相当于场景中的一

36、个镜头。在默认状态下，每隔态下，每隔5帧进行数字标示，如时间轴上的帧进行数字标示，如时间轴上的1、5、10、15等数字标等数字标识，如图识，如图4-3所示。所示。第第4章章 动画的基本形式动画的基本形式4.1.4 元件元件 元件只是一种人为的规范，我们将动画中一些出现频率比较高的物元件只是一种人为的规范，我们将动画中一些出现频率比较高的物件对象作用定义以便引用，而这种被定义的物件就是件对象作用定义以便引用，而这种被定义的物件就是“元件元件”。元件好。元件好像像被储备起来的演员，随时可调出来扮演角色。使用元件，可以很方便地被储备起来的演员，随时可调出来扮演角色。使用元件，可以很方便地对动画元素进

37、行管理与修改，如颜色、亮度、透明度等。而且只需在库对动画元素进行管理与修改，如颜色、亮度、透明度等。而且只需在库窗口中对元件进行修改，动画中所有被引用的该元件都会发生相应的变窗口中对元件进行修改，动画中所有被引用的该元件都会发生相应的变化。化。动画制作，文件体积当然越小越好，而使用元件，可以在很大程度动画制作，文件体积当然越小越好，而使用元件，可以在很大程度上减小文件体积。如果动画中有很多重复的图形而不使用元件，装载时上减小文件体积。如果动画中有很多重复的图形而不使用元件，装载时就要不断地重复装载图形；如果使用元件，则只需装载一次，以后就可就要不断地重复装载图形；如果使用元件，则只需装载一次，

38、以后就可以通过调用来直接播放了。以通过调用来直接播放了。第第4章章 动画的基本形式动画的基本形式1新建一个元件新建一个元件 选择选择“插入插入/新建元件新建元件”菜单（也可以选中场景中已有的图片，利用菜单（也可以选中场景中已有的图片，利用“插插入入/转换为元件转换为元件”），弹出），弹出“创建新元件创建新元件”对话框。对话框。2清除一个元件清除一个元件 在库窗口选中要删除的元件，单击窗口下边框处的删除图标在库窗口选中要删除的元件，单击窗口下边框处的删除图标；或者；或者选中元件后，在右键菜单中选择选中元件后，在右键菜单中选择“删除删除”。3拷贝一个元件拷贝一个元件 选中元件后，在右键菜单中选择选

39、中元件后，在右键菜单中选择“复制复制”，并在弹出的窗口中设置元，并在弹出的窗口中设置元件属性。件属性。4元件的常规属性元件的常规属性 元件有颜色、亮度、透明度等特殊效果，而这些效果可以通过属性面元件有颜色、亮度、透明度等特殊效果，而这些效果可以通过属性面板进行设置。板进行设置。第第4章章 动画的基本形式动画的基本形式5元件的应用元件的应用 在场景中应用元件包括应用本影片元件库中的元件和应用其他影片在场景中应用元件包括应用本影片元件库中的元件和应用其他影片元件库中的元件。应用本影片元件库中的元件，应先打开元件库面板，元件库中的元件。应用本影片元件库中的元件，应先打开元件库面板，将相应的元件用鼠标

40、拖入场景工作区。应用其他影片中的元件应该先通将相应的元件用鼠标拖入场景工作区。应用其他影片中的元件应该先通过菜单过菜单“文件文件/作为库打开作为库打开”打开相应的元件库，再应用其中的元件。打开相应的元件库，再应用其中的元件。第第4章章 动画的基本形式动画的基本形式4.2 三种基本动画形式三种基本动画形式 帧动画、移动动画和形变动画的制作过程各有特点，但制作原理是相帧动画、移动动画和形变动画的制作过程各有特点，但制作原理是相通的，即要解决以下通的，即要解决以下3个问题：个问题：（1）什么在动（确定运动对象）？）什么在动（确定运动对象）？（2）从哪里动到哪里（运动的起止位置）？）从哪里动到哪里（运

41、动的起止位置）？（3）怎么运动（设置运动的性质）？）怎么运动（设置运动的性质）？4.2.1 帧动画的制作帧动画的制作 帧动画是由一帧一帧的画面组成的，要作出精美的动画需一幅一幅地帧动画是由一帧一帧的画面组成的，要作出精美的动画需一幅一幅地绘制画面，而后串接起来。帧动画的制作没有什么特别之处，只是绘制不绘制画面，而后串接起来。帧动画的制作没有什么特别之处，只是绘制不同的帧内容时，适当地利用以前帧的内容（洋葱皮效果）可以大大简化、同的帧内容时，适当地利用以前帧的内容（洋葱皮效果）可以大大简化、加快我们的动画制作进程。加快我们的动画制作进程。第第4章章 动画的基本形式动画的基本形式4.2.2 移动动

42、画的制作移动动画的制作 移动动画是通过改变对象的位置、颜色、大小、旋转角度、透明度移动动画是通过改变对象的位置、颜色、大小、旋转角度、透明度等来实现的。改变以上属性需要设置等来实现的。改变以上属性需要设置“属性属性”和和“混色器混色器”面板等，该动面板等，该动画画的运动对象必须是元件等实体。的运动对象必须是元件等实体。第第4章章 动画的基本形式动画的基本形式例例4-3 运动的小球运动的小球（1）打开）打开Flash 8程序，在场景编辑窗口的左边用圆形工具绘制一个圆，程序，在场景编辑窗口的左边用圆形工具绘制一个圆，内部填色为内部填色为“线性线性”渐变。渐变。（2）用黑箭头工具选中刚刚绘制的圆，选

43、择）用黑箭头工具选中刚刚绘制的圆，选择“插入插入/转换为元件转换为元件”菜单，菜单，弹出元件命名对话框，我们给圆命名为弹出元件命名对话框，我们给圆命名为Ball，元件的类型选为，元件的类型选为“图形图形”类类型。这样场景中的圆就变成元件了。型。这样场景中的圆就变成元件了。（3）在第）在第30帧处单击右键，在出现的弹出菜单中，选择帧处单击右键，在出现的弹出菜单中，选择“插入关键帧插入关键帧”。插入新建关键帧后，系统自动复制插入新建关键帧后，系统自动复制Ball元件在工作区的左边缘处。用鼠元件在工作区的左边缘处。用鼠标直接按住标直接按住Ball水平拖到工作区右边缘处。水平拖到工作区右边缘处。（4）

44、鼠标单击时间轴的第一帧（动画的开始关键帧），然后在帧属性面）鼠标单击时间轴的第一帧（动画的开始关键帧），然后在帧属性面板板“补间补间”标签后的文本框中，选择动画形式为：动画，如下图所示。标签后的文本框中，选择动画形式为：动画，如下图所示。第第4章章 动画的基本形式动画的基本形式（5）此时可以看到在时间轴上，从第）此时可以看到在时间轴上，从第1帧到第帧到第30帧处所有帧的颜色都变帧处所有帧的颜色都变成淡蓝色，并且有一个黑色的箭头贯穿各帧。利用洋葱皮效果切换按钮，成淡蓝色，并且有一个黑色的箭头贯穿各帧。利用洋葱皮效果切换按钮，拖动时间标尺上的界标，使之覆盖所有帧。拖动时间标尺上的界标，使之覆盖所有

45、帧。（6）测试动画。动画已经制作完成，在场景编辑窗口敲回车键直接预览，）测试动画。动画已经制作完成，在场景编辑窗口敲回车键直接预览，可以看到可以看到Ball元件从左到右飞过场景，如下图所示。元件从左到右飞过场景，如下图所示。第第4章章 动画的基本形式动画的基本形式4.2.3 形变动画形变动画 创建创建Flash 8动画，除了上面提到的位置变化外，还有形状变化。形动画，除了上面提到的位置变化外，还有形状变化。形状变化指的是运动对象的构成进行了重新组合。形变的运动对象与位移动状变化指的是运动对象的构成进行了重新组合。形变的运动对象与位移动画相反，必须是打散的实体，否则无法变形。在画相反，必须是打散

46、的实体，否则无法变形。在Flash 8中实现图形变形中实现图形变形的途径有多种，比如：通过选择工具、变形工具、编辑工具等都可以实现的途径有多种，比如：通过选择工具、变形工具、编辑工具等都可以实现变形变形第第5章章 洋葱皮、图层及声音的应用洋葱皮、图层及声音的应用 5.1 洋葱皮效果的应用葱皮效果的应用5.2 图层的应用图层的应用5.3 声音效果的应用声音效果的应用 5.1 洋葱皮效果的应用洋葱皮效果的应用 Flash 8 中有种专门的多帧编辑与对齐模式，叫作中有种专门的多帧编辑与对齐模式，叫作“洋洋葱皮效果葱皮效果”（Onion Skin），它们位于时间轴下面。把），它们位于时间轴下面。把“洋

47、洋葱皮葱皮”视图模式打开，点按时间轴下面的图标视图模式打开，点按时间轴下面的图标,时间轴上出时间轴上出现了两个圆圈，它们分别代表洋葱皮的起始帧与终止帧，凡现了两个圆圈，它们分别代表洋葱皮的起始帧与终止帧，凡是在这个范围内的帧都可在同一时间进行显示。是在这个范围内的帧都可在同一时间进行显示。工工作作区区中中的的内内容容也也会会有有所所变变化化，从从第第1帧帧到到第第40帧帧的的内内容容全全显显示示出出来来了了。洋洋葱葱皮皮模模式式的的作作用用主主要要是是用用来来进进行行多多帧帧编编辑辑，在在进进行行起起始始帧帧与与终终止止帧帧的的元元素素精精确确定定位位时时，它它常常常常是是必必不可少的工具。不

48、可少的工具。元件有个中心点，它是缩放与旋转操作的参照点，因此元件有个中心点，它是缩放与旋转操作的参照点，因此在进行多帧编辑时有必要先改变元件的中心点再进行编辑。在进行多帧编辑时有必要先改变元件的中心点再进行编辑。改变元件中心点的操作是在元件的编辑窗口中进行的。改变元件中心点的操作是在元件的编辑窗口中进行的。5.2 图层的应用图层的应用5.2.1 图层的状态图层的状态 在在Flash 8中，层有中，层有4种状态。通过鼠标单击图层名右侧的圆点，可调整图层的状态。种状态。通过鼠标单击图层名右侧的圆点，可调整图层的状态。5.2.2 图层的基本操作图层的基本操作 图图层层的的基基本本操操作作可可通通过过

49、图图层层窗窗口口中中的的工工具具图图标标进进行行。工工具具图图标标在在图图层层窗窗口口的的左左下下角角，下面将结合操作过程讲述他们的应用。下面将结合操作过程讲述他们的应用。5.2.3 图层的属性图层的属性 随便选中某个图层，单击鼠标右键，在弹出的菜单中选择随便选中某个图层，单击鼠标右键，在弹出的菜单中选择“属性属性”,本面板中，有图本面板中，有图层名称、显示、锁定、类型、轮廓颜色、是否为外框模式等内容。类型中，除了普通图层层名称、显示、锁定、类型、轮廓颜色、是否为外框模式等内容。类型中，除了普通图层（NormalNormal），还有），还有“引导层引导层”和和“遮罩层遮罩层”两种。后面将介绍这

50、两种图层的应用。两种。后面将介绍这两种图层的应用。5.2.4 引导层引导层 在在Flash 8图层面板中，引导图层的名称前有一个图层面板中，引导图层的名称前有一个“小锤小锤”或者或者“弧线弧线”图标图标,两种图两种图标表示两种引导图层，标表示两种引导图层，“小锤小锤”图标表示的是普通的导向图层，仅起到辅助静态定位作用；图标表示的是普通的导向图层，仅起到辅助静态定位作用；弧线图标表示的引导图层为运动引导图层，在制作动画时起到引导对象沿指定路径运动的弧线图标表示的引导图层为运动引导图层，在制作动画时起到引导对象沿指定路径运动的作用。作用。5.2.5 遮罩层遮罩层 从前面的知识我们知道：层是透明的，