Flash 动画原理

1、郴州师范郴州师范 YLEE2021-11-11Flash动画制作基础知识动画制作基础知识大专班课件制作专用大专班课件制作专用郴州师范郴州师范 YLEEYLEE内容简介内容简介Flash简单动画制作简单动画制作特效制作特效制作交互控制（交互控制（AS）Flash综合作品制作综合作品制作Flash动画原理动画原理郴州师范郴州师范 YLEEYLEEFlash动画原理动画原理v动画原理动画原理v 当观看电影、电视或动画片时，画面中的人物和当观看电影、电视或动画片时，画面中的人物和场景是连续、流畅和自然的。场景是连续、流畅和自然的。v 但看一段电影胶片时，看到的是电影胶片上的一但看一段电影胶片时，看到的

2、是电影胶片上的一格又一格的不动的，但又是逐渐变化着的画面。格又一格的不动的，但又是逐渐变化着的画面。郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作v动画原理动画原理v 动画和电影正是利用人眼视觉残留特性，也称动画和电影正是利用人眼视觉残留特性，也称视视觉暂留。觉暂留。v 人体的视觉器官，在看到的物象消失后，仍可暂人体的视觉器官，在看到的物象消失后，仍可暂时保留视觉的印象。时保留视觉的印象。v 视觉印象在人的眼中大约可保持视觉印象在人的眼中大约可保持0.1秒之久。如秒之久。如果两个视觉印象之间的时间间隔不超过果两个视觉印象之间的时间间隔不超过0.1秒，秒，两个视觉印象融合在

3、一起，就形成视觉残（暂）两个视觉印象融合在一起，就形成视觉残（暂）留现象。留现象。 计算机动画的原理与传统动画基本相同，只是计算机能够自计算机动画的原理与传统动画基本相同，只是计算机能够自动生成中间帧。动生成中间帧。郴州师范郴州师范 YLEEYLEEv动画原理动画原理1.1.时间轴时间轴 时间轴是编辑、加工动画的时间轴是编辑、加工动画的流水线，其最重要的成分是帧、流水线，其最重要的成分是帧、图层和播放头图层和播放头2.2.帧帧 时间轴上的小格子就是帧，它时间轴上的小格子就是帧，它是构成动画作品的基本单位。是构成动画作品的基本单位。关键帧：实心圆圈的方格（按关键帧：实心圆圈的方格（按F6F6键可

4、插入关键帧）键可插入关键帧）空白关键帧：空心圆圈的方格空白关键帧：空心圆圈的方格3.3.图层图层可理解为多张透明的幻灯片可理解为多张透明的幻灯片按一定的顺序叠放在一起按一定的顺序叠放在一起 菜单栏时间轴工作区域绘图工具栏“混色器”面板“属性”面板“层”区郴州师范郴州师范 YLEEYLEEv动画原理动画原理利用动画原理，在利用动画原理，在FLASH中使用逐帧绘制画面的方法，然后连续播放，就可中使用逐帧绘制画面的方法，然后连续播放，就可以形成动画。以形成动画。入门实例：入门实例： 1、吃鱼动画、吃鱼动画 制作时使用刷子工具，制作时使用刷子工具，每画一个画面后按每画一个画面后按F7F7增加一个空白关

5、增加一个空白关键帧（增加一个空画键帧（增加一个空画面），并按下面），并按下“绘图绘图纸外观纸外观”，绘制新画，绘制新画面。面。绘图纸绘图纸外观外观郴州师范郴州师范 YLEEYLEEv动画原理动画原理2、水滴落下动画、水滴落下动画本动画中的水滴在第一帧中绘制本动画中的水滴在第一帧中绘制后，后面的帧中只需复制水滴后后，后面的帧中只需复制水滴后往下移动位置即可形成下落动画。往下移动位置即可形成下落动画。因此第一帧绘制水滴后，从第二因此第一帧绘制水滴后，从第二帧起打开帧起打开“绘图纸外观绘图纸外观”，按下，按下F6插入关键帧，插入关键帧，FLASH会将前会将前一关键帧的内容复制到下一帧，一关键帧的内容

