Dreamweaver-Flash-Fireworks网页制作培训教程第7课.ppt

本课要点具体要求本课导读 本课要点 基础动画引导动画遮罩动画 具体要求 掌握元件的创建 编辑及调用方法掌握库的使用方法掌握形状补间动画的创建方法及形状提示的使用方法掌握动画补间动画的创建方法及元件实例属性的设置方法掌握引导动画的原理及创建方法掌握遮罩动画的原理及创建方法 本课导读 使用Flash就是为了制作出漂亮的动画效果 本课就来讲解Flash的这个核心内容 根据创建方式的不同 Flash动画分为基础动画和特殊动画 其中 基础动画可分为逐帧动画和补间动画 补间动画根据不同对象又可分为形状补间动画和动画补间动画两种 根据不同的辅助对象 特殊动画可分为引导动画和遮罩动画两种 7 1制作基础动画 基础动画主要包括逐帧动画 形状补间动画和动画补间动画3类 此外 利用时间轴的特效功能还可以将对象制作为有模糊 扩展等效果的动画 7 1制作基础动画 7 1 1知识讲解7 1 2典型案例 制作banner动画 7 1 1知识讲解 元件是动画补间动画的基本单位 因此创建元件是学习动画的基础 本节将介绍如何创建 编辑 调用元件以及如何应用元件创建补间动画和时间轴动画 7 1 1知识讲解 1 创建与编辑元件2 调用元件3 逐帧动画4 形状补间动画5 为形状补间动画添加形状提示6 动画补间动画7 时间轴特效动画 1 创建与编辑元件 元件有影片剪辑 图形和按钮3种 各类元件的区别与作用如下 影片剪辑 该类元件可以包含Flash动画的一个片段 也可以是静止的对象 作为动画片段时 它能独立于场景动画进行播放 此外 在影片剪辑元件实例上还可以添加交互动作 1 创建与编辑元件 图形 该类元件中也可以包含动画片段 但不能独立于场景播放 在调用该类元件时 时间轴的帧数必须与图形元件中的帧数相同 否则不能播放 一般将它作为静止的对象处理 注意 图形元件上不能添加交互行为 1 创建与编辑元件 按钮 用于创建动画的交互控制按钮 以响应鼠标事件 如单击 释放和滑过等 实现按钮的功能 按钮有 弹起 指针经过 按下 和 点击 4个不同状态的帧 点击 帧中创建鼠标对按钮起作用的范围 其他帧中可以是静止图形 也可是影片剪辑 2 调用元件 元件从库中被拖到场景或编辑区的过程称为调用元件 元件是可以反复调用的对象 当元件作为一个对象从库中调用到场景或其他元件编辑区时 它变为该元件的一个具体的实例 因此 当修改元件后 其对应的元件实例也会相应地改变 这就使编辑动画变得十分方便 不需逐一地修改每个元件实例 当然 元件实例也有独立的属性 这部分内容将在创建动画补间动画时介绍 2 调用元件 调用元件的方法为 在库中选取要调用的元件 将其拖入场景或编辑区后释放鼠标 3 逐帧动画 逐帧动画已经在第6课的典型案例中应用过了 它是以单帧中内容的变化来实现动画效果的 这种动画文件占用的存储空间较大 因此 变化过程太长的动画不宜采用该类型 但变化比较复杂 不易体现出变化过程的动画 如表现举手 抬足或面部表情等 应采用该类型 4 形状补间动画 形状补间动画指外观形状变化的动画 在实际的动画创建过程中 除了外观形状的变化外 也可以是位置 颜色的变化 在Flash中 要创建形状补间动画 需首先确定首末两个关键帧的内容 中间的变化过程由计算机自动完成 关键帧中的内容可以是一个或多个不同的对象 但对象必须是可分离的图形 5 为形状补间动画添加形状提示 形状补间动画的中间过程由计算机自动完成 这说明中间过程的变化是不可控制的 如果要使某点在动画变形过程中固定不变 那么可以添加形状提示 6 动画补间动画 在动画补间动画中 首末关键帧中的对象必须是同一个元件的实例 并且一个关键帧中只能有一个元件实例 动画补间动画有位置 大小 旋转 倾斜和颜色几方面的变化 这些变化可以单独存在 也可以加多个变化于一个元件上 例如 对象在舞台中一边移动 一边旋转 并且呈淡入效果 7 时间轴特效动画 时间轴特效动画是Flash8的新增功能 使用它 可以用最少的步骤创建复杂动画 时间轴特效的对象包括文本 影片剪辑和按钮 7 1 2典型案例 制作banner动画 案例目标本案例将为第6课中制作的banner fla添加形状补间动画 动画补间动画和时间轴特效动画 添加后的效果如下图所示 7 1 2典型案例 制作banner动画 操作思路 1 确定画面中需要创建为动画的元素 welcome 幻铃 文字及环状对象将创建为影片剪辑元件 而 一号通 文字将创建为按钮 2 给 welcome 文字添加时间轴特效 将 幻铃 文字创建为透明度渐变动画 将环状对象创建为图形变为3个圆环的形状补间动画 将 一号通 文字创建为指针经过时状态显示 FF6600 颜色的按钮 7 1 2典型案例 制作banner动画 3 在制作过程中 可以随时按 Ctrl Enter 组合键查看动画效果 操作步骤请老师参照软件讲解 7 1 2典型案例 制作banner动画 案例小结本案例中练习了形状补间动画 动画补间动画的创建和时间轴特效的添加 以及元件的转换 元件实例属性的更改等 本案例中采用的元件转换方式比通过创建元件再调用元件来创建动画更方便快捷 因为转换为元件前对象已在需要的位置上了 转换为元件后再进入元件编辑区进行编辑便可以看到场景中对象的相对位置 因此采用这种方法创建动画的直观性更强 7 2制作引导动画 引导动画是使对象沿某条路径运动而产生的动画 例如 雪花飘落 树叶落下 汽车或人沿某路线行走等都可使用引导动画来制作 7 2制作引导动画 7 2 1知识讲解7 2 2典型案例 变幻光环 7 2 1知识讲解 本节将介绍引导动画的构成原理及其创建方法 7 2 1知识讲解 1 引导动画的构成原理2 创建引导动画 1 引导动画的构成原理 引导动画是由引导层和被引导层构成的 引导层位于被引导层的上方 被引导层的对象沿着引导层的对象运动 引导层的对象必须是不封闭的路径 并且以普通帧 而不是关键帧 结束 被引导层的对象必须是元件实例 通过动画补间动画来完成对象的运动 一条引导路径可以被多个被引导层对象共用 即多个对象沿同一条路径运动 2 创建引导动画 创建引导动画的具体操作如下 1 创建引导层 单击图层区中的按钮新建引导层 此时建立的引导层与下方的图层已建立了链接关系 2 在引导层中绘制路径 选中引导层 选择工具箱中的铅笔 钢笔 多边形 矩形或椭圆工具进行绘制 绘制完成的路径只能为笔触线 而不能有填充色 2 创建引导动画 3 在被引导层中创建动画补间动画 并且首末关键帧中的元件实例必须位于路径中的不同位置 4 设置动画 在被引导层的时间轴上单击鼠标 选中 属性 面板中的复选框 使动画补间动画中的元件实例在播放过程中为了适合路径的变化方向做一定角度的旋转 如果不选中该复选框 则元件实例保持初始状态进行运动 7 2 2典型案例 变幻光环 案例目标本案例将制作变幻光环 主要练习引导动画的创建 完成后的效果如下图所示 7 2 2典型案例 变幻光环 操作思路 1 设置动画场景大小为550 400像素 背景色为 000000 帧频为20fps 2 在场景中创建圆 并逐层创建 yj 元件 引导动画 元件和 环图 元件 3 在 引导动画 元件中创建以圆为路径的引导动画 7 2 2典型案例 变幻光环 4 在 环图 元件中编辑圆 使其为圆的一小部分 并进行渐变和柔化填充 5 在 yj 元件中复制多个 引导动画 元件实例 并调整出造型 操作步骤请老师参照软件讲解 7 2 2典型案例 变幻光环 案例小结本案例通过制作变幻光环练习了引导层和引层动画的创建 元件的转换 柔化填充 混色器 面板的使用等 读者应主要掌握引导动画的创建及设置方法 当然 其他辅助知识点也是创建动画效果时随时要用到的 也应该逐步掌握 另外 在 引导动画 元件的编辑区中 如果在 属性 面板中将旋转方式设置为 顺时针 或 逆时针 则会产生另一种动画效果 7 3制作遮罩动画 遮罩动画在Flash动画制作中使用得十分广泛 因为它实现的许多效果是普通动画无法实现的 如在一个圆形内看其他对象的变化状态 神奇的万花筒效果等 7 3制作遮罩动画 7 3 1知识讲解7 3 2典型案例 展卷画 7 3 1知识讲解 本节将介绍遮罩动画的构成原理和创建方法 7 3 1知识讲解 1 遮罩动画的构成原理2 创建遮罩动画 1 遮罩动画的构成原理 遮罩动画是由遮罩层和被遮罩层构成的 遮罩层位于被遮罩层的上方 遮罩动画就是从遮罩层的图形区域观看被遮罩层中的对象 遮罩层中图形外的区域将隐藏被遮罩层中的对象 1 遮罩动画的构成原理 遮罩层中的对象可以是填充的形状 文字 图形元件的实例或影片剪辑元件 但是遮罩层中只能有一个独立的对象 形状例外 在一个遮罩动画中 遮罩层只能有一个 但被遮罩层可以有多个 2 创建遮罩动画 遮罩动画有以下3种情况 遮罩层与被遮罩层中的对象都为静态对象 创建的遮罩图形相当于Fireworks的蒙版效果 遮罩层中为静态对象 被遮罩层中有补间动画 或遮罩层中有补间动画 被遮罩层中为静态对象 遮罩层与被遮罩层中都有补间动画 7 3 2典型案例 展卷画 案例目标本案例将制作展卷画 主要练习遮罩动画的创建 完成后的效果如下图所示 7 3 2典型案例 展卷画 操作思路 1 设置动画场景大小为800 300像素 帧频为12fps 2 分别创建外框的展卷遮罩及框内画面的移动遮罩 3 创建画轴的展开与闭合动画 4 使用元件实例 属性 面板的 颜色 下拉列表框中的 高级 选项设置制作画面出现与离开的动画效果 操作步骤请老师参照软件讲解 7 3 2典型案例 展卷画 案例小结本案例通过制作展卷画练习了遮罩动画的创建 元件颜色的高级设置 各个面画的转换等 读者应主要掌握遮罩动画的创建和元件颜色的高级设置方法 在本案例中 还需注意如何从一个画面转换到另一个面画 7 4上机练习 7 4 1流水7 4 2秋叶飘飞 7 4 1流水 本练习制作流水效果 如下图所示 主要练习遮罩动画的创建 7 4 1流水 操作思路 新建大小为540 390像素的场景 帧频为12fps 导入shui jpg图像 使图像顶部与场景上方对齐 7 4 1流水 新建图层2 复制shui jpg图像与下方的图像重合 并将它们分别转换成名为 svi 和 svi0 的影片剪辑元件 7 4 1流水 进入 svi0 影片剪辑元件的编辑区 用套索工具将水选择出来 进入 svi 影片剪辑元件的编辑区 在新建的图层2中绘制水波若干 并将其转换为 ze 影片剪辑元件 再创建从上往下移动的动画补间动画 建立上下两层的遮罩关系 7 4 2秋叶飘飞 本练习制作秋叶飘飞的动画效果 如下图所示 主要练习引导动画的创建 7 4 2秋叶飘飞 操作思路 新建文档 设置场景大小为540 340像素 帧频为20fps 导入 风景1 jpg 图片 新建图层2 导入 叶 jpg 图片 7 4 2秋叶飘飞 将 叶 jpg 图片依次