网页制作项目10使用时间轴制作动画

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