第一讲动画设计基础.docx

1、第一讲动画设计基础第15章 Flash 8工作环境教学要点： 熟悉Flash8的工作环境 了解Flash8基本的操作方法和工作环境的组织和安排Macromedia Flash以便捷、完美、舒适的动画编辑环境，深受广大动画制作爱好者的喜爱，在制作动画之前，我们先对工作环境中的菜单、工具、面板等作一介绍，包括一些基本的操作方法和工作环境的组织和安排。15.1 什么是 FlashFlash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作

2、的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序。Flash 特别适用于创建通过 Internet 提供的内容，因为它的文件非常小。Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。要在 Flash 中构建应用程序，可以使用 Flash 绘图工具创建图形，并将其它媒体元素导入 Flash 文档。接下来，定义如何以及何时使用各个元素来创建设想

3、中的应用程序。在 Flash 中创作内容时，需要在 Flash 文档文件中工作。Flash 文档的文件扩展名为 .fla (FLA)。Flash 文档有四个主要部分： 【舞台】是在回放过程中显示图形、视频、按钮等内容的位置。 【时间轴】用来通知 Flash 显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。 【库】面板是 Flash 显示 Flash 文档中的媒体元素列表的位置。 【ActionScript】代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用 A

4、ctionScript 向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash 包括两个版本的 ActionScript，可满足创作者的不同具体需要。完成 Flash 文档的创作后，可以使用【文件】-【发布】命令发布它。这会创建文件的一个压缩版本，其扩展名为 .swf (SWF)。然后，就可以使用 Flash Player 在 Web 浏览器中播放 SWF 文件，或者将其作为独立的应用程序进行播放。15.2初识Flash 8运行Flash 8，首先映入我们眼帘的是操作的“开始”页面，如图15-1。页面中列出了一些常用的任务，左边是打开最近用过的项目，中间是

5、创建各种类型的新项目、右边是从模板创建各种动画文件。单击【创建新项目】下的【Flash 文档】，这样就创建了一个新的动画文件。Flash的工作界面由几个主要部分组成，最上方的是“主菜单栏”；执行【窗口】|【工具栏】|【主工具栏】命令，可在“主菜单栏”下方打开“主工具栏”；“主工具栏”的下方是“文档选项卡”，用于切换打开的当前文档；“时间轴”和“舞台”位于工作界面的中心位置；左边是功能强大的“工具箱”浮动面板，用于创建和修改矢量图形内容；多个其他“浮动面板”围绕在“舞台”的下面和右面，包括常用的【属性】、【动作帮助】、【颜色】和【库】等浮动面板，如图15-2所示。15.2.1 文档选项卡新建或打

6、开一个文档时，在“时间轴”的上方会显示出“文档选项卡”。如果打开或创建多个文档，“文档名称”将按文档创建的先后顺序显示在“文档选项卡”中，单击文件名称，可以在多个文档之间进行快速切换。用鼠标右键单击“文档选项卡”，在弹出的菜单中可以快速实现【新建】、【打开】、【保存】等功能，如图15-3所示。图153文档选项卡15.2.2 舞台【舞台】位于工作界面的正中间部位，是放置动画内容的区域。这些内容包括矢量插图、文本框、按钮、导入的位图图形或视频剪辑等。可以在【属性】面板中设置和改变【舞台】的大小，默认状态下，【舞台】的宽为550像素，高为400像素，如图15-4所示。图15-4 舞台工作时根据需要可

7、以改变【舞台】显示的比例大小，可以在【时间轴】右上角的“显示比例”中设置显示比例，最小比例为8%，最大比例为2000%，在下拉菜单中有三个选项，【符合窗口大小】选项用来自动调节到最合适的舞台比例大小；【显示帧】选项可以显示当前帧的内容；【全部显示】选项能显示整个工作区中包括在“舞台”之外的元素，如图15-5所示。图15-5 舞台显示比例 选择工具箱中的【手形工具】，在舞台上拖动鼠标可平移舞台；选择【缩放工具】，在舞台上单击可放大或缩放舞台的显示；选择【缩放工具】后，在工具箱的【选项】下会显示出两个按钮，分别为【放大】和【缩小】，分别单击它们可在“放大视图工具”与“缩小视图工具”之间切换，如图1

