flash课件共享第六章.ppt

第六章Flash8动画分类及网页文字动画 计算机与通信工程学院王斌2011年6月 本章简介 本章主要介绍Flash动画的分类以及不同类型动画的特征 并通过实例深入浅出地介绍了帧并帧动画 形状渐变动画和运动渐变动画的制作方法 结合网页特征和动画制作方法详细的介绍了常用的文字动画类型以及文本动画制作方法 6 1帧并帧动画 逐帧动画 就是通过编辑和修改动画中的每一帧内容而产生的 它特别适合那些复杂的 每一帧图像都有变化的动画 而且这些变化并不止是简单的移动 因为Flash中需要存储每一个完整的帧 所以显著提高了文件的容量大小 绘图纸 绘画纸是一个帮助定位和编辑动画的辅助功能 这个功能对制作逐帧动画特别有用 通常情况下 Flash在舞台中一次只能显示动画序列的单个帧 使用绘画纸功能后你就可以在舞台中一次查看两个或多个帧了 如下图所示 绘图纸各个按钮的介绍 绘图纸外观 按钮 按下此按钮后 在时间帧的上方 出现绘图纸外观标记 拉动外观标记的两端 可以扩大或缩小显示范围 绘图纸外观轮廓 按钮 按下此按钮后 场景中显示各帧内容的轮廓线 填充色消失 特别适合观察对象轮廓 另外可以节省系统资源 加快显示过程 编辑多个帧 按钮 按下后可以显示全部帧内容 并且可以进行 多帧同时编辑 修改绘图纸标记 按钮 按下后 弹出菜单 菜单中有以下选项 绘图纸各个按钮的介绍 总是显示标记 选项 会在时间轴标题中显示绘图纸外观标记 无论绘图纸外观是否打开 锚定绘图纸 选项 会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置 通常情况下 绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的 通过锚定绘图纸外观标记 可以防止它们随当前帧的指针移动 绘图纸2 选项 会在当前帧的两边显示两个帧 绘图纸5 选项 会在当前帧的两边显示五个帧 绘制全部 选项 会在当前帧的两边显示全部帧 奔跑的豹子 新建flash文档 属性 400 260 背景白色创建背景图层 文件 导入 导入到舞台 背景图 选择第8帧 在中间增加过度层 F5 新建图层 选择第一帧 文件 导入 导入到舞台 奔跑的豹子1 此时会弹出对话框 选择是调整对象位置 先把 雪景图 锁定 然后按下时间轴面板下方的 编辑多个帧 再单击 修改绘图标记 奔跑的豹子 在弹出的菜单中选择 绘制全部 最后执行 编辑 全选 用鼠标将场景左上方的豹子拖动 这样就可以把8帧中的图片一次全移动到场景中央 设置文字 新建图层 选择 文字工具 属性设置 静态文本 隶书 大小35 深蓝色 在文本框中输入文字控制 测试影片 ctrl enter 满意就保存为fla格式文件 或者导出为swf格式 文件 导出 导出影片 6 2渐变动画 怎么制作上面的动画 形状渐变动画 创建形状渐变动画必须具备的三个条件 动画中至少两个帧 而且关键帧的内容不同 形状 位置或颜色不同 关键帧中的画面内容必须具备形状渐变的元素 图像必须是打散的 如果图像为一个整体 必须经过 修改 分离 的步骤 设置渐变动画的方式为形状渐变动画 圣诞贺卡 导入背景图片制作图层star1 star2 star3 star4在每一个图层上分别创建星形元件在时间轴上合适的点上插入关键帧在后一个关键帧的舞台上改变星形为文字在两个关键帧之间插入形状补间动画 运动渐变动画 运动渐变动画是利用符号元件 图形 影片剪辑 来制作渐变动画 必须满足三个条件 至少有两个关键帧 而且帧中内容必须是元件的实例 不能是形状和元件实例的混合 如果不是 可以用右键菜单中的 转化为元件 将图形转化为元件 两个关键帧中的内容不同 色彩 形状或位置等 将补间动画形式设置为动画渐变类型 演示 球相撞 注意 如果场景中有背景 如下面的横线 需要设置普通帧直至场景结束 填充可以改变以增加立体效果 在设计补间动画的过程中 时间轴中的帧与帧的关系有着紧密的联系 它们之间通过各种颜色和图标状态来区分 具体如下所示 各种补间帧的状态 代表动画补间的开始和结束 代表形状补间 表示补间是断的或不完整的 例如 最后的关键帧丢失了 形状补间和动画补间 各种补间帧的状态 表示内容与第一帧相同 表明该帧已经用 动作 面板分配了一个帧动作 一个红色标记表明该帧包含一个标签或注释 形状补间和动画补间 形状补间动画和动作补间动画的区别 相同点 形状补间动画和动作补间动画都属于补间动画 前后都各有一个起始帧和结束帧 二者之间的区别如下表所示 动作补间动画形状补间动画在时间轴淡紫色背景加长箭头淡绿色背景加长箭头组成元素121 影片剪辑 图形元件 按钮 文字 位图等2 形状 如果使用图形元件 按钮 文字 则必先打散再变形 完成的作用121 实现一个元件的大小 位置 颜色 透明等的变化 2 实现二个形状之间的变化 或一个形状的大小 位置 颜色等的变化 补充知识 填充变形工具 渐变工具与填充变形工具相配合可以产生非常好的立体效果 填充中心 水平缩放 扩充变形 填充色旋转 6 3网页文字动画创作 文本类型 静态文本 内容不会随着网页交互而改变 可输入文本 编辑时只创建文本框 文本内容在播放动画时由用户输入 动态文本 在编辑时也只是创建文本框 文本框内容在播放动画影片时动态输入 文本属性的设定 选中工具箱中的工具 在舞台中单击即可显示文本编辑框 并设定其属性 网页文字动画举例 文字跃现 注意 第6步 文字的打散第7步 墨水瓶工具 改变笔触的颜色 形状提示 要控制更加复杂或罕见的形状变化 可以使用形状提示 形状提示会标识起始形状和结束形状中的相对应的点 例如 如果要补间一张正在改变表情的脸部图画时 可以使用形状提示来标记每只眼睛 这样在形状发生变化时 脸部就不会乱成一团 每只眼睛还都可以辨认 并在转换过程中分别变化 形状提示 形状提示包含字母 从a到z 用于识别起始形状和结束形状中相对应的点 最多可以使用26个形状提示 起始关键帧上的形状提示是黄色的 结束关键帧的形状提示是绿色的 当不在一条曲线上时为红色 要在补间形状时获得最佳效果 请遵循这些准则 在复杂的补间形状中 需要创建中间形状然后再进行补间 而不要只定义起始和结束的形状 确保形状提示是符合逻辑的 例如 如果在一个三角形中使用三个形状提示 则在原始三角形和要补间的三角形中它们的顺序必须是一致的 它们的顺序不能在第一个关键帧中是abc 而在第二个中是acb 如果按逆时针顺序从形状的左上角开始放置形状提示 它们的工作效果最好 遮罩动画 遮罩 顾名思义就是遮挡住下面的对象 首先我在红板 遮罩层 上挖一个洞 把它放在蓝板 被遮罩层 之上 随着红板的移动 大家可以观察到的一个蓝色圆洞在移动 这说明我们是透过红板上的这个洞看到下面的内容的 这个洞 元件 是透光区 所在层为遮罩层 它就像一张不透明的纸遮住它下面的图层 使你看不到下面图层中的内容 而在遮罩层中的图片或文字 就像是在这张纸上开的孔 透过它就可以看到下面图层中的内容 这就是遮罩动画的原理 遮罩动画 也确实是通过 遮罩层 来达到有选择地显示位于其下方的 被遮罩层 中的内容的目地 在一个遮罩动画中 遮罩层 只有一个 被遮罩层 可以有任意个 最简单的遮罩动画 遮罩层的基本原理是 能够透过该图层中的对象看到 被遮罩层 中的对象及其属性 包括它们的变形效果 但是遮罩层中的对象中的许多属性如渐变色 透明度 颜色和线条样式等却是被忽略的 比如 我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化 遮罩文字 新建文档 背景为黑色把图层1命名为 文字亮 在第一帧插入 flashmedia 颜色 白 并复制新建图层 文字暗 右击 在弹出的快捷菜单中选择 粘贴到当前位置 改变颜色为深灰色新建元件 光 在编辑区中画一个放射性填充回到场景1 新建图层 命名 遮罩 把光元件拖入场景中在遮罩层70帧处插入关键帧 并调整光元件的位置 将遮罩图层移动到文字亮图层底下 在文字亮图层创建遮罩 万花筒效果 文档300 300导入一幅颜色比较鲜艳的图片 转换为图形文件 图片 新建一个影片剪辑 命名为 遮罩 把 图片 元件从 库 面板中拖入到编辑区 利用 对齐 面板使其居中 新建一个图层2 利用工具栏中的矩形工具绘制一个无边框的矩形 矩形大小为300 300 使其居中利用直线工具在矩形中绘制两条对角线 删除其中的三个三角形及两条对角线 万花筒效果 选中图层1的 图片 元件 选择 修改 变形 缩放与旋转 命令 打开面板 设置旋转角度为45度放大 图形 元件至完全包含三角形位置在图层1的第30帧插入关键帧 创建动作渐变动画 在下面的 属性 面板中选择逆时针旋转一周 把图层2延长至30帧 选中图层2 右击 在弹出的快捷菜单中选择 遮罩层 命令 创建遮罩 返回到场景1 从 库 面板中把 遮罩 影片剪辑拖放到场景中 x y为0右击 利用快捷菜单复制这个影片剪辑 并选择 粘贴到当前位置 命令 选择 修改 缩放和旋转 旋转角度为180 利用同样方法 复制另外两个影片剪辑 形成全图 闪闪的红星 知识提示 将线条转化为填充创建遮罩动画使用变形面板学习使用橡皮擦水龙头工具 闪闪红星 一 制作红五角星1 选择 文件 新建 命令 创建一个新动画 2 选择 修改 影片 命令 打开 影片属性 对话框 将背景颜色设置为纯黑色 单击 确定 按钮退出 3 选择 插入 新建组件 命令 打开 组件属性 对话框 在名称栏内输入 红星 在 类型 栏下选 图形 单击 确定 按钮退出 4 选择直线工具 颜色选纯白 在工作区画一条直线 5 选择 窗口 面板 转换 命令 打开 转换 对话框 选择 旋转 输入数值 36 单击右下角左边的复制按钮复制4条直线 知识提示 将线条转化为填充创建遮罩动画使用变形面板学习使用橡皮擦水龙头工具 闪闪红星 6 选择 编辑 取消选择 命令 取消对任何对象的选择 由于5条直线呈辐射状交叉 因此实际上存在10条直线 其长度是原来的一半 7 选择箭头工具 分别拖动这10条直线 组成五角星的图形 8 选择直线工具 从五角星的各顶点画角平分线 9 选择 窗口 面板 填充 打开 填充 对话框 在下拉菜单中选渐变 在渐变色调整条下将两个色标调整为红色和黑色 形成由红到黑的渐变色 10 选择油漆桶工具 在工具栏的 选项 下选 封闭大空隙 在五角星中每隔一个三角形进行填充 油漆桶位置尽量靠近中心 11 在填充对话框中 将渐变色调整为白色和红色的渐变 再将五角星中的其他三角形填充 油漆桶位置也尽量靠近中心 闪闪红星 二 幅射线的制作1 选择 插入 新建组件 命令 打开组件属性对话框 在名称栏内输入 线 类型栏内选择 图形 单击 确定 按钮退出 进入 线 符号的制作 2 选择 查看 菜单 打开标尺和网格线 3 选择直线工具 选择 窗口 面板 描绘 命令 打开 描绘 对话框 将线宽设为4 画一条长度约300的直线 4 选择选择 插入 新建组件 命令 打开组件属性对话框 在名称栏内输入 线1 类型栏内选择 图形 单击 确定 按钮退出 进入 线1 符号的制作 5 选择 窗口 库 命令 打开 库 窗口 选择符号 线 将其拖到工作区 放在工作区中心的下一方格 其右端与工作区的中心对齐 闪闪红星 6 选择 修改 转换 编辑中心 命令 调整 线 引例的中心点 使其与工作区的中心重合 7 在 转换 对话框中 将 旋转 数值设为15 单击复制按钮复制出如图所示的图形 8 选择 编辑 全选 命令 将所有对象都选择 选择 修改 分解组件 命令 打碎所有对象 成为最初的矢量线 然后选择 修改 外形 转换行成填充 命令 将矢量线转换成矢量图形 9 选择 插入 新建组件 命令 打开组件属性对话框 在 名称 栏内输入 线2 类型 栏内选择 图形 单击 确定 进入线2符号制作 10 在 库 窗口中选择符号 线 将其拖到工作区 放在工作区中心的上一方格 其右端与工作区的中心对齐 11 选择 修改 转换 编辑中心 命令 调整 线 引例的中心点 使其与工作区的中心点重合 12 在 转换 对话框中 将 旋转 数值设为15 再单击复制按钮复制出如图所示的图形 闪闪红星 三 产生运动的射线1 单击时间线窗口上面的 场景1 图标 进入场景1的编辑制作 2 在时间线窗口中 单击加层工具 增加两个新层图层2和图层3 3 分别用鼠标从标尺上拖出纵横两条引导线 以确定舞台的中心 4 在 库 窗口中 选择符号 线2 将其放入图层1 调整其位置与舞台中心重合 5 选择 窗口 面板 效果 命令 打开 效果 对话框 在下拉菜单中选 色彩 将颜色调为金黄色 6 选择图层2 从 库 窗口中选择符号 线1 将其放入图层2 调整其位置与舞台中心重合 7 选择图层2单击鼠标右键 弹出快捷菜单 从中选择 遮蔽 使图层2成为遮罩层 图层1成为被遮罩层 此时射线效果已经出现 闪闪红星 8 选择图层3 从 库 窗口中选择符号 红星 将其放入层3 调整其位置与舞台中心重合 9 在 转换 对话框中 钩选 强制 将缩放比例设为30 按 回车 键应用 10 单击图层2的 锁 图标 解除锁定 用鼠标选择图层2的第89帧 在面板 转换对话框中 将旋转置设为4 按回车键应用 11 在图层1和图层3的第89桢 插入 桢 或F5键 在图层2第89桢 插入 关键桢 或F6键 在层2的第一桢单击右键面板帧 打开 帧 对话框 在 补间动画 下拉文本中选择 移动 旋转 下拉文本中选择 逆时针 或 CCW 12 在图层2单击右键 弹出快捷菜单选择 显示遮蔽 或 ShowMasking 13 测试影片 最终完成 参考链接 课本上效果示例 范例2 文字遮罩动画 范例3 探照灯文字动画 范例4 风吹字效果 范例5 时间轴特效 时间轴特效 时间轴特效 Timelineeffects 是FlashMX2004和FlashMXProfessional2004都拥有的新功能 使用Flash内建的时间轴特效 可以快速创建复杂的动画 和Swish有些类似 时间轴特效可以应用于以下对象 文本 图形 包括矢量图 组合对象和图符 位图 按钮图符 提示 对电影剪辑应用时间轴特效时 Flash在电影剪辑内部嵌套特效 时间轴特效 给一个对象添加时间轴特效时 Flash会新建一个层 然后把该对象传送到新建的层 该对象被放置在特效图形中 特效所需的所有过渡和变形存放在新建层的图形中 新建层的名称与特效的名称相同 后加一个编号 表示特效应用的顺序 添加时间轴特效时 在图符库中会添加一个以特效名命名的文件夹 内含创建该特效所用的元素 时间轴特效 给一个对象添加时间轴特效的步骤如下 1 按常规方法 在编辑区中添加一个对象 本例添加一个文本框 2 在编辑区中选取要添加时间轴特效的对象 然后选择Insert TimelineEffects 插入 时间轴特效 再从其下级菜单中选择一种特效 本例选择Insert TimelineEffects Effects Blur 插入 时间轴特效 特效 模糊 给文本框对象添加模糊特效 3 在自动显示的特效设置对话框中预览基于默认设置的特效 如果需要 可以修改这些设置 详细的设置方法请参阅下一节 然后单击右上角的UpdatePreview 更新预览 按钮 预览新的设置的效果 设置时间轴特效 每个时间轴特效都以特定的方式来处理图形或图符 你可以通过改变特效的各个参数 以获得理想的特效 在特效预览窗口 你可以修改特效的参数 快速预览修改参数后的变化 选择满意的效果 FlashMX2004内建的时间轴特效有 Copytogrid 拷贝为网格 Distributedduplication 分布复件 Blur 模糊 Dropshadow 阴影 Expand 扩展 Explode 爆炸 Transform 变形 和Transition 过渡 通过设置不同的参数 可以获得不同的效果 时间轴特效 下面分别说明这几种特效的参数及其设置方法 1 CopytoGrid 复制到网格 选择Insert TimelineEffects Assistants Copytogrid 插入 时间轴特效 辅助 复制到网格 可以给选定对象添加 拷贝为网格 特效 CopytoGrid 复制到网格 特效的作用是按列数复制选定的对象 然后按照行数 列数 创建该元素的网格 时间轴特效 2 DistributedDuplication 分散式重制 选择Insert TimelineEffects Assistants Distributedduplication 插入 时间轴特效 辅助 分散式重制 可以给选定对象添加 分散式重制 特效 DistributedDuplication 分散式重制 特效的作用是根据设置的次数复制选定对象 第一个元素是原对象的复件 然后按一定的增量修改该对象 直至最后的对象反映设定的参数 时间轴特效 3 Blur 模糊 选择Insert TimelineEffects Effects Blur 插入 时间轴特效 特效 模糊 可以给选定对象添加 模糊 特效 Blur 模糊 特效的作用是 通过改变对象的alpha值 位置或缩放比例 创建运动模糊特效 4 Dropshadow 投影 选择Insert TimelineEffects Effects Dropshadow 插入 时间轴特效 特效 投影 可以给选定对象添加 投影 特效 Dropshadow 投影 特效的作用是在选定的对象下面创建一个阴影 5 Expand 展开 选择Insert TimelineEffects Effects Expand 插入 时间轴特效 特效 展开 可以给选定对象添加 展开 特效 Expand 展开 特效的作用是扩展 收缩或扩展与收缩对象 对两个或多个组合在一起或组合在一个电影剪辑或图形图符中的对象应用本特效效果最好 对包含文本或字母的对象应用本特效效果也不错6 Explode 分离 选择Insert TimelineEf