网页制作：项目10--使用时间轴制作动画--.ppt

主讲 网页设计与制作 Dreamweaver8 项目十使用时间轴制作动画 任务一使用层设置公园背景和标题 任务二使用时间轴设置运动效果 项目十 使用时间轴制作动画 任务一 小结 任务二 实训 任务一使用层设置公园背景和标题 本任务将首先使用层布局页面中的公园地图及标题等内容 关于层的基本知识在项目九已作详细介绍 经过本任务的学习 读者可以进一步巩固其具体应用 项目十 使用时间轴制作动画 关于本任务的基本操作过程是 1 创建一个层 MapLayer 宽度设置为 800px 高度设置为 480px 背景图像设置为 images map gif 使用层设置公园背景和标题操作动画 任务一 小结 任务二 实训 2 在层 MapLayer 中插入一个嵌套层 TitleLayer 并进行属性设置 项目十 使用时间轴制作动画 任务一使用层设置公园背景和标题 3 设置CSS样式并输入文本 公园导游图 任务一 小结 任务二 实训 时间轴是与层密切相关的一项功能 它可以在Dreamweaver中实现动画的效果 通过时间轴 可以让层的位置 尺寸 可视性和重叠次序随着时间的变化而改变 从而创建出具有Flash效果的动画 本任务主要是利用时间轴制作人沿着公园道路前进的效果 通过本任务的学习 需要掌握的内容有 1 了解 时间轴 面板并掌握其使用方法 项目十 使用时间轴制作动画 任务二使用时间轴设置运动效果 使用时间轴设置运动效果操作动画 任务一 小结 任务二 实训 2 添加对象到时间轴在主菜单中选择 窗口 时间轴 命令打开 时间轴 面板 然后选定对象 并在主菜单中选择 修改 时间轴 添加对象到时间轴 命令将对象添加到 时间轴 面板或者将对象直接拖曳到 时间轴 面板 项目十 使用时间轴制作动画 任务二使用时间轴设置运动效果 3 快速创建一个复杂路径的时间轴动画的方法如果需要创建具有复杂运动路径的动画 可以使用录制层路径功能 首先在主菜单中选择 修改 时间轴 录制层路径 命令 然后在文档中拖动层来录制路径 最后在动画要停止的地方释放鼠标左键 这时将自动在 时间轴 面板中添加对象 并且较为合理地创建了一定数目的关键帧 也可以根据实际情况对各关键帧的位置适当进行调整使其更为合理 任务一 小结 任务二 实训 4 改变时间轴动画播放时间的方法在 时间轴 面板中拖动最后一个关键帧可以改变整个动画的播放时间 往右拖动是延长播放时间 往左拖动是缩短播放时间 5 设置时间轴动画为自动循环播放的方法在 时间轴 面板中勾选 自动播放 和 循环 两个复选框 可使时间轴动画在页面打开时能够自动循环播放 项目十 使用时间轴制作动画 任务二使用时间轴设置运动效果 任务一 小结 任务二 实训 实训制作飞机飞行动画 本项目着重介绍了利用层和时间轴制作动画的基本方法 实训将使用层和时间轴制作如图所示的飞机飞行动画 以进一步巩固时间轴的应用 项目十 使用时间轴制作动画 实训结果文件见 项目结果 文件夹中的 shixun htm 实训目的 进一步认识时间轴的作用 进一步巩固手动创建时间轴动画的基本方法 进一步巩固利用时间轴改变图像与层属性的方法 任务一 小结 任务二 实训 实训制作飞机飞行动画 项目十 使用时间轴制作动画 任务一 小结 任务二 实训 小结 本项目通过公园导游图动画介绍了时间轴的一些基本功能和方法 同时也让读者对层这个