8、5-6所示；选择选择【缩放工具】后，按住键盘上的Alt键，单击舞台，可快捷缩小视图。15.2.3 时间轴【时间轴】用于组织和控制文档内容在一定时间内播放的图层数和帧数。与胶片一样，Flash 文档也将时长分为帧。图层就像堆叠在一起的多张幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像。时间轴的主要组件是图层、帧和播放头。文档中的图层列在时间轴左侧的列中。每个图层中包含的帧显示在该图层名右侧的一行中。时间轴顶部的时间轴标题指示帧编号。播放头指示当前在舞台中显示的帧中对象。播放 Flash 文档时，播放头从左向右通过时间轴。时间轴状态显示在时间轴的底部，它指示所选的帧编号、当前帧频以及到当前

9、帧为止的运行时间。时间轴的一些功能介绍如图15-7所示。图157时间轴15.2.4 常用浮动面板Flash 8有很多浮动面板，单击【窗口】菜单，可打开相关浮动面板。在打开的浮动面板，单击面板的“标题栏”，可以展开它们。再次单击标题栏，可折叠面板。拖动面板左侧的到舞台上，可将面板独立出来，成为窗口显示模式。展开面板后，单击面板右上角的按钮，在弹出的面板选项菜单中选择【关闭面板】命令，可将面板关闭，想再次打开面板时，可执行【窗口】菜单中的相关命令即可。如果想回到默认时的面板布局状态，可执行【窗口】|【工作区布局】|【默认】命令。默认状态下，在“舞台”的正下方有二个比较常用的浮动面板，分别是【动作】

10、面板和【属性】面板，左侧是【工具】面板、右侧有【颜色】和【库】等浮动面板。其中经常使用的浮动面板有：1工具箱位于工作界面左边长条形状就是工具箱，工具箱是Flash最常用到的一个面板，用鼠标单击的方式能选中其中的各种工具，如图 15-8所示。执行【编辑】|【自定义工具面板】命令，可以自定义工具箱中的工具编排。2【帮助】面板单击“帮助”菜单中的【Flash帮助】或按F1健，出现【帮助】浮动面板，建议用户认真学习、熟练使用【帮助】浮动面板。3【动作】面板【动作】面板是动作脚本的编辑器，具体功能将会在后面的动作脚本章节中具体讲解。4【属性】面板【属性】面板可以很容易地访问舞台或时间轴上当前选定项的最常

11、用属性，也可以在面板中更改对象或文档的属性，具体使用将在后面的章节中结合具体对象介绍，如图15-9 所示。图15-9【属性面板】5【对齐】/【变形】面板如图15-10所示，Flash 8对齐浮动面板包含三个标签，【对齐】、【信息】、【变形】，其中【对齐】标签可以重新调整选定对象的对齐方式和分布，【对齐】标签分为五个区域：【相对于舞台】：按下此按钮后可以调整选定对象相对于舞台尺寸的对齐方式和分布；如果没有按下此按钮则是两个以上对象之间的相互对齐和分布。【对齐】：用于调整选定对象的左对齐、水平中齐、右对齐、上对齐、垂直中齐和底对齐。【分布】：用于调整选定对象的顶部、水平居中和底部分布，以及左侧、垂

12、直居中和右侧分布。【匹配大小】：用于调整选定对象的匹配宽度、匹配高度或匹配宽和高。【间隔】：用于调整选定对象的水平间隔和垂直间隔。【信息】标签面板可以查看对象的大小、位置、颜色和鼠标指针的信息。面板分为四个区域：左上方显示对象的【宽】和【高】信息；右上方显示对象的【X】轴和【Y】轴坐标信息，要显示对象注册点（中心点）的坐标，单击“坐标网格”的中心方框，要显示左上角的坐标，单击“坐标网格”中的左上角方框；左下方显示在舞台中鼠标位置处的颜色值与Alpha值得；右下方显示鼠标的【X】轴和【Y】轴坐标信息。【变形】标签面板可以对选定对象执行缩放、旋转、倾斜和创建副本的操作。【变形】面板分为三个区域：最

