第二章Flash动画的枚举

动画的枚举本章主要以最简单的动画形式，来说明动画形成的原理和操作过程，通过对Flash所能形成的动画进行枚举，使广大学友清楚知道Flash能做哪些动画，制作这些动画需要哪些前提，以及如何去实现的问题。在以后的创作中，可以根据实际情况，选择某一种动画形式，实现你心中的动画效果。任何复杂的动画都是运用这些最简单的动画组合而形成的，也是在这些动画的灵活应用上形成的。本章还要通过动画制作过程，慢慢体会如下概念：时间轴、图层、帧、矢量图形、影片剪辑元件、按钮元件、图形元件，以及它们之间的联系。这是学习Flash至关重要的一点，只有充分的理解和运用这些概念以及对它们的操作，才能真正的实现动手创作，而不是只会模仿，碰到实际问题的时候就一筹莫展，毫无头续。在Flash动画制作的过程中，只有以下四种对象能形成动画，因此，在制作动画之前，我们首先要将形成动画的对象转换为如下对象：1.矢量对象2.图形对象3.影片剪辑对象4.按钮对象除了上面四种对象外，还有以下四种动画的实现形式。虽然形式不同，但动画对象必须是上面四种对象中的一种。1.引导线动画2.遮罩动画3.逐帧动画4.Action(脚本程序)动画第一节对象的认识和转换2.1.1矢量对象矢量对象(矢量图形)是由绘画工具所绘制出来的图形，它包括线条和填充两部分。如图2.1.01为绘图工具。这里有个特例就是文字工具，使用文字工具输入文字，这些文字是一个文本对象，不是矢量对象，但是多次按快捷键“Ctrl+B”打散后，它就变成了矢量对象。因此，我们可以得出这样的结论：只要是由绘图工具绘出的图形，不管它被转换成何种对象，只要多次按“Ctrl+B”打散后，最终都能将其还原为矢量对象。实例一组合对象转换为矢量对象实例源文件：光盘：实例与视频\第二章\第一节\实例一\王字.fla实例效果：立体文字的制作，其中正面颜色为绿色，上面颜色为黑色，左侧面颜色为紫色，如图2.1.02操作步骤：1用“文本工具”在编辑区中输入一个“王”字，用“选择工具”选定这个王字，图2.1.01图2.1.02第二章flash动画的枚举38打开“属性”面板，将“王”字的字体设置为黑体、字号为96、颜色为绿色并加粗，设置如图2.1.03所示。2用“选择工具”选定这个王字，按快捷键“Ctrl+B”打散。打散后，王字的状态由文字框变成了颗粒状，表示已经是矢量状态了。3取消选定“王”字，用“墨水瓶工具”给“王”字加上线条。打散的目的是为了给文字加上边线。4用“选择工具”选定这个“王”字，按快捷键“Ctrl+G”，将王字组合成一个对象，按快捷键“Ctrl+D”重制一个“王”字。将两个“王”字移动到如图2.1.04的图示(1)所示的层叠位置。移动位置的目的是为了让文字产生立体感。5用“选择工具”选定这两个“王”字，按快捷键“Ctrl+B”打散。6选定“线条工具”，并选定“线条工具”的附加工具“贴紧至对象”，将两个“王”字的对应角处用线条相连，如图2.1.04的图示(2)所示。连接完后，将填充部分和多余的线条删除，如图2.1.04的图示(3)所示。7用“颜料桶工具”给“王”字的正面、上面、左面分别填充绿色、黑色、紫色。8选定“选择工具”，将鼠标移动至“王”字的线条上，双击选定所有线条，按“Delete”删除。9用“选择工具”选定这个立体的“王”字，按快捷键“Ctrl+G”组合成一个对象，最终效果如图2.1.02所示。总结：本例主要目的是学习将文字打散成矢量对象、“墨水瓶工具”的用法、“贴紧至对象”工具的用法、用“颜料桶工具”向一个封闭区域填充颜色、体会“Ctrl+G”组合和“Ctrl+B”打散的用法。如果用绘图工具绘制出的图形，经过组合后，那么它就不是矢量对象了，必须经过打散后才能转换为矢量对象。………图2.1.03图2.1.04第二节矢量对象动画制作第一节我们讲解了矢量对象、图形对象、影片剪辑对象、按钮对象这四种对象的转换，接下来第二节、第三节、第四节我们要讲解如何利用这四种对象制作动画。动画的制作离不开“图层”、“帧”和“编辑区”这三部分，理解这三者之间的联系是学好动画制作的关键。在第一章中，我们已经了解了图层操作面板和时间轴操作面板。在本章中，主要掌握如下图层操作：1.如何选定一图层？2.如何更改图层名称？3.如何新增图层？4.如何新增引导层？5.如何删除图层？6.如何锁定一图层或者所有图层？7.如何显示/隐藏图层？8.图层遮罩效果的应用。9.图层与动画的关系？在本章中主要掌握如下帧操作：1.什么是关键帧、空白关键帧、过渡帧？2.帧与编辑区有何联系？3.如何插入关键帧？4.如何插入空白关键帧？5.如何插入过渡帧？6.过渡帧的作用是什么？7.如何选定单帧？8.如何选定多帧？9.如何移动帧？10.如何复制与粘贴帧？11.如何翻转帧？12.动画形成的实质是什么？在以下的动画制作过程中，通过实例逐步解决上面所提出的问题，当你能很好的解决上面的问题时候，在你的脑海中也就出现动画制作的轮廓了。图2.2.01第二章flash动画的枚举402.2.1位置变化实例一实例效果：光盘:\实例与视频\第二章\第二节\实例一\位置变化.swf操作步骤：一、设置场景1启动FlashCS3，新建一个FlashActionScript2.0文档。2文档属性设置：打开文档属性面板，如图2.2.02所示。设置帧频为12、背景为白色、大小设置为800×600像素。注意：在以后的实例中，如果没特别要求，那么场景设置都按图2.2.02的①②③处显示的内容进行设置。同时，场景设置这步操作将不会在以后的实例中出现。二、动画制作过程1鼠标双击“图层1”处，出现光标，如图2.2.03的图示(1)所示，将图层命名为“位置移动”，如图2.2.03的图示(2)所示。2先选取工具栏中的“矩形工具”，然后选择“笔触颜色“为无颜色；选择“填充颜色”为红色；取消选定“矩形工具”的附加工具“贴紧至对象”和“对象绘制”，工具栏的设置如图2.2.04所示。在后续的绘图操作时，一律取消“对象绘制”这个选定，在这里做一个统一规定。3先选定“位置移动”图层的第1帧，如图2.2.05的图示(1)所示；然后在编辑区内画一个矩形，如图2.2.05的图示(2)所示；用“选择工具”将这个矩形移动到编辑区的左边，如图2.2.05的图示(3)所示。图2.2.02图2.2.03图2.2.04用鼠标选定“位置移动”图层的第25帧，然后按F6键，插入一个关键帧，如图2.2.06的图示(1)所示；用“选择工具”选定第25帧，将此帧上编辑区里的矩形移动到编辑区的右边，如图2.2.06的图示(2)所示。此时，观察“位置移动”图层的第1帧上的矩形与第25帧上的矩形，我们可以发现，这两帧上的矩形在编辑区的位置是不同的，第1帧的矩形在编辑区的左边，第25帧的矩形在编辑区的右边。如图2.2.07所示。图2.2.05图2.2.06第二章flash动画的枚举425用鼠标选定“位置移动”图层的第1帧，在第1帧上单击鼠标右键，弹出如图2.2.08的图示(1)所示的快捷菜单，单击“创建补间形状”菜单项，建立形状渐变动画。建立形状渐变后，在“位置移动”图层的第1帧到第25帧之间以淡绿色显示，并带有一个自左向右的箭头，如图2.2.08的图示(2)所示。鼠标拖动图2.2.08的图示(2)的①处的播放头，可以预览动画。三、保存并测试动画1在动画制作过程中，我们要及时将动画保存到硬盘上，因此，我们可以新建一个文件夹，专门用来放置学习过程中所做的实例。我们可以在E盘下新建一个“实例练习”文件夹。保存操作如下：按快捷键“Ctrl+S”，打开“另存为”对话框，按图2.2.09的提示操作。图2.1.08图2.2.07新建一个文件夹将新建的文件夹命名为“实例练习”，并双击打开这个文件夹。接下来的操作如图2.2.10所示。保存位置选择E盘第二章flash动画的枚举442保存完Flash文档后，按快捷键“Ctrl+Enter”测试影片，或者选择菜单“控制→测试影片”菜单项，效果一样。按完“Ctrl+Enter”键后，将弹出如图2.2.11的图示(1)所示的提示框，完成导出后，弹出如图2.2.11的图示(2)所示的预览窗口。3打开“E:\实例练习”文件夹后，我们可以看到两个文件，一个为“矢量-位置变化.fla”，这个文件是Flash的源文件。一个为“矢量-位置变化.swf”，如图2.2.12所示。“.swf”这个文件是按“Ctrl+Enter”测试影片后，生成的可执行的影片文件，它的后缀为“.swf”。双击打开这个文件可以观看动画，动画制作的最终目的就是为了生成这种文件。图2.2.10图2.2.11总结：分析本例，我们先来回答：帧与编辑区有何联系？一个帧代表着一个编辑区，帧与编辑区是一一对应的关系。在编辑区中进行编辑时，首先选定此编辑区所在的帧。时间轴上的帧有以下三种形式：空白关键帧、关键帧、过渡帧。空白关键帧在时间轴上表现为一个空心的小圆点，空白关键帧的编辑区是没有任何内容的，如图2.2.13的图示(1)所示。关键帧在时间轴上表现为一个实心的小圆点，它表示此帧在编辑区中已经有内容，如图2.2.13的图示(2)所示，在编辑区中绘制了一个五角星。如图2.2.13的图示(3)所示，过渡帧在时间轴上以灰色显示，它表示对关键帧内容的延长，显示的是关键帧上的内容。对过渡帧编辑区中的内容进行编辑，就是对过渡帧前的关键帧的编辑。动画形成的原理是什么？动画形成的原理是根据人的“视觉暂留”现象，将一组图2.2.12源文件swf文件图2.2.13第二章flash动画的枚举46静止的图形连续出现后，便形成了动画。Flash动画就是基于此原理来制成动画的，时间轴上的每一帧在编辑区中有不同的图形，当时间轴上的帧以当前帧频向前移动时，我们看到的是编辑区中的一组图形不断变化，从而产生了运动的视觉效果。用Flash制作动画有何特点？参考本例，我们可以发现Flash动画有如下特点：1动画是建立在两个关键帧之间，如图2.2.14所示。2两个关键帧在编辑区中的内容必须是变化的。如此例中的矩形，它是位置的变化，如图2.2.15所示。3两个关键帧之间内容的变化是有规定的。即矢量对象、图形对象、影片剪辑对象、按钮对象各自可以形成哪些动画？可以从本书目录中得到答案，一目了然。4在两个关键帧之间创建动画时，是先选定前面一个关键帧，然后单击鼠标右键，在弹出的快捷菜单中，选择一种动画类型，如图2.2.16所示。5创建动画的类型是根据对象来选择的，矢量对象是选择“创建补间形状”选项；图形对象、影片剪辑对象、按钮对象是选择“创建补间动画”选项，如图2.2.16所示。在Flash中，只有这四种对象能形成动画，其他对象若要形成动画，必须将其转换为其中一种对象。图2.2.15图2.2.14两个关键帧之间，间隔的帧数的多少控制动画运动的快慢。间隔的帧数越多，动画播放的时间越长，动画运动就慢；反之，动画就快。请将这6个特点记住，在以后实例操作中逐步理解。如果理解了这六点内容，那么制作动画就十分简单了。在实例练习的过程中，希望广大学友学习的不仅仅是一个动画的制作，而一类动画的制作。实例练习在本书配套光盘“光盘:\实例与视频\第二章\第二节\实例一\”的目录中，有一个“实例练习一.swf”的文件，请你做出“实例练习一”影片所示的动画效果。后续内容购买使用图2.2.16