信息管理系统解决方案ppt课件.ppt

信息管理系统解决方案 第三章Flash平面动画制作 教学目标 教学重点 难点 教学内容 本章小结 第三章Flash平面动画制作 教学目标 通过这章的学习 学生可以熟练的掌握逐帧动画 运动补间动画 形状补间动画 遮罩层动画和引导动画这5种动画的制作方法和技巧 第三章Flash平面动画制作 教学重点与难点 逐帧动画 运动补间动画 形状补间动画 遮罩层动画和引导动画的制作方法和设计技巧 第三章Flash平面动画制作 本章计划授课14学时 教学内容 3 1Flash平面动画制作概述 3 2 新年快乐 案例 3 3 世界杯集锦 案例 3 4 闪闪的红星 遮罩动画案例 3 5 蝴蝶飞 引导动画案例 3 6 走路的小青蛙 逐帧动画案例 3 7 贺卡 综合动画案例 3 1Flash平面动画制作概述 本节内容 1 Flash平面动画的基本概念 2 Flash平面动画的基本制作方法 3 平面动画的设计技巧 3 1Flash平面动画制作概述 一 Flash平面动画的基本概念 动画 任何随着时间而发生的位置或者形态上的改变 Flash动画是由一个个 帧 上的图片连接而成的 帧是动画最基本的单位 舞台 是制作动画的地方 在播放器中播放动画时 只有舞台中的对象被显示 工作区域 舞台和周围的灰度区域场景 是动画的另一个组成部分是 场景 的变换 就像一部电影不可能只在一个地方拍摄一样 制作Flash动画也需要有不同的场景 3 1Flash平面动画制作概述 二 Flash平面动画的基本制作方法 1 逐帧动画 将动画的每一帧均设置为关键帧 通过改变每一个关键帧中的图像而产生动画效果 逐帧动画是Flash所提供的最基本的动画形式 2 补间动画 补间动画是Flash提供的一种最有效的动画形式 无论是创建角色动画或者动作动画 甚至最基本的按钮效果 补间都是必不可少的 CS5中补间动画可以分为补间动画 形状补间动画和传统补间动画 3 1Flash平面动画制作概述 二 Flash平面动画的基本制作方法 3 遮罩动画 遮罩动画是将一个图层设置为遮罩层 此图层中的对象将相应地转换为遮罩对象 其它图层则为被遮罩层 这些图层的对象被遮罩对象所屏蔽的那部分才可显示 4 引导动画 引导动画实际上是在运动补间动画的基础上添加一个引导图层 该图层有一条可以引导运动方向的引导线 使另一个图层中的对象依据此引导线进行运动的动画 3 1Flash平面动画制作概述 三 Flash平面动画的设计技巧 注意以下几个要点 1 要想吸引观众 最重要的是让动作具有一定的含义 2 动作应该支持动画的内容和主题 3 动作可以像文章和颜色一样传达情绪 感情和个性 4 在日常生活中仔细观察动作并记录下来 建立一个创建动画时的 资源库 5 动作的设计要符合自然规律 3 2 新年快乐 案例 本节内容 1 案例效果2 操作步骤3 技术要点4 练习 3 2 新年快乐 案例 一 案例效果 重点与难点 形状补间动画的特点 创建方法 及如何设置形状提示点来控制形状补间动画的中间过程 3 2 新年快乐 案例 二 操作步骤 1 新建文档并命名启动AdobeFlashCS5后 新建一个文档 对背景颜色和舞台大小进行相应的设置 保存文档 命名为 新年快乐 2 设置背景图片将 图层1 改名为 背景 把素材中的背景图片文件 烟花 导入到舞台 并设置宽为400 高为300 居中对齐 扩展到100帧 锁定图层 3 2 新年快乐 案例 二 操作步骤 3 绘制灯笼第一步 插入4个新图层 分别命名为 新 年 快 乐 将 贺 新 禧 三个图层锁定 单击 新 图层的第20帧 按F6键增加一个关键帧 利用 矩形工具 和 椭圆工具 绘制如下左 灯笼 图形 3 2 新年快乐 案例 二 操作步骤 第二步 分别在 年 快 乐 图层中第20帧单击F6键添加关键帧 将灯笼粘贴到屏幕上并调整到适当的位置 如下图 3 2 新年快乐 案例 二 操作步骤 4 绘制 新年快乐 四个文字在对应的图层40帧位置 文字位置与灯笼位置对应 3 2 新年快乐 案例 二 操作步骤 5 给此四个图层均在第60帧和第80帧添加一个关键帧 选中 新 年 快 和 乐 4个图层的第20帧复制到4个图层的第80帧位置 6 同时选中 新 年 快 和 乐 4个图层中的20 40帧之间的任意帧右击选择 创建补间形状 再用同样的方法在第60 80帧之间也创建形状补间动画 7 测试影片 保存文件 并导出影片 3 2 新年快乐 案例 三 技术要点 1 制作形状补间动画形状补间动画的方法有如下三种 1 选择开始关键帧和结束关键帧间的任何一帧 在 属性 面板中设置 2 右击开始关键帧和结束关键帧间的任何一帧 在快捷菜单中选择 创建补间形状 3 单击开始关键帧和结束关键帧间的任何一帧 选择 插入 时间轴 创建补间形状 菜单项 注意 FLASH只能对一些简单的形状进行形状补间 不能对一个组 元件或者可编辑的文字运用形状补间 3 2 新年快乐 案例 三 技术要点 2 设置形状提示点在已经创建了一个基本的形状补间动画后 可以按照以下步骤添加形状提示点 1 开始关键帧中选择一个形状 然后单击 修改 形状 添加形状提示 菜单项 2 在开始关键帧的形状上确定一个点 用 箭头工具 进行选择并移动第一个形状提示点 把它放在形状上一个用户想要其与最终形状中的一块区域进行匹配的区域上 3 2 新年快乐 案例 三 技术要点 3 当把播放头移动到形状补间动画的结束帧上时 会看到一个与放在开始帧上的标了字母的形状提示点相匹配的另一个标了相同字母的形状提示点 当结束关键帧中的形状提示点的颜色由红色变成了绿色 而在开始关键帧中的形状提示点由红色变成了黄色 则表示形状提示点已经与作品建立了正确的连接 4 将播放头在时间轴上移动预览新的形变过程 不停地加入形状提示点 或对它们进行重新定位 直到动画产生出了理想的形变过程 3 2 新年快乐 案例 四 练习 1 制作一个笑脸到哭脸的变脸形变动画 效果如下图所示 提示 笑脸系列形状可采用 文本工具 输入 字体采用 Windings 输入大写字母 L 则可输入一个笑脸 其它两张脸对应着大写字母 K 和 L 3 2 新年快乐 案例 四 练习 2 制作一个变手的形变动画 并通过设置形状提示点来控制手指之间的对应变换位置 动画中手的姿势如下图所示 提示 手的系列形状可采用 文本工具 输入 字体采用 Windings 输入大写字母 A G 实现 3 3 世界杯集锦 案例 本节内容 1 案例效果2 操作步骤3 技术要点4 练习 3 3 世界杯集锦 案例 一 案例效果 重点与难点 传统补间动画的制作方法和技巧 及如何设置旋转 运动的快慢和逐渐消失的效果 3 3 世界杯集锦 案例 二 操作步骤 1 新建文档并命名启动AdobeFlashCS5后 新建一个文档 对背景颜色和舞台大小进行相应的设置 保存文档 命名为 世界杯集锦 2 创建世界杯图形符号导入文件名为 世界杯图1 世界杯图6 的图片文件 分别对应生成名为 图1 图6 的图形元件 3 3 世界杯集锦 案例 二 操作步骤 3 创建 Loading 文本的拉伸效果第一步 新建一个名称为 Loading 的影片剪辑元件 第二步 选用 文本工具 输入文字 Loading 在 属性 面板中设置此文字的字体为 黑体 字号为25 字体颜色为白色 用Ctrl B将文字打散 将第1帧复制到第2帧至第13帧 鼠标单击第1帧 只保留 L 字母 删除其它字符图形 从第2帧开始逐步增加字符图形直至第13帧 鼠标单击第18帧 按F5键增加一个扩展帧 3 3 世界杯集锦 案例 二 操作步骤 4 创建 光线 图形符号第一步 新建名称为 光线 的图形元件 第二步 利用 椭圆工具 绘制如下图的光线效果 3 3 世界杯集锦 案例 二 操作步骤 5 创建 光束 影片剪辑 3 3 世界杯集锦 案例 二 操作步骤 6 设置背景图片导入背景图片到场景1中 选择本案例对应的素材文件夹中的背景图片文件 背景 设置此图片的宽为400 高为300 通过设置 对齐 面板选项 使背景图片位于舞台中央 7 创建 光 图层创建新图层命名为 光 将影片剪辑 光束 拖至舞台中央 并扩展制120帧 3 3 世界杯集锦 案例 二 操作步骤 8 创建 Loading 图层创建新图层命名为 Loading 将影片剪辑 Loading 拖至舞台左下角 并扩展制120帧 9 创建宇宙图片动画第一步 创建新图层命名为 图片1 将图形符号 图1 拖到舞台左端 并将图形符号缩小 单击第10帧按F6插入关键帧 水平移动图形符号 图1 的位置至屏幕中央 并放大 单击第20帧按F6插入关键帧 在 属性 面板中设置 颜色 选项为 Alpha 值为 0 鼠标右击第1帧至第10帧之间 在弹出的快捷菜单中选择 创建传统补间动画 3 3 世界杯集锦 案例 二 操作步骤 第二步 按照以上方法 可设计 图片2 至 图片6 从舞台边缘的不同位置沿着不同的角度由小变大 或直接或旋转地进入舞台中央 然后再慢慢淡出消失掉 10 测试影片 保存文件 并导出影片 3 3 世界杯集锦 案例 三 技术要点 1 制作传统补间动画创建传统补间动画的方法有如下2种 1 右击开始关键帧和结束关键帧间的任何一帧 在弹出的快捷菜单中单击 创建传统补间 菜单项 2 单击开始关键帧和结束关键帧间的任何一帧 单击 插入 传统补间 菜单项 注意 如果要对一个图像制作传统补间动画 要先把它变成组件 按Ctrl G组合键 或者元件 3 3 世界杯集锦 案例 三 技术要点 2 创建补间动画在cs4之前的FLASH版本在制作动画的时候基本都是定头 定尾 做动画 开始帧 结束帧 创建动画动作 而从flashcs4开始 就演变为只要定头 然后鼠标在哪一帧操作场景中的对象时 时间轴自动添加关键帧 所以制作补间动画演变为 定头 做动画 开始帧 选中对应帧 改变对象位置 3 3 世界杯集锦 案例 三 技术要点 3 设置旋转的运动效果旋转的运动效果是使实例在运动的同时旋转 设置方法是在起始关键帧和结束关键帧之间已经设置好了运动补间动画后 再通过 属性 面板中的来设置 其中 旋转 项用于设置旋转的方式 有 无 自动 顺时针 逆时针 4个选项 后面的 x 项用于设置从运动补间动画开始到结束元件旋转的次数 3 3 世界杯集锦 案例 三 技术要点 4 设置运动的快慢效果时快时慢的运动效果也是在起始关键帧和结束关键帧之间已经设置好了运动补间动画后 再通过 属性 面板中的来设置的 其中 缓动 项用于调节对象运动过程中的速度比例关系 正数表示先快后慢 负数表示先慢后快 零值表示动作匀速变化 后面的 铅笔 用于打开 自定义缓入 缓出 面板 3 3 世界杯集锦 案例 三 技术要点 5 设置物体逐步消失的效果逐步消失的运动效果主要是通过设置运动补间动画的结束关键帧中物体的 Alpha 值为 0 来实现的 此设置可通过 属性 面板中的色彩效果样式中的 Alpha 值项来完成 3 3 世界杯集锦 案例 四 练习 1 制作一个红色小球旋转运动的动画 要求小球先从舞台的左上角顺时针旋转两周到达舞台底端中央 旋转的速度是先慢后快 形状是由小变大 再从底端中央逆时针旋转两周到达舞台右上角 要求旋转的速度是先快后慢 形状是由大变小直至消失 2 自行制作一个人走路的影片剪辑制作一个人从舞台左边走到舞台右边的运动动画 3 4 闪闪的红星 遮罩动画案例 本节内容 1 案例效果2 操作步骤3 技术要点4 练习 3 4 闪闪的红星 遮罩动画案例 一 案例效果 重点与难点 遮罩动画的制作方法与技巧 3 4 闪闪的红星 遮罩动画案例 二 操作步骤 1 新建文档并命名启动AdobeFlashCS5后 新建一个文档 背景颜色和舞台大小都使用默认 保存文档 命名为 闪闪的红星 2 绘制 放射圆 元件第一步 使用 工具箱 中的椭圆工具和线条工具绘制一个粗细为4的椭圆和直线 并用变形工具把直线的中心点调整至圆的中心点 如下图 3 4 闪闪的红星 遮罩动画案例 二 操作步骤 第二步 打开 窗口 菜单中的 变形 面板 设置旋转角度为 10度 单击 应用复制 按钮35次 选中所有线条 单击 修改 形状 将线条转化为填充 得到下面的左边的放射圆1图形元件 第三步 新建一个 放射圆2 的图形元件 把 放射圆1 拉入舞台中 并水平翻转 得到上面的右图 3 4 闪闪的红星 遮罩动画案例 二 操作步骤 3 制作 光芒闪闪 影片剪辑元件第一步 新建一个 光芒闪闪 的影片剪辑元件 把 放射圆1 拉入舞台中 改变色调为 黄色调 并设置一个100帧的动作补间动画 使它 逆时针 旋转一周 第二步 再新建一个图层 把 放射圆2 拉入舞台中 设置该图层为 遮罩层 得到效果如图 3 4 闪闪的红星 遮罩动画案例 二 操作步骤 4 制作 五角星 图形元件第一步 新建一个 五角星 的图形元件 第二步 利用工具栏中的 多边形工具 和 线条工具 绘制一个五角星如下图 3 4 闪闪的红星 遮罩动画案例 二 操作步骤 5 整合图形第一步 在场景1里分别新建 背景 光芒 和 五角星 3个图层 第二步 在 背景 图层里绘制一个浅蓝色的矩形背景 第三步 把做好的 光芒闪闪 元件和 五角星 元件分别拉入对应的图层里 6 测试影片 保存文件 并导出影片 3 4 闪闪的红星 遮罩动画案例 三 技术要点 1 制作遮罩动画在制作遮罩动画的时候用到两个图层 遮罩层和被遮罩层 被遮罩层上的图形通过遮罩层显示出来 播放动画的时候 遮罩层上的内容不会被显示出来 被遮罩层上位于遮罩层之外的内容也不被显示 2 设置一个图层遮罩多个图层在Flash中一个遮罩图层可以同时遮罩多个被遮罩图层 当把某个图层设置为遮罩层时 它下面的图层自动被设置为被遮罩层 当需要使一个图层遮罩多个图层时 可以通过下面的两种方法实现 3 4 闪闪的红星 遮罩动画案例 三 技术要点 1 当需要被添加为被遮罩层的图层位于遮罩层的上方时 选中该图层 单击并拖动它到遮罩层下方 2 当需要被添加为被遮罩层的图层位于遮罩层的下方时 在该图层上右击弹出快捷菜单 选择 属性 打开 图层属性 对话框 选择 被遮罩 类型 如果需要取消遮罩与被遮罩的关系 可以在被遮罩层打开 图层属性 对话框 选中 一般 单选按钮 或者把该图层拖动到遮罩层上方 3 4 闪闪的红星 遮罩动画案例 四 练习 请制作一个 瀑布 遮罩动画 该动画制作时截取了水流部分的图像作为被遮罩层 遮罩层是使用笔刷工具绘制的水波线条 遮罩层的波纹从上到下做运动 效果如下图 3 5 蝴蝶飞 引导动画案例 本节内容 1 案例效果2 操作步骤3 技术要点4 练习 3 5 蝴蝶飞 引导动画案例 一 案例效果 重点与难点 引导动画的制作方法与技巧 以及应用引导路径的技巧 3 5 蝴蝶飞 引导动画案例 二 操作步骤 1 新建文档并命名启动AdobeFlashCS5后 新建一个文档 背景颜色和舞台大小都使用默认 保存文档 命名为 蝴蝶飞 2 导入背景图片修改 图层1 的名称为 背景 导入本案例对应的素材文件夹中的 花丛 bmp 的图片文件 利用 对齐 面板缩放成与舞台大小一样 3 5 蝴蝶飞 引导动画案例 二 操作步骤 3 制作 蝴蝶飞1 和 蝴蝶飞2 元件第一步 新建一个命名为 身体 的图形元件 如下左图 第二步 新建一个 图形 元件 命名为 翅膀 导入图片本案例对应的素材文件夹中的 蝴蝶1 并进行相应的调整 效果如上右图 3 5 蝴蝶飞 引导动画案例 二 操作步骤 第三步 新建一个 影片剪辑 命名为 蝴蝶飞1 A 在 蝴蝶飞1 元件中建立2个图层 并给图层分别命名为 身体 和 翅膀 利用前面所做的 身体 和 翅膀 元件 组成一只完整的蝴蝶效果如下左图B 在 翅膀 的第2帧插入关键帧 然后选中 任意变形工具 将左边 翅膀1 实例的变形中心点调整到与身体接触位置 然后向里压 使用同样的方法调整右边的实例 效果如上右图 3 5 蝴蝶飞 引导动画案例 二 操作步骤 C 为了让蝴蝶有节奏的拍动翅膀 同时选中 翅膀 的第1 2帧 点右键 复制帧 然后将其粘贴到第6 7帧 9 10帧 12 13帧 17 18帧 22 23帧 最后在25帧插入扩展帧 这样就有了蝴蝶不断煽动翅膀的效果 帧的设置如图 D 利用和 蝴蝶1 影片剪辑元件同样的制作方法可以得到 蝴蝶2 影片剪辑元件 只是翅膀利用素材文件夹中的 蝴蝶2 jpg 来制作 3 5 蝴蝶飞 引导动画案例 二 操作步骤 4 制作 闪烁文字 元件 1 新建一个 图形 元件 命名为 星星 效果如图 2 新建一个 影片剪辑 命名为 星星旋转 将 星星 元件拖放到影片剪辑中 适当调整大小 在第15帧插入关键帧 创建运动补间动画 在 属性 面板中设置 逆时针 旋转 1 次 3 5 蝴蝶飞 引导动画案例 二 操作步骤 3 新建一个 图形 元件 命名为 文字 效果如图 4 新建一个 影片剪辑 命名为 闪烁文字 效果如图 3 5 蝴蝶飞 引导动画案例 二 操作步骤 5 布置主场景 1 回到主场景 新建四个图层 从上到下4个图层为 文字 蝴蝶2 闪烁 和 蝴蝶1 2 从 库 中将 星星 元件拖放到 闪烁 图层 使用 任意变形工具 适当调整大小 按住Ctrl键多复制几个 星星 实例 选中该图层的第1帧 按F8键将这些星星转换为 影片剪辑 命名为 闪烁星星 3 回到主场景 在 背景 和 闪烁 图层的第300帧插入扩展帧 接着从 库 中把 蝴蝶飞1 影片剪辑拖放到 蝴蝶1 图层 使用 任意变形工具 调整大小并旋转一定的角度 并在第300帧插入扩展帧 3 5 蝴蝶飞 引导动画案例 二 操作步骤 4 从 库 中把 蝴蝶飞2 拖放到 蝴蝶2 图层的第1帧 并调整其大小和旋转角度 在第150帧插入关键帧 并创建运动补间动画 在 蝴蝶2 图层的上方新建一个 引导层 在引导层上使用 铅笔工具 绘制一条引导线 并设置 蝴蝶2 的引导动画如下图 3 5 蝴蝶飞 引导动画案例 二 操作步骤 5 在 蝴蝶2 图层的第250帧和300帧插入关键帧 并在这两个帧之间创建运动补间动画 在引导层的第151帧插入空白关键帧 在250帧插入关键帧 并在第250帧绘制一条引导线 将 蝴蝶2 图层的第250帧 300帧上的蝴蝶对齐到引导线的首端和末端 制作引导动画 3 5 蝴蝶飞 引导动画案例 二 操作步骤 6 在 文字 图层的第150帧插入关键帧 将 闪烁文字 元件拖到该帧 放在舞台左下方 如图3 97所示 在该图层的200帧插入关键帧 然后将150帧上的文字设为透明 并在两个关键帧之间创建补间动画 最后在300帧插入扩展帧 6 测试影片 保存文件 并导出影片 3 5 蝴蝶飞 引导动画案例 三 技术要点 1 制作引导动画引导层上绘制的是引导路径 这些线条可以是使用钢笔 铅笔 线条 椭圆工具 矩形工具或画笔工具绘制出的 被引导层上可以创建的对象包括 元件实例 文字或群组等 但是不能是分散的矢量图形 2 应用引导路径的技巧 1 引导线要平滑 流畅 2 被引导层上的对象的变形中心一定要位于引导线上 另外 按下 工具箱 中的 贴紧至对象 按钮 可以是对象更容易吸附到引导线上 3 选中 调整到路径 复选框 4 对齐引导线和对象时 选中 贴紧 复选框可以让对象自动捕捉路径 3 5 蝴蝶飞 引导动画案例 四 练习 制作一个小鸟在天空中飞翔的引导动画 3 6 走路的小青蛙 逐帧动画案例 本节内容 1 案例效果2 操作步骤3 技术要点4 练习 3 6 走路的小青蛙 逐帧动画案例 一 案例效果 重点与难点 逐帧动画的制作技巧和卡通人物的绘图技巧 3 6 走路的小青蛙 逐帧动画案例 二 操作步骤 本案例是在第二章中 小青蛙 案例的基础上制作 1 打开素材 青蛙侧面 的Flash工程文件 并把文件另存为 运动的小青蛙 2 制作逐帧动画第一步 建立一个命名为 走路合成 的影片剪辑元件 3 6 走路的小青蛙 逐帧动画案例 二 操作步骤 第二步 打开 库 面板把 头 身体 左手 右手 左脚 右脚 元件拖到 运动合成 元件中 并分布到各个图层以对应的名字命名 第三步 分别检查左右手 头和脚的中心点位置 根据人的基本运动规律来确定各个关节运动的中心点 3 6 走路的小青蛙 逐帧动画案例 二 操作步骤 第四步 画脚的动作 3 6 走路的小青蛙 逐帧动画案例 二 操作步骤 第五步 在对应的帧上依次设置如下相应的动作 3 测试影片 保存文件 并导出影片 3 6 走路的小青蛙 逐帧动画案例 三 技术要点 1 制作逐帧动画的基本步骤 1 选择一关键帧作为逐帧动画的开始帧 2 在开始帧中绘制或导入动画序列中的第1张图片 3 选择下一关键帧 并进行任意修改或导入绘制一张新图片 4 继续添加关键帧并改变相应关键帧的内容直到最终完成动画 5 测试影片并导出一个 swf文件 3 6 走路的小青蛙 逐帧动画案例 三 技术要点 2 逐帧动画的运动规律及时间掌握 1 运动规律研究动画片表现物体的运动规律 首先要弄清时间 空间 张数 速度的概念及彼此之间的相互关系 从而掌握规律 处理好动画片中动作的节奏 2 时间掌握所谓 时间 是指影片中物体 包括生物和非生物 在完成某一动作时所需的时间长度 这一动作所占胶片的长度 片格的多少 这一动作所需的时间长 其所占片格的数量就多 动作所需的时间短 其所占的片格数量就少 3 6 走路的小青蛙 逐帧动画案例 四 练习 利用青蛙为元素制作一组青蛙走路的动画 参考从前言中所提供的网址下载的本章的 练习参考 文件夹中的Flash工程文件 走路参考 3 7 贺卡 综合动画案例 本节内容 1 案例效果2 操作步骤3 技术要点4 练习 3 7 贺卡 综合动画案例 一 案例效果 重点与难点 掌握时间轴特效的使用方法 按钮元件 的建立和使用及实例颜色的调节方法 3 7 贺卡 综合动画案例 二 操作步骤 1 新建文档并命名启动AdobeFlashCS5后 新建一个文档 设置背景色为白色 文档大小为400 250 保存文档 命名为 贺卡 2 设置背景用文本工具设置如右图的背景 3 7 贺卡 综合动画案例 二