6、复制到下一帧，将下一帧的水滴往下移动即可，将下一帧的水滴往下移动即可，依次往后按依次往后按F6插入关键帧，移动插入关键帧，移动水滴。水滴。郴州师范郴州师范 YLEEYLEEv动画原理动画原理2、大笑动画、大笑动画FLASH动画播放时动画播放时会循环进行。利用会循环进行。利用这个特点我们可制这个特点我们可制作一些简单重复播作一些简单重复播放的动画，如左图，放的动画，如左图，还可以导出为还可以导出为GIF图图片，在片，在QQ中作为表中作为表情使用。情使用。郴州师范郴州师范 YLEEYLEEv动画原理动画原理郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作v动画制作中的帧动画制作

7、中的帧帧的类型帧的类型：帧有普通帧和关键帧两种类型，其中关键帧又分为关键帧和空白关键帧 关键帧是指在动画播放过程中呈现关键性动作或内容变化的帧，按【F6】键可创建关键帧。Flash可以在关键帧之间添加普通帧，并通过制作补间动画生成流畅的动画。在时间轴中拖动关键帧可以更改补间动画的播放时间。 关键帧定义了动画关键的变化环节，在时间轴中用小圆圈来表示，如果关键帧中有内容则以一个黑色的圆点来表示。空白关键帧中无任何内容，以空心圆圈表示。增加空白关键帧用【F7】郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作v动画制作中的帧动画制作中的帧帧的类型帧的类型：空白关键帧中没有内容，主要

8、用于在画面与画面之间形成间隔。空白关键帧中没有内容，主要用于在画面与画面之间形成间隔。按按【F7】键可以创建空白关键帧，空白关键帧用空心的小圆圈表示，一旦在空白键可以创建空白关键帧，空白关键帧用空心的小圆圈表示，一旦在空白关键帧中创建了内容，空白关键帧就会变为有内容的关键帧。关键帧中创建了内容，空白关键帧就会变为有内容的关键帧。 普通帧就是不起关键作用的帧，起着普通帧就是不起关键作用的帧，起着过滤和延长过滤和延长内容显示的功能，在时内容显示的功能，在时间轴中普通帧以空心矩形或单元格表示，按间轴中普通帧以空心矩形或单元格表示，按【F5F5】键可创建普通帧。在键可创建普通帧。在一幅动画中增加普通帧

9、可延长动画的播放时间，时间轴中每一小格在创一幅动画中增加普通帧可延长动画的播放时间，时间轴中每一小格在创建动画时都是一个帧。建动画时都是一个帧。普通帧内容不可编辑！普通帧内容不可编辑！播放头播放头普通帧普通帧郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作v动画制作中的帧动画制作中的帧 帧的操作帧的操作： 属性设置：帧标签，帧注释，帧锚记属性设置：帧标签，帧注释，帧锚记 选取：单击选中单帧，选取：单击选中单帧，ctrl选择连续或非连续帧，选择连续或非连续帧，SHIFT连选连选 添加：快捷键添加：快捷键F5，F6，F7 复制复制/粘贴：复制是整个帧的内容粘贴：复制是整个帧的内

10、容 移动：移动：Alt复制移动复制移动 删除：点右键，删除帧删除：点右键，删除帧 翻转：倒放动画翻转：倒放动画郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作v重要概念重要概念 层（层（Layer）：）： 一个场景可由几个图层组成，每个图层的内容由图像、动画、一个场景可由几个图层组成，每个图层的内容由图像、动画、组件或音效等构成。放在上层的对象会遮盖下层的重叠部分。组件或音效等构成。放在上层的对象会遮盖下层的重叠部分。 层的操作层的操作： 创建图层（文件夹）创建图层（文件夹） 删除删除 命名命名 显示与隐藏显示与隐藏 锁定锁定 复制：通过复制帧的方式复制：通过复制帧的方式

11、移动移动郴州师范郴州师范 YLEEYLEEv打散对象和组合对象打散对象和组合对象打散对象打散对象 组合对象组合对象 crtl+G组合对象组合对象 打散对象打散对象 crtl+B组合对象是一个整体，打散对象是打散的，可以任意切割组合对象是一个整体，打散对象是打散的，可以任意切割郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作v重要概念重要概念 元件（元件（Symbol）：）： 可以重复利用的可编辑对象，包括图形，按钮，影片剪辑，声可以重复利用的可编辑对象，包括图形，按钮，影片剪辑，声音，位图，字体等，它存在库中。音，位图，字体等，它存在库中。 类型有：图形，按钮，影片剪辑类型

