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

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