FLASHCS4课件L7补间动画的制作

《FLASHCS4课件L7补间动画的制作》由会员分享，可在线阅读，更多相关《FLASHCS4课件L7补间动画的制作（39页珍藏版）》请在装配图网上搜索。

1、第七讲 补间动画 的制作 内容概要 Flash CS4中的动画类型 创建传统补间动画 创建补间形状动画 创建引导层动画 创建遮罩层动画 Flash CS4中的动画类型 逐帧动画 使用此动画技术，可以为时间轴中的每个帧指定不同的 艺术作品。使用此技术可创建与快速连续播放的影片帧 类似的效果。对于每个帧的图形元素必须不同的复杂动 画而言，此技术非常有用。 补间动画 使用补间动画可设置对象的属性，如一个帧中以及另一 个帧中的位置和 Alpha透明度。然后 Flash在中间内插 帧的属性值。对于由对象的连续运动或变形构成的动画， 补间动画很有用。补间动画在时间轴中显示为连续的帧 范围，默认情况下可以作

2、为单个对象进行选择。补间动 画功能强大，易于创建。 传统补间 传统补间与补间动画类似，但是创建起来更复杂。传统 补间允许一些特定的动画效果，使用基于范围的补间不 能实现这些效果。 Flash CS4中的动画类型（ 2） 补间形状 在形状补间中，可在时间轴中的特定帧绘制一个形状， 然后更改该形状或在另一个特定帧绘制另一个形状。 然后， Flash 将内插中间的帧的中间形状，创建一个形 状变形为另一个形状的动画。 反向运动姿势（骨骼） 反向运动姿势用于伸展和弯曲形状对象以及链接元件实 例组，使它们以自然方式一起移动。可以在不同帧中以 不同方式放置形状对象或链接的实例， Flash 将在中间 内插帧

3、中的位置。 创建传统补间动画 传统补间动画 （又叫做 动作补间 、 中间帧动画 、 渐 变动画 ），只要建立起始和结束的画面，中间的部 分由 Flash自动生成，省去了中间动画制作的复杂过 程，是 Flash中最常用的动画效果。 可制作的动画效果有位置移动、大小变化、旋转移动、逐 渐消失等等，还能将它们相互组合制作出式样更加丰富、 效果更加吸引人的复杂动画。 【 一般制作流程 】 先在一个关键帧中定义实例的大 小、颜色、位置、透明度等参数，然后创建出另一 个关键帧并修改这些参数，最后创建补间动画，让 Flash自动生成过渡状态。 两个必要前提： 1. 起始关键帧与结束关键帧缺一不可； 2. 应

4、用于传统补间的对象必须具有元件或者群组的属性。 创建传统补间动画示例 小鸭找妈妈 动画开始时，小鸭与鸭妈妈离得很远；动画 结束时，小鸭与鸭妈妈相会。 小鸭找妈妈 直线运动与曲线运动 1. 新建文档，导入做好的图形素材。 2. 制作背景层。 3. 制作鸭妈妈层。 4. 制作小鸭层。 5. 制作曲线运动。 6. 测试与修改。 传统补间属性 缓动 ：应用于有速度变化的动画效果。 -100100之间的值， 0值以上是由快 到慢， 0值以下是由慢到快； 旋转 ：设置对象的旋转效果，包括 “自动”、“顺时针”、“逆时针” 和“无” 4项； 紧贴 ：使物体可以附着在引导线上； 同步 ：设置元件动画的同步性；

5、 调整到路径 ：在路径动画效果中，使 对象能够沿着引导线的路径移动； 缩放 ：应用于有大小变化的动画效果。 补间动画 补间动画是 Flash CS4在原来的基础上新增加的动画功能， 它通过为一个帧中的对象属性指定一个值并为另一个帧 中的该相同属性指定另一个值来生成动画。 如果要创建传统补间动画或者补间形状动画就一定要有 关键帧，在关键帧中对象或对象的属性发生变化就形成 了动画效果。 创建补间形状动画 形状补间 可以实现将一幅图形变为另一幅图形的效果。 【 形状补间和动作补间的主要区别 】 形状补间不能应 用到实例上，必须是被打散的形状图形之间才能产生 形状补间。 形状图形 ：由无数像素点堆积而