12、有：图形，按钮，影片剪辑 元件创建方法：元件创建方法： 将舞台中的元素转换成元件将舞台中的元素转换成元件 直接创建新元件直接创建新元件郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作vFlash的动画类型的动画类型 逐帧动画：每一帧都是关键帧逐帧动画：每一帧都是关键帧,通过每帧的内容变化产通过每帧的内容变化产生动画效果生动画效果郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作vFlash的动画类型的动画类型 逐帧动画：逐帧动画： 补间动画（渐变动画）补间动画（渐变动画）设定两个关键帧，由计算机运算逐渐改变的中间画面来完成。 形状补间形状补间:用于形状变化

13、的动画；如将字母用于形状变化的动画；如将字母A变成变成B 动画补间（动作补间）动画补间（动作补间）:用于图形及元件位移等变化的动画。用于图形及元件位移等变化的动画。郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作vFlash的动画类型的动画类型 逐帧动画：逐帧动画： 补间动画（渐变动画）补间动画（渐变动画）设定两个关键帧，由计算机运算逐渐改变的中间画面来完成。 特殊动画特殊动画 引导线动画引导线动画 遮罩动画遮罩动画Flash动画逐帧动画渐变动画运动渐变动画形状渐变动画郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作v逐帧动画逐帧动画 每一帧都是关键帧每

14、一帧都是关键帧,通过每帧的内容变化产生动画效果通过每帧的内容变化产生动画效果 繁星闪烁实例制作（关键点）繁星闪烁实例制作（关键点） 注意帧速注意帧速 将星星转换为元件将星星转换为元件 F6插入关键帧后调节各帧对象的透明度，从而产生闪烁效果插入关键帧后调节各帧对象的透明度，从而产生闪烁效果 其他实例（自己思考怎么完成效果）其他实例（自己思考怎么完成效果） 字符闪烁字符闪烁 打字机效果打字机效果郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作v形状补间（渐变）动画形状补间（渐变）动画 根据对象（根据对象（对象必须为打散图形对象必须为打散图形）的形状变化来实现）的形状变化来实现动

15、画效果动画效果 形状渐变动画，是指在两个关键帧之间制作出图形对象的变形效果，让一种图形随时间变化成为另一种图形。在形状渐变动画中，对象的位置可以移动、对象的颜色可以改变，但这种变化是以打散图形（矢量图形对象）为动画主角。舞台上的矢量图形，在没有转化为素材库中的元件之前，只是普通的图形，因此只能用来制作形状渐变的动画，不能用来制作运动渐变动画。 形状渐变动画的制作过程可以总结为下面的操作步骤：形状渐变动画的制作过程可以总结为下面的操作步骤：（注意：动画的对象（注意：动画的对象不能不能是元件，而只能是是元件，而只能是打散图形打散图形）a.在动画开始的第一帧中绘制图形（保持是打散图形）在动画开始的第

16、一帧中绘制图形（保持是打散图形）b.在动画的最后一帧处插入空白关键帧在动画的最后一帧处插入空白关键帧c.在动画的最后一帧中绘制图形在动画的最后一帧中绘制图形（保持是打散图形）（保持是打散图形）d.选择中间的任何一帧，在属性面板中处选择选择中间的任何一帧，在属性面板中处选择形状形状郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作v动作补间动画动作补间动画 根据实体属性的改变来形成动画效果。条件是：根据实体属性的改变来形成动画效果。条件是：对象对象必须是一个符号的实体、文本或组必须是一个符号的实体、文本或组运动渐变动画的制作过程可以总结为下面的操作步骤：运动渐变动画的制作过程可

