Flash cs3 基础教程第二章.doc

我们共同的flash 课件家园第二章 Flash动画的枚举本章主要以最简单的动画形式，来说明动画形成的原理和操作过程，通过对Flash所能形成的动画进行枚举，使广大学友清楚知道Flash能做哪些动画，制作这些动画需要哪些前提，以及如何去实现的问题。在以后的创作中，可以根据实际情况，选择某一种动画形式，实现你心中的动画效果。任何复杂的动画都是运用这些最简单的动画组合而形成的，也是在这些动画的灵活应用上形成的。本章还要通过动画制作过程，慢慢体会如下概念：时间轴、图层、帧、矢量图形、影片剪辑元件、按钮元件、图形元件，以及它们之间的联系。这是学习Flash至关重要的一点，只有充分的理解和运用这些概念以及对它们的操作，才能真正的实现动手创作，而不是只会模仿，碰到实际问题的时候就一筹莫展，毫无头续。在Flash动画制作的过程中，只有以下四种对象能形成动画，因此，在制作动画之前，我们首先要将形成动画的对象转换为如下对象：1. 矢量对象2. 图形对象3. 影片剪辑对象4. 按钮对象除了上面四种对象外，还有以下四种动画的实现形式。虽然形式不同，但动画对象必须是上面四种对象中的一种。1. 引导线动画2. 遮罩动画3. 逐帧动画4. Action(脚本程序)动画第一节对象的认识和转换图2.1.012.1.1 矢量对象矢量对象(矢量图形)是由绘画工具所绘制出来的图形，它包括线条和填充两部分。如图2.1.01为绘图工具。这里有个特例就是文字工具，使用文字工具输入文字，这些文字是一个文本对象，不是矢量对象，但是多次按快捷键“Ctrl+B”打散后，它就变成了矢量对象。因此，我们可以得出这样的结论：只要是由绘图工具绘出的图形，不管它被转换成何种对象，只要多次按“Ctrl+B”打散后，最终都能将其还原为矢量对象。图2.1.02实例一 组合对象转换为矢量对象实例源文件：光盘：实例与视频第二章第一节实例一王字.fla实例效果：立体文字的制作，其中正面颜色为绿色，上面颜色为黑色，左侧面颜色为紫色，如图2.1.02操作步骤： 用“文本工具”在编辑区中输入一个“王”字，用“选择工具”选定这个王字，打开“属性”面板，将“王”字的字体设置为黑体、字号为96、颜色为绿色并加粗，设置如图2.1.03所示。图2.1.03 用“选择工具”选定这个王字，按快捷键“Ctrl+B”打散。打散后，王字的状态由文字框变成了颗粒状，表示已经是矢量状态了。 取消选定“王”字，用“墨水瓶工具”给“王”字加上线条。打散的目的是为了给文字加上边线。 用“选择工具”选定这个“王”字，按快捷键“Ctrl+G”，将王字组合成一个对象，按快捷键“Ctrl+D”重制一个“王”字。将两个“王”字移动到如图2.1.04的图示(1)所示的层叠位置。移动位置的目的是为了让文字产生立体感。 用“选择工具”选定这两个“王”字，按快捷键“Ctrl+B”打散。 选定“线条工具”，并选定“线条工具”的附加工具“贴紧至对象”，将两个“王”字的对应角处用线条相连，如图2.1.04的图示(2)所示。连接完后，将填充部分和多余的线条删除，如图2.1.04的图示(3)所示。图2.1.04 用“颜料桶工具”给“王”字的正面、上面、左面分别填充绿色、黑色、紫色。 选定“选择工具”，将鼠标移动至“王”字的线条上，双击选定所有线条，按“Delete”删除。 用“选择工具”选定这个立体的“王”字，按快捷键“Ctrl+G”组合成一个对象，最终效果如图2.1.02所示。总结：本例主要目的是学习将文字打散成矢量对象、“墨水瓶工具”的用法、“贴紧至对象”工具的用法、用“颜料桶工具”向一个封闭区域填充颜色、体会“Ctrl+G”组合和“Ctrl+B”打散的用法。如果用绘图工具绘制出的图形，经过组合后，那么它就不是矢量对象了，必须经过打散后才能转换为矢量对象。2.1.2 图形对象 图形对象也称图形元件，理论上讲，任何对象都可以转换为图形对象，但在Flash实际操作过程中，从图形元件的作用出发，一般只有将矢量对象、文字对象、位图对象、组合对象转化为图形对象。这里以位图对象为例讲解将位图对象转化为图形对象过程。实例二 位图对象转换为图形对象实例源文件：光盘：实例与视频第二章第一节实例二小宝贝.fla实例效果：如图2.1.05图2.1.05操作步骤： 选择菜单“文件导入导入到舞台”，目的是使用“导入”菜单项导入一张图片。单击图2.1.06的处后，打开如图2.1.07的导入对话框。“导入”菜单的功能是将图片、声音、视频等外部文件导入到Flash文档中。图2.1.06 图2.1.07的处，选择导入文件的存储位置，处选择的路径为：光盘:实例与视频第二章第一节实例二。处选择将要导入的图片，选定完后，单击处的“打开”按钮，将“素材之宝宝”这幅图片导入到Flash的编辑区中。在本书的配套光盘中，放置与本书有联系的相关内容，主要有：配套实例视频教程、实例源文件、实例素材。图2.1.07 图片导入后，用“选择工具”选定图片，按快捷键“F8”，打开“转换为元件”对话框，如图2.1.08所示。处设置图形元件的名称，这里设置为“小宝贝”；处是选择元件的类型，这里选择“图形”；处是元件的注册点设置，这里按默认设置，注册点问题在后续章节中会有详细讲解；设置完成后，单击处，将位图对象转换为图形对象。图2.1.08 总结：本例主要讲解了“导入”菜单项的操作，它可以从外部导入图片、声音、视频等文件；同时，讲解了“F8”键的作用，即将选定对象转换为影片剪辑对象、或者是按钮对象、或者是图形对象。从外部导入的图片，它是位图对象，它不是图形元件，但可以转换为图形元件。2.1.3 影片剪辑对象影片剪辑对象也称影片剪辑元件，理论上讲，任何对象都可以转换为影片剪辑对象，转换的对象主要是根据实际需要而定。实例三 先将文字对象转换为图形对象再转换为影片剪辑对象实例源文件：光盘：实例与视频第二章第一节实例三网站地址.fla实例效果：如图2.1.09图2.1.09操作步骤： 用“文本工具”在编辑区中输入“ (课件家园)”，用“选择工具”选定文字，按快捷键“F8”，打开“转换为元件”对话框，设置如图2.1.10所示，先将文字对象转换为图形对象。图2.1.10 用“选择工具”选定文字图形，按快捷键“F8”，打开“转换为元件”对话框，设置如图2.1.11所示，将图形对象转换为影片剪辑对象。图.4 按钮对象按钮对象也称按钮元件，理论上讲，任何对象都可以转换为按钮对象，在操作过程中，应实际需要而定。实例四 文字对象转换为按钮对象实例源文件：光盘：实例与视频第二章第一节实例四播放.fla操作步骤： 用“文本工具”在编辑区中输入“播放”两字，用“选择工具”选定文字，按快捷键“F8”，打开“转换为元件”对话框，设置如图2.1.12所示，将文字对象转换为按钮对象。对象类型的判断在第一章的第三节介绍“属性”面板时有讲解。图2.1.12第二节矢量对象动画制作第一节我们讲解了矢量对象、图形对象、影片剪辑对象、按钮对象这四种对象的转换，接下来第二节、第三节、第四节我们要讲解如何利用这四种对象制作动画。动画的制作离不开“图层”、“帧”和“编辑区”这三部分，理解这三者之间的联系是学好动画制作的关键。在第一章中，我们已经了解了图层操作面板和时间轴操作面板。在本章中，主要掌握如下图层操作：1. 如何选定一图层？2. 如何更改图层名称？3. 如何新增图层？4. 如何新增引导层？5. 如何删除图层？6. 如何锁定一图层或者所有图层？7. 如何显示/隐藏图层？8. 图层遮罩效果的应用。9. 图层与动画的关系？图2.2.01在本章中主要掌握如下帧操作：1. 什么是关键帧、空白关键帧、过渡帧？2. 帧与编辑区有何联系？3. 如何插入关键帧？4. 如何插入空白关键帧？5. 如何插入过渡帧？6. 过渡帧的作用是什么？7. 如何选定单帧？8. 如何选定多帧？9. 如何移动帧？10. 如何复制与粘贴帧？11. 如何翻转帧？12. 动画形成的实质是什么？在以下的动画制作过程中，通过实例逐步解决上面所提出的问题，当你能很好的解决上面的问题时候，在你的脑海中也就出现动画制作的轮廓了。2.2.1 位置变化实例一 实例效果：光盘: 实例与视频第二章第二节实例一位置变化.swf操作步骤：一、设置场景 启动Flash CS3，新建一个Flash ActionScript2.0文档。 文档属性设置：打开文档属性面板，如图2.2.02所示。设置帧频为12、背景为白色、大小设置为800600像素。注意：在以后的实例中，如果没特别要求，那么场景设置都按图2.2.02的处显示的内容进行设置。同时，场景设置这步操作将不会在以后的实例中出现。图2.2.02二、动画制作过程 鼠标双击“图层1”处，出现光标，如图2.2.03的图示(1)所示，将图层命名为“位置移动”，如图2.2.03的图示(2)所示。图2.2.03图2.2.04 先选取工具栏中的“矩形工具”，然后选择“笔触颜色“为无颜色；选择“填充颜色”为红色；取消选定“矩形工具”的附加工具“贴紧至对象”和“对象绘制”，工具栏的设置如图2.2.04所示。在后续的绘图操作时，一律取消“对象绘制”这个选定，在这里做一个统一规定。 先选定“位置移动”图层的第1帧，如图2.2.05的图示(1)所示；然后在编辑区内画一个矩形，如图2.2.05的图示(2)所示；用“选择工具”将这个矩形移动到编辑区的左边，如图2.2.05的图示(3)所示。图2.2.05 用鼠标选定“位置移动”图层的第25帧，然后按F6键，插入一个关键帧，如图2.2.06的图示(1)所示；用“选择工具”选定第25帧，将此帧上编辑区里的矩形移动到编辑区的右边，如图2.2.06的图示(2)所示。图2.2.06此时，观察“位置移动”图层的第1帧上的矩形与第25帧上的矩形，我们可以发现，这两帧上的矩形在编辑区的位置是不同的，第1帧的矩形在编辑区的左边，第25帧的矩形在编辑区的右边。如图2.2.07所示。图2.2.07 用鼠标选定“位置移动”图层的第1帧，在第1帧上单击鼠标右键，弹出如图2.2.08的图示(1)所示的快捷菜单，单击“创建补间形状”菜单项，建立形状渐变动画。建立形状渐变后，在“位置移动”图层的第1帧到第25帧之间以淡绿色显示，并带有一个自左向右的箭头，如图2.2.08的图示(2)所示。鼠标拖动图2.2.08的图示(2)的处的播放头，可以预览动画。图2.1.08三、保存并测试动画 在动画制作过程中，我们要及时将动画保存到硬盘上，因此，我们可以新建一个文件夹，专门用来放置学习过程中所做的实例。我们可以在E盘下新建一个“实例练习”文件夹。保存操作如下：按快捷键“Ctrl+S”，打开“另存为”对话框，按图2.2.09的提示操作。图2.2.09新建一个文件夹将新建的文件夹命名为“实例练习”，并双击打开这个文件夹。接下来的操作如图2.2.10所示。保存位置选择E盘图2.2.10 保存完Flash文档后，按快捷键“Ctrl+Enter”测试影片，或者选择菜单“控制测试影片”菜单项，效果一样。按完“Ctrl+Enter”键后，将弹出如图2.2.11的图示(1)所示的提示框，完成导出后，弹出如图2.2.11的图示(2)所示的预览窗口。图2.2.11 打开“E:实例练习”文件夹后，我们可以看到两个文件，一个为“矢量-位置变化.fla”，这个文件是Flash的源文件。一个为“矢量-位置变化.swf”， 如图2.2.12所示。“.swf”这个文件是按“Ctrl+Enter”测试影片后，生成的可执行的影片文件，它的后缀为“.swf”。双击打开这个文件可以观看动画，动画制作的最终目的就是为了生成这种文件。图2.2.12源文件swf文件总结：分析本例，我们先来回答：帧与编辑区有何联系？一个帧代表着一个编辑区，帧与编辑区是一一对应的关系。在编辑区中进行编辑时，首先选定此编辑区所在的帧。时间轴上的帧有以下三种形式：空白关键帧、关键帧、过渡帧。空白关键帧在时间轴上表现为一个空心的小圆点，空白关键帧的编辑区是没有任何内容的，如图2.2.13的图示(1)所示。关键帧在时间轴上表现为一个实心的小圆点，它表示此帧在编辑区中已经有内容，如图2.2.13的图示(2)所示，在编辑区中绘制了一个五角星。如图2.2.13的图示(3)所示，过渡帧在时间轴上以灰色显示，它表示对关键帧内容的延长，显示的是关键帧上的内容。对过渡帧编辑区中的内容进行编辑，就是对过渡帧前的关键帧的编辑。图2.2.13动画形成的原理是什么？动画形成的原理是根据人的“视觉暂留”现象，将一组静止的图形连续出现后，便形成了动画。Flash动画就是基于此原理来制成动画的，时间轴上的每一帧在编辑区中有不同的图形，当时间轴上的帧以当前帧频向前移动时，我们看到的是编辑区中的一组图形不断变化，从而产生了运动的视觉效果。用Flash制作动画有何特点？参考本例，我们可以发现Flash动画有如下特点： 动画是建立在两个关键帧之间，如图2.2.14所示。图2.2.15图2.2.14 两个关键帧在编辑区中的内容必须是变化的。如此例中的矩形，它是位置的变化，如图2.2.15所示。 两个关键帧之间内容的变化是有规定的。即矢量对象、图形对象、影片剪辑对象、按钮对象各自可以形成哪些动画？可以从本书目录中得到答案，一目了然。 在两个关键帧之间创建动画时，是先选定前面一个关键帧，然后单击鼠标右键，在弹出的快捷菜单中，选择一种动画类型，如图2.2.16所示。 创建动画的类型是根据对象来选择的，矢量对象是选择“创建补间形状”选项；图形对象、影片剪辑对象、按钮对象是选择“创建补间动画”选项，如图2.2.16所示。在Flash中，只有这四种对象能形成动画，其他对象若要形成动画，必须将其转换为其中一种对象。图2.2.16 两个关键帧之间，间隔的帧数的多少控制动画运动的快慢。间隔的帧数越多，动画播放的时间越长，动画运动就慢；反之，动画就快。 请将这6个特点记住，在以后实例操作中逐步理解。如果理解了这六点内容，那么制作动画就十分简单了。在实例练习的过程中，希望广大学友学习的不仅仅是一个动画的制作，而一类动画的制作。实例练习在本书配套光盘 “光盘: 实例与视频第二章第二节实例一”的目录中，有一个“实例练习一.swf”的文件，请你做出“实例练习一”影片所示的动画效果。2.2.2 形状变化-同一形状的缩放实例二 实例效果：光盘: 实例与视频第二章第二节实例二缩放.swf操作步骤： 启动Flash CS3，新建一个Flash ActionScript2.0文档。 将“图层1”命名为“缩放”，如图2.2.17所示。图2.2.17 选定“缩放”图层的第1帧，用“椭圆工具”在编辑区中画一个蓝色的正圆，如图2.2.18的图示(1)所示。 用“选择工具”选定这个圆，打开“对齐”面板，将这个圆调整为：相对于舞台水平居中和垂直居中，如图2.2.18的图示(2)所示。图2.2.18 选定“缩放”图层的第25帧，按快捷键“F6”，插入关键帧。用“选择工具”选定此帧上的圆，用“任意变形工具”将这个圆整体放大，如图2.2.19的图示(1)所示。打开“对齐”面板，将这个圆调整为：相对于舞台水平居中和垂直居中，如图2.2.19的图示(1)所示。图2.2.19 分别选择“缩放”图层的第1帧与第25帧，观察第1帧的圆和第25帧的圆，我们可以发现，第1帧的圆更小，第25帧的圆更大，且都处于舞台的中央。图2.2.20 选定“缩放”图层的第1帧，单击鼠标右键，在弹出的快捷菜单中选择“创建补间形状”菜单项，建立形状渐变动画。图2.2.21 按快捷键“Ctrl+S”，将动画保存到“E:实例练习”文件夹中，并命名为“矢量图形的缩放变化”。 按快捷键“Ctrl+Enter”，测试影片，完成矢量对象的缩放动画制作。实例练习请你做出“光盘: 实例与视频第二章第二节实例二缩放练习一.swf”的影片所示的动画效果。请你做出“光盘: 实例与视频第二章第二节实例二缩放练习二.swf”的影片所示的动画效果。2.2.2 形状变化-不同形状的转换实例三 实例效果：光盘: 实例与视频第二章第二节实例三转换.swf操作步骤： 启动Flash CS3，新建一个Flash ActionScript2.0文档。 将“图层1”更名为“转换”，如图2.2.22所示。图2.2.22 选定“转换”图层的第1帧，用“矩形工具”在编辑区中画一个红色矩形。用“选择工具”选定红色矩形，打开“属性”面板，将宽和高分别设置为100，将X轴坐标设置为100，Y轴坐标设置为250，如图2.2.23所示。通过对坐标的设置来改变图形在编辑区中的位置，通过对宽高的设置来改变图形的形状，此时的矩形已经是一个正方形了。图2.2.23 选定“转换”图层的第25帧，按快捷键“F7”，插入空白关键帧，用“椭圆工具”在编辑区中画一个红色的椭圆。用“选择工具”选定红色的椭圆，打开“属性”面板，将椭圆的宽和高分别设置为100，将椭圆的X轴坐标设置为600，Y轴坐标设置为250。 选定“转换”图层的第1帧，单击鼠标右键，在弹出的快捷菜单中选择“创建补间形状”菜单项，建立形状渐变动画。 按快捷键“Ctrl+S”，将动画保存到“E:实例练习”文件夹中，并命名为“矢量图形的转换变化”。 按快捷键“Ctrl+Enter”，测试影片，完成从一种形状向另一种形状过渡的动画制作。总结：对比本例与上一例，我们来总结一下何时按“F6”键插入关键帧？何时按“F7”键插入空白关键帧？在上一例中，选定第25帧后，按“F6”插入关键帧，本例选定第25帧后，按“F7”插入的是空白关键帧，为什么要这么做呢？这主要原因是取决后一个关键帧在编辑区的内容。当后一个关键帧的内容需要保留前一个关键帧的内容时，就按“F6”。如上一例，在第25帧按“F6”后，仍然保留着第1帧的圆，此时我们只要对这个圆放大操作即可。当后一个关键帧的内容不需要保留前一个关键帧的内容时，就按“F7”。如本例，第1帧是正方形，第25帧是圆，这两帧上的内容不相同，因此，我们插入的是空白关键帧。实例练习请你做出“光盘: 实例与视频第二章第二节实例三转换练习一.swf”的影片所示的动画效果。请你做出“光盘: 实例与视频第二章第二节实例三转换练习二.swf”的影片所示的动画效果。2.2.3 Alpha(透明度)变化实例四实例效果：光盘: 实例与视频第二章第二节实例四透明度.swf操作步骤： 启动Flash CS3，新建一个Flash ActionScript2.0文档。 打开“属性”面板，设置文档的背景颜色为红色(#FF0000)。图2.2.24 将“图层1”更名为“透明度”，如图2.2.24所示。 选定“透明度”图层的第1帧，用“多角星形工具”在编辑区中画一个黄色无线条的五角星。 选定“透明度”图层的第25帧，按“F6”插入关键帧，选定50帧，按“F6”插入关键帧，如图2.2.25所示。图2.2.25 选定“透明度”图层的第25帧，用“选择工具”选定编辑区中的黄色五角星，打开颜色面板，将“Alpha”的值设置为0，如图2.2.26所示。图2.2.26图2.2.27 选定“透明度”图层的第1帧，单击鼠标右键，在弹出的快捷菜单中选择“创建补间形状”菜单项。同理，选定第25帧，创建补间形状动画，如图2.2.27所示。 按快捷键“Ctrl+S”，将动画保存到“E:实例练习”文件夹中，并命名为“透明度变化”。 按快捷键“Ctrl+Enter”，测试影片，我们可以看到黄色的五角星从不透明变得透明再到不透明的变化过程。实例练习请你做出“光盘: 实例与视频第二章第二节实例四透明度练习.swf”的影片所示的动画效果。2.2.4 颜色变化实例五实例效果：光盘: 实例与视频第二章第二节实例五颜色.swf操作步骤： 启动Flash CS3，新建一个Flash ActionScript2.0文档。 将“图层1”更名为“颜色”。 选定“颜色”图层的第1帧，用“椭圆工具”在编辑区中画一个红色(#FF0000)的圆。 选定“颜色”图层的第25帧，按“F6”插入关键帧，并将第25帧的圆设置成黄色(#FFFF00)。 选定“颜色”图层的第1帧，单击右键，创建补间形状动画。 按快捷键“Ctrl+S”，将动画保存到“E:实例练习”文件夹中，并命名为“颜色变化”。 按快捷键“Ctrl+Enter”，测试影片，我们可以看到圆由红色变成黄色。实例练习请你做出“光盘: 实例与视频第二章第二节实例五颜色变化练习.swf”的影片所示的动画效果。2.2.5 提示点动画(翻转变化)实例六实例效果：光盘: 实例与视频第二章第二节实例六翻书效果.swf操作步骤： 启动Flash CS3，新建一个Flash ActionScript2.0文档。 将“图层1”更名为“书本”。 导入书本的矢量素材：打开“光盘: 实例与视频第二章第二节实例六素材之书本.fla”，用“选择工具”选定书本，按“Ctrl+C”复制书本，如图2.2.28所示。图2.2.28 将文档切换到“未命名-1”，选定“书本”图层的第1帧，按快捷键“Ctrl+V”，粘贴书本到“未命名-1”文档中并移动到编辑区的合适位置，如图图2.2.29所示。 选定“书本”图层的第30帧，按快捷键“F5”，插入过渡帧，如图2.2.30的处。用“选择工具”先取消书本的选定，然后再选定书页的填充色，使用快捷键“Ctrl+C”复制书页，如图2.2.30的处。并锁定和隐藏“书本”图层，如图2.2.30的、处。图2.2.29图2.2.30 按“插入图层”按钮，新增一图层，并将新增的图层更名为“翻页”，选定“翻页”图层的第1帧，按快捷键“Ctrl+Shift+V”，将书页的填充色粘贴到“翻页”图层的第1帧的当前位置，如图2.2.31所示。 选定“翻页”图层的第10帧，按快捷键“F6”插入关键帧，用“任意变形工具”将第10帧上的书页调成如图所示的样子，如图2.2.32所示。图2.2.31图2.2.32 选定“翻页”图层的第20帧，按快捷键“F6”插入关键帧，用“任意变形工具”选定20帧中的书页，将“旋转、翻转控制点”移动到如图2.2.33的图示(1)的处所示的地方，选择菜单“修改变形水平翻转”，将书页水平翻转，水平翻转后如图2.2.33的图示(2)所示。图2.2.33 选定“翻页”图层的第30帧，按快捷键“F7”插入空白关键帧，选定第1帧的书页并复制，选定第30帧，按快捷键“Ctrl+Shift+V”，在第30帧将第1帧的书页粘贴到当前位置。用“任意变形工具”将“旋转、翻转控制点”移动到如图2.2.34的图示(1)的处所示的地方后，选择菜单“修改变形水平翻转”，将书页水平翻转，翻转后的图形如图2.2.34的图示(2)所示。图2.2.34 此时，我们分别选定第1帧、第10帧、第20帧、第30帧，我们可以发现这四帧上的书页构成了一面纸张翻页的完整过程。分别在第1帧、第10帧和第20帧分别创建补间形状动画。选定第1帧后，按“Enter”键，观看动画预览，可以发现，第10帧到第20帧之间的动画不符合要求，没有出现翻书的效果。因此，我们在第1020帧之间的动画必须用“提示点”的作用来修正动画。 选定第10帧，选择菜单“修改形状增加形状提示”，或使用快捷键“Ctrl+Shift+H”，增加四个提示点a、b、c、d。移动这四个提示点，将它们分别拖到书页的四个顶点，如图2.2.35所示。图2.2.35abcd 再选择第20帧，这时第20帧会自动出现四个同名的提示点。也将它们分别移到书页的四个顶点。当调整好位置时，a、b、c、d四点的颜色会自动由红色变成绿色，如图2.2.36所示。此时，我们再选定第1帧，按“Enter”键，预览动画时发现，矢量对象的翻转效果就做成功了。图2.2.36abcd 按快捷键“Ctrl+S”，将动画保存到“E:实例练习”文件夹中，并命名为“矢量对象翻转制作”。 按快捷键“Ctrl+Enter”，测试影片，我们可以看一个翻书效果的动画。总结分析： 通过“复制粘贴”命令能从其他的Flash源文件中提取想要的素材。 过渡帧的作用就是让编辑区中的画面延续到某帧，如“书本”图层的230帧，它都是延续了第1帧的画面，因此，我们在选定第30帧后按的是“F5”键。 此例我们用到了两个图层，一个图层用来放置书本，一个图层用来制作翻书的动画，在制作更复杂的动画时可能还要增加更多的图层。为什么要增加图层呢？原因(1) 在同一图层同一时间帧上，只能有一个对象形成动画，例如此例，如果将书本与书本翻页动画放置在同一图层，就不能实现动画了，因此，要将翻页的动画单独放置于一图层。(2) 图层可以改变图形的层次关系。图层就如一张张层叠在一起的透明的塑料纸，在这透明的纸上可以作画，并且上层纸盖着下层的纸。例如此例，“翻页”图层必须在“书本”图层上面，否则，就实现不了翻书的效果了。 第1帧到第10帧两个关键帧之间的动画实质是矢量对象的形状转换动画；第10帧到第20帧两个关键帧之间的动画实质是矢量对象的提示点动画，在这一动画过程中即有翻转的效果，也有颜色渐变的效果；第20帧到第30帧两个关键帧之间的动画实质是矢量对象的形状转换动画。 结合此例，对比图2.2.35与图2.2.36，总结两关键帧上“提示点”的移动规律。综合实例实例效果：光盘: 实例与视频第二章第二节综合实例多种效果的综合应用.swf操作步骤： 启动Flash CS3，新建一个Flash ActionScript2.0文档。 将“图层1”更名为“多种效果”。 选定“多种效果”图层的第1帧，用“多角星形工具”在编辑区绘制一个无线条的红色的五角星，并将五角星移动到编辑区的左边垂直居中位置，如图2.2.37所示。 选定“多种效果”图层的第25帧，按“F7”插入空白关键帧，在此帧的编辑区中绘制一个无线条的蓝色圆，并将圆移动到编辑区的右边垂直居中位置，如图2.2.38所示。图2.2.37图2.2.38 选定“多种效果”图层的第1帧，创建补间形状动画。 按快捷键“Ctrl+S”，将动画保存到“E:实例练习”文件夹中，并命名为“三种效果”。 按快捷键“Ctrl+Enter”，测试影片，我们可以看一个同时有形状变化、位置变化、颜色变化效果的动画。总结：本例在两个关键帧之间实现三种矢量动画效果：(1) 形状：由五角星向圆渐变；(2) 位置：由左边向右边运动；(3) 颜色：由红色向蓝色过渡。因此，在制作矢量对象动画时，可以根据实际需要，同时结合矢量对象的5种动画(位置、形状、透明度、颜色、提示点)的一种或多种效果进行组合。动画形成都是发生在两个关键帧之间的，即从一个关键帧向另一个关键帧过渡。关键帧上的矢量图案可能是简单的，也可能复杂的，主要是根据实际操作的需要而决定的，但它形成动画的原理是很简单的，而且动画形式也只有位置、形状、颜色、透明度、翻转(提示点)这五种变化。第三节图形对象动画制作2.3.1 位置变化动画实例一 实例效果：光盘: 实例与视频第二章第三节实例一位置变化.swf操作步骤： 启动Flash CS3，新建一个Flash ActionScript2.0文档。 将“图层1”更名为“位移”。 选定“位移”图层的第1帧，用“矩形工具”在编辑区中画一红色无线条的矩形。用“选择工具”选定矩形，打开“属性”面板，将宽高、坐标设置如图2.3.01所示。图2.3.01 用“选择工具”选定矩形，按快捷键“F8”，打开“转换为元件”对话框，将名称输入为“矩形”，类型选定为“图形”， 如图2.3.02所示。按“确定”按钮完成设置，将矩形转换为图形对象。图2.3.02 选定“位移”图层的第25帧，按“F6”插入关键帧，用“选择工具”选定25帧上的矩形，打开“属性”面板，将矩形的X轴坐标设置为620，即通过横坐标设置将矩形移动到编辑区的右边。 观察第1帧上的矩形与第25帧上的矩形，我们可以发现这两帧上的对象是同一图形对象，即名称为“矩形”的图形对象，且在编辑区中位置上是不一样的。 选定“位移”图层的第1帧，单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”菜单项，如图2.3.03所示。形成动画后，从第1帧到第25帧将以淡蓝色显示，中间还有一个自左向右的箭头。图2.3.03 按快捷键“Ctrl+S”，将动画保存到“E:实例练习”文件夹中，并命名为“图形位置变化”。 按快捷键“Ctrl+Enter”，测试影片，我们可以看到矩形自左向右运动。总结分析：对比第二节矢量对象的实例一动画，我们可以发现两点区别：(1) 图形对象动画首先要按快捷键“F8”将要做动画的对象转换为“图形对象”；(2) 在两个关键帧之间是创建“创建补间动画”而不是“创建补间形状”，如图2.3.03所示。图形对象、影片剪辑对象、按钮对象在创建动画时都是选择“创建补间动画”菜单项，只有矢量对象是选择“创建补间动画”菜单项。通过对比，我们还可以得出两个关键帧上的对象类型要一样，如第1帧上的对象类型是矢量对象，那么后一个关键帧上的对象类型也应该是矢量对象。即矢量对矢量、图形对图形、影片剪辑对影片剪辑、按钮对按钮。而对于图形、影片剪辑、按钮对象不仅对象类型要相同，而且还必须是同一个实例。实例练习请你做出“光盘: 实例与视频第二章第三节实例一图形位置变化练习.swf”的影片所示的动画效果。2.3.2 形状变化：同一形状的缩放实例二 实例效果：光盘: 实例与视频第二章第三节实例二图形缩放.swf操作步骤： 启动Flash CS3，新建一个Flash ActionScript2.0文档。 将“图层1”更名为“缩放”。 选定“椭圆工具”，打开“属性”面板，设置笔触颜色为红色；笔触高度为3；笔触样式为实线；填充颜色为蓝色，如图2.3.04所示。图2.3.04 设置完成后，用“椭圆工具”在编辑区中画一个圆，用“选择工具”将圆移动到编辑区的左边，如图2.3.05所示。 用“选择工具”选定圆，按快捷键“F8”，打开“转换为元件”对话框，设置元件名称为圆，类型为图形，设置如图2.3.06所示，按“确定”按钮完成设置。 选定“缩放”图层的第25帧，按快捷键“F6”，插入关键帧。用“任意变形工具”将第25帧上的圆拉大，并将圆移动到编辑区的右边，如图2.3.07所示。图2.3.05图2.3.07图2.3.06 选定第1帧，单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”菜单项。 按快捷键“Ctrl+S”，将动画保存到“E:实例练习”文件夹中，并命名为“图形缩放变化”。 按快捷键“Ctrl+Enter”，测试影片，我们可以看到圆自左向右运动的同时慢慢变大，在此例中即有位置变化也有缩放变化。总结分析： 矢量对象的缩放时，线条原来是多粗，放大后还是那么粗。而将矢量对象的线条转换为图形对象后，线条的粗细会跟着图形的放大而放大。如本例与第二节的实例二对比可以很直观的感觉到效果的不同，在实际操作中应考虑动画效果而进行选择。实例练习请你做出“光盘: 实例与视频第二章第三节实例二图形缩放练习.swf”的影片所示的动画效果。2.3.3 透明度变化实例三 实例效果：光盘: 实例与视频第二章第三节实例三透明度变化.swf操作步骤： 启动Flash CS3，新建一个Flash ActionScript2.0文档。 将“图层1”更名为“图片01”。 选定“图片01”图层的第1帧，选择菜单“文件导入导入到舞台”菜单项，打开“导入”对话框，如图2.3.08所示。图2.3.08的处选择的路径为：光盘:实例与视频第二章第三节实例三；处选择将要导入的图片；选定完后，单击处的“打开”按钮，将“素材之图片A”这幅图片导入到编辑区中。图2.3.08 用“选择工具”选定图片，按快捷键“F8”，打开“转换为元件”对话框，将刚导入这幅位图转换为图形对象，设置如图2.3.09所示。图2.3.09图2.3.10 用“选择工具”选定“晚霞”这图形对象，打开“属性”面板，将宽高、坐标设置如图2.3.10所示。 选定“图片01”图层的第25帧，按快捷键“F6”插入关键帧，用“选择工具”选定此帧上的“晚霞”这一图形对象，打开“属性”面板，点击“属性”面板中的“颜色”，选择“Alpha”，如图2.3.11的图示(1)。选择“Alpha”选项后，将Alpha的值设置为0%，如图2.3.11的图示(2)所示。图2.3.11 Alpha的值设置为0%后，图形对象变得透明。选定“图片01”图层的第1帧，创建动画，动画效果为图形对象由不透明向透明过渡变化。 锁定“图片01”图层，单击“插入图层”按钮，插入一新图层，并将图层命名为“图片02”，如图2.3.12所示。图2.3.12 选定“图片02”图层的第1帧，选择菜单“文件导入导入到舞台”菜单项，打开“导入”对话框，将“光盘:实例与视频第二章第三节实例三素材之图片B.jpg”导入编辑区中。 用“选择工具”选定图片，按快捷键“F8”，打开“转换为元件”对话框，将刚导入这幅位图转换为图形对象，并将图形名称设置为“晨曦”。 用“选择工具”选定“晨曦”这图形对象，打开“属性”面板，设置宽为800、高为600、X为0、Y为0。 选定“图片02”图层的第25帧，按快捷键“F6”插入关键帧。 选定“图片02”图层的第1帧，将图形对象“晨曦”的Alpha的值设置为0%，并在此图层的第1帧创建动画，动画效果为图形对象由透明向不透明过渡变化。总结分析： 此例是利用图形对象的Alpha的值的设置，来实现图形对象的淡入与淡出的效果，思路与设置都比较简单。大致为：在图层中插入一幅图片，将这幅图片转换为图形对象，建立两个关键帧，调整好两个关键帧上的图形对象的位置，并将其中一关键帧上的图形对象的Alpha的值设置为0%，另一关键帧上的图形对象的Alpha的值设置为100%，然后创建动画。 此例在同一时间帧上有两个动画效果，必须分别放置在两个图层中去实现。“图片01”图层实现淡出的效果，“图片02”图层实现淡入的效果。两个动画同时运行时，我们看到一幅图片慢慢消失，另一幅图片慢慢显现。实例练习请你做出“光盘: 实例与视频第二章第三节实例三图形透明度练习.swf”的影片所示的动画效果。2.3.4 颜色变化实例四 实例效果：光盘: 实例与视频第二章第三节实例四图形颜色变化.swf操作步骤：一、文档属性设置 启动Flash CS3，新建一个Flash ActionScript2.0文档。 打开“属性”面板，将文档的编辑区大小设置为800346像素，其他按默认设置。二、导入图片 将“图层1”更名为“天空”， 选定“天空”图层的第1帧，选择菜单“文件导入导入到舞台”菜单项，将“光盘: 实例与视频第二章第三节实例四素材之天空.png”这幅图片导入到的编辑区。 单击“插入图层”按钮，插入一新图层，并将其图层更名为“太阳”， 选定“太阳”图层的第1帧，选择菜单“文件导入导入到舞台”菜单项，将“光盘: 实例与视频第二章第三节实例四素材之太阳.png”这幅图片导入到的编辑区。 单击“插入图层”按钮，插入一新图层，并将其图层更名为“海面”， 选定“海面”图层的第1帧，选择菜单“文件导入导入到舞台”菜单项，将“光盘: 实例与视频第二章第三节实例四素材之海面.png”这幅图片导入到的编辑区。三、将各图层的图片转换为图形对象，并调整好各图片在编辑区的位置 分别锁定“太阳”、“海面”图层，用“选择工具”选定“天空”图层的图片，按快捷键“F8”，打开“转换为元件”对话框，将这幅图片转换为图形对象，并命名为“图片天空”，如图2.3.13所示。打开“对齐”面板，将图形对象“图片天空”的位置调整为“相对于舞台上对齐左对齐”，如图2.3.14所示。图2.3.13图2.3.14 锁定“天空”、“海面”图层，解锁“太阳”图层，将此图层的图片转换为图形对象，并命名为“图片太阳”，并将注册点选择在正中间，如图2.3.15所示。打开“属性”面板，将图形的宽高、坐标设置如图2.3.16所示。图2.3.15图2.3.16 锁定“太阳”图层，解锁“海面”图层，将此图层的图片转换为图形对象，并命名为“图片海面”，打开“对齐”面板，将图形对象“图片天空”的位置调整为“相对于舞台下对齐左对齐”。四、在三个图层上制作相应的动画 分别在“海面”、“太阳”图层、“天空”图层的第30帧按快捷键“F6”插入关键帧。 锁定“海面”、“天空”图层，解锁“太阳”图层，选定“太阳”图层的第30帧，用“选择工具”选定图形对象“图形太阳”，打开“属性”面板，设置宽为195、高为178、X为165、Y为200。选定此图层的第1帧，创建补间动画，预览动画，太阳从海平面升起的动画制作完成。 锁定“太阳”、“海面”图层，解锁“天空”图层，选定“天空”图层的第1帧，用“选择工具”选定图形对象“图形天空”， 打开“属性”面板，点击“属性”面板中的“颜色”，选择“高级”，单击“设置”按钮，在弹出的“高级效果”对话框，设置如图2.3.17所示。选定此图层的第1帧，创建补间动画，预览动画，天空由暗变亮的动画制作完成。图2.3.17 锁定“太阳”、“天空”图层，解锁“海面”图层，选定“海面”图层的第1帧，用“选择工具”选定图形对象“图形海面”，打开“属性”面板，点击“属性”面板中的“颜色”，选择“高级”，单击“设置”按钮，在弹出的“高级效果”对话框中设置如图2.3.18所示。选定此图层的第1帧，创建补间动画，预览动画，海面由暗变亮的动画制作完成。图2.3.18五、保存并测试动画 按快捷键“Ctrl+S”，将动画保存到“E:实例练习”文件夹中，并命名为“图形颜色变化”。 按快捷键“Ctrl+Enter”，测试影片，我们可以看到太阳升起，海面与天空变亮了。总结分析：本例的目的是做出一个日出海面，光线变亮的效果。首先要考虑的是太阳从海平面升起的效果如何制作？我们可以利用图层层叠关系，将太阳图层放置在海面图层之下，这样，海面就遮盖了太阳。把天空图层放置于太阳图层之下，使得太阳不被天空的图片所遮盖。三幅图片之间遮盖问题解决完后，要实现太阳由下向上运动的动画，可以利用图形对象的位置变化动画去实现。接下来要考虑的是光线由暗变亮动画制作呢？那么首先我们把天空和海面这两幅图片转换为图形对象，并建立两个关键帧，将第1个关键帧上的图形对象的颜色调暗一些，创建补间动画后，就能实现光线由暗变亮动画了。图2.3.19图形对象的颜色设置是通过其“属性”面板中的“颜色”选项完成的，如图2.3.19所示。它有四个选项，分别是亮度、色调、Alpha、高级，通过对这四个选项的设置，能调出你想要的图形色彩效果。实例练习请你做出“光盘: 实例与视频第二章第三节实例四图形颜色变化练习.swf”的影片所示的动画效果。2.3.5 翻转变化实例五 实例效果：光盘: 实例与视频第二章第三节实例五图形翻转变化.swf操作步骤： 启动Flash CS3，新建一个Flash ActionScript2.0文档。 将“图层1”更名为“蝴蝶”，选定此图层的第1帧，选择菜单“文件导入导入到舞台”菜单项，打开“导入”对话框，将“光盘: 实例与视频第二章第三节实例五素材之蝴蝶.png”这幅图片导入到的编辑区。 用“选择工具”选定刚导入的“蝴蝶”，将“蝴蝶”的位置调整为“相对于舞台水平居中和垂直居中”，按快捷键“Ctrl+B”，将其打散。 用“选择工具”选定“蝴蝶”的一半