6、成的，并非是一个整 体。选中时没有一个蓝色边框，而是显示为掺杂着白 点的图形。 形状补间的属性： 缓动 ：动画朝着结束方向变化的速率， -100100之间 的值， 0值以上是减速， 0值以下是加速； 混合 ：“ 分布式 ”创建的动画形状比较平滑和不规则； “ 角形 ”创建的动画形状会保留明显的角和直线，只 适合于具有锐化转角和直线的 混合形状。如果所选形 状没有角，系统自动还原到“分布式”补间； 制作形状补间的条件 形状补间动画的变形对象必须是矢量图 。 在 Flash中绘制的图形都是矢量图 ， 导入的图形 均以位图形式出现 。 如果想要在组合体 、 实 例或位图图像上应用形状补间动画 ， 必

7、须先 将这些元素 “ 分离 ” 。 要对文本应用形状补 间动画 ， 如果是多个文字 ， 则必须 “ 分离 ” 文本两次：将文本先转换成单个文字 ， 再转 换为矢量图形 。 形状补间动画的制作方法 什么都能变 各种对象的简单变形 光电时代 定位变形 什么都能变 各种对象的简单变形 制作图形元件到组合的形状补间变形。 什么都能变 各种对象的简单变形 制作组合到文字的形状补间动画。 什么都能变 各种对象的简单变形 制作文字到图形的形状补间变形。 光电时代 定位变形 新建动画文档将素材导入到库。 制作定位变形。 (修改 -形状 -添加形状提示符 ) 开始时位置 结束时位置 光电时代 定位变形 绘图纸外

8、观的形变过程 光电时代 定位变形 添加形状提示的图片 重新排列形状提示的图片 光电时代 定位变形 绘画纸外观的形变过程 实例 火焰的跳动效果 铅笔画直线效果 火焰的跳动效果 选择圆形工具，画一个竖长的椭圆， 选用油漆桶工具，打开调色板，选择线性渐变，调出桔红色到黄色的渐变，点击新建 在椭圆上涂色，删掉线条 按住 Ctrl的同时，点住椭圆顶部的一点向上拖，可以拉出一个尖点，调整形状如 在第 20帧上按 F6，加入一个关键帧，调整火焰的形状如图： 120帧之间的任意一帧上单击，选择 Modify(修改 )-frame（帧数）打开 frame (帧数 )对话 框，在 tweening（变化）右边的小

9、三角上点击，在下拉菜单中选择 shape（形状）。点击舞 台的空白处。 在第一帧上点右键，选择 copy frames（复制帧） ,在第 40帧上点右键，选择 paste frames （粘贴帧） 在第 20-40帧之间的任意一帧单击，选择 Modify(修改 )-frame（帧数）打开 frame (帧数 ) 对话框，在 tweening（变化）右边的小三角上点击，在下拉菜单中选择 shape（形状）。点 击舞台的空白处。 完成。选择 Control（控制） -Test Movie（测试影片）观看动画 铅笔画直线效果 画一条很短的直线， 在第 30帧按 F6加入关键帧 选用 scal(缩放

10、)工具，把鼠标放在直一右边的控制点上，把直线拉长，如图 在 1-30帧间的任意一帧单击，选择 Modify(修改 )-frame（帧数）打开 frame ( 帧数 )对话框，在 tweening（变化）右边的小三角上点击，在下拉菜单中选择 shape（形状）。点击舞台的空白处。 新增一层，在新加层的第一帧画一个铅笔，位置放在小短线的上方，如图 在新增层的第 30帧按 F6，加关键帧，把铅笔入到长线的右端，在新层的 1-30之 间任意一帧单击，选择 Modify(修改 )-frame（帧数）打开 frame (帧数 )对话框 ，在 tweening（变化）右边的小三角上点击，在下拉菜单中选择 s