17、以总结为下面的操作步骤： （注意：动画过程中首尾变化的对象（注意：动画过程中首尾变化的对象一定要一定要是是同一个元件或组合对象同一个元件或组合对象） a.在动画开始的第一帧处插入元件或组合对象在动画开始的第一帧处插入元件或组合对象 b.在动画的最后一帧处插入关键帧在动画的最后一帧处插入关键帧 c.改变动画开始的第一帧或者最后一帧中元件的位置、大小、属性改变动画开始的第一帧或者最后一帧中元件的位置、大小、属性 d.选择中间的任何一帧，在属性面板中处选择选择中间的任何一帧，在属性面板中处选择动画动画郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作v动作补间动画动作补间动画 书上

18、实例制作（关键点）书上实例制作（关键点） 设置文档属性，导入图片作为背景图层设置文档属性，导入图片作为背景图层1 新建球图层新建球图层2，创建球图形，并转化为符号（元件），创建球图形，并转化为符号（元件） 设置球的上下跳动：设置球的上下跳动： 设置球跳动有动感：设置球跳动有动感： 为球添加地面阴影：为球添加地面阴影： 制作风吹文字效果：制作风吹文字效果： 对象可以变化的属性对象可以变化的属性 位置，大小，旋转角度，透明度等位置，大小，旋转角度，透明度等郴州师范郴州师范 YLEEYLEEv特殊的动画特殊的动画1引导动画引导动画 让实体沿着一定的路径运动产生的动画效果。让实体沿着一定的路径运动产生

19、的动画效果。 引导层的作用：使对象实体沿着引导层中的路径（直引导层的作用：使对象实体沿着引导层中的路径（直线、斜线、不规则曲线等）运动。线、斜线、不规则曲线等）运动。 创建引导层的方法创建引导层的方法 在需要成为引导层的层上点击右键，选择在需要成为引导层的层上点击右键，选择“引导引导” 在需要被引导的层的时间线上单击鼠标，选择在需要被引导的层的时间线上单击鼠标，选择“添加引导层添加引导层” 引导层和被引导层的关联方法：引导层和被引导层的关联方法： 直接将被引导层拖到引导层下方直接将被引导层拖到引导层下方 右键单击图层，选取右键单击图层，选取“引导引导”或或“被引导被引导”Flash简单动画制作

20、简单动画制作郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作 制作要点：制作要点： 绘制小鸟，并转化为符号（元件），锁定鸟图层绘制小鸟，并转化为符号（元件），锁定鸟图层1 添加引导层添加引导层2，创建文本曲线（不闭合），并打散，创建文本曲线（不闭合），并打散 在鸟图层在鸟图层1的第的第70帧插入关键帧，并创建运动补间动画（帧插入关键帧，并创建运动补间动画（170帧之间）帧之间） 在引导层在引导层2的第的第70帧插入扩展帧帧插入扩展帧 用用“捕捉工具捕捉工具”将鸟图层将鸟图层1的第的第1帧和第帧和第70帧上的小鸟中心点分帧上的小鸟中心点分别捕捉到文本曲线的缺口端点别捕捉到文本

21、曲线的缺口端点 测试效果，此时没有文本曲线，假如需要看到运动轨迹，则再测试效果，此时没有文本曲线，假如需要看到运动轨迹，则再创建一普通层粘贴引导层创建一普通层粘贴引导层2的文本曲线做为轨迹的文本曲线做为轨迹郴州师范郴州师范 YLEEYLEEFlash简单动画制作简单动画制作 小结：小结： 引导层的特点：引导层的特点： 引导层可以控制被引导层的运动补间动画的路径，路径是连续的引导层可以控制被引导层的运动补间动画的路径，路径是连续的曲线，可以是封闭的，也可以是非封闭的。曲线，可以是封闭的，也可以是非封闭的。当被引导层的开始位当被引导层的开始位置运动到结束位置有不止一条路径时，系统会自动选择较短的路置运动到结束位置有不止一条路径时，系统会自动选择较短的路径作为引导路径径作为引导路径 。若补间动画的开始位置和结束位置在同一个地若补间动画的开始位置和结束位置在同一个地方则不能实现引导层动画效果方则不能实现引导层动画效果 引导层中的对象（即：路径）不会在动画中显示引导层中的对象（即：路径）不会在动画中显示 制作引导动画需要注意的：制作引导动画需要注意的： 引导路径必须是引导路径必须是连续连续，并且是，并且是分离分离属性（即：打散）的线条属性（即：打散）的线条