Flash动画实例教程.ppt

FlashCS4动画制作实例教程 2 第1章FlashCS4入门 本章主要内容 Flash动画的特点和应用 FlashCS4的工作界面 FlashCS4界面的设置 基本文件的操作 2 第1章FlashCS4入门 1 1认识FlashCS4 1 1 1Flash动画的特点 Flash的主要特点如下 Flash使用了矢量图形和流式播放技术 可以随意调整缩放 而不会影响图形文件的大小和质量 通过使用关键帧和元件 使所生成的 swf 格式的动画文件非常小 便于在网络上播放和传播 Flash制作的动画 能够交互式地将音乐 动画 声效等融合在一起 很多用户已经把Flash当做一个开发多媒体的首选工具 Flash拥有功能强大的ActionScript语言 它采用了与JavaScript类似的语法结构 拥有自己的ActionScript函数 属性和目标对象等 并且兼容并支持Flash低版本 1 1 2Flash动画的应用 1 制作动画短片 2 第1章FlashCS4入门 2 制作游戏3 制作MTV4 制作多媒体教学课件5 制作Internet应用程序6 制作网页 1 2FlashCS4的工作界面 如右图1 1所示 菜单栏 标题栏 布局模式 舞台 属性面板 绘图工具箱 时间轴 图层 动画编辑器窗口 1 2 1标题栏 1 2 2菜单栏 1 2 3主工具栏 1 2 4绘图工具箱 图1 1 2 第1章FlashCS4入门 单击 小三角 可以展开下一级菜单进行选择 1 2 4绘图工具箱 图1 2 绘图工具箱如右图1 2所示 它包含了10多种绘图工具 用户可以使用这些工具对图像或选定区进行操作 单击绘图工具箱右上角的按钮 可以将工具箱折叠为图标 若要展开面板可单击按钮或图标 另外 可以把面板缩放成单列或多列 2 2 第1章FlashCS4入门 1 2 5时间轴 时间轴面板如右图所示 它的主要组件是层 帧和播放头 还包括一些信息指示器 如图1 3所示 层 帧 播放头 信息指示器 1 2 6场景与舞台 在当前编辑的动画窗口中 我们把动画内容编辑的整个区域叫做场景 舞台就是绘制和编辑动画内容的矩形区域 具体如图1 4所示 图1 3 第1章FlashCS4入门 场景名称 舞台 工作区 舞台比例 图1 4场景和舞台 2 第1章FlashCS4入门 1 3FlashCS4界面的设置 1 3 1动画属性的设置 按照下列步骤设置动画属性 第1步 打开 属性 面板 它会显示整个动画的属性 第2步 点击 550 400像素 右侧的 编辑 按钮 弹出 文档属性 对话框 第3步 在 帧频 框键入正确的放映速度 即帧每秒 默认值24 即动画的每一秒要显示24帧画面 第4步 在 尺寸 框中 输入电影的宽度和高度值 最小为18像素 最大为2880像素 第5步 点击 背景颜色 右侧的色框 在弹出的颜色面板里用户可以选择动画背景的颜色 第6步 单击 确定 2 第1章FlashCS4入门 1 3 2时间轴线的设置 1 3 3工具栏 工具面板的设置 工具栏 工具面板以及工作区等都可以在屏幕上任意拖动 用户可以将其拖放到最适合自己操作的位置 1 4基本文件的操作 1 4 1创建新文档 1 4 2Flash文档的操作 2 实训1 设计一个小球从上向下运动的动画 实训2 设计一个小球由大渐小的动画 第1章FlashCS4入门 提示 先用椭圆工具绘一个小球 然后在第1关键帧把小球位置放在舞台上方 在第30关键帧把小球位置放在舞台下方 最后在第1帧至30帧之间创建补间形状动画 提示 用椭圆工具绘一个小球 用变形工具将第30关键帧的小球缩小 在第1帧至30帧之间创建补间形状动画 2 第2章工具的使用 本章主要内容 矢量图和位图 线条和填充图形 FlashCS4常用工具的功能及其使用 2 任务一 制作一张 几何形体图 效果如图2 1所示 任务二 制作一张 荷花图 效果如图2 2所示 第2章工具的使用 图2 1 图2 2 2 任务三 制作一张 春天美景图 效果如图2 3所示 第2章工具的使用 图2 3 2 问题与思考 第2章工具的使用 FlashCS4的工具箱中的各种工具如何使用 如何绘制图形 如何编辑图形 2 第2章工具的使用 2 2 1矢量图和位图 矢量图形使用称作矢量的直线和曲线描述图像 矢量也包括颜色和位置属性 矢量图形与分辨率无关 它适合于线性图 特别是二维卡通动画 能够有效地减少文件容量 位图图形使用称作像素的排列在网格内的彩色点来描述图像 在编辑位图图形时 修改的是像素 而不是直线和曲线 位图图形跟分辨率有关 位图适合表现层次和色彩细腻丰富 包含大量细节的图像 2 2 2线条和填充图形 线条 是指用线条工具 钢笔工具 铅笔工具绘制的图形以及由椭圆工具 矩形工具绘制的边框线 调整线条的粗细可以使用属性面板中的 笔触 数值的大小来改变 改变线条颜色可以使用墨水瓶工具 填充图形 是指用刷子工具绘制的图形 或者是由椭圆工具 矩形工具绘制的图形的填充部分 填充图形的颜色不能通过墨水瓶工具来改变 只能使用颜料桶工具来调整 2 第2章工具的使用 2 2 3工具介绍 图2 4绘图工具箱 2 实训1 制作 几何图形 实训2 制作 乡间美景图 效果如图2 5所示 要求 绘制正方形 矩形 多边形 圆 五角星等几何图表 并自定颜色填充 第2章工具的使用 图2 5 2 要求 用3D工具制作由6张大小相同但内容不同的图片构成的正方体图形 第2章工具的使用 实训4 制作 正方体图 实训3 设计制作 卡通人物图 效果如图2 6所示 图2 6 2 第3章文本处理 本章主要内容 文本的类型及属性的设置 文本的输入及编辑 文字效果和静态动画的制作 2 任务一 制作 渐变色的文字 的动画 效果如图3 1所示 任务二 制作 金属文字 的动画 效果如图3 2所示 第3章文本处理 图3 1 图3 2 2 任务三 制作一幅 霓虹广告 的动画 效果如图3 3所示 第3章文本处理 图3 3第1帧和第5帧的效果图 2 问题与思考 第3章文本处理 文本有哪些类型 文字转化为矢量图形的方法是什么 如何制作文字效果 静态动画如何制作 2 2 第3章文本处理 3 2 1文本及其类型 在FlashCS4中 文本类型可分为3种 静态文本 动态文本和输入文本 三种类型的切换方法是在文本工具属性面板的第一个下拉列表框中选择 一般情况下默认的文本是静态文本 在动画播放过程中 静态文本区域中的文字是不可编辑和改变的 但是可以对静态文本块进行缩放 旋转或者扭曲 可以为他们指定不同的颜色和透明度效果 动态文本就是可编辑的文本 在动画播放过程中 文本区域的文字可通过事件的激发来改变 输入文本就是在动画播放过程中 提供我们输入文本 产生交互 它允许用户在空的文本区域中输入文字 用于填充表格 回答调查的问题或者输入密码等 3 2 2设置文本属性 3 2 3设置段落属性 1 设置段落的对齐方式2 设置边距和间距 第3章文本处理 3 2 4文本的输入 分为水平方向输入和垂直方向输入两种 3 2 5文本的编辑 1 转换文本类型2 分散文字 分散文字就是将文字转换为矢量图形 具体操作是使用 修改 分离 命令 3 填充文字 注意 一旦把字符转换成线条和填充以后 就不能把它们作为文本来编辑 即使重新组合字符或者把它们转换成符号 也不能再应用字体 字距或是段落选项 2 实训1 制作 数学公式 效果如图3 4所示 实训2 制作 空心字 效果如图3 5所示 第3章文本处理 图3 4 实训3 设计制作 霓虹灯广告 图3 5 2 第4章元件和库 本章主要内容 元件的类型 元件的创建和编辑 实例的编辑 库的使用 元件的制作 2 任务一 制作 渐变色的文字 的动画 效果如图3 1所示 任务二 制作 金属文字 的动画 效果如图3 2所示 第4章元件和库 图3 1 图3 2 2 任务一 如何创建图形元件 第4章元件和库 图4 1 要求 创建一图形元件 效果如图4 1所示 任务二 如何创建图形元件 要求 创建一 动态按钮 元件 设置四个关键帧中按钮颜色属性变化 鼠标在 动态按钮 上 按下 弹起 等不同状态会出现不同的效果 如图4 2所示 图4 2 鼠标按下 和 鼠标弹起 时按钮状态 2 第4章元件和库 图4 3 任务三 如何创建影片剪辑元件 要求 创建一影片剪辑元件 组成四个正方形在舞台上旋转的动画 如图4 3所示 2 问题与思考 第4章元件和库 元件的类型有哪些 如何制作元件 如何使用元件 元件库如何使用 2 第4章元件和库 4 2 1在动画中使用元件的优点 1 可以简化动画的制作过程2 减小文件大小3 方便网络传输 4 2 2元件的类型 元件主要有图形 影片剪辑和按钮3种类型 不同类型的元件有着不同的作用 4 2 3元件的创建 1 创建新元件2 将舞台元素转换为元件 2 第4章元件和库 4 2 4编辑元件 1 编辑元件的方法2 元件的编辑 4 2 5创建与编辑实例 1 将元件的实例添加至舞台2 编辑实例 4 2 6库和公用库 1 定义公用库2 使用公用库 2 实训1 制作 环环相扣图形元件 效果如图4 4所示 实训2 制作 变色按钮 效果如图4 5所示 第4章元件和库 图4 4 实训3 制作 一小球从大变小的影片剪辑元件 图4 5 弹起 时效果 鼠标经过 时效果 按下 时效果 要求 将实训1至实训3所制作的元件从库中拖放到舞台上 将实训3转换为图形元件 实训4 实例的编辑 2 第5章逐帧动画 动画的原理 帧的概念 分类和基本操作 逐帧动画的创建 本章主要内容 2 第5章逐帧动画 任务一 制作 奔跑的豹子 动画 要求 制作一只豹子奔跑运动 设计效果如下图5 1所示 图5 1 2 第5章逐帧动画 任务二 制作 倒计时效果 动画 要求 制作在一个红色圆角矩形背景下显示 5 4 3 1 GO 的倒计时动画效果 设计效果如下图5 2所示 图5 2 2 第5章逐帧动画 要求 制作花盆中的花儿逐渐成长 并生成一朵花的动画效果 设计效果如下图5 3所示 任务三 制作 花逐渐成长的过程 动画 图5 3 2 第5章逐帧动画 动画的基本原理是什么 如何创建逐帧动画 什么叫帧 帧分为几种类型 如何操作帧 问题与思考 2 第5章逐帧动画 5 2 1动画基本原理 动画就是通过连续播放一系列画面 给视觉造成连续变化的图画 它的基本原理与电影 电视一样 都是视觉原理 动画不是 会动的画 而是 画出来的运动 5 2 2帧的显示形式及操作 1 帧的概念 构成动画的每一个画面叫做一个帧 2 帧的分类 空白帧 关键帧和空白关键帧 3 帧的操作 包括添加帧 删除帧 清除关键帧 选择所有帧 复制帧 粘贴帧 移动帧和翻转帧 5 2 3逐帧动画知识介绍 创建逐帧动画的典型方法主要有以下几种 从外部导入素材生成逐帧动画 如导入静态的图片和序列图像等 使用数字或者文字制作逐帧动画 如实现文字跳跃或旋转等特效动画 绘制矢量逐帧动画 应用各种设计工具在场景中绘制矢量逐帧动画 2 第5章逐帧动画 实训1 制作 手指计数 动画 如图5 4所示 实训2 制作 毛笔写字 动画 如图5 5所示 图5 4 图5 5 2 第5章逐帧动画 实训3 制作 变脸 动画 如图5 6所示 实训4 制作 卡通人走路 动画 提示 用绘制工具绘制卡通人物走路的图形元件 在各关键帧中 直接修改人物走路的图形元件 使不同时刻的走路姿势不一样 从而创建逐帧动画 图5 6 2 第6章补间形状动画 创建补间形状动画需要的条件 如何创建补间形状动画 补间形状动画的属性设置 形状提示符的使用 图层的基本操作 本章主要内容 2 任务一 制作 矩形变心形 1 动画 效果如图6 1所示 图6 1 要求 矩形有规律地变化成心形 效果如图6 2所示 任务二 制作 矩形变心形 2 动画 图6 2 第6章补间形状动画 2 任务三 制作 文字变形 动画 要求 制作一个英文字母 A 变化成字母 B 的动画 效果如图6 3所示 图6 3 要求 先由一个树桩渐渐生长成一棵树 然后在树枝上桃花朵朵绽放 效果如图6 4所示 任务四 制作 桃花朵朵开 动画 图6 4 第6章补间形状动画 2 如何创建补间形状动画 创建补间形状动画有什么条件 如何控制补间形状变化 图层的作用是什么 如何创建和编辑图层 问题与思考 第6章补间形状动画 2 6 2 1补间形状动画 第6章补间形状动画 1 创建补间形状动画需要的条件 补间形状动画可以实现两个图形之间颜色 形状 大小和位置的过渡 创建补间形状动画需要一定的条件 在一个补间形状动画中至少要有两个关键帧 这两个关键帧中的对象必须是可编辑的矢量图形对象 一次补间一个形状通常可以获得最佳效果 如果一次补间多个形状 则所有的形状必须在同一个层上 如果要使用群组对象 图符引例对象或位图图像创建形状补间动画 需要先将其分离成矢量图形 这两个关键帧中的图形必须有一些变化 否则制作的动画将没有动的效果 2 创建补间形状动画 创建补间形状动画有两种方法 一是通过右键菜单创建补间形状动画 二是使用菜单命令创建补间形状动画 2 第6章补间形状动画 3 删除补间形状动画 4 补间形状动画属性设置 设置运动速度 设置动画中间形状效果 5 形状提示 首先选择已经创建补间形状动画两个关键帧之间的任意一帧 然后打开帧 属性 面板 如右图6 5所示 在制作补间形状动画后 加入形状提示可控制更加复杂的形状变化 图6 5 2 第6章补间形状动画 6 2 2图层 1 图层面板 如下图6 6所示 2 图层的基本操作 图层图标 可编辑图层图标 隐藏 显示图层 锁定图标 显示所有图层的轮廓 删除图层 新建图层 新建图层文件夹 图6 6 2 实训1 制作 矩形变圆形 动画 实训2 制作 文字变化 动画 第6章补间形状动画 提示 制作数字 2 向数字 3 的形状补间动画前要把文字分离 创建补间动画后需加入形状提示控制形变 如下图6 7所示 图6 7 2 实训3 制作 图形变文字 动画 实训4 制作 文字变图形 动画 要求 一个 心 字逐渐地变成了心形 然后又变化为两个心形的动画 效果如下图6 9所示 第6章补间形状动画 要求 四颗五角星从礼盒中旋转而出 随即转变为 节日快乐 四个字的动画 如下图6 8所示 图6 8 图6 9 2 第7章传统补间动画 创建传统补间动画需要的条件 传统补间动画的创建 传统补间动画的属性设置 场景的使用 本章主要内容 2 任务一 制作 小球碰撞 动画 效果如图7 1所示 图7 1 任务二 制作 旋转的风车 动画 效果如图7 2所示 图7 2 第7章传统补间动画 要求 制作一幅动画 一个红色小球垂直下落时碰到地面上的绿色小球 红球弹起 绿球向远处滚去并慢慢消失 效果如图7 1所示 任务三 制作 多场景动画 要求 按片头 动画 片尾3个场景的顺序播放动画内容 2 问题与思考 第7章传统补间动画 传统补间动画与补间形状动画有什么区别 创建传统补间动画 应满足什么条件 多场景动画如何制作 2 第7章传统补间动画 7 2 1传统补间动画 1 创建传统补间动画条件 在两个关键帧中 只能有一个元件的实例或群组物体 文字 必须作用在相同的对象上才能创造出移动和缩放的效果 动画的两个关键帧画面不能有矢量图形存在 2 创建传统补间动画方法 创建传统补间动画也有两种方法 一种是通过右键快捷菜单 一种通过菜单命令 3 删除传统补间动画 4 传统补间动画的属性设置 1 缓动 通过 缓动 选项右边输入一个数值来调整变化速率 从而创建更为自然的由先慢后快或先快后慢的减速效果 2 旋转 用于设置对象旋转的动画 2 第7章传统补间动画 3 贴紧 勾选该项 可以将对象贴紧到引导线上 4 同步 勾选项该项 可以使图形元件实例的动画和主时间同步 5 调整到路径 制作运动引导线动画时 勾选该项 可以使动画对象沿着路径运动 6 缩放 勾选项该项 用于改变对象的大小 7 2 2场景 1 场景的使用 执行 窗口 其他面板 场景 命令 则会调出 场景 面板 使用场景的好处和模块化设计的优势一样 便于分工协作 便于修改 2 场景的添加和切换 3 场景的命名 4 场景的删除及复制 2 实训1 制作 矩形变圆形 动画 实训2 制作 旋转的指针 动画 第7章传统补间动画 要求 通过改变对象位置 颜色 和 Alpha 值 创建传统补间动画的方法 提示 先创建 指针 图形元件 并把它的变形中心调整到指针下端 然后通过改变 变形 面板中的 旋转 值创建传统补间动画 实训3 制作 图片翻转 动画 效果如下图7 3所示 图7 3 2 实训4 制作 卡通火车在行驶 动画 效果如下图7 4所示 第7章传统补间动画 提示 先分层绘制 田野 和 铁轨 背景 火车 元件 再通过改变火车位置 创建 火车 的补间动画 实训5 制作一个多场景动画 图7 4 2 第8章补间动画 补间动画 中常见的基本概念 补间动画 的创建 自定义动画预设操作 动画编辑器的使用 本章主要内容 2 任务一 制作 滚动的小球 动画 效果如图8 1所示 图8 2 任务二 制作 冲浪小子 动画 效果如图8 2所示 图8 1 第8章补间动画 要求 小球自下往上运动时 速度由快到慢 而当小球从上往下运动时 速度由慢到快 要求 冲浪员沿着事先设计好的运动路线运动 冲浪 然后慢慢地消失 2 任务三 制作 家具 动画广告 效果如图8 3所示 图8 3 第8章补间动画 要求 在一片清爽的绿色背景图中 显示着 绿色设计绿色环保 文字 沙发由左向右带有运动模糊进入舞台 相应的说明文字由小到大在显示的动画效果 2 问题与思考 第8章补间动画 如何创建补间动画 可补间的对象的属性包括哪些 如何应用动画预设 传统补间动画与补间动画有什么区别 如何使用动画编辑器 2 第8章补间动画 8 2 1补间动画 1 基本概念 1 补间 补间是通过为一个帧中的对象属性指定一个值并为另一个帧中的相同属性指定另一个值创建的动画 2 补间范围 补间范围是时间轴中的一组帧 其舞台上的对象的一个或多个属性可以随着时间而改变 补间范围在时间轴中显示为具有浅蓝色背景的单个图层中的一组帧 3 目标对象 在每个补间范围中 只能对舞台上的一个对象进行动画处理 此对象称为补间范围的目标对象 4 关键帧和属性关键帧 FlashCS4中 关键帧 是指时间轴中其元件实例首次出现在舞台上的帧 属性关键帧 是指在补间范围中为补间目标对象显式定义一个或多个属性值的帧 5 运动路径 如果补间对象在补间过程中更改其舞台位置 则补间范围具有与之关联的运动路径 2 第8章补间动画 2 创建补间动画 创建补间动画与创建传统补间动画的方法一样 创建补间动画后的 时间轴 面板如所示 图8 4 8 2 2使用动画编辑器调整补间动画 在FlashCS4中通过动画编辑器可以查看所有补间属性和属性关键帧 从而对补间动画进行全面细致控制 在 时间轴 面板中选择已经创建的补间范围 或者选择舞台中已经创建补间动画的对象后 然后单击菜单栏中的 窗口 动画编辑器 命令 可以弹出一个如图8 5所示的 动画编辑器 面板 2 第8章补间动画 图8 5 动画编辑器 面板 2 单击菜单栏中的 窗口 动画预设 命令 可将该面板展开 如图8 6所示 第8章补间动画 图8 6 8 2 3动画预设 1 动画预设 窗口的打开 预览窗口 预设区列表 将选区中另存为预设 2 应用动画预设 应用动画预设的具体步骤如下 第1步 在舞台上选择需要添加动画预设的对象 第2步 在动画预设面板的预设列表中选择需要应用的预设 Flash随附的每个动画预设都包括预览 通过在上方的 预览窗口 中进行动画的显示预览 第3步 选择合适的动画预设后 单击动画预设面板中的 应用 按钮 就可以将选择预设应用到舞台选择的对象中 2 第8章补间动画 3 将补间另存为自定义动画预设 将补间另存为自定义动画预设的操作可以通过 动画预设 面板下方的 将选区另存为预设 按钮完成 4 创建自定义预设的预览 创建自定义预设的预览 具体步骤如下 第1步 创建补间动画 并将其另存为自定义预设 第2步 然后创建一个只包含补间动画的FLA文件 注意使用与自定义预设完全相同的名称将其保存为FLA文件 并通过 发布 命令将FLA文件创建SWF文件 第3步 将刚才创建的SWF格式文件放置在已保存的自定义动画预设XML文件所在目录中 如果用户使用的是windows系统 那么就可以放置在如下目录中 DocumentsandSettings LocalSettings ApplicationData Adobe FlashCS4 Configuration motionPresets 中 2 实训1 制作 小球弹跳 动画 实训2 设计制作一个广告动画 提示 通过改变小球位置从而添加属性关键帧 再编辑补间路径 使小球的弹跳具有真实性 提示 从网络中寻找相关广告的背景图并导入舞台 输入广告词 分层管理 创建补间动画后 在 动画编辑器 面板中编辑动画 实训3 设计制作骨骼动画 第8章补间动画 提示 通过上网查找骨骼动画 反向运动动画 的资料 了解骨骼动画的制作方法 根据资料介绍 自己设计制作一个骨骼动画 2 第9章遮罩层动画 本章主要内容 遮罩图层的作用 遮罩图层的创建 遮罩层动画的制作 2 任务一 制作 聚光灯效果 动画 效果如图9 1所示 图9 2 任务二 制作 颜色变化的圆环 动画 效果如图9 2所示 第9章遮罩层动画 要求 聚光灯左右不断移动形成的聚光效果 图9 1 任务三 制作 镜头划变转换 动画 效果如右图9 3所示 图9 3 2 问题与思考 第9章遮罩层动画 遮罩图层有什么作用 如何创建遮罩图层 如何制作遮罩层动画 2 第9章遮罩层动画 9 2 1遮罩图层的作用 遮罩层中有动画对象存在的地方 都产生一个孔 使其链接的被遮罩层相应区域中的对象显示出来 9 2 2创建遮罩图层 1 利用快捷菜单创建遮罩图层 2 在 图层属性 对话框中进行设置 9 2 3取消遮罩图层 9 2 4构成遮罩和被遮罩的元素 遮罩层中的图形对象在播放时是看不到的 遮罩层中的内容可以是按钮 影片剪辑 图形 位图 文字等 但不能使用线条 如果一定要用线条 可以将线条转化为 填充 9 2 5遮罩层中可以使用的动画形式 2 第9章遮罩层动画 9 2 3取消遮罩图层 9 2 4构成遮罩和被遮罩的元素 遮罩层中的图形对象在播放时是看不到的 遮罩层中的内容可以是按钮 影片剪辑 图形 位图 文字等 但不能使用线条 如果一定要用线条 可以将线条转化为 填充 9 2 5遮罩层中可以使用的动画形式 取消图层的遮罩属性有下面两种方法 1 在时间轴的遮罩层单击鼠标右键 从弹出的快捷菜单中选择 遮罩层 选项 当 遮罩层 前没有了 符号 就取消了遮罩属性 2 选择某个图层 选择 修改 时间轴 图层属性 命令 打开 图层属性 对话框 在 类型 中选择 一般 就取消了遮罩属性 可以在遮罩层 被遮罩层中分别或同时使用补间形状动画 传统补间动画 引导层动画等动画手段 从而使遮罩动画变成一个可以施展无限想象力的创作空间 2 实训1 制作 电影谢幕 动画 实训2 制作 水波纹效果 动画 要求 字幕在升入过程中逐渐显示 在升出过程中逐渐消失 效