11、hape（形状） 。点击舞台的空白处。如图 完成， Control（控制） -test movie （测试影片）观看动画。 引导层动画 使用运动引导层可以创建特定路径的部件动画效果， 实例、组或文本块均可沿着这些路径运动。 两种引导层 普通引导层 ：只起到辅助静态对象定位的作用，影片放映时 不可见，无需使用被引导层，可单独使用，与普通图层的属 性相似。 图层面板中，右键快捷菜单 【 引导层 】 运动引导层 ：总是与至少一个图层相关联，如果需要可以与 任意多个图层相关联（这些被关联的图层称为 被引导层 ） 图层面板中，右键快捷菜单 【 添加传统运动引导层 】 ；通过 拖拽可增加或减少被引导图层。

12、 路径动画指对象（包括元件的实例、组合的图形和静 态文本）沿路径进行运动变化。 路径动画是运动渐变的一种特殊应用，只要在运动渐 变的图层上新增了一个特殊层 引导层，并在引导层 中绘制引导路径，补间实例或文本块就可以沿着路径运 动了。 多个图层可以链接到一个引导层，使多个对象沿同一 条路径运动。 在 Flash中，引导层中的曲线可以封闭，但是如果要 制作环绕运动的动画通常并不使用封闭的曲线，而是在 封闭曲线上打开一个小缺口，使曲线产生两个端点，然 后再制作路径动画。 引导层动画 制作实例 激光写字 雨滴 遮罩动画 遮罩层中的任何填充区域都是完全透明的；而任何非填充区域都 是不透明的。 在遮罩层上

13、绘制的图形或输入的文字，相当于在遮 罩层上挖掉了相应形状的洞，形成挖空区域。通过挖空区域，显 示下面图层中的内容，而遮罩层中没有绘制图形或输入文字的地 方就成了遮挡物，把下面图层的内容完全掩盖起来。 遮罩层中的内容可以包括图形、文字、实例、影片剪辑在内的各 种对象，但 Flash会忽略遮罩层中内容的具体细节，只关心它们占 据的位置。 在遮罩层中绘制各种图形或输入文字时可以不必考虑 颜色。 每个遮罩层可以有多个被遮罩层，这样可以将多个图层组织在一 个遮罩层之下创建非常复杂的遮罩效果。 两大类遮罩动画： 遮罩层运动； 被遮罩对象运动。 遮罩层动画实例一 聚光灯效果 将舞台背景设置成黑色 遮罩层：来

14、回滚动的小球 被遮罩层：在舞台上要显示出来的文字 类似效果：打字效果、花样年华、滚动字幕效 果 遮罩层动画实例二 制作地球仪 遮罩层：圆形元件 被遮罩层：地图水平移动 制作卷轴效果 制作卷轴两端的手柄，进行水平方向的位置移动（ 将手柄做成元件） 遮罩层：矩形由小到大的变化 被遮罩层：最终显示的文字 遮罩层动画实例三 制作放大镜 制作小字 遮罩层：挖空小字的矩形条进行水平移动 被遮罩层：小字 制作大字 遮罩层：显示大字的圆形进行水平移动 被遮罩层：大字 制作放大镜：制作一个和大字遮罩层中的圆相同大 小的放大镜 利用遮罩做的简单特效 1、创建影片剪辑元件，名为“曲线动画”；把图层名称更改为“曲线

15、”；画一条曲线，笔触高度为 2，颜色任意；选中曲线（“修改” -“ 形状” -“将线条转换为填充”），将线条转换为填充。 2、在该元件中创建新图层，名称为“矩形”；把该图层放在“曲线” 图层的下方；画一个矩形，从左到右渐变，中间白色透明度为 100% ，两边白色透明度为 0；把矩形放到曲线的右边。 3、在“矩形”图层的第 10帧处插入关键帧，把矩形放到曲线的左边， 并创建形状补间动画。 4、在“矩形”图层的第 25帧和 40帧处插入关键帧，并创建补间动画； 把 40帧处的矩形透明度都设为 0并将宽度变小。 5、把“曲线”图层上的帧延长到第 40帧处，选中图层，右键选择“遮 罩层”。 6、从库中