13、上面的是缩放区，可以输入“垂直”和“水平”缩放的百分比值，选中【约束】复选框，可以使对象按原来的长宽比例进行缩放；选中【旋转】，可输入旋转角度，使对象旋转；选中【倾斜】，可输入“水平”和“垂直”角度来倾斜对象；单击面板下方的【复制并应用变形】按钮，可执行变形操作并且复制对象的副本；单击【重置】按钮，可恢复上一部的变形操作。6【颜色】面板【颜色】浮动面板包含【混色器】和【颜色样本】两个标签，为我们提供了最为常用的“颜色”，并且能“添加颜色”和“保存颜色”。用鼠标单击的方式可选择需要的常用颜色，如图15-11所示。混色器：用“混色器”标签可以创建和编辑“笔触颜色”和“填充颜色”的颜色。默认为RGB

14、模式，显示红、绿和蓝的颜色值，“Alpha 值”用来指定颜色的透明度，其范围在0%100%，0%为完全透明，100%为完全不透明。“十六进制编辑文本框”显示的是以“#”开头十六进制模式的颜色代码，可直接输入。可以在面板的“颜色空间”单击鼠标，选择一种颜色，上下拖动右边的“亮度控件”可调整颜色的亮度，如图15-11所示。具体应用将会在后面的章节中介绍，混色器中有以下选项：【笔触颜色】用于更改图形对象的笔触或边框的颜色。【填充颜色】用于更改填充的颜色。填充是填充形状的颜色区域。【类型】弹出菜单更改填充样式： 【无】删除填充。 【纯色】提供一种纯正的填充单色。 【线性】渐变产生一种沿线性轨道混合的渐

15、变。 【放射状】渐变产生从一个中心焦点出发沿环形轨道混合的渐变。 【位图】渐变允许用可选的位图图像平铺所选的填充区域。选择位图时，会显示一个对话框，通过该对话框可以选择本地计算机上的位图图像，并将其添加到库中。您可以将此位图用作填充；其外观有点类似于形状内填充了重复的该图像的马赛克图案。【RGB】允许在填充中更改红色、蓝色和绿色 (RGB) 的浓度。【Alpha】 将纯色填充设为不透明，或者将渐变填充的当前所选滑块设为不透明。如果 Alpha 值为 0%，则创建的填充不可见（即透明）；如果 Alpha 值为 100%，则创建的填充不透明。【颜色样本】显示当前所选的颜色。如果从类型弹出菜单中选择

16、渐变填充样式（线性或放射状），则当前颜色样本显示所创建的渐变内的颜色过渡。【颜色选择器】允许直观地选择颜色。单击“颜色选择器”，然后拖动十字准线指针，直到找到所需颜色。【十六进制值】显示当前颜色的十六进制值。要使用十六进制值更改颜色，请键入一个以“#”开头十六进制的值。十六进制颜色值（也叫做 HEX 值）是 6 位字母数字的组合，代表一种颜色。【溢出】允许控制超出线性或放射状渐变限制的颜色。溢出模式有扩展（默认模式）、镜像和重复模式。【扩展】将所指定的颜色应用于渐变末端之外。【镜像】渐变颜色以反射镜像效果来填充形状。指定的渐变色以下面的模式重复：从渐变的开始到结束，再以相反的顺序从渐变的结束到

17、开始，再从渐变的开始到结束，直到选定的形状填充完毕。【重复】从渐变的开始到结束重复渐变，直到选定的形状填充完毕。15.3 简单动画制作小球的运动本实例是我们接触的第一个Flash动画，因此尽可能的详尽讲解，通过本实例的练习，熟悉Flash动画制作的一般流程，对本实例中用到的工具、属性的设置、面板的使用等，在后面的章节中还将详细介绍。制作步骤15.3.1 新建文档并设置文档属性单击Windows系统的【开始】菜单，执行【开始】|【程序】|【Macromedia】|【Macromedia Flash 8】命令，启动Flash 8，系统现弹出Flash 8的启动界面。单击中间“开始页”【创建新项目】

