补充)传统动画与新动画制作.ppt

第1章,基本动画制作,章 重 点,逐帧动画 传统补间动画（动作补间） 引导动画 形状补间动画 新补间动画（新动作补间）,5.1 动画制作基础,5.1.1 动画的基本原理 1视觉暂留现象 物体在人眼前经过时在人眼视网膜上形成像，当物体消失时，它的像并不会立即消失而是要停留一段时间。 2计算机动画形成原理 利用人的视觉暂留现象，用连续的静态图片（相邻图片之间有稍微不同）按一定的速度运行起来，就形成了动画。,【例5-1】小孩爬行动画。本实例通过3幅图片，以每秒6帧左右的速度依次出现，就形成了一个小孩爬行的动画。实例效果如图5-1所示：,图5-1 实例一效果,操作步骤： (1) 新建一个Flash文档，设置文档属性。直接在文档属性面板中设置，或者选择【修改】|【文档】命令，打开文档属性对话框进行设置，如图5-2所示。舞台大小130*125，背景为黑色，帧频为6fps。,图5-2 文档属性设置,(2) 选择【文件】|【导入】命令，如图5-3所示。将准备的三张图片素材导入到舞台。 在导入图片时，由于图片命名成序列，所以会有如图5-4的提示。如果要导入所有相关图片就选择“是”，如果只想导入单张图片就选择“否”。本例中我们三张图片均要导入，所以选择“是”按钮。,图5-3 导入图片素材,图5-4 导入图片序列,(3) 将图片导入舞台后，自动会在时间轴上生成三个关键帧，并将三张图片分别放在三个帧上。选中每一帧将图片位置摆好，遮盖舞台。 (4) 选择【控制】|【测试影片】命令测试影片，观看效果。,5.1.2 帧的概念与类型,在计算机动画形成原理中提到的每一幅图片都是一帧。按一定的速度运行起来，这个速度我们称之为帧频。帧频是动画播放的速度，以每秒播放的帧数（fps）为度量单位。 帧频太慢会使动画看起来一顿一顿的，帧频太快会使动画的细节变得模糊。在Web上，帧频为12 fps 时通常会得到最佳的效果。,在Flash中的帧有这样几种类型如图5-5所示： 1关键帧：动画中发生改变的画面也即关键画面我们称之为关键帧。当创建逐帧动画时，每个帧都是关键帧。在补间动画中，可以在动画的重要位置定义关键帧，Flash会创建关键帧之间的帧内容。补间动画的插补帧显示为浅蓝色或浅绿色，并会在关键帧之间绘制一个箭头。 关键帧用实心圆表示。 2普通帧：普通帧是延续前面相邻关键帧画面的时间，它的内容与紧邻的前关键帧画面一样。 3空白关键帧：没有内容的关键帧。用空心圆则表示该帧为空白的关键帧。,4补间帧（插补帧）：在补间动画中，Flash会创建关键帧之间的帧内容，这些帧称为插补帧，显示为浅蓝色或浅绿色，并会在关键帧之间绘制一个箭头。如图5-6所示浅蓝色显示动画补间的补间帧，如图5-7所示浅绿色显示形状补间的补间帧。,图5-7 形状补间的补间帧,图5-6 动画补间的补间帧,5.1.3 Flash中的基本动画类型,Flash中的基本动画类型有：关键帧动画（逐帧动画），动画补间动画，形状补间动画。无论是创建哪种类型的补间，都是在两个关键帧之间创建。 补间动画是创建随时间移动或更改的动画的一种有效方法，并且可以最大程度地减小所生成的文件大小。,5.1.4 帧的基本操作,常用的帧操作有：创建帧、选择帧、复制帧、粘贴帧、剪切帧、删除帧、反转帧。,【例5-2】创建关键帧的作法有如下几种。 (1) 在时间轴中选择一个帧，然后选择【插入】|【时间轴】|【关键帧】，如图5-8所示。 (2) 右键单击时间轴中的一个帧，然后选择“插入关键帧”，如图5-9所示。 (3) 选中时间轴中的一个帧，按快捷帧“F6”插入关键帧。,图5-8 菜单插入关键帧,图5-9 右键插入关键帧,创建普通帧和空白关键帧的方法与创建关键帧的方法类同，插入普通帧的快捷键为“F5”，插入空白关键帧的快捷键为“F7”。 选择帧时分两种情况。选择连续的帧时先选中第1个帧，再按住Shift 键选择连续帧的最后1帧；选择不连续的帧先选中第1个帧，再按住Ctrl键选择想要选择的其他帧。,选择帧后就可以执行复制、粘贴、剪切、删除等的操作。可以通过选择【编辑】|【时间轴】的相关命令进行帧操作，如图5-10所示。也可以选择帧后在右键菜单中选择相关命令进行操作，如图5-11所示。,图5-10 菜单命令进行帧操作,图5-11 右键菜单进行帧操作,当选择多个连续的帧以后，【修改】|【时间轴】下面的【翻转帧】命令会有效，利用这个命令可以翻转所选帧的出现顺序，也就是实现动画的反向播放。,5.1.5 图层的概念与类型,Flash 文档中的每一个场景都可以包含任意数量的图层。图层可以看成透明胶片，它们相互叠加在一起并由此形成了一定的遮挡关系，上面图层中的内容会遮挡下面图层的内容，透过上面图层中没有内容的区域可以看到下面图层的内容。 图层和图层文件夹用于组织动画序列的组件和分离动画对象，这样它们就不会互相擦除、连接或分割。若要一次补间多个组或元件的运动，每个组或元件必须在单独的图层上。 背景层通常包含静态插图，其它的每个图层中包含一个独立的动画对象。当文档中有多个图层时，使用图层文件夹可将图层组织成易于管理的组。 图层有普通层和特殊层。特殊层有引导层和遮罩层，被引导层和被遮罩层。,5.1.6 图层的基本操作,图层的操作包括：添加层、删除层、修改层顺序、图层加锁、图层的隐藏和显示、图层的显示对象轮廓、图层的管理。 图层的操作直接从“时间轴”面板上设置，“时间轴”面板上关于图层的有关设置如图5-12所示。或者选中层单击右键在菜单中进行相关操作，右键菜单如图5-13所示。,图5-13 选中图层单击右键菜单,5.2 逐帧动画,逐帧动画在每一帧中都会更改舞台内容，它最适合于图像在每一帧中都在变化而不是在舞台上移动的复杂动画。在逐帧动画中，Flash 会存储每个完整帧的值。,【例5-3】脸部表情。本实例制作一个脸部表情动画。实例效果如图5-14所示。,图5-14 脸部表情的两帧,操作步骤： (1) 新建一空的Flash文档，并以文件名“脸部表情”保存。 (2) 在第1帧绘制脸部表情如图5-14左边所示。使用“椭圆工具”，在选项中选择“对象绘制”，填充为放射渐变画脸，填充为黑色画眼睛，无填充颜色画嘴巴。用铅笔工具或钢笔工具画眉毛。 (3) 在第2帧插入关键帧，修改眉毛的位置和嘴巴的形状如图5-14右边所示。 (4) 选择【控制】|【测试影片】命令测试影片。,【例5-4】星空。本实例制作一个由星星和月亮装点的天空。实例效果如图5-15所示。,图5-15 星空效果,操作步骤： (1) 新建一空的Flash文档，并以文件名“星空”保存。 (2) 用一矩形遮盖舞台，填充蓝黑线性渐变色如图5-16所示做背景。再用渐变变形工具将填充分旋转90度，使黑色位于上方，如图5-17所示。,图5-17 星空背景,图5-16 线性渐变,(3) 新建一个图层，在上面画月芽，用两个圆相切即可。选中月芽，选择【修改】|【形状】|【柔化填充边缘】命令，在“柔化填充边缘”对话框中设置参数如图5-18所示做柔化效果。 (4) 新建一个图层，在上面制作星星。用“多角星形”工具在舞台上绘制多个星星。,图5-18 柔化填充边缘,(5) “背景”层和“月亮”层都在第5帧插入帧，“星星”层从第2帧到第5帧都插入关键帧，如图5-19所示。 (6) 选中“星星”层的第2帧，从舞台上删除少数星星做成闪烁的效果。同理在第3、4、5帧也选中不同的星星删除。 (7) 选择【控制】|【测试影片】命令测试影片。,图5-19 时间轴效果 层,【例5-5】红绿灯。本实例制作一个交通红绿灯变化的动画。实例效果如图5-20所示。,图5-20 制作红绿灯效果 层,操作步骤： (1) 新建一空的Flash文档，并以文件名“红绿灯”保存。 (2) 在第1帧用“椭圆”工具绘制一正圆，填充色为绿黑放射渐变。 (3) 在第11帧插入关键帧，修改填充颜色为黄黑放射渐变。连续插入关键帧至第18帧。 (4) 在第13、15和17帧，从舞台上将图形删去做成空白关键帧，制作成黄灯闪烁的效果。 (5) 在第18帧将圆的填充颜色修改为红黑放射渐变，在第30帧插入普通帧。 (6) 选择【控制】|【测试影片】命令测试影片。,5.3 补间动画,5.3.1 创建动作补间动画 在补间动画中，在一个特定时间定义一个实例、组或文本块的位置、大小和旋转等属性，然后在另一个特定时间更改这些属性。也可以沿着路径应用补间动画。 设置补间动画的关键帧可以采用以下三种方式： 选择开始关键帧后，在“属性”面板中的“补间”下拉选项中选“动画”。 选择开始关键帧后，选择【插入】|【时间轴】|【创建补间动画】命令。 用鼠标右键单击开始关键帧，从打开的快捷菜单中选择【创建补间动画】命令。,【例5-6】旋转的雪花。本实例使用动作补间动画，制作了一个旋转雪花的动画。 (1) 新建一空的Flash文档，并以文件名“旋转的雪花”保存。 (2) 根据第四章实例制作“雪花”元件。 (3) 将“雪花”拖入时间轴上的第1帧，在第30帧插入关键帧。选中第1帧“旋转”下拉选项中选“顺时针”1次，如图5-21所示。 (4) 选择【控制】|【测试影片】命令测试影片。,图5-21 设置补间属性 层,【例5-7】弹跳的小球。本实例制作一个弹跳小球的动画。 操作步骤： (1) 新建一空的Flash文档，并以文件名“弹跳的小球”保存。 (2) 创建图形类新，用“椭圆”工具绘制圆球。 (3) 在第1帧将元件“小球”拖放到舞台上方位置，在第40帧插入关键帧，将实例移动至舞台下方位置。在两个关键帧之间创建补间动画。,(4) 在“属性”面板中的“缓动”里简单设置运动加速度体验不同取值的运动。取正值为缓动即减速运动，取负值为加带运动。如果设置更复杂的运动，单击后面的“编辑”按钮，打开“自定义缓入/缓出”设置面板。缓动线在匀速运动时为一条直线。在缓动线上添加点，拖动切线修改方向，拖动点修改所在帧位置，如图5-22所示。 (5) 选择【控制】|【测试影片】命令测试影片。,图5-22 设置缓动 层,【例5-8】水波纹效果。本实例制作水波纹动画。 操作步骤： (1) 新建一空的Flash文档，并以文件名“水波纹效果”保存。 (2) 新建一个“图形”类元件命名为“水波”，用“椭圆”工具绘制一不带填充色的椭圆，边框宽度为5。 (3) 在“图层1”的第1帧将“水波”元件拖入舞台，在第11帧插入关键帧，将实例放大，在“属性”面板上将透明度设为，如图5-23所示。创建从第1帧到第11帧的动画补间。,图5-23 补间动画,(4) 添加一个图层“图层”，复制“图层”的所有帧，粘贴到“图层”的第3帧向后位置。 (5) 重复第四步的操作，再添加几层，如图5-24所示。 (6) 选择【控制】|【测试影片】命令测试影片。,图5-24 “水波”时间轴,【例5-9】风吹字。本实例制作一个风吹字的动画。实例效果如图5-25所示：,图5-25 “风吹字”效果,操作步骤： (1) 新建一空的Flash文档，并以文件名“风吹字”保存。修改文档背景为绿色。 (2) 在舞台用“文本工具”输入文本“风吹叶落”，打散一次。分别选中每一个单独的字符转化为图形类元件，分别命名为“风”“吹”“叶”“落”。然后全部选中4个实例如图5-26所示，在右键菜单中选择“分散到图层”。,图5-26 将4个实例分散到各层 层,(3) 实例分散到各层后的时间轴如图5-27所示自动又增加4个图层，图层名称和该实例的元件名相同。将图层1删除留下其余的四层。 (4) 在“风”图层上第15帧插入关键帧，将实例从右上角拖到舞台外面，将实例旋转180度再水平翻转，最后将实例设为透明。在第1帧和第15帧之间创建动画补间。,图5-27 实例分散到各层后的时间轴 层,(5) 其它层的作法与“风”图层类似，不过要做出依次飘出的效果，每个字开始运动的时间稍向后错帧3帧，最后制作好的时间轴如图5-28所示。 (6) 选择【控制】|【测试影片】命令测试影片。,图5-28 “风吹字”时间轴 层,5.3.2 创建形状补间动画,在补间形状中，在一个特定时间绘制一个形状，然后在另一个特定时间更改该形状或绘制另一个形状。 Flash 会内插二者之间的帧的值或形状来创建动画。 注： 若要对组、实例或位图图像应用形状补间，请分离这些元素。 若要对文本应用形状补间，请将文本分离两次，从而将文本转换为对象。,【例5-10】变形的文字。本实例制作变形文字动画效果。实例效果如图所示：,图5-29 “形变的文字”效果,操作步骤： (1) 新建一空的Flash文档，并以文件名“变形的文字”保存。 (2) 在第1帧用“文本工具”输入字符“F”，在第10帧插入关键帧，修改字符为“L”，同理在第20、30、40帧分别写入字符“A”“S”“H”。在第50帧插入帧，延长字符“H”的持续时间。,(3) 分别将第10、20、30、40帧的字符打散（快捷键Ctrl+B），然后分别在1-10帧、10-20帧、20-30帧、30-40帧之间创建形状补间如图5-30所示。最后的时间轴效果如图5-31所示。 (4) 选择【控制】|【测试影片】命令测试影片。,图5-30 创建补间形状 层,图5-31 “变形的文字”时间轴 层,【例5-11】月亮变化。本实例制作月亮圆缺变化的动画效果。实例效果如图所示：,图5-32 “月亮变化”效果 层,图5-33 月芽 层,图5-34 圆月 层,操作步骤： (1) 新建一空的Flash文档，并以文件名“月亮变化”保存。修改背景色为蓝黑色。 (2) 在第1帧绘制月芽形状，填充色为黄色，无边框。摆放在舞台左侧，如图5-33所示。,图5-33 月芽 层,(3) 在第20帧插入空白关键帧，画一圆月，填充分为桔黄色，无边框。摆放在舞台右侧，如图5-34所示。 (4) 从第1帧到第20帧之间创建形状补间动画。 (5) 选择【控制】|【测试影片】命令测试影片。,图5-34 圆月 层,5.4 创建有声动画,5.4.1 添加声音 Flash提供了许多使用声音方式可以使声音独立于时间轴连续播放，或使动画和某个声音同步播放，还可以向按钮添加声音 使按钮具有更强的感染力。,只有将外部声音文件导入到Flash中以后才能在Flash作品中加入声音效果。能直接导入Flash 声音文件主要有WAV和MP3两种格式。将声音导入Flash时执行【文件】|【导入】|【导入到库】命令，弹出“导入到库”对话框中选择要导入的声音文件，单击“打开”按钮将声音导入，如图5-35所示。声音导入后 就可以在【库】面板中看到刚导入声音文件就可以像使用元件那样使用声音对象了。,图5-35 导入声音文件,将声音从外部导入Flash以后时间轴并没有发生任何变化，必须引用声音文件，声音对象才能出现在时间轴上进行应用。将声音对象拖放到场景中，时间轴如图5-36所示。第1帧出现一条短线 这其是声音波形。任意选择后面比如第30帧插入帧，就可以看到声音对象较完整的波形。时间轴如图5-37所示。此时按下回车键就可以听到声音了。,图5-36 导入声音文件时间轴,图5-37 导入声音文件第1帧,声音的处理可以使用专业的音频制作软件，也可以用Flash中自带的编辑功能进行简单的编辑。选择声音所在图层第1帧，打开【属性】面板，设置和编辑声音对象参数 如图5-38所示。,图5-38 声音参数的设置,【声音】选项：从中可以选择要引用声音对象，也可以另外引用库中声音。 【效果】选项：从中可以选择些内置声音效果，比如让声音有淡入、淡出等效果。 【编辑】按钮：单击这个按钮可以进入到声音编辑对话框中对声音进行简单编辑。 【同步】:这里可以选择声音和动画同步类型。默认类型是【事件】类型。另外还可以设置声音重复播放的次数,1声音的效果有这样几种选项： 【无】：不对声音文件应用效果。选择此选项将删除以前应用过效果。 【左声道】/【右声道】：只在左或右声道中播放声音。 【从左到右淡出】/【从右到左淡出】：会将声音从一个声道切换到另一个声道。 【淡入】：会在声音持续时间内逐渐增加其幅度。 【淡出】：会在声音持续时间内逐渐减小其幅度。 【自定义】:可以使用用户自己创建声音淡入和淡出点 。,2Flash中声音类型分为两种：事件声音和数据流声音。它们的设置就是在声音的同步中设置，同步中有这样几种选项： 【事件】选项会将声音和一个事件发生过程同步起来。事件和声音在它起始关键帧开始显示时播放并独立于时间轴播放完整声音。即使SWF文件停止执行声音也会继续播放。 【开始】和【事件】选项功能相近，但如果声音正在播放使用【开始】选项则不会播放新声音。 【停止】选项将使指定声音静音。 【数据流】选项将强制动画和音频流同步。音频流随着SWF文件停止而停止 而且音频流播放时间绝对不会比帧播放时间长。,【例5-12】为按钮添加声音。交互按钮是Flash中重要元素，为按钮加上合适声效会使作品增色不少。可以将声音和一个按钮元件的不同状态关联起来。 因为声音和元件存储在一起，它们可以用于元件的所有实例。 操作步骤： (1) 打开第4章制作的“按钮”文档，另存为“按钮添加声音”。 (2) 将声音文件“ann”导入文件。 (3) 进入“按钮”元件编辑界面，新建“图层2”，在第2帧即“鼠标经过”帧插入空白关键帧，将声音文件拖入舞台。时间轴如图5-39所示。,图5-39 在第2帧应用声音,(4) 在【属性】面板上设置声音的相关属性，如图5-40所示。在“同步”中设置为“事件”，重复1次。这里必须将“同步”选项设置为“事件”。如果还是“数据流”同步类型那么声效将听不到。给按钮加声效时一定要使用“事件”同步类型，“数据流”类型经常用来做背景音乐。,图5-40 设置声音相关选项,5.4.2 编辑声音,1编辑声音文件，具体操作如下： 单击【属性】面板上的“编辑”按钮，该按钮可以利用Flash中声音编辑Control控件编辑声音对声音做一些简单的编辑，实现一些常见的功能。比如控制声音、播放音量、改变声音开始播放和停止播放位置等。 在帧中添加声音，然后打开【属性】面板 单击右边“编辑”按钮打开【编辑封套】对话框，如图5-41所示。,【编辑封套】对话框分为上下两部分，上面是左声道编辑窗口，下面