Dreamweaver_8_网页设计培训教程_第9章课件.ppt

《Dreamweaver_8_网页设计培训教程_第9章课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第9章创建网页动画（时间：2次课，4学时）第9章创建网页动画教学提示：本章介绍【时间轴】面板以及使用时间轴的各种方法，让读者了解如何创建时间轴动画、如何为时间轴添加行为、如何应用插件实现时间轴的特殊效果和创建各种不同的层动画效果。教学目标：通过本章内容的学习，读者可以掌握设计网页的动态效果的一般方法。第9章创建网页动画9.1网页动画利器——时间轴9.2将时间轴与行为结合起来9.3用插件实现层动画效果9.4精彩的网页过渡效果9.5上机实战9.1网页动画利器——时间轴9.1.1【时间轴】面板9.1.2创建时间轴动画9.1.3修改时间轴动画9.1

2、网页动画利器——时间轴时间轴也叫等时线，用于表示网页存活时间中发生的各种状态。通过时间轴上不同部位放置的不同内容，就可以实现网页元素的动态效果。利用时间轴构建动态网页最大的好处是，它是通过往文档中添加JavaScript代码来实现网页的动态效果，不需要任何ActiveX控件、任何插件和任何Java小程序，具有极好的兼容性。利用时间轴，可以创建各种类型的动态效果，例如，可以改变层的位置、大小、可见性、重叠顺序等。利用时间轴，还可以实现在页面载入后进行其他类型的动作，例如可以改变图像源文件，在特定时间上执行相应的行为等。9.1.1【时间轴】面板

3、时间轴主要是通过【时间轴】面板构建的。用户可以选择【窗口】

4、【时间轴】命令，如图9.1所示，或按Alt+F9组合键，即可以显示如图9.2所示的【时间轴】面板。从图9.2可以看出，【时间轴】面板主要由时间轴下拉列表框、行为通道、动画通道、动画条、控制按钮和控制选项等部分组成。下面介绍【时间轴】面板上的主要元素。【时间轴下拉列表框】主要用于控制哪条时间轴显示在【时间轴】面板上。在下拉列表中，可以选择不同的时间轴，可以在【时间轴】面板上显示不同的时间轴设置。在【行为通道】上，将显示为时间轴上相应时间中所附加的行为，浅蓝色的方块表示存在行为。在【帧

5、数】这一行中，显示时间轴上不同时间对应的动画帧。【回放头】是位于帧数行上的红色方块，它表明当前的动画放映的位置，通过在【时间轴】面板上拖动回放头，可以在文档窗口中看到相应时间上动画放映的状态。同时，当前回放头所在的帧位置会显示在【时间轴】面板上方的前进箭头按钮和后退箭头按钮之间的文本框中。9.1.1【时间轴】面板在【时间轴】面板上有33个【动画通道】，分别从1排列至33，表示可以在同一时间进行33路动画设置。一旦某个动画通道上存在动画，就会显示动画条。【动画条】表明某个对象在某段时间内的持续状态，动画条是真正的动画实体。其中一些空白圆圈表明

6、关键帧。在一个动画通道上可以包含多个动画条，表示多个不同的对象。不同的动画条在同一帧内不能控制相同的对象。【关键帧】就是由用户为对象所指定的在某一确定时刻(帧)上的状态。Dreamweaver会自动根据两个关键帧的位置计算对象在其间的动作。例如，要使对象直线运动，只需要定义开始和结束的位置，这两个位置就是关键帧，Dreamweaver会根据直线的开始和结束位置自动计算中间状态。在动画条上，关键帧以一个圆圈的形式表示。单击【返回】按钮，可以使回放头返回到动画的开始位置。单击【后退】按钮，可以将动画后退一帧，连续单击后退按钮，可以向后播放动画。

7、单击【播放】按钮，可以将动画播放一帧，连续单击播放按钮，可以播放动画。在Fps(每秒帧数)文本框中，可以设置动画播放的速度。用户可以直接输入每秒帧数的值。选中【自动播放】复选框，则当网页被载入后自动播放动画。如果取消选中该复选框，则网页载入之后，动画并不播放，用户可以利用为对象附加行为的方法，提供播放动画的命令。选中【循环】复选框，则动画播放完毕后会自动重新播放，即动画将不断地循环播放，直至用户离开页面。取消选中该复选框，则动画只播放一次。9.1.1【时间轴】面板图9.1打开【时间轴】面板9.1.1【时间轴】面板9.1.2创建时间轴动画要创

8、建时间轴动画，简而言之，就是往动画通道上添加对象，构建动画条，然后构建动画条上的关键帧，并从文档窗口中设置对象在关键帧上的位置，从而完成动画的创作。1.创建基本动画利用时间轴，用户可以在网页上创建层的动画效果。要利用时间轴构建层的基本动画，其具体操作如下。(1)将层移动到动画的起始位置，该操作实际上就是指定起始的关键帧。选中要制作动画的层。(2)选择【修改】

9、【时间轴】

10、【增加对象到时间轴】命令，即可在动画通道中添加一个对应该层的动画条。也可以直接将层拖动到【时间轴】面板上的相应位置来创建动画条。从动画条上，可以看到层名称。(3)拖动动画条

11、上最右端的关键帧标记，可以改变动画条的长度，也即改变动画的播放时间。单击动画条最右端的关键帧标记，然后按住并拖动层面左上角的“#”手柄，将层面拖动到一个合适的位置，如图9.3所示