16、把“曲线动画”元件拖入到主场景中的合适位置，将中心点 （小白圆）往右拖离一定矩离；打开“窗口” -“变形”，在“旋转 ”中输入 30，点击下面的“复制并运用变形”按钮，连按 11次。 制作流动的动画 1. 新建一 flash文档 ,550 x400，导入几张图片。 2. 将一张图片拉到舞台上，设置图片宽为 1100，高为 400，打对齐面板 相对于舞台右对齐。 3. 第 50帧插入关键帧，点击图片，打开对齐面板相对于舞台左对齐，建 立传统补间动画。新插入一层，画一无笔触任一色矩形，大小为 550 x400，居中对齐。第 50帧插入帧，右击该层，设为遮罩层。 4. 新插入一层，将同一图片从库中拖

17、出，打开对齐面板，宽、高匹配 （即 550 x400），居中对齐，第 50帧插入帧。 5. 新插入一层画一无笔触任一色的矩形，大小为 550 x400，居中对齐 ，用变形工具将注册点移到右边中间。在第 50帧插入关键帧，回到第 1帧，将矩形宽度缩小到 5像素。建立补间动画，设为遮罩层。 6. 这样流动的图片效果就做成了。 制作流动的动画 7. 你可以在新的一层第 51帧，插入空白关键帧，将第 2张图拖入，这一 次图片的宽度为 550，而高度为 800。在第 100帧插入关键帧。第 1帧 相对舞台上对齐，第 100帧下对齐，建立补间。 8. 新插入一层，画一无笔触任一色矩形，大小为 550 x4

18、00，居中对齐。 第 100帧插入帧，右击该层，设为遮罩层。 9. 第三层第 51帧插入空白关键帧，将相同图片拖入，大小匹配，居中 对齐 10. 第四层第 51帧插入空白关键帧，画一无笔触任一色的矩形，大小为 550 x400，居中对齐，用变形工具将注册点移到上边中间。在第 50帧 插入关键帧，回到第 1帧，将矩形高度缩小到 5像素。建立补间动画 ，设为遮罩层。 11. 在第 101帧做第三张图片，做法同上面两张图片，只是注意一点，第 一层图片的运动方向跟第 4层的遮罩运动方向刚好相反。 创建反向运动 反向运动（ IK）是一种使用骨骼的有关节结构对一 个对象或彼此相关的一组对象进行动画处理的方

19、法。使用 骨骼，元件实例和形状对象可以按复杂而自然的方式移动 ，只需做很少的设计工作。例如，通过反向运动可以更加 轻松地创建人物动画，如胳膊、腿和面部表情。 33 添加 IK骨骼 Flash CS4提供了全新的骨骼功能，能够帮助用户制作各 种复杂的动作动画。 向元件添加骨骼 通过添加骨骼将每个实例与其他实例连接在一起，用关 节连接一系列的元件实例，骨骼允许元件实例链一起移动。 34 选择与设置骨骼速度 在 Flash中，不仅允许为 Flash元件添加骨骼，还提供了便 捷的骨骼选定工具，帮助用户方便地选择已添加的骨骼。 35 1快速选择骨骼 Flash CS4提供了便捷的骨骼选定工具，允许选 择

20、同级别以及不同级别的各种骨骼组件，帮助用户设 置骨骼组件的属性。 36 2设置骨骼运动速度 在默认情况下，连接在一起的 IK骨骼，其子级和 父级的相对运动速度是相同的。也就是说，子级对象 旋转多少角度，父级对象也会进行相同的角度同步旋 转。 联接方式与约束 Flash CS4的 IK骨骼功能十分强大，除了允许设置速度外， 还允许用户启用多种联接方式以及约束骨骼运动的幅度等。 37 38 1启用 /禁用联接方式 Flash CS4的 IK骨骼主要有 3种联接方式，即旋转、 X平移和 Y平移。其中， X平移指元件沿水平方向平移； Y平移指元件沿垂直方向平移。在默认的情况下，新建 的 IK骨骼往往只开启了旋转的联接方式，只能根据骨骼 的节点进行旋转。 2约束骨骼 在默认情况下，已联接的骨骼是可以以任意的幅 度进行运动的。例如，旋转的联接方式可以 360度旋 转，而水平平移和垂直平移可以平移到舞台的任意位 置。 对骨架进行动画处理 对于骨架，只需要向姿势图层添加帧并在舞台 上重新定位骨架即可。 创建关键帧，在每个关键帧上插入姿势 修改每个姿势