新网页设计与制作实用教程 雷运发 电子教案 第9章.pptVIP

 第九章 创建网页动画 本章学习目标 掌握动画的基本原理和网页动画类型 熟悉Flash MX 2004软件界面和基本操作 掌握用Flash MX 2004软件制作网页动画 的一般方法 掌握制作运动、形状、遮罩、曲线动画 的一般方法 了解ImageReady和Swith软件 1. 动画的基本原理 利用视觉暂留原理，连续播放一系列静止的画面，给人造成连续变化的效果。 2. 网页动画 常见的网页动画格式 Java格式 GIF89a格式 SWF格式 网页动画设计考虑因素 带宽 下载时间 流式传输 动画格式 3. 创建GIF动画 A：设置帧延迟。单位为秒，默认值为0秒。 B：设置动画播放的次数。 C：单击将第一帧设置为当前帧。 D：单击将当前帧的上一帧设为当前帧。 E：播放/停止动画按钮。 3.2 制作gif动画 启动ImageReady，新建一动画文件 在背景图层的左右图层之间插入一“邮件”图层。 设计动画 第一帧：隐藏“邮件”图层。 第二帧：点击“复制当前帧”按钮，使“邮件”图层可见，并调整其位置。 第三帧 / 第四帧 / 第五帧： 方法同前，调整“邮件”图层的位置 设置五帧的延迟时间均为0.2秒 执行【文件】→【将优化结果存储为】菜单命令 ，优化并保存动画 4. 创建Flash动画 基本概念 实例1：Flash图形绘制 实例2：创建运动渐变动画 实例3：创建形状渐变动画 实例4：创建路径运动动画 实例5：创建遮罩动画 4.1 基本概念 分辨率 位图、矢量图 图层 场景 帧、关键帧与时间轴 4.2 绘制Flash图形 画直线 画圆 画矩形 使用钢笔画曲线 修改图形 箭头工具 贝兹工具 套索工具 自由变形工具 着色工具 墨水瓶 油漆桶 吸管 填充转换工具 4.3 实例2：创建运动渐变动画 目标：创建一个由小到大的文字运动渐变动画 步骤： 双击时间线上的文本“图层1”，将图层命名为“移动文本” 选择第一帧，单击右键，执行“创建动画动作”命令 鼠标单击第30帧，执行【插入】→【时间轴】→【关键帧】命令，或者在30帧处单击鼠标右键，执行“插入关键帧”命令，或者按【F6】快捷键，插入关键帧。然后选择关键帧的内容“创作运动渐变动画！”，对其属性进行设置，设置坐标轴X为160，Y为160，其余保持不变。 选择动画创作完毕，执行【控制】→【测试影片】菜单命令，或按【Ctrl+Enter】组合键调试影片 4.4 实例3：创建形状渐变动画 目标：创建圆变成矩形的形状渐变动画，在运动过程中颜色也进行相应的变化。 步骤： 双击时间线上的文本“图层1”，将图层命名为“形状变化”。 选择第一帧，在属性设置面板中的“中间”下拉列表框中选择“形状”，完成第一帧的设置。 选择动画创作完毕，时间轴如图所示。 4.5 实例4：路径运动动画 目标：创建地球绕太阳转动的动画 。 步骤： 双击时间线上的文本“图层1”，将图层命名为“太阳”。 鼠标选择第50帧，执行【插入】→【时间轴】→【帧】，或者按F5快捷键。 鼠标选择“地球公转”层第一帧，按照上述同样的方法在舞台上画一个正圆，去掉边线，然后设置其坐标轴X为480，Y为180，宽度为35，高度为35。 鼠标选择“地球公转”图层，执行【插入】→【时间轴】→【运动引导层】命令，或单击右键，执行“添加引导线”命令，或者直接在时间线面板上单击“添加引导图层”按钮。 4.6 实例5：遮罩动画 目标：创建探照灯效果的遮罩动画 。 步骤： 双击时间线上的文本“图层1”，将图层命名为“背景”。 新建一图层，并命名为“底层”。 新建图层，并命名为“遮罩”。 选择“背景”和“底层”图层中的第35帧，按F5键，插入帧。 5. Swish Max快速制作flash动画 Swish Max界面介绍 时间线窗口 实例：用Swish Max快速制作flash动画 5.1 Swish Max界面介绍 5.2 时间线窗口 添加脚本按钮：通过单击此按钮可以对帧、影片控制、精灵等添加脚本。 删除按钮：通过单击删除按钮可以删除选定的效果或脚本。 选项按钮：通过单击选项按钮可以设置时间线的显示状态，包括宽、窄、高、矮等。 收缩按钮：通过单击收缩按钮可以控制时间线左边按钮的缩放。 当鼠标选择工作区中某一对象时，时间线上的“添加脚本” 按钮转变成为“添加效果”按钮 5.3实例：用Swish Max快速制作flash动画 目标：创建一个文字爆炸效果的动画 。 步骤： 设置影片属性：背景颜色为白色，宽度为400像素，高度为200像素，帧频为12 。 选择工具区中的“Swishmax”对象，然后