《二维动画设计教程教学课件作者吕峰第四章节AdobeFlash中的简单动画课件幻灯片》由会员分享，可在线阅读，更多相关《二维动画设计教程教学课件作者吕峰第四章节AdobeFlash中的简单动画课件幻灯片（252页珍藏版）》请在金锄头文库上搜索。
1、,第4章 Adobe Flash中的简单动画,本章内容导读,动画是由无数静态画面构成，每个画面表示一帧。将这些静态图像连续不断地显示时，由于人眼存在视觉暂留效应，同时因为相邻两帧图像之间具有微小差异，因此就产生了动画的效果。要学会用Flash制作简单动画，要学会以下几点： 形状补间动画和路径动画 遮罩动画和逐帧动画 交互动画、组件与行为,4.1 元件动画补间,元件动画是整个Flash动画中制作使用比率最高的一项，它的使用简单、方便，能够大大提高制作动画的速率和动画修改的效率 在上一章节介绍了元件的创建方式和分类，本节将会对三种元件中的两种元件：影片剪辑元件补间动画、图形元件补间动画进行讲解。,
2、4.1.1图形元件补间,图形元件补间动画在Flash软件动画里最为常见，因为本身图形元件的使用频率就要大于影片剪辑元件。图形元件补间动画的特点有：实用性强、修改方便、占文件量小。多用于卡通版角色的肢体动作上，辅助肢体动作更佳流畅。很多学过Flash软件的人都掌握元件补间动画的建立方法，但在Adobe Flash CS6中，其创建元件补间动画的方式有两种，即传统补间动画和新的补间动画形式。,传统补间动画制作 （1）打开Adobe Flash CS6软件，新建Flash文档如图4-1所示。 图4-1 创建文档,（2）在舞台上绘制出一个矩形图形并转化为元件，新建Flash文档 如图4-2所示。 4-
3、2 创建图形元件,（3）在时间轴第25帧处右键插入关键帧，如图4-3所示。 图4-3 插入关键帧,（4）在舞台上把图形元件向右平移一个位置，如图4-4所示。 图4- 4 移动图形元件,（5）在时间轴中的任意一帧，右键创建传统补间动画，如图4-5所 示。 4-5 创建传统补间动画,新的补间动画制作 （1）新建Flash文档，如图4-6所示。 4-6 创建文档,（2）创建一个图形元件，如图4-7所示。 4-7 创建图形元件,（3）在时间轴第60帧位置插入帧，如图4-8所示。 图4-8 插入帧,（4）在任意一帧的位置上，右键选择创建补间动画，如图4-9所示 图4-9 创建补间动画,（5）把红色播放头
4、移动到第60帧的位置，再把图形元件向右移动 一些位置，我们可以看到在时间轴第60帧的位置上自动添加 了一个关键帧，如图4-10所示。 图4-10 添加关键帧、向右移动图形元件,按照上面的两种创建方式，可以对图形元件进行位置移动、旋转 移动、大小移动和颜色透明度的改变。,利用传统补间动画制作文字旋转特效 文字旋转是文字从无到有旋转出现。本案例通过改变传统补 间的属性给文字添加特效。 （1）新建Flash文档，如图4-11所示。 图4-11 新建Flash文档,（2） 选择“工具箱”中的“文本工具”，在舞台上输入文字“Flash CS6”，如图4-12所示。 4-12 输入文字 （3）选中时间轴上
5、的第20帧，右键单击选择“插入关键帧”，如图4-13所示。 4-13 插入关键帧,（4）选中时间轴上1-20帧间的任意一帧，右键单击选择“创建传 统补间”，如图4-14所示。 图4-14 创建传统补间,（5）选中第1帧，选择“工具箱”中的“任意变形工具”，将文字 缩小，如图4-15所示。 图4-15 文字缩小,（6）选中第1帧，用“选择工具”选中文字，此时在“属性”面板 中选择“色彩效果”“样式”“Alpha”，如图4-16所示。 “Alpha”参数值调为“0”，如图4-17所示。第1帧的文字就会 消失，如图4-18所示。 图4-16 选中“Alpha” 图4-17 “Alpha”参数值调为“
6、0” 图4-18 文字消失,（7）选中传统补间上的任意一帧，“属性”面板上会出现相关属 性，选择“补间”“旋转”“顺时针”（也可改变其他 的选项，尝试不同的效果），如图4-19所示。 图4-19 选择“顺时针”,（8）按测试影片，就会出现文字从无到有旋转出现的 效果，如图4-20所示。 图4-20 文字从无到有旋转出现的效果,（9）选择“文件”“保存”，保存为“文字旋转”，如图4-21 所示。 4-21 保存,传统补间的实际应用风车动画 （1）新建Flash文档，如图4-23所示。 图4-23新建Flash文档,（2）在“属性”面板设置舞台的属性，将背景改为灰色（以便与白色区别），如图4-24
7、所示。 图4-24 舞台背景改为灰色,（2）选择“插入”“创建新元件”，命名为“风车”，如图 4-25所示。 图4-25 新建元件“风车”,（2）进入“风车”元件内部开始绘制风车。用“椭圆工具”、“ 矩形工具”在“属性”面板设置好颜色，在舞台上绘制风车 的支架部分（绘制正圆形要按住Shift键），如图4-26所示。 图4-26 绘制风车的支架部分,（3）新建一个图层命名为“红”绘制风车页。用“椭圆工具”按 住Shift键绘制好一个正圆，用“选择工具”选中一半删去， 如图4-27所示。 图4-27 绘制风车页“红”,（4）选中剩余的半个圆，右键单击选择“转化为元件”，弹出“ 转化为元件”对话框，
8、命名为“红”，如图4-28所示。 图4-28 “转化为元件”对话框,（5）调整好风车页“红”的位置，如图4-29所示。 图4-29 调整好风车页“红”的位置,（6）按制作风车页“红”的方法，继续绘制其余三个风车页，注意分别新建图层并且转化为元件，如图4-30所示。 4-30 制风车页,（7）点选时间轴上的“将所有图层显示为轮廓”按钮，如图4-31 所示。 图4-31 “将所有图层显示为轮廓”按钮,（8）将四个风车页的中心点调制中心位置，调整完成后取消点选 时间轴上的“将所有图层显示为轮廓”按钮，如图4-32、4- 33所示。 图4-32 调整中心点图 4-33 调整中心点完成,（9）选中所有图
9、层的第20帧，右键单击插入关键帧，如图4-34所 示。 图4-34 第20帧插入关键帧,（10）在第20帧上，改变每个风车页的位置（按照顺时针方向）， 如图4-35所示。调整好，如图4-36所示。 图4-35 改变风车页位置 图4-36 第20帧各风车页位置,（11）再选中所有图层的第40帧，右键单击插入关键帧，如图4-37 所示。再次改变四个风车页的位置，如图4-38所示。 图4-37 第40帧插入关键帧 图4-38 第40帧风车页位置图,（12）将每个风车页的帧之间添加传统补间，如图4-39所示。 图4-39 添加传统补间,（13）风车制作完成效果，如图4-40所示。 图4-40 风车制作
10、完成效果,（14）返回场景中，选择“文件”“导入”“导入到库”，在 弹出的“导入到库”对话框中，选择“风车背景”图片，如 图4-41所示。 图4-41 导入背景图片,（15）将场景中的“图层1”重命名为“背景”，新建图层命名为 “风车”，把库中的背景素材和风车元件分别拖入相应图层 中，如图4-42所示。 图4-42 场景中导入素材,（16）用“选择工具”选中风车元件同时按住键，复制两个风 车用“任意变形工具”调整大小位置，如图4-43所示。 图4-43 复制两个风车,（17）选中“背景”和“风车”两个图层的第40帧右键单击插入关 键帧，如图4-44所示。 图4-44 第40帧插入关键帧,（18
11、）按测试影片，效果如图4-45所示。 图4-45最终效果,（19）选择“文件”“保存”，保存为“旋转的风车”，如图4- 46所示。 图4-46保存文件,4.1.2影片剪辑元件补间,影片剪辑元件和图形元件都有着相同的补间动画制作方式，但在用法上，影片剪辑元件要比图形元件的使用特点多一些。虽然使用特点多，这里不建议一直使用影片剪辑元件补间动画，因其元件特性相对文件较大，如果同一时间段使用多个影片剪辑元件补间动画，导出动画时会有卡、顿等现象。,影片剪辑元件补间动画制作 影片剪辑元件补间动画的建立方式和图形元件建立方式相似， 建立前需要考虑对应自己的动画短片是否需要此特效的应用，如 果不是尽量避免使用
12、。 （1）建立Flash文档，选择如图4-47所示。 图4-47 创建文档,（2）在舞台上绘制出一个矩形，并使用右键将其转化为影片剪辑 元件，如图4-48所示。 图4-48 转化为影片剪辑元件,（3）在30帧的位置插入关键帧，如图4-49所示。 图4-49 插入关键帧,（4）选择其中任意一帧，右键创建传统补间动画，如图4-50所示 图4-50 创建传统补间动画,（5）选中第30帧，然后单击舞台上的影片剪辑元件，查看其属性 栏区域左下方，会发现一个翻页的图标单击标志会出现影片 剪辑元件对于的特效，如图4-51所示。 图4-51 影片剪辑元件属性,（6）选择单击模糊，并查看其属性，如图4-52所示
13、。 图4-52 模糊属性,（7）设置其属性参数，如图4-53所示。 图4-53 模糊属性参数,（8）这时，先单击舞台，再单击键盘回车键，查看舞台上影片剪辑元件变化，如图4-54所示。 图4-54 最终效果,总结： 通过上面的方法，我们可以发现，影片剪辑元件补间动画可 以做和其属性相对应的特效动画，这是一个比较好的特性， 特效 越多源文件的文件量就会越大，一般想要好的效果都会在后期软 件中处理，而不是一味的在Flash软件中制作完成。,4.2. 形状补间,形状补间动画是一种相对简单的补间动画形式，这种简单的补间动画形式往往在动画制作中起到不小的作用。从文件的大小来说形状补间要比元件补间动画数据占
14、有的量要小的很多。 形状动画顾名思义就是从一个形状变形到另外形状，同时，还能从一个颜色变换到另外一个颜色，当然也可以把前两项综合一起应用。 形状补间动画是Flash中非常重要的表现手法之一，运用它，可以变幻出各种奇妙的不可思议的变形效果。,4.2.1. 形状补间的概念,形状补间动画的概念 1）形状补间动画的概念 在Flash的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。,2）构成形状补间动画的元素 形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化
15、，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”再变形。 3）形状补间动画在时间帧面板上的表现 形状补间动画建好后，时间帧面板的背景色变为淡绿色，在 起始帧和结束帧之间有一个长长的箭头，如图4-55所示。 图4-55 形状补间,4）创建形状补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧 并设置要开始变形的形状，一般一帧中以一个对象为好，在动画 结束处创建或选择一个关键帧并设置要变成的形状，再单击开始 帧，在“属性”面板上单击“补间”旁边的小三角，在弹出的菜 单中选择“形状”，此时，时
16、间轴上的变化，如图4-55所示，形 状补间动画就创建完毕。,认识形状补间动画的属性面板 Flash的“属性”面板随鼠标选定的对象不同而发生相应的变化。当我们建立了一个形状补间动画后，点击时间帧，“属性”面板，如图4-56所示。 图4-56 “属性”面板上单击“补间”,2） “混合”选项 “混合”选项中有二项供选择如图4-57所示。 “分布式”选项：创建的动画中间形状比较平滑和不规则 “角形”选项：创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角和直线的混合形状。 图4-57 “混合”选项,形状补间动画的“属性”面板上只有二个参数： 1）“简单”选项 在“0”边有个滑动拉杆按钮，单击后上下拉动滑杆或填入 具体的数值，形状补间动画会随之发生相应的变化。 在1到-100的负值之间，动画运动的速度从慢到快，朝运动 结束的方向加速度补间。 在1到100的正值之间，动画运动的速度从快到慢，朝运动 结束的方向减慢补间。 默认情况下，补间帧之间的变化速率是不变的。,4.2.2. 形状补间的运