18、下的【Flash 文档】项目，创建一个新空白文档。执行【窗口】|【属性】命令（快捷键Ctrl+F3），打开【属性检查器】面板。【属性检查器】面板位于舞台的下方，新建文档以后，用【属性检查器】面板来指定文档的【舞台】大小、【背景颜色】、【帧频】 (fps也就是播放速度)以及文档的【发布设置】等参数，如图15-12所示。图15-12Flash文档【属性】面板单击【属性】面板上【大小】右边的按钮，弹出设置【文档属性】对话框，其中【尺寸】是用来设定【舞台】大小尺寸的，输入宽度的值：400 px（像素）；高度的值不变：400 px（像素），如图15-13所示。说明：设置【舞台】的大小尺寸，最小可设定为高

19、和宽均为 18 px （像素）；最大可设定高和宽均为 2880 px （像素）。系统默认的尺寸是 px （像素），可以在【标尺单位】的下拉菜单里面选择其他的单位，如：厘米、毫米等。单击【背景颜色】右边的“取色按钮”，在弹出的【颜色样本】面板上选取颜色，选取颜色的同时鼠标指针变成【滴管工具】，找到天蓝色样本并拾取，同时可以查看在“十六进制文本框”中显示颜色值为 “#00CCFF”。保持【文档属性】的其它参数不变，单击【确定】按钮，完成文档属性的设置。【匹配】【打印机】：匹配打印机，让底稿的大小与打印机的打印范围相同。【匹配】【内容】：匹配内容，在舞台上将内容四周的空间都设置为对称。【匹配】【默认

20、】：匹配默认，使用默认值。【帧频】：默认为12 fps。是动画每秒播放的帧数，默认的播放速度是每秒钟播放时间轴上的 12 帧，这是在 Web 上播放动画的最佳帧频。根据特殊需要可以修改。【设为默认值】：将所有设定保存成默认值，当下次再开启新的影片文档时，影片的舞台大小和背景颜色会自动调整成这次设定的值。15.3.2 创建图形元件元件是在 Flash 中创建的图形、按钮或影片剪辑，是Flash动画中的基重要元素之一。元件只需创建一次，即可在整个文档或其他文档中重复使用。而且多次使用它不会明显增大动画文件的体积大小。创建的任何元件都会自动成为当前文档的【库】的一部分。可以随时打开【库】面板进行调用

21、，元件的应用使动画制作变得轻松快捷。因此要尽可能的将对象制作成元件。1创建图形元件：执行【插入】【新建元件】命令（快捷键 Ctrl+F8），打开【创建新元件】对话框。在【创建新元件】对话框中，输入元件的【名称】为“小球”，【类型】选择【图形】前面的单选按钮，然后单击【确定】按钮，如图15-14所示。2进入元件编辑状态创建元件完成以后，编辑动画的【舞台】已经从“场景1”切换到“小球”图形元件的编辑状态，在【时间轴】的上方有“场景1”“小球”的标签提示：如图15-15所示。3绘制图形选择【工具】面板上的【椭圆工具】，单击【工具】面板下面“颜色”区域的【笔触颜色】，在弹出的【颜色样本】面板上选择【没

22、有颜色】（注，没有颜色和白色不是一回事）；再单击【填充颜色】，在弹出的【颜色样本】面板上选择蓝色“#0000FF”，如图15-16所示。说明：在绘制某个形状时，它的颜色有两个部分：外部线条称为【笔触颜色】，它描绘形状的轮廓；形状内部的着色称为【填充颜色】。在绘制图形之前，通常要先设置【笔触颜色】和【填充颜色】。选择【工具】在属性面板设置该工具的【属性】在舞台上绘制图形移动鼠标到【舞台】的中间，按住键盘【Shift】键同时按住鼠标左键拖动，绘制出一个随意大小的圆形，如图15-17所示。说明：按住 Shift 键拖动可以将形状限制为正圆形，否则为不规则的椭圆形状。选择【工具】面板上的【选择工具】，

