网页设计与制作教程 第5章 设计网页动画

网页设计与制作教程 第 1章 网页设计与制作基础 第 5章 设计网页动画 第 1页 本章概述 本章的学习目标 主要内容 网页设计与制作教程 第 1章 网页设计与制作基础 本章概述 在网站开发过程中，经常利用 用 边下载边播放，且具有较强的交互性，用户可以自由控制动画的播放。因此将 章主要介绍制图形和编辑图形的技巧，制作基础动画的方法，动画脚本的基础知识，及交互动画的制作方法等。 第 2页 网页设计与制作教程 第 1章 网页设计与制作基础 本章的学习目标 掌握绘制和编辑图形 了解时间轴的概念 掌握元件和实例的应用 掌握库的使用方法 掌握编辑帧和图层 掌握基础动画的制作方法 掌握交互动画的制作方法 第 3页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 章小结 第 4页 网页设计与制作教程 第 1章 网页设计与制作基础 新建文档 保存文档 打开文档 设置文档的属性 绘制矢量图形 文本和位图的应用 第 5页 网页设计与制作教程 第 1章 网页设计与制作基础 新建文档 保存文档 打开文档 设置文档的属性 设置文本格式 第 6页 网页设计与制作教程 第 1章 网页设计与制作基础 绘制矢量图形 以用来绘制直线、形状和路径及编辑操作。 绘图模式 绘图工具箱与属性面板 绘制基本几何形状 绘制复杂图形 设计图形色彩 编辑图形 第 7页 网页设计与制作教程 第 1章 网页设计与制作基础 文本和位图的应用 文本是动画重要的组成部分，在 态文本和输入文本 3种类型。 创建文本 编辑文本 文本效果的制作 文本滤镜 应用位图 第 8页 网页设计与制作教程 第 1章 网页设计与制作基础 文本和位图的应用 例 5渐变填充效果。 例 5空心字效果。 例 5位图填充效果。 第 9页 网页设计与制作教程 第 1章 网页设计与制作基础 文本和位图的应用 例 5扭曲文字效果。 例 5文本滤镜效果实例 投影字。 例 5文本滤镜效果实例 立体字。 第 10页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 章小结 第 11页 网页设计与制作教程 第 1章 网页设计与制作基础 时间轴与帧 元件、实例和库 基础动画设计 第 12页 网页设计与制作教程 第 1章 网页设计与制作基础 时间轴与帧 认识时间轴 时间轴是动画制作的核心，用于组织和控制一定时间内的图层和帧中的文档内容。时间轴的主要组件是图层、帧和播放头。与胶片一样， 层就像堆叠在一起的多张幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像。 帧类型 关键帧：在动画的制作过程中，角色或者物体运动或变化中的关键动作所处的帧称为关键帧。实心黑色圆圈表示的是关键帧。 普通帧：也称为静态帧，就是不起关键作用的帧。关键帧后面的灰色方块就是普通帧，用于实现关键帧的延续或两个关键帧之间的缓慢过渡。有内容的普通帧是灰色方块；无内容的普通帧是空白方块。 第 13页 网页设计与制作教程 第 1章 网页设计与制作基础 时间轴与帧 编辑帧 选择帧 插入帧 删除帧 清除帧 移动帧 复制帧 关键帧和普通帧的转换 翻转帧 第 14页 网页设计与制作教程 第 1章 网页设计与制作基础 时间轴与帧 编辑图层 图层就像一张张透明的纸，每张纸中放置不同的内容，把这些内容组合在一起即形成完整的画面。可以在图层上绘制和编辑对象，而不会影响其他图层上的对象。上方图层的对象位于下方图层对象之上，在图层上没有内容的舞台区域中，可以透过该图层看到下面的图层。 图层包括普通图层、引导层和遮罩层 3种类型。普通图层具备图层的基本功能和作用；引导层用来帮助其他图层中的对象进行运动定位；遮罩层用来制作一些复杂的动画效果。 第 15页 网页设计与制作教程 第 1章 网页设计与制作基础 元件、实例和库 元件是 常将需要重复出现的图形、动画片段、按钮制作成元件，存放在 “库”面板中。每个元件都有自己的时间轴，可以将帧、关键帧和层添加到元件的时间轴中。 实例是元件在舞台上或者嵌套在另一个元件中的元件副本。将一个元件从 “库”面板中拖动到舞台上就创建了该元件的一个实例。一个元件可以创建多个实例，但一个实例只对应一个元件。编辑元件会更新所有的实例，但对一个实例应用效果不会影响元件。 “库”面板用于存储和组织在 创建的各种元件，其还用于存储和组织导入的文件，包括位图图形、声音文件和视频剪辑。 第 16页 网页设计与制作教程 第 1章 网页设计与制作基础 元件、实例和库 创建和使用元件 将图形转换为元件 创建图形元件 使用影片剪辑元件 新建按钮元件 创建和编辑实例 成功创建元件后，元件被保存在 “库”面板中，将元件从 “库”面板拖放到舞台上就为该元件创建了一个实例。 编辑实例的属性 更改实例的行为 元件的交换 分离实例 第 17页 网页设计与制作教程 第 1章 网页设计与制作基础 元件、实例和库 库 每个 图、声音和视频文件等内容的库，利用库可以很方便地查看和组织这些内容。 库面板 共享库元件 第 18页 网页设计与制作教程 第 1章 网页设计与制作基础 基础动画设计 逐帧动画 逐帧动画是最传统的动画形式，逐帧动画在每一帧中都会更改舞台内容，其最适合于图像在每一帧中都在变化的复杂动画。逐帧动画中每一帧都是关键帧，都是一个单独的画面，整个动画过程都是通过这些关键帧连续变换而形成的。 逐帧动画的创建方法有两种：一种是将每个帧都定义为关键帧，然后为每个帧创建不同的内容；另一种是通过导入图像序列来创建动画。 第 19页 网页设计与制作教程 第 1章 网页设计与制作基础 基础动画设计 例 5制作逐帧动画“倒计时”。 第 20页 网页设计与制作教程 第 1章 网页设计与制作基础 基础动画设计 补间动画 补间动画是通过为不同帧的对象属性指定不同的值而创建的动画。该类型的动画制作中有如下 3个需要解释的概念。 补间范围：是时间轴中的一组帧，其中的某个对象具有一个或多个随时间变化的属性。补间范围在时间轴中显示为具有蓝色背景的单个图层中的一组帧。 目标对象：在每个补间范围中，只能对舞台上的一个对象进行动画处理。此对象称为补间范围的目标对象。 属性关键帧：是在补间范围中为补间目标对象显式定义一个或多个属性值的帧。这些属性可能包括位置、 明度 )、色调等。 第 21页 网页设计与制作教程 第 1章 网页设计与制作基础 基础动画设计 创建补间动画 例 5制作补间动画“弹跳的小球”。 创建补间形状动画 例 5创建补间形状动画。 第 22页 网页设计与制作教程 第 1章 网页设计与制作基础 基础动画设计 例 5数字变形实例。 创建传统补间动画 例 5创建传统补间动画。 第 23页 网页设计与制作教程 第 1章 网页设计与制作基础 基础动画设计 图层动画 引导层动画 引导层是一种特殊的图层，在此图层中绘制的内容具有辅助设计的功能，且不会在发布的动画中显示。引导层包括普通引导层和运动引导层。普通引导层起辅助静态对象定位的作用，运动引导层用来绘制对象的运动轨迹。 遮罩层动画 遮罩层是一种特殊的图层，当某一图层创建为遮罩层后，其相邻下面的图层自动转换为被遮罩层。遮罩层内一般绘制一些简单的图形、文字或渐变图形等，这些对象将变为透明区域，被遮罩层中的元素遮住的部分显示出来，没有被遮住的部分无法显示。 第 24页 网页设计与制作教程 第 1章 网页设计与制作基础 基础动画设计 例 5普通引导层应用实例。 例 5制作运动引导层动画“飞机”。 第 25页 网页设计与制作教程 第 1章 网页设计与制作基础 基础动画设计 例 5制作简单遮罩效果。 例 5遮罩层动画实例 1。 例 5遮罩层动画实例 2。 第 26页 网页设计与制作教程 第 1章 网页设计与制作基础 可以使声音独立于时间轴连续播放，或使用时间轴将动画与音轨保持同步。向按钮添加声音可以使按钮具有更强的互动性，通过声音淡入淡出还可以使动画更加优美。 导入声音 编辑声音 在 “属性”面板中编辑 利用声音编辑控件 同步选项 压缩声音 第 27页 网页设计与制作教程 第 1章 网页设计与制作基础 例 5音乐按钮的制作。 第 28页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 章小结 第 29页 网页设计与制作教程 第 1章 网页设计与制作基础 动画脚本基础 播放和停止动画 按钮事件 第 30页 网页设计与制作教程 第 1章 网页设计与制作基础 动画脚本基础 针对 在 据处理以及其他许多功能。 含多个 满足各类开发人员和回放硬件的需要。 动作面板： 行 “窗口” |“动作”命令或者按 处理对象 个对象都是由类定义的。事实上，在 设已定义一个影片剪辑元件 (假设它是一幅矩形的图画 )，并且已将它的一个副本放在舞台上。从严格意义上来说，该影片剪辑元件也是 第 31页 网页设计与制作教程 第 1章 网页设计与制作基础 动画脚本基础 例 5制作鼠标经过时物体变大的效果。 第 32页 网页设计与制作教程 第 1章 网页设计与制作基础 播放和停止动画 常用的时间轴控制命令 第 33页 网页设计与制作教程 第 1章 网页设计与制作基础 播放和停止动画 例 5制作播放和停止动画。 第 34页 网页设计与制作教程 第 1章 网页设计与制作基础 按钮事件 在 何对象都可以通过监听器的设置来监控对于对象的鼠标操作，与鼠标相关的操作事件都属于 对象发生单击鼠标的动作时。 对象发生双击鼠标的动作时。 对象发生按鼠标的动作时。 鼠标指针在对象范围内移动时。 鼠标指针移开对象的范围时。 鼠标指针移入对象的范围时。 对象发生放开鼠标的动作时。 对象发生鼠标滚轮滚动的动作时。 第 35页 网页设计与制