多媒体技术应用flash.ppt

重点难点 Flash动画对象的绘制和编辑简单动画制作引导路径动画和遮罩动画的设计与制作使用ActionScript2 0实现交互 第3章Flash动画制作 内容提要 3 1计算机动画基础知识3 2Flash基本操作3 3Flash简单动画制作3 4图层特效动画制作3 5声音与按钮3 6交互动画制作3 7动画制作综合应用 3 1计算机动画基础知识 3 1 1动画的概念动画是一种通过连续画面来显示运动的技术 通过一定速度投放画面以达到连续的动态效果 或动画是一系列物体组成的图像帧的动态变化过程 其中每帧图像只是前一帧图像的略加变化 3 1计算机动画基础知识 3 1 2动画原理 动画原理传统动画的生产过程计算机动画的概念Flash动画动画制作应注意的问题速度的处理循环动画夸张与拟人 3 2Flash基本操作 3 2 1熟悉Flash操作界面 3 2Flash基本操作 时间轴面板 3 2 4文件操作 新建文件保存文件打开文件设置文档属性导入导出文件 3 2 5绘制和编辑图形 案例3 2 1 绘制 鸟语花香 设计效果 舞台效果图如下所示 设计目标 学习Flash动画对象的绘制和编辑方法 掌握各种绘图工具的使用 设计思路 该案例包含背景 草地 花朵 蘑菇 太阳 文字和小鸟图层 利用工具箱中的各种绘图工具 分别在各个图层中绘制相应的对象 3 2 5绘制和编辑图形 矩形工具和椭圆工具 绘制几何图形属性面板可设置笔触颜色 填充颜色等多角星形工具 点击属性面板的 选项 可设置样式 边数等 填充变形工具 调整渐变色填充调渐变中心点调渐变大小调渐变角度 3 2 5绘制和编辑图形 直线工具 绘制矢量线段在属性面板设置直线颜色 粗细 样式等Shift 拖动鼠标 绘制与水平成45度直线 选择工具 选取 移动和复制对象 按住CTRL 改变对象形状 3 2 5绘制和编辑图形 墨水瓶工具 改变线条颜色和样式 不是填充色 颜料桶工具 对封闭区域填充颜色四种封闭模式 不封闭空隙 封闭小空隙 封闭中等空隙 封闭大空隙填充颜色 使用颜色面板 纯色 渐变色 位图 3 2 5绘制和编辑图形 任意变形工具 改变对象形状旋转 倾斜 缩放等 变形面板 3 2 5绘制和编辑图形 思考 怎样绘制蘑菇 3 2 5绘制和编辑图形 文字工具文本对象类型 静态文本 动画播放时不会改变动态文本 动画播放时可以动态更新输入文本 浏览者可以输入文字方向 3种文字的格式化 在属性面板完成文字的变形 任意变形工具转化为图形 两次分离Ctrl B组合键 3 2 5绘制和编辑图形 橡皮擦工具 擦除图形 矢量图 套索工具 选择不规则区域模式 自由选取模式 多边形模式 魔术棒模式魔术棒属性设置 Ctrl Enter组合键 测试影片 在与源文件相同位置创建同名swf影片文件 内容提要 动画的原理Flash文件格式 影片文件格式 文档属性的修改工具箱的使用Premiere的界面有哪几部分构成 使用Premiere制作视频的流程 00 00 05 02代表什么意思 插入操作和覆盖操作的区别 上次课复习 3 2 5绘制和编辑图形 Flash绘制模式 合并绘制模式 对象绘制模式 需要在工具箱中的工具选项区按下对象绘制按钮 3 2 5绘制和编辑图形 对象的组合和分离 组合 对个对象组合在一起 Ctrl G快捷键取消组合 已经组合的对象重新分散成为单个的对象 分离 对象打散成形状 Ctrl B快捷键 组合是可逆操作 分离是不可逆操作 3 3 1动画的分类 1 FlashCS5支持的动画类型 3 3 2帧操作 帧是Flash动画的基本单位 Flash中的帧分为 3 3 2逐帧动画 逐帧动画在每一帧中都会更改舞台内容 它最适合于图像在每一帧中均发生变化的精细动画 例如动物的奔跑 人物的动作等 若要创建逐帧动画 要将每个帧都定义为关键帧 然后为每个帧制作不同的图像 工作量大 生成的文件也较大 在Flash中 制作逐帧动画主要有2种方式 将动画过程分解成一个个画面 在每个关键帧处绘制画面的的内容 通过导入表示连续分解动作的图片文件 如GIF文件 3 3 2逐帧动画 案例3 3 1 利用逐帧动画制作 草原女孩 动画设计效果 舞台效果图如下所示 设计目标 理解逐帧动画原理 掌握两种逐帧动画的制作方法 设计思路 包含3个逐帧动画 马 眨眼睛 字幕的出现 3 3 2逐帧动画 绘制各关键帧方式 在动画开始的第1个关键帧处绘制动画对象 按F6插入关键帧 将其中的内容稍作修改 或按F7键插入空白关键帧 重新绘制对象 重复这一操作 直至动画完毕 需要时在关键帧之间插入普通帧来降低动画速度 导入连续图片的方式 准备好展现对象运动的连续图片 如GIF图片 在动画开始的第1个帧处导入连续图片 需要时在关键帧之间插入普通帧来降低动画速度 3 3 3库 元件 实例 库 元件 实例的概念元件是指在Flash创作环境中创建过一次的图形 按钮或影片剪辑 创建完成后 可在整个文档或其它文档中重复使用该元件 每个元件都有一个唯一的时间轴和舞台 用户所创建的元件会存放在当前文档的库中 实例是指库中元件在舞台上的具体应用 3 3 3库 元件 实例 元件的分类 图形元件 可用于静态图像 也可用来创建连接到主时间轴的可重用动画片段 与主时间轴同步运行 交互式控件和声音在图形元件的动画序列中不起作用 影片剪辑元件 创建可重用的动画片段 影片剪辑的时间轴独立于主时间轴 影片剪辑元件可以包含交互式控件 声音甚至其它影片剪辑实例 按钮元件 可以创建用于响应鼠标单击 滑过或其它动作的交互式按钮 3 3 3库 元件 实例 元件的操作 创建元件 新建原件Ctrl F8 将已有内容转换为元件F8复制元件 在库面板上直接复制编辑元件 双击库面板上的原件 实例的操作 创建实例 将库中的元件拖动至舞台编辑实例属性 属性面板分离实例元件 Ctrl B 使用库 内容提要 Flash动画对象的绘制逐帧动画适用的场合 特点及制作方法什么是元件 库 实例 修改元件和修改实例之间的区别 上次课复习 快捷键 Ctrl G 组合Shift Ctrl G 取消组合Ctrl B 打散 分离 Ctrl Enter 测试动画 精细动作 每一帧都是关键帧 都需要编辑 两种制作方法 将动画分解为一个个画面 在每个关键帧中绘制画面导入连续图片 元件 Flash中创作过一次的图形 小段动画或按钮 可以反复使用 制作好的元件存放在库中 将库中的元件拖动至舞台上 就是创建了该元件的一个实例 修改一个实例 舞台上的其他实例和库中的元件都不会变修改了元件 舞台上所有该元件的实例都会发生变化 F5 插入普通帧 延续时间F6 插入关键帧F7 插入空白关键帧F8 转换为元件 内容提要 形状补间动画的原理和制作方法传统补间动画的原理和制作方法补间动画的原理和制作方法 本次课内容 重点 形状补间动画的原理和制作方法传统补间动画的原理和制作方法 难点 正确区分几种简单动画类型 3 3 4形状补间动画 形状补间动画概述 时间轴中的一个起始关键帧上绘制一个矢量形状 结束关键帧处更改该形状或绘制另一个形状 Flash将自动给出中间内插帧的形状 补间形状最适合用于简单形状变化 位置变化 颜色变化等的动画 3 3 4形状补间动画 形状补间动画创建案例3 3 2 制作矩形渐变为椭圆的形状补间动画设计效果 舞台效果图如下所示 设计目标 理解形状补间动画原理 学习形状补间动画的制作 设计思路 形状和颜色的变化 起始关键帧处绘制一个蓝色的矩形 在结束关键帧处绘制一个黄色的椭圆 中间的过渡帧由Flash自动生成 3 3 4形状补间动画 形状补间动画的制作步骤 在变化起始时刻的关键帧中绘制变化前的形状 在变化结束时刻 按F7键插入空白关键帧 并在该帧中绘制变化后的形状 右击时间轴上起始关键帧和结束关键帧中的任意一帧 在弹出的快捷菜单中选择 创建补间形状 完成形状补间动画的创建 案例拓展 拓展1 在案例3 2 2基础之上 继续实现圆变红色五角星的动画设计效果 舞台效果图如下所示 设计目标 进一步理解形状补间动画原理 学习形状补间动画的制作 设计思路 起始关键帧处已有黄色椭圆 在结束关键帧处绘制两个红色的五角星 中间的过渡帧由Flash自动生成 形状补间动画可以是一对多 案例拓展 拓展2 在案例拓展1基础之上 添加字母A到B的演变动画设计效果 舞台效果图如下所示 设计目标 进一步理解形状补间动画原理 学习形状补间动画的制作 设计思路 新建图层 在起始和结束关键帧处输入字母A和B 打散后建立形状补间动画 形状补间动画的对象必须是形状 单击呈点状 如果是元件 组合 文字等需先打散 一个形状补间动画产生在同一图层 案例拓展 拓展3 在案例拓展2基础之上 添加三角形翻转的动画 设计效果 舞台效果图如下所示 设计目标 进一步理解形状补间动画原理 学习为形状补间动画添加形状提示点 设计思路 新建图层 在起始和结束关键帧处绘制三角形 建立形状补间动画并添加形状提示点 添加形状提示点 可以控制形变过程 3 3 4形状补间动画 使用形状提示控制形状变化 创建形状补间动画在起始关键帧 修改 形状 添加形状提示点 将提示点移动到合适位置在结束关键帧 将对应的提示点移动到对应位置 3 3 4形状补间动画 3 3 4形状补间动画 形状补间动画总结 适合形状 颜色 位置的变化动画的对象必须是形状 单击呈点状 若是元件 组合 文字 位图等必须先打散成形状动画可以是一对一 也可以是一对多动画发生在同一图层添加形状提示点可以控制形状补间过程 课后思考题 案例3 3 3 生日贺卡的制作设计效果 参照 生日贺卡 swf 设计目标 进一步掌握形状补间动画的制作 使用形状提示点控制形变过程 掌握元件的概念 制作和使用 3 3 5传统补间动画 传统补间动画概述 时间轴中的一个起始关键帧上放置元件 文本 组合或位图 结束关键帧处更改其属性 Flash将自动给出中间内插帧的形状 传统补间动画适合用于对象的大小 位置 包括旋转 加减速 颜色 包括亮度 色调 透明度 变化 3 3 5传统补间动画 传统补间动画创建案例3 3 3 制作蝴蝶飞过的传统补间动画 设计效果 一只蝴蝶从舞台左侧向右侧飞过的动画 设计目标 理解传统补间动画原理 学习传统补间动画的制作 设计思路 只需在起始关键帧处舞台左侧放置一个蝴蝶元件 在结束关键帧处将蝴蝶移动到舞台右侧并缩小 中间的过渡帧由Flash自动生成 3 3 5传统补间动画 传统补间动画创建 传统补间动画的制作步骤 在起始键帧中添加运动对象的元件 设置其属性 在变化结束时刻 按F6键插入关键帧 根据需要 修改该帧中运动对象的属性 如位置 旋转 缩放 颜色等 右击时间轴上起始关键帧和结束关键帧中的任意一帧 在弹出的快捷菜单中选择 创建传统补间 完成传统补间动画的创建 3 3 5传统补间动画 案例3 3 5 制作一个蓝图白云的动画效果 设计效果 参照 蓝图白云 swf 设计目标 进一步掌握传统补间动画的制作 例如对象进行直线运动 旋转 摇摆 放大缩小 颜色改变等动画效果的制作 3 3 5传统补间动画 传统补间动画总结 适合大小 颜色 位置的变化 还可以制作加减速 旋转 透明度变化动画的对象必须是元件 组合 文字 位图等 如果是形状 需要先组合或转换为元件动画只能是一对一动画发生在同一图层 3 3 5补间动画 补间动画概述 时间轴中的一个起始关键帧上放置元件 文本 组合或位图 为该帧创建补间动画 添加属性关键帧 改变对象属性 补间动画可以设置运动对象的大小 位置 颜色等属性的变化 还可以进行曲线运动 3 3 5传统补间动画 案例3 3 5 制作一个气球升起的补间动画 设计效果 参照 气球 swf 设计目标 理解补间动画原理 学习补间动画制作 3 3 5传统补间动画 补间动画创建 补间动画的制作步骤 新建一个图层 向第一个关键帧添加元件 右键单击该帧 在快捷菜单中选择 创建补间动画 选择后面某个帧 按F6添加属性关键帧 黑色菱形 修改属性关键帧处元件的属性 如位置 颜色 倾斜等 舞台中2个关键帧的对象之间将产生运动路径 使用编辑工具修改运动路径 补充 4种简单动画比较 补充 4种简单动画比较 3 4 1引导路径动画 现实世界里 很多物体的运动轨迹并不是直线 而是任意的曲线 有的甚至还是封闭的曲线 3 4 1引导路径动画 1 引导路径动画概述引导路径动画 也称引导层动画 是指将一个或多个层链接到一个运动引导层 使一个或多个对象沿同一条路径运动的动画形式 3 4 1引导路径动画 2 引导路径动画创建 案例3 4 1 制作一片枫叶随风飘落的动画 设计效果 参照 枫叶飘飘 swf 文件 设计目标 理解引导路径动画的原理 学习最基本的引导层动画创建设计思路 枫叶是运动对象 放置于被引导层 在引导图层中绘制飘落时的运动轨迹 3 4 1引导路径动画 引导路径动画 最基本 的制作步骤 新建图层 在第1帧中放置动画对象 右键点击动画对象所在的图层 快捷菜单中选择 添加传统运动引导层 添加运动引导层 在运动引导层中 利用铅笔或其他工具绘制引导线 绘制的引导线要平滑流畅 尽量一气呵成 不作停顿 选中动画对象所在图层的第1帧 拖动对象 将中心点对准引导线的起点 在结束处 按F6键插入关键帧 并将实例的中心对准引导线的终点 创建该图层的传统补间动画 3 4 1引导路径动画 运动轨迹为封闭曲线的引导路径动画创建 案例3 4 2 制作小狗绕着旋转的圆球跑动的动画 设计效果 参照 小狗圆球 swf 文件 设计目标 进一步理解运动引导动画的原理 学习引导线为封闭曲线的引导路径动画制作 设计思路 小狗作为运动对象放置于被引导层 在引导层中绘制运动轨迹 有缺口的圆线 还需另外一个图层 制作圆球旋转的动画 3 4 1引导路径动画 运动轨迹为封闭曲线的引导路径动画创建 案例3 4 2 制作小狗绕着旋转的圆球跑动的动画 设计效果 参照 小狗圆球 swf 文件 设计目标 进一步理解运动引导动画的原理 学习引导线为封闭曲线的引导路径动画制作 设计思路 小狗作为运动对象放置于被引导层 在引导层中绘制运动轨迹 有缺口的圆线 还需另外一个图层 制作圆球旋转的动画 3 4 1引导路径动画 多个对象沿着同一条轨迹运动的引导路径动画创建 案例3 4 3 制作星空文字汇聚动画 设计效果 参照 星空文字汇聚 swf 文件 设计目标 学习一条引导路径引导多个运动对象的引导路径动画制作设计思路 多个 星 字图案沿着同一条路径汇聚在一起 一个引导层要引导多个被引导层 每个被引导层里放置一个 星 文字 而且各个图层中文字的透明度也是不同的 3 4 1引导路径动画 多个对象沿着同一条轨迹运动的引导路径动画创建 案例3 4 3 制作星空文字汇聚动画 设计效果 参照 星空文字汇聚 swf 文件 设计目标 学习一条引导路径引导多个运动对象的引导路径动画制作设计思路 多个 星 字图案沿着同一条路径汇聚在一起 一个引导层要引导多个被引导层 每个被引导层里放置一个 星 文字 而且各个图层中文字的透明度也是不同的 3 4 1引导路径动画 运动轨迹可见的引导路径动画创建 案例3 4 3 制作多个小球绕着椭圆轨迹线运动的动画 设计效果 参照 小球运动 swf 文件 设计目标 进一步掌握引导路径为封闭曲线的运动引导路径动画制作 掌握如何显示对象运动轨迹的方法 掌握元件的创建和使用方法 设计思路 由于引导路径在动画播放时是不显示的 所以看到的椭圆并不是引导线 而是在另外图层中绘制的椭圆 3 4 2遮罩动画 1 遮罩动画概述遮罩动画由两个图层构成 遮罩层和被遮罩层 两个图层上下链接在一起 在遮罩图层中绘制填充色块或文字 或者放置对象 就等于在遮罩层上挖出了与之形状相同的 视窗 动画的效果就是透过遮罩图层上的 视窗 来观看下方被遮罩图层的内容 3 4 2遮罩动画 在Flash作品中 我们常常看到很多神奇炫目的效果 比如探照灯 放大镜 万花筒 水波涟漪等等 这些丰富的效果都可以使用 遮罩动画 来打造 3 4 2遮罩动画 2 遮罩动画创建 案例3 4 5 利用遮罩动画实现会变颜色的彩虹文字效果 设计效果 参照 彩虹文字 swf 文件 设计目标 理解遮罩动画原理 掌握动画产生在被遮罩层的遮罩动画创建方法 设计思路 文字形状是 视窗 透过这个视窗 可以看到下方彩条的移动 从而形成会变颜色的彩虹字 所以 文字所在的图层是遮罩图层 彩条所在的图层是被遮罩层 彩条在做位移运动 3 4 2遮罩动画 遮罩动画的制作步骤 制作被遮罩层中的内容制作遮罩层中的内容在图层面板中 右键点击遮罩图层 在快捷菜单中选择 遮罩层 正确区分哪个是遮罩层 哪个是被遮罩层 进一步确定到底是哪个图层在动或者是两个图层都在动 3 4 2遮罩动画 案例3 4 6 利用遮罩动画打造探照灯效果 设计效果 参照 探照灯 swf 文件 设计目标 进一步理解遮罩动画原理 掌握动画产生在遮罩层的遮罩动画创建方法 设计思路 动画中应该包含三个图层 从下到上分别放置黑暗的夜景 光照的夜景和探照灯 其中 光照的夜景是被遮罩层 探照灯是遮罩层 遮罩层中要制作探照灯移动的位移动画 3 4 2遮罩动画 案例3 4 7 古诗诵读 3 5 1Flash中声音的应用 FlashCS5支持的声音文件格式 WAV MP3 ASND AIFF等2 在Flash中如何加入声音 导入声音素材 文件菜单 导入 导入到舞台命令添加声音 新建图层 拖动到舞台上设置声音的同步选项设置声音的效果压缩声音 3 5 1Flash中声音的应用 声音的同步选项 事件 会将声音和一个事件的发生过程同步起来 独立于时间轴完整播放 即使SWF文件停止声音也会继续播放 同步选项 事件 多用于按钮中的声音 或较短的声音 开始 与 事件 选项的功能相近 但是如果声音已经在播放 则新声音实例就不会播放 停止 使指定的声音静音 数据流 强制动画和音频流同步 与事件声音不同 音频流将随着SWF文件的停止而停止 3 5 1Flash中声音的应用 声音效果 属性面板的 效果 选项中可以设置声音的效果自定义声音效果 3 5 2Flash中导入视频 FlashCS5支持的视频文件格式 FLV或F4V H 264 2 在Flash中如何加入视频 文件菜单 导入 导入视频按照向导逐步操作 3 5 3按钮的制作 什么是按钮 按钮元件可以被看作是一个4帧的影片剪辑 第1帧是弹起帧 鼠标没有经过按钮时 该按钮的外观 第2帧是指针经过帧 鼠标滑过按钮时 该按钮的外观 第3帧是按下帧 鼠标按下按钮时 该按钮的外观 第4帧是点击帧 定义响应鼠标单击的物理区域 此区域在影片播放时不可见 3 5 3按钮的制作 用户自定义按钮按钮设计时 应分别设计其包含的4个帧 并为按钮添加脚本 以实现交互的功能 案例3 5 2设计制作 play 和 stop 按钮 3 5 3按钮的制作 公用库按钮窗口菜单 公用库 按钮命令 打开按钮公用库 将所需按钮拖动至舞台上即可使用 3 6交互动画制作 Flash是一款非常优秀的动画制作软件 最吸引人的是它强大的交互功能 Flash的交互功能是基于动作脚本语言的基础之上的 ActionScript 简称AS 中文译为 动作脚本 是Flash的内置脚本语言 它是一种面向对象的编程语言 3 6 1动作面板的使用 窗口菜单 动作命令 或者按下F9键 打开动作面板 脚本语言编辑窗格 动作工具箱 脚本导航器 3 6 2ActionScript基础 ActionScript书写规则区分大小写 分号 用以表示每一句语句的结束 大括号 一段完整的代码需要放置在 中 用 可以将语句分成若干部分 圆括号 用来为函数传递参数 例如 GotoAndPlay 1 表示跳转到第1帧播放 下划线 用来表示属性 例如 my mc height表示影片剪辑my mc的高度 点语法 在ActionScript中 点有两种作用 访问对象的属性和方法my mc x 100 my mc x stop 表示路径 root my mc my1 mc 3 6 2ActionScript基础 ActionScript语法数据类型常量变量运算符函数 能够完成某些特定功能的程序块程序结构 顺序结构 选择结构和循环结构 3 6 3ActionScript交互动画制作 脚本添加的对象Flash里可以为3类对象添加动作脚本 分别是帧 按钮元件和影片剪辑元件变量 为关键帧添加动作 选中帧后 只需双击动作工具箱里所需的动作 将动作添加到脚本编辑区中即可 为按钮添加动作 在添加动作到脚本编辑区之前 需要通过工具箱中的影片剪辑控制类中的on语句来指定触发该动作的鼠标或键盘事件函数 若是为影片剪辑添加动作 则在添加动作到脚本编辑区之前 需要通过工具箱中影片剪辑控制类中的onClipEvent语句来指定触发该动作的事件 3 6 3ActionScript交互动画制作 ActionScript中的常用动作控制Flash影片的停止与播放案例3 6 1 两个按钮 分别控制影片的播放和停止 设计思路 默认打开SWF文件时 动画会开始循环播放 只需在舞台上放置两个按钮 编写脚本 使用时间轴控制类中的stop和play动作 使得单击 Stop 按钮时 动画停止播放 单击 Play 按钮时 动画继续播放 3 6 3ActionScript交互动画制作 on 鼠标或键盘事件 动作脚本 on press 点击 使用鼠标指向按钮并按下左键不动on release 释放 使用鼠标指向按钮并按下鼠标左键后松开左键on releaseOutside 释放离开 使用鼠标指向按钮并按下左键后松开左键后离开按钮区域on keyPress 按键 按下键盘上的某键on rollOver 指针经过 将鼠标指针放在按钮区域内 不按任何键 on rollOut 指针离开 鼠标指针离开按钮区域 不按任何键 on dragOver 拖放经过 当鼠标激活按钮 单击拖过按钮有效区域时on dragOut 拖放离开 当鼠标激活按钮 单击拖出按钮有效区域时 3 6 3ActionScr