23、然后单击【舞台】上的“圆形”，在【属性】面板中设置【宽】和【高】都为“66”像素，【X轴】和【Y轴】的坐标都为“-33”。15.3.3 改变圆形为渐变填充1选择渐变色填充类型选中【舞台】上的“圆形”，单击【颜色】面板中的【混色器】标签，打开【混色器】面板。单击【类型】后面的下拉框，在弹出菜单中选择【放射状】渐变填充，如图15-18所示。2设置渐变填充颜色单击中间【渐变定义栏】的下面“左边”的【颜色指针】，设置【放射状】渐变填充的起始点颜色，也就是圆心中间部位的颜色。在下面的颜色空间单击选择一种浅蓝颜色“#B6AEFB”，如图15-19所示。 图15-19调整起始点填充色 图15-20调整终点填

24、充色然后再单击【渐变定义栏】下面“右边”的【颜色指针】，设置【放射状】渐变填充的终点颜色，也就是圆形外围的颜色。在下面的“颜色空间”单击选择一种深蓝颜色“#34235C”，如图15-20所示。3完成渐变色填充颜色设置好以后，因为舞台上的“圆形”处于被选中状态，编辑颜色的同时，被选中的“圆形”会自动添加编辑的渐变填充颜色，很像一个小球的形状，如图15-21所示。说明：如果没有事先选中绘制的图形，在【混色器】面板上编辑颜色以后，选择【工具】面板上的【颜料桶工具】，鼠标指针变成“颜料桶”形状，移动鼠标到舞台上单击绘制的形状也可以完成填充，这是填充颜色的另外一种方法。4调整渐变填充渐变填充完成以后，“

25、圆形”有了立体感，但是不符合光源的照射规律，我们来调整“圆形”渐变填充的起始位置，使其看起来更接近自然界中的球体。选择【工具】面板上的【填充变形工具】，移动鼠标到舞台上单击“圆形”，“圆形”的中间和周围出现5个【填充变形控制点】，如图15-22所示。 移动鼠标到“圆形”中间的【填充变形控制点】上，鼠标指针变成“十字方向”，按住鼠标左键向右下方拖动，将“高光区”拖放到“圆形”的右下方，如图15-23所示。调整后的效果如图15-24所示。15.3.4 制作动画1打开库面板执行【窗口】【库】命令（快捷建F11），打开【库】面板。在【库】面板中看见我们刚才创建的“小球”图形元件，如图15-25所示。2

26、布局第1帧上的小球单击【时间轴】上方的“场景1” ，切换到“场景1”的舞台，单击“图层一”右边的第一个空白关键帧， 选中【库】面板中的“小球”图形元件，按下鼠标左键将其拖动到【舞台】的上边中间位置，如图15-26所示。说明：按下快捷键Ctrl+L，可以快速打开【库】面板。【库】中保存的对象是创建好的可以重复使用的图形、影片剪辑或按钮以及从外部导入的素材。将【库】中的元件拖放到【舞台】上以后，【舞台】上的对象叫做元件的实例。新建文档的主场景在【时间轴】上只有一个【图层1】和一个【空白关键帧】，“小球”拖放到【舞台】上以后，就直接加到【图层1】的第一帧上，同时第一帧变成【关键帧】。【关键帧】是用来

27、定义动画变化状态的帧，显示为实心圆。3改变图层名称添加关键帧鼠标双击【图层1】的图层名称处，输入“小球”将【图层1】重新命名为【小球】。单击选中【小球】图层的第40帧，执行【插入】|【时间轴】|【关键帧】命令（快捷键 F6），在第20帧处插入一个【关键帧】，用同样的方法在【小球】图层的40帧插入一个【关键帧】，效果如图15-27所示。图15-27插入关键帧的图层结构 图15-26小球在舞台上的初始位置 图15-28调整后的小球位置说明：改变图层名称是为了图层数量增多时，可以一目了然分清每个图层所放置的内容是什么，因此重新命名时尽量将图层名命名的和所放置的元件名称接近。另外除了使用【插入】菜单中

