Flash动画制作之制作引导层动画07ppt课件.pptVIP

1 第7讲制作引导层动画 掌握引导层动画模拟篮球运动的效果 掌握引导层动画制作气泡飘动的效果 掌握使用引导层动画表达艺术创意的方法 掌握使用多层引导动画模拟鱼儿游动的效果 2 7 1引导层动画原理7 2引导层动画提高7 3课后作业 本章大纲 3 7 1引导层动画原理 7 1 1知识点讲解 引导层动画的创建方法和原理都是十分简单的 只要通过下面的学习 读者可以轻松掌握 图7 1两个图层的引 一 创建引导层和被引导层 图7 2创建引导层 图7 3多层被引导 4 二 引导层动画原理 图7 4所示为被引导层上小球在第1帧和第50帧处的位置 图7 5所示为小球的全部运动轨迹 通过观察可以很清晰地发现引导层的引导功能 小球在第1帧的位置 小球在第50帧的位置 图7 4设置小球起始位置 图7 5小球的运动 引导层上的路径在发布后 并不会显示出来 只是作为被引导元素的运动轨迹 在被引导层上被引导的图形必须是元件 而且必须创建动作补间动画 同时还需要将元件在关键帧处的 变形中心 设置到引导层上的路径上 才能成功创建引导层动画 5 7 1 2范例解析 一 创建引导层动画练习 请同学们在老师的带领下进行创建引导层动画练习 并完成以下操作 1 打开教学资源中的 素材 第7讲 创建引导层动画练习 赛车 fla 文件 2 在默认 图层1 中绘制如图7 6所示的路径 图7 6绘制路径 6 3 在 图层1 的第80帧处插入帧 4 新建图层并重名为 图层2 并将其拖到 图层1 的下面 5 将 库 面板中的 汽车1 元件拖动到舞台中 并设置其位置如图7 7所示 变形中心 整体效果 放大图 图7 7放置汽车元件 6 在 图层2 的第80帧处插入关键帧 设置第80帧处汽车元件的位置如图7 8所示 变形中心 图7 8放置汽车位置 7 7 在 图层2 的第1帧 第80帧之间创建动作补间动画 8 用鼠标右键单击 图层1 在弹出的快捷菜单中选择 引导层 命令 将 图层1 转化为引导层 然后将 图层2 拖到 图层1 的下面 将其转化为被引导层 此时图层效果如图7 9所示 图7 9创建引导层动画 9 按Ctrl Enter快捷键 测试播放影片 发现汽车的运动效果是错误的 10 关闭测试播放器 然后选中 图层2 的第1帧 在 属性 面板中勾选 调整到路径 选项 如图7 10所示 再测试播放影片 发现汽车的运动效果正确 图7 10勾选 调整到路径 选项 8 7 1 3范例解析 二 制作 街头篮球 篮球是目前世界上最受欢迎的体育项目之一 相信读者对其也十分熟悉 利用动画来制作投篮效果就需要使用引导层动画来完成 其设计思路及效果如图7 11所示 图7 11设计思路及效果 1 打开模板进行分析 9 1 由于本案例讲解的重点是引导层动画 所以该动画中的场景 道具 人物等都由本书提供 并给出制作模板 读者只需完成引导层动画的相关部分 打开教学资源中的 素材 第7讲 街头篮球 街头篮球 fla 文件 效果如图7 12所示 图7 12打开模板 10 双击场景中的 男孩 元件进入其元件内部 观察前5帧的动画 如图7 13所示 可以发现 当在第4帧时 男孩手中的篮球消失了 在第5帧处 男孩做出了一个投篮的动作 从而可以推断出 引导层动画应该从第4帧开始 并且篮球的位置要根据第4帧男孩的手的位置来确定 第1帧 第2帧 第3帧 第4帧 第5帧 图7 13男孩元件的前5帧动画 11 2 返回主场景 观察整个舞台如图7 14所示 可以发现篮球在运动过程中 要经过 男孩的手 篮筐 球网 这3个图形 所以根据视角分析 可以判定引导层应该创建在 男孩 篮筐前沿 球网 这3个元件所在图层的下面 而在 篮板 地板 篮筐后沿 这3个元件所在图层的上面 男孩的手 篮筐前沿 球网 篮板 篮筐后沿 图7 14图层分析 12 2 制作引导层动画 1 将所有图层锁定 在 篮板 图层之上新建图层并重命名为 引导层 根据前面的分析 在时间轴的第4帧处插入关键帧 如图7 15所示 2 在 引导层 的第4帧处 利用 直线 工具和 选择 工具绘制出篮球运动的轨迹如图7 16所示 读者在绘制篮球路径曲线时 应尽量发挥想象 将篮球的真实飞行轨迹描绘出来 图7 15新建引导层 图7 16绘制引导线 13 3 在 引导层 图层下面新建图层并重命名为 篮球 层 在第4帧处插入关键帧 然后将 篮球 元件从 库 面板中拖动到 篮球 图层上 如图7 17所示 篮球 图层效果 拖入篮球 图7 17创建篮球图层 4 在 篮球 图层的第30帧处插入关键帧 在第4帧 第30帧之间创建动作补间动画 14 5 将 贴近至对象 按钮按下 利用 选择 工具设置篮球在第4帧的位置到引导线的最左端 设置第30帧的位置到引导线的最右端 并确保 篮球 元件的 变形中心 一定要在引导线上 效果如图7 18所示 6 用鼠标右键单击 引导层 图层 在弹出的快捷菜单中选择 引导层 命令 将其转化为引导层 7 将 篮球 图层拖动到 引导层 图层的下面 当 引导层 图层的图标由变为状态时释放 将其转化为被引导层 效果如图7 19所示 第4帧处篮球的位置 第30帧处篮球的位置 图7 18设置篮球的位置 图7 19创建引导层动画 15 创建引导层动画完毕 测试影片如果发现篮球并未按照引导层上的路径运动 则可以重点检查 篮球 元件的 变形中心 是否在引导线上 3 完善引导层动画 1 按Ctrl Enter快捷键测试观看影片 发现篮球的运动过程显得十分僵硬 没有速率变化 和真实的篮球运动差别很大 需要对其进行缓动设置 2 选中 篮球 图层上的第4帧 在 属性 面板中单击按钮 如图7 20所示 打开 自定义缓入 缓出 对话框 将曲线调整至如图7 21所示的效果 图7 20帧 属性 面板 图7 21调整篮球运动速率 16 3 通常情况下 篮球在被投射出去之后 还会具有相对于投球人手的反转运动 所以在 属性 面板中设置 旋转 属性为 逆时针 次 为 5 如图7 22所示 图7 22设置旋转动画 4 再次测试观看影片 篮球的运动真实了 但是发现篮球在穿越 球网 的时候球网没有任何的动作 这是不符合实际情况的 如图7 23所示 第13帧处篮球的位置 第14帧处篮球的位置 图7 23篮球穿越效果 17 5 通常情况下 球在穿越球网的时候 球网都会由于惯性和自身弹性反弹起来 所以需要在 球网 图层的第13帧 第14帧和第15帧处插入关键帧 并调整第14帧处的球网形状 最后得到如图7 24所示的效果 第13帧处球网的形状 第14帧处球网的形状 第15帧处球网的形状 图7 24球网动态效果 6 保存测试影片 可以看到一个十分真实 完美的街头篮球效果制作完成 18 7 1 4课堂练习 制作 花朵气泡 请同学们使用引导层动画制作一个花朵气泡随风飞舞的动画效果 如图7 25所示 1 导入素材布置场景 图7 25最终设计效果 19 2 执行 文件 导入 打开外部库 菜单命令 打开教学资源中的 素材 第7讲 花朵气泡 花朵气泡 fla 文件 将其中的所有内容都复制粘贴到当前的 库 面板中 如图7 26所示 3 新建图层并重命名图层 并在所有图层的第120帧处插入帧 直至图层效果如图7 27所示 图7 26打开外部库 图7 27图层效果 20 4 将 背景 png 拖入到 背景 图层上 设置其位置坐标x y都为 0 宽高为 800px 518px 如图7 28所示 5 将 前景 png 拖入到 前景 图层上 设置其位置坐标x y分别为 25 250 宽高为 933px 250px 如图7 29所示 图7 28设置背景图片 图7 29设置前景图片 2 制作气泡飘动效果 1 为了操作方便 将 前景 图层隐藏 然后在 气泡1路径 和 气泡2路径 图层上绘制如图7 30所示的引导线 气泡1引导线 气泡2引导线 图7 30绘制路径曲线 21 2 将 气泡1 和 气泡2 元件分别拖入到 气泡1 和 气泡2 图层上 并设置其第1帧的位置分别如图7 31所示 3 在 气泡1 和 气泡2 图层的第120帧处插入关键帧 并设置该帧处 气泡1 和 气泡2 元件的位置如图7 32所示 图7 31设置气泡在第1帧的位置 图7 32设置气泡在第120帧的位置 22 4 分别在 气泡1 和 气泡2 图层的第1帧 第120帧之间创建动作补间动画 将 气泡1路径 和 气泡2路径 图层转化为引导层 再将 气泡1 和 气泡2 图层分别转化为其被引导层 图层效果如图7 33所示 图7 33创建引导层动画 5 保存测试影片 一个美丽梦幻的花朵气泡动画效果制作完成 23 7 2引导层动画提高 通过前面一节课的学习 相信同学们已经掌握了引导层动画的创建方法和设计原理 在本小节中 将使用多层引导层动画来制作复杂的Flash动画 7 2 1知识点讲解 观察生活中可以用引导层动画来表达创意的事物 使用引导层动画来模拟表达您的创意 收集素材丰富您的作品 在制作过程中不断完善自己的作品 24 7 2 2范例解析 制作 蜓桥相会 在中国流传着一个神话 隔着长长的银河住着美丽的织女和忠厚的牛郎 他们彼此深爱对方 但每年只能通过喜鹊搭桥才能见一面 为了他们能多见上一面 可爱的蜻蜓也搭起了一座 蜓桥 这样就成就了另一个神话 蜓桥相会 使用Flash制作该效果的设计思路及效果如图7 34所示 图7 34思路及效果 25 1 导入素材制作背景 1 新建一个Flash文档 设置文档 尺寸 为 700px 400px 帧频 为 24fps 其他属性保持默认参数 2 执行 文件 导入 打开外部库 菜单命令 打开教学资源中的 素材 第7讲 蜓桥相会 蜓桥相会 fla 文件 如图7 35所示 将其中的影片剪辑元件 背景 牛郎 蜻蜓 织女 复制粘贴到当前的 库 面板中 3 将默认 图层1 重命名为 背景 层 将 背景 元件拖入舞台 并确认其宽高为 700px 400px 位置坐标x y都为 0 如图7 36所示 图7 35打开外部库 图7 36拖入背景 26 2 制作飞舞效果 1 在 背景 图层上新建图层并重命名为 蜓桥 在其上绘制如图7 37所示的引导线 图7 37绘制引导线 该路径的重要特点是曲线的开始部分和结尾部分都是直线 而中间在场景中的部分为曲线 这样绘制的好处在于能更好的控制被引导元件的旋转方向 27 2 选中绘制的引导线 按住Ctrl键再复制出两条 得到如图7 38所示的效果 3 选中3条曲线 按F8快捷键将其转化为影片剪辑元件 并重命名为 飞舞 4 单击按钮进入元件内部进行编辑 选中舞台中最下面的曲线 将其分散到图层 再选中中间的曲线 将其分散到图层 5 依次从上到下重命名图层为 路径上 层 路径中 层 路径下 层 并在3个图层的第220帧处插入帧 图层效果如图7 39所示 图7 38复制线条 图7 39设置图层 28 6 这里设计让蜻蜓分三路进入舞台 其中 路径上 和 路径下 的 蜻蜓 从舞台左边向右边飞 而 路径中 的 蜻蜓 从舞台右边向左边飞 40在 路径中 图层上面新建图层并重命名为 蜻蜓上 层 将 蜻蜓 元件拖入到 蜻蜓上 图层上 并设置其第1帧的位置如图7 40所示 80在 蜻蜓上 层的第220帧处插入关键帧 并设置其位置到曲线的最右端 如图7 41所示 图7 40设置第1帧蜻蜓的位置 图7 41设置第220帧蜻蜓的位置 29 9 在 蜻蜓上 图层的第1帧 第220帧之间创建动作补间动画 并将 路径上 图层转化为引导层 将 蜻蜓上 图层转化为其被引导层 10 选中 蜻蜓上 图层的第1帧 在 属性 面板中勾选 调整到路径 选项 11 至此 蜻蜓上 的引导层动画就制作完成了 使用同样的方法制作 蜻蜓中 和 蜻蜓下 的动画 设置元件位置的时候一定要注意将元件的 变形中心 放到路径上 如图7 40和图7 41所示 如果变形中心未在路径上 引导层动画将创建失败 30 3 制作蜓桥效果 1 返回主场景 选中 飞舞 元件 如图7 42所示 按F8快捷键将其转化为影片剪辑元件并命名为 蜓桥 2 双击 蜓桥 元件进入元件内部进行编辑 在 图层1 的第200帧处插入帧 图7 42选中 飞舞 元件 3 选中 飞舞 元件 按Ctrl C快捷键复制该元件 在第20帧处插入关键帧 并在该帧处按Ctrl Shift V快捷键粘贴该元件 使用相同方法 每隔20帧插入关键帧并粘贴该元件直到第200帧 图层效果如图7 43所示 31 4 选择第200帧 按F9快捷键打开 动作 帧 面板 输入代码 stop 如图7 44所示 图7 43图层效果一 图7 44输入代码 32 5 返回主场景 按Ctrl Enter快捷键测试观察影片 一个美丽的蜓桥效果就完成了 图7 45制作蜓桥 4 制作牛郎织女动画 1 在 蜓桥 图层上面新建图层并重命名图层 在所有图层的第320帧处插入帧 得到如图7 46所示的效果 2 在 人物路径 图层上绘制一条和 蜓桥 曲线相似的引导线如图7 47所示 33 3 在 牛郎 和 织女 图层上的第220帧处插入关键帧 将 库 面板中的 牛郎 和 织女 元件分别拖入到 牛郎 和 织女 图层上 并设置其位置如图7 48所示 图7 46图层效果二 图7 47绘制人物路径 图7 48设置 牛郎 和 织女 第220帧的位置 34 4 在图层的第320帧处插入关键帧 并设置 牛郎 和 织女 在该帧的位置如图7 49所示 图7 49设置 牛郎 和 织女 第320帧的位置 5 在 牛郎 和 织女 图层上的第220帧 第320帧之间创建动作补间动画 再将 人物路径 图层转化为引导层 将 牛郎 和 织女 图层转化为其被引导层 6 选中 牛郎 图层的第320帧 按F9快捷键打开 动作 帧 面板 输入代码 stop 7 测试观看影片 一个 蜓桥相会 的美丽动画就制作完成了 35 7 2 3课堂练习 制作 鱼儿荷间戏 请同学们跟随本例使用多层引导动画来创造一副 鱼儿荷间戏 的动人画面 动画效果如图7 50所示 1 新建一个Flash文档 设置文档 尺寸 为 520px 740px 帧频 为 30fps 其他属性保持默认参数 图7 50最终设计效果 36 2 执行 文件 导入 打开外部库 命令将教学资源中的 素材 第7讲 鱼儿荷间戏 鱼儿荷间戏 素材 fla 文件打开 如图7 51所示 并将其中的影片剪辑元件 鳍 身 头 以及图片 荷塘 背景 jpg 荷塘 前景 jpg 复制粘贴到当前的 库 面板中 3 将 荷塘 背景 jpg 拖入到舞台中 设置图片大小为 520px 740px 相对舞台居中对齐 效果如图7 52所示 4 绘制如图7 53所示的路径 结束端 起始端 图7