网页设计实用教程第13章使用Flash制作网页动画.ppt

第13章使用Flash制作网页动画 制作人 曾俊国 重点和难点 掌握FlashCS4基础知识 了解FlashCS4的主菜单 工具栏 工具箱 掌握制作动画的基本步骤和方法 掌握元件和库元件的概念及其运用技巧 在动画中灵活运用声音 13 1FlashCS4基础 13 1 1 Flash概述 1 Stage 舞台 2 Timeline 时间轴 3 Frame 帧 4 KeyFrame 关键帧 5 Scene 场景 6 Layer 图层 7 Symbol 符号 在学习使用Flash制作动画之前 有必要先了解其相关基本概念 13 1 2 FlashCS4概述 FlashCS4是Adobe公司于2008年8月推出的网页动画设计软件 FlashCS4作为最新的Flash版本 在其早期版本的基础上新增了许多功能 运用FlashCS4能制作出更加绚丽 交互性更强的动画效果 下面简单介绍一下FlashCS4新增的一些特点及功能 1 新颖独特及友好的界面风格2 FlashCS4的新功能3 其他扩展组件 图 开始菜单中与FlashCS4配套的8个组件 13 1 3 使用Flash制作动画的过程 Flash动画的制作需要经过很多环节的处理 每个环节都相当重要 如果处理或制作不好 会直接影响到动画的效果 下面介绍制作动画的步骤 只有对创作动画的流程有一个清楚的了解 用户才能灵活熟练地制作动画 一般来说 Flash动画制作的过程可分为六步 1 首先应确定动画剧本及分镜头脚本 2 设计不同的动画人物形象 一般由具有一定美术功底的动画设计人员设计 3 绘制 编排出分镜头画面脚本 4 动画绘制人员进行具体的动画绘制 5 将相关动画导入到flash中 进行后期制作 6 剪辑配音 13 2 1 绘制基本图形 13 2案例剖析 制作一张圣诞贺卡 内容再丰富生动的动画也是由若干个基本图形组合而成的 设计动画时 首先要规划一下本贺卡的大致模型 确定动画剧本内容 并分析涉及到哪些基本的图形 本贺卡主要有跳动的红心图案和一棵圣诞树组成 涉及到的基本图形有圆 三角形 矩形等 13 2 2 编辑图形对象 1 在 工具栏 中单击 选择 工具按钮 然后移动鼠标 框选两个圆 按住组合键 Ctrl B 将圆做打散操作 接下来选择中间相交的两段圆弧 按 Delete 键将其删除得到红心圆的大致轮廓 2 在 工具箱 中单击 部分选取 工具按钮 然后用鼠标单击图像 则图形将显示多个锚点 选择下侧中心的锚点 并向下拖动 然后选择其相邻的左锚点并按 delete 键 按同样的方法删除其相邻的右锚点 得到了一个红心的雏形 3 在 工具箱 中选择 颜料桶 工具 按 Shift F9 组合键打开 颜色 面板 将 类型 设置为 Radial 放射状 在颜色条中设置两个颜色块 4 用鼠标单击颜色面板上的 颜料桶 按钮 在弹出颜料面板中选择面板底部处的红色渐进颜色 然后用鼠标左键单击 心 图中央 即可看到红色的 心 图了 13 2 3 输入文字 在FlashCS4中创建文本 在 工具箱 中选择 文本 工具 按 Ctrl F3 组合键打开 属性 面板 在属性面板中可对文本样式进行个性化设置 如设置文本类型 字体 字号 字体颜色等 13 2 4 逐帧动画 逐帧动画是一种常见的动画形式 其原理是在连续的关键帧中绘制不同的动画动作 然后连续播放形成动画 该方法主要用于创建不规则的运动动画 它的每一帧都是关键帧 可通过逐帧动画的形式让圣诞贺卡上的 红心 跳动起来 13 2 5 形状补间动画 所谓形状补间动画 就是由一个对象变成另一个对象 而该过程只需要用户提供两个分别包含有变形前和变形后对象的关键帧 中间过程由Flash自动完成 在本典型案例中 可通过形状补间的动画方式 在圣诞贺卡中添加夜空中的 繁星 闪烁的效果 13 2 6 动作补间动画 动作补间动画与形状补间动画类似 二者主要不同的是 前者构成的动画元素是元件 而后者则是图形 至于什么是元件 将在下一节中介绍 在本实例中将利用动作补间动画的原理 在圣诞卡中添加一张不断变化的笑脸 在FlashCS4中遮罩就是通过遮罩图层中的图形或者文字等对象 透出下面图层中的内容 打个比方 遮罩层就像一张纸 在这张纸上挖一个洞 当洞下面的物体经过洞口时 就产生了一个小动画 13 2 7 引导动画 将一个或多个层连接到一个运动引导层 使一个或多个对象沿同一条路径运动的动画形式称为 引导动画 这种动画可以使一个或多个元件完成曲线或不规则运动 这里的引导层是用来指示路径的 所以 引导层 中的内容可以是钢笔 铅笔 线条 椭圆 矩形或画笔工具等绘制出的线段 而被引导层中的对象是跟着引导线走的 可以使用影片剪辑 图形元件 按钮和文字等 但不能使用形状 13 3Flash中多媒体元素的使用 在上一节所举的实例中反复用到了元件 可见元件在FlashCS4的应用中非常广泛 也是非常重要的 通过元件的制作并存入到 库 面板中 从而起到重复使用的作用 以提高动画制作的效率 根据元件的作用不同 可将其分为图形元件 影片剪辑元件和按钮元件 FlashCS4除了制作动画外 对声音和视频的支持也相当出色 FlashCS4能提供多种使用声音的方法 还支持多种视频格式 能制作出令人满意的作品 13 3 1 创建库元件 1 新建库元件2 导入库元件 13 3 2 创建库元件 按钮 是Flash的基本元件之一 它具有多种形态 并且会响应鼠标事件 执行指定的动作 是实现动画交互效果的关键对象 1 按钮元件的组成2 制作按钮元件的过程 13 3 3 在动画中使用声音 在FlashCS4中可以导入多种格式的声音文件 其导入的方法与导入图形图像类似 所导入的声音文件与位图 元件等一同保存在 库 面板中 13 3 4 使用视频 在FlashCS4中 用户可导入视频剪辑到动画中 此时所选视频文件将成为动画文档的元件 而插入到文档中的内容则成为了该元件的实例 与FlashCS3相比 CS4导入视频文件的步骤更为简单 操作非常方便 13 4习题 一 选择题1 FlashCS4是哪家公司最新开发的动画设计软件 A 微软公司B Adobe公司C Macromedia公司2 在工具箱中 下面的哪一工具不属于线条工具 A 钢笔 工具B 铅笔 工具C 刷子 工具3 要对图形进行从中心向四周的填充 应选择哪种类型的填充 A 线性B 放射状C 位图4 在Flash的时间轴面板中 创建关键帧的快捷键是 A F1B F5C F3D F65 一般默认的动画速度是 A 12fpsB 24fpsC 30fps 二 简答1 在FlashCS4中有哪几种元件类型 2 在Flash文档中 元件库的作用是什么 3 在FlashCS4中 图层可以分为哪几种 它们各自的作用是什么 4 将图形转换为元件的目的是什么 这样做有哪些优点 5 按钮元件有哪四种状态 三 上机实践1 制作一个由字母 S 变为字母 A 的形状补间动画 2 制作一个在舞台中间向上向下拉开的遮罩动画 3 制作一文字闪烁效果 要求文字的边缘颜色不断变化 以形成闪光效果 提示在对文字进行处理前要将其打散 然后才能对文字颜色进行处理