1、第第8 8章章 动画播放与制作工具动画播放与制作工具 目录目录 8.1 相关理论知识 8.2 矢量动画制作工具Flash 8.3 GIF动画制作工具Ulead GIF Animator 8.4 操作练习8.1 8.1 相关理论知识相关理论知识 1什么是动画 动画意味着运动。动画要随着时间而变化，尤其指视觉上的变化。运动基本上表现为物体随着时间，发生位置上的变化，开始在这里，一会儿又在那里。2帧和运动 帧就是影像动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。一帧就是一幅静止的画面，连续的帧就形成动画。我们通常说帧数，简单地说，就是在1秒钟时间里传输的图片的帧数，也可以理解为图形处理
2、器每秒钟能够刷新几次，通常用fps（frames per second）表示。每一帧都是静止的图像，快速连续地显示帧便形成了运动的假象。8.2 8.2 矢量动画制作工具矢量动画制作工具Flash Flash 8.2.1 Flash简介 8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash8.2.3 使用Flash制作与编辑动画 1动画概述（1）关键帧与过渡帧：表示关键状态的帧叫
3、做关键帧。在两个关键帧之间，计算机自动完成过渡画面的帧叫做过渡帧。关键帧和过渡帧的联系和区别：1）两个关键帧的中间可以没有过渡帧（如逐帧动画），但过渡帧前后肯定有关键帧，因为过渡帧附属于关键帧。2）关键帧可以修改该帧的内容，但过渡帧无法修改该帧的内容。3）关键帧中可以包含形状、剪辑、组等多种类型的元素或诸多元素，但过渡帧中的对象只能是剪辑（影片剪辑、图形剪辑、按钮）或独立形状。8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash（2）补间动画与逐帧动画：补间动画是一种动画类型，在动画中对象从一个位置移动到另一个位置。在制作时定义要为其制作动画的对象的起始位置和结束位置，然后让F
4、lash计算该对象的所有补足区间位置。使用这种方法，只需设置要为其制作动画的对象的起始位置和结束位置，就可以创建平滑的动作动画。逐帧动画更改每一帧中的舞台内容，它最适合于每一帧中的图像都在更改而不是仅仅简单地在舞台中移动的复杂动画。逐帧动画增加文件大小的速度比补间动画快得多。在逐帧动画中，Flash会保存每个完整帧的值。8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash（3）时间轴中的动画表示 补间动画：补间形状：虚线表示补间是断的或不完整的：单个关键帧：帧动作：（4）设置帧频率 帧频是动画播放的速度，以每秒播放的帧数为度量。帧频太慢会使动画看起来一顿一顿的，帧频太快会使动画
5、的细节变得模糊。在Web上，每秒12帧的帧频通常会得到最佳的效果。设置帧频率的方法：在舞台上远离任何对象的区域单击。在属性检查器的“帧频”文本框中键入要修改的数值。8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash2创建传统的逐帧动画 以“变换色彩的小球”为例，创建逐帧动画的步骤如下：（1）新建一个文件，利用属性面板可以设置场景为合适的大小和背景色。（2）选择第1帧作为逐帧动画的起始帧，单击右键，在弹出的菜单中选择“插入关键帧”。（3）在第1帧上创建插图。可以使用绘画工具、从剪贴板中粘贴图形，或导入一个文件，这里利用工具栏中的椭圆工具画一个圆，在属性面板中，选择填充色为红色。
6、（4）拷贝第1帧的内容（右击第1帧，选择“复制帧”命令），单击第2帧，将第1帧中的内容粘贴到第2帧上，并用选择工具选好图形，将图形颜色换为蓝色。（5）重复步骤（4），依次重新设置颜色，完成第310帧的动作。（6）单击“编辑多个帧”按钮，取消显示，按Enter键测试动画并保存。8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash3创建补间动作动画（1）创建补间动作动画 以“弹跳的小球”为例，具体操作如下：1）在时间轴（“窗口”“时间轴”）中，双击图层1的标题并键入“示例”。按Enter键以重命名该图层。2）在工具画板上选择工具画一个球形，填充颜色。3）在选择工具仍处于选中状态时，
7、在“示例”图层中选择第20帧，然后按F6键插入一个关键帧。4）选择第10帧并按F6键以添加另一个关键帧。5）在播放头仍处于第10帧上时，按住Shift键沿着直线移动小球，并将“示例”图层向上拖动。6）在“示例”图层中，选择第2帧和第9帧之间的任何帧。在“属性”面板中，从“补间”弹出菜单中选择“动画”。这两个关键帧之间的时间轴中会出现一个箭头。7）选择第11帧和第19帧之间的任何帧。同样使用“属性”面板中的“补间”弹出菜单选择“动画”。8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash（2）创建沿路径运动的补间动作动画 以“运动的小球”为例，具体操作如下：1）首先创建运动引导层
8、。选择包含动画的图层，然后选择菜单“插入”“时间轴”“运动引导层”命令。2）在图层1绘制一个球形，然后使用钢笔、铅笔、直线、圆形、矩形或刷子工具在引导层绘制所需的路径，并使球形中心与路径始点对齐。3）在图层1的第30帧插入关键帧，移动球形，使其中心与路径末点对齐。4）选择“控制”“测试影片”命令可查看动画效果。8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash4创建补间形状动画以“变形的字母”为例，形状补间动画的创建步骤如下：（1）选择动画开始的帧，在场景中利用绘图工具或文字工具绘制图形，这里选择工具栏中的文本工具，在“属性”面板中将颜色设置为红色，字体设置为Arial Bl
9、ack，输入字母“A”，作为形状补间动画的第一个关键帧。（2）选择“修改”“分离”（或按Ctrl+B键）将字母“A”打散。（3）用同样的方法分别在第10帧、第20帧、第30帧处插入关键帧，输入字母B、C、D，改变其各自颜色并将其打散。在第40帧处插入与第1帧相同的关键帧。（4）在时间轴上选择第1帧到第40帧中的任意一帧，然后在该帧的“属性”面板中设置参数，在“补间”下拉列表框中选择“形状”选项。（5）为了使每一个字母变形前有停顿，选中第10帧，右击选择“插入帧”命令，重复5次，然后复制第10帧，粘贴到第15帧，取消第1015帧之间的形状补间，之后按照同样的方法处理第20帧、第30帧即可。8.2
10、 8.2 矢量动画制作工具矢量动画制作工具FlashFlash5遮罩 以“百叶窗”为例，遮罩效果的创建步骤如下：（1）新建一电影文件，设置属性为400*300（像素）。（2）导入图片。选择“文件”“导入”“导入到库”命令，将准备好的两张图片（例如“花.jpg”和“草.jpg”）导入到库中。并将“花.jpg”拖入图层1。（3）右击图片，选择“分离”命令，将导入的图片打散。（4）选择工具栏中的椭圆工具，设置参数面板中的参数（透明）。（5）按住Shift键，在工作区中拖动鼠标画出一个圆形。选中该圆形，在属性面板中设置其参数（宽340，高340，X32，Y-19.1）。8.2 8.2 矢量动画制作工具
11、矢量动画制作工具FlashFlash（6）选中圆形及圆形外的图片，按Delete键将其删除。（7）插入新的图层2，隐藏图层1，用与图层1中相同的方法制作该图形的效果。（8）新建一图层3，选择工具栏中的矩形工具，将工具参数面板中的线框设置成“无线框”，填充颜色设置成“黑色”。在工作区中拖动鼠标画出一长方形。（9）用箭头工具选中该长方形，然后右击，在弹出菜单中选择“转换为元件”命令，在弹出的对话框中输入元件名称meng，选择图形项，设置完毕，单击“确定”按钮。（10）选择菜单“插入”新建元组”命令，在弹出的对话框中输入名称为meng1，选择图形项，单击OK按钮，进入图形编辑模式。8.2 8.2 矢
12、量动画制作工具矢量动画制作工具FlashFlash（11）从库中拖入元件meng，并适当调整其位置。分别在第15、25、40帧处插入一个关键帧，分别选择第15帧和第25帧，在对象面板中先取消高宽的比例锁定，然后将高度设置成1。（12）右击第115帧中的任意一帧，选择创建补间动画，同样创建第2540帧的补间动画。（13）单击时间线窗口左上角的按钮，切换到场景1。删除长方形图片。从库中拖入元组meng1，调整其位置到图片底部。（14）右击图层3，从弹出菜单中选择“遮罩层”命令。这时图层3变成蒙板层，蒙板以外的图层2中的图片将不显示。8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlas
13、h（15）新增8个图层，按住Shift键，选中图层2和图层3，右击被选中层的任意一帧，在弹出菜单中选择“复制帧”命令。（16）右击图层4的第1帧，从弹出菜单中选择“粘贴帧”命令。（17）这时图层4变成复制后的图层2和图层3的蒙板层。（18）单击复制后的蒙板层，按键盘上的向上箭头，移动图层后的位置在之前的上方。8.2 8.2 矢量动画制作工具矢量动画制作工具FlashFlash（19）用同样的方法，依次在图层5至图层11中分别复制图层2和图层3，将各个蒙板层中的meng1向上移动，并顺次向上连接。（20）按住Shift键，选中所有图层中的第42帧并右击，在弹出菜单中选择“插入帧”命令，将所有图层
14、都设置为共有42帧。（21）单击时间线窗口中图层名称上方的按钮，锁住所有图层。（22）遮罩效果制作完毕，测试动画。Flash动画说到底就是“遮罩+补间动画+逐帧动画”与元件（主要是影片剪辑）的混合物，通过这些元素的不同组合，可以创建千变万化的效果。8.3 GIF8.3 GIF动画制作工具动画制作工具Ulead GIF AnimatorUlead GIF Animator 8.3.1 Ulead GIF Animator简介及界面8.3 GIF8.3 GIF动画制作工具动画制作工具Ulead GIF AnimatorUlead GIF Animator8.3.3 GIF简单动画实例 以“文字闪烁
15、”为例，具体操作步骤如下：（1）关闭“启动向导”对话框，进入主窗口中，将会看到在编辑区域中有一个白底的矩形框，这就是动画创作的舞台，同时在下方帧面板中显示当前动画只有一帧。（2）更改背景色和前景色。将光标移动到工具面板的前景色、背景色选取区上，待光标变成吸管状，单击选取区将弹出Ulead Color Picker对话框，设置背景色为“#FFFFFF”，前景色为“#001EE1”。（3）单击工具面板中的“文本工具”图标并在编辑区域上单击，弹出“文本条目框”对话框，输入文字“动画制作”，并设置字体为“隶书”，字号为50，颜色为“前景色”，完成后单击“确定”按钮，返回动画编辑区。（4）在对象管理器面
16、板中，单击“相同的选定对象”按钮，添加一个新层。（5）单击“帧”“相同帧”命令（快捷键Ctrl+F），在帧面板中添加与第1帧内容相同的第2帧。8.3 GIF8.3 GIF动画制作工具动画制作工具Ulead GIF AnimatorUlead GIF Animator（6）在第2帧上添加“霓虹”效果。选中第2帧，右击编辑区中的文本，在弹出的快捷菜单中选择“文本”“霓虹”命令，在弹出的“霓虹设置”对话框中选中“霓虹”复选框，设置“方向”为Outside，“宽度”为15，“颜色”为C078FF，并选中“透明”复选框。最后在对象管理器面板中将中间的“动画制作”层中的“隐藏/显示对象”按钮隐藏。（7）在
17、帧面板中，双击“2：帧”，打开“画面帧属性”对话框。设置“延迟”为75，“移动方式”为“灵敏”，“画面帧标题”为“霓虹”，单击“确定”按钮。（8）单击“文件”“优化向导”命令，打开“优化向导”对话框，该对话框的主要功能就是创建一个全局优化调色板，并用于动画中所有的帧。保持“优化向导”对话框中的默认设置，依次单击“下一步”按钮，完成动画优化。（9）单击“文件”“另存为”“GIF文件”命令，在弹出的“另存为”对话框中，输入文件名为“文字动画”，单击“保存”按钮即可。（10）单击“查看”“播放动画”命令，即可在编辑区预览文字的动画效果。8.4 8.4 操作练习操作练习 Flash练习：（1）制作一个“国旗升起”的动画。（2）制作一个“五角星变形”的动画。
