网页制作-行为与时间轴及其应用.ppt

（7） 要在网页中增加动画对象，实际上就是在【时间轴】面板中增加动画条，可单击右键，在快捷菜单中选择【增加时间轴】命令，也可以选择【修改】|【时间轴】|【增加对象到时间轴】命令，还可以选中某个层对象后，直接将其拖至【时间轴】面板中。 （8） 利用插入的关键帧可将动画直线运动的轨迹改为曲线运动。分别选中【时间轴】面板中的动画条的某一关键帧，然后拖曳层控制柄，改变层对象的运动轨迹。图像将沿新轨迹上下运动，在层对象的运动轨迹拐角处就是关键帧所处的位置。 【添加对象】或【移除对象】命令，可从【时间轴】面板中增加或删除对象，即增加或删除该对象所对应的动画条； 【添加行为】或【移除行为】命令，可增加或删除行为； 【增加关键帧】或【移除关键帧】命令,可增加或删除关键帧； 【增加时间轴】、【移除时间轴】、【重命名时间轴】命令，可对时间轴完成增加、删除或改名的操作。 （9） 选中对象后，右击【时间轴】面板，然后从弹出的快捷菜单中选择下述命令，可完成相应的操作： （10） 从上述可以看出，用时间轴技术制作的动画操作比较简单，设计者不必设置每一帧的属性，而只要设置关键的几个帧即可确定对象运动的轨迹。关键帧之间的帧被称为中间帧（或普通帧），它们的状态由系统自动产生。 注意： 时间轴动画不是所谓的GIF动画，而是真正用Java Script代码编写的动画。 用关键帧编辑不很复杂的动画运动路径是个较好的方法。但是，对于编辑较复杂的动画运动路径，却并不容易。 Dreamweaver 8还提供了一种可生成复杂路径的动画的简单的方法。设计者可单击【时间轴】面板右上角的快捷菜单按钮，在快捷菜单中选择【录制层路径】命令，单击层控制柄拖动该对象，就可记录层对象的较为复杂的运动轨迹。 9.4 用时间轴改变图像和层的属性 用时间轴除可以控制层的位置变化以外，还可以替换图片，改变层的可见性、层的叠放次序和层的大小等属性。动画对象的这些属性变化，主要是通过在不同的关键帧上设置对象的不同属性来实现的。 9.4.1 用时间轴控制层的可见性 动画在播放过程中，可在时间轴的关键帧上设置层的显示属性来改变层的可见性，或者在关键帧处添加隐藏或显示层的行为，从而在浏览网页时，使动画对象产生时隐时现的效果。 用时间轴控制层的可见性 在浏览网页时，经常可以看到网页中有些图片像幻灯片一样，随着时间的推移不断地在变化。下面通过应用实例来介绍用时间轴控制图片轮流替换的方法。 9.4.2 用时间轴控制图片替换 例 制作一Web 页面，页面上的五幅图片轮流显示，每隔2/3s显示其中一幅图片。（若每秒播放15帧） ※选中图片，将其拖入【时间轴】面板，将时间轴动画条增加至50帧，并在10、20、30、40帧处设置关键帧。 ※分别选中第10、20、30、40帧，在【属性】面板的【源文件】文本框中，输入该关键帧处替换图片的路径和文件名。 9.4.3 用时间轴改变层的叠放次序 用时间轴控制图片替换，制作出图片在页面上的轮流显示的效果。利用时间轴改变层的叠放次序也能设计出类似的页面效果。 9.4.4 多条时间轴的管理 如果在同一个Web 页面中的动画过多或动画类型不同，可用多个时间轴分别控制多个不同的动画。 添加、删除和重命名时间轴的操作步骤如下。 (1) 选择【窗口】| 【其他】| 【时间轴】命令，或按Alt+F9快捷键，打开【时间轴】面板。 (2) 单击【时间轴】面板右上角的按钮，打开时间轴的快捷菜单，在快捷菜单中选择以下命令分别完成不同的任务： 【添加时间轴】命令：可添加时间轴，然后在新的时间轴中添加管理动画的动画条。 【移除时间轴】命令：可删除当前选中的时间轴。 【重命名时间轴】命令：在【重命名时间轴】对话框中对当时间轴重命名。 9.5 行为和时间轴的应用实例 Thanks to be continued…… 第9章 行为与时间轴及其应用 9.1 行为的概述 9.1.1 行为面板及其使用方法 9.1.2 添加和修改行为 9.1.3 行为的简单应用9.2 Dreamweaver 8 内置的动作和事件 9.4 用时间轴改变图像和层的属性 9.4.1 用时间轴控制层的可见性 9.4.2 用时间轴控制图像替换 9.4.3 用时间轴改变层的叠放次序 9.4.4 多条时间轴的管理9.5 行为和时间轴的应用实例 9.3 时间轴的概述 9.3.1 使用时间轴面板 9.3.2 创建时间轴动画 9.3.3 生成和编辑动画路径 9.