网页制作：项目__使用时间轴制作动画(与“时间轴”有关文档共9张)

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