28、的命令插入帧，还可以用快捷键插入帧:选中某个帧以后，按下F5键可以插入【普通帧】；按下F6键可以插入【关键帧】；按下F7键可以插入【空白关键帧】。4调整20帧上小球位置单击选中【小球】图层的第20帧，选择【工具】面板上的【选择工具】，然后移动鼠标到【舞台】的“小球”图形元件上，按住键盘上的【Shift】 键同时按住鼠标左键拖动“小球”到舞台的正下方，如图15-28所示。说明：按住【Shift】同时拖动舞台上的元件，可以保持水平或垂直移动元件。也可以45度的角度，向四个斜面方向移动。5设置补间动画选中【小球】图层的第1帧，打开【属性】面板，在【属性】面板中，单击【补间】后面的下拉按钮，在弹出的菜

29、单中选择【动画】，如图15-29所示。【小球】图层的第1帧到第20帧之间出现一条浅紫色背景的带黑色箭头的实线。 这样就实现了第1帧到第20帧的【动作】补间动画。用同样的方法，再实现第20帧到40帧之间的动画，完成后的图层结构如图15-30所示。图15-30补间动画设置后的图层效果说明：所谓补间动画，是指只要做好起点【关键帧】和终点【关键帧】的图形，Flash就会自动补上中间的动画过程。要构成补间动画，同一个图层上至少有两个不同位置的【关键帧】。6在场景中测试动画拖动【时间轴】上的红色【播放头】到第一帧的位置，按下键盘的【Enter】键，动画开始播放，观察小球的【动画】补间动画效果，看见“小球”

30、以匀速从上到下又回到上面。7使动画更符合客观规律我们观察到的“小球”是上下做匀速运动，现实生活中受地球吸引力的因素，应该是向落下的速度越来越快，弹起以后到上面速度逐步减慢，下面对补间动画属性进行一些设置，使“小球”的运动更符合客观规律。选中【小球】图层的第1帧，打开【属性】面板，在【属性】面板中【缓动】的参数文本框中输入“-100”，如图15-31所示。用同样的方法选中【小球】图层的第20帧，在【属性】面板中【缓动】的参数文本框中输入“100”。说明：在设置补间动画时，通过设置一些相关参数可以使动画效果更丰富，【缓动】参数值为“0”，表示匀速运动，更改这个参数值，就可以实现加速运动或者减速运动

31、。当值为正数时，为减速运动；当值为负数时，为加速运动。8再次在场景中测试动画拖动【播放头】到第一帧的位置，再按下键盘的【Enter】键，观察发现“小球”运动效果比较符合客观规律了。15.3.5 给动画添加背景1新建图层单击【时间轴】左边“图层名称”底部的【插入图层】按钮，新建【图层2】，如图15-32所示。 图15-32插入图层 图15-33重新命名图层名称并调整图层顺序2改变图层顺序并重新命名单击选中新建的【图层2】图层名称处，按住鼠标左键并拖动到【小球】图层的下面，然后双击【图层2】的图层名称处，将【图层2】重新命名为【背景】，如图15-33所示。说明：【时间轴】是控制动画的合成和播放的地方，要尽可能的将不同的对象放在不同的图层上。3导入背景图片要给“小球运动”加上一个背景图片，使动画更加美观，执行【文件】|【导入】|【导入到库】命令，弹出【导入】对话框，在【导入】对话框中选择一幅自己喜欢的图片文件，然后点击【打开】按钮，即可将图片文件导入到【库】中；选中【背景】图层的第一帧，从【库】中将背景图片拖入场景中。4调整图片在舞台上的位置执行【窗口】|【对齐】命令（快捷键Ctrl+K），打开【对齐】面板，