《清华大学 网页设计培训教程 dreamweaver 9章》由会员分享，可在线阅读，更多相关《清华大学 网页设计培训教程 dreamweaver 9章（64页珍藏版）》请在金锄头文库上搜索。
1、第9章 创建网页动画,第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、，如图9.1所示，或按Alt+F9组合键，即可以显示如图9.2所示的【时间轴】面板。 从图9.2可以看出，【时间轴】面板主要由时间轴下拉列表框、行为通道、动画通道、动画条、控制按钮和控制选项等部分组成。 下面介绍【时间轴】面板上的主要元素。 【时间轴下拉列表框】主要用于控制哪条时间轴显示在【时间轴】面板上。在下拉列表中，可以选择不同的时间轴，可以在【时间轴】面板上显示不同的时间轴设置。 在【行为通道】上，将显示为时间轴上相应时间中所附加的行为，浅蓝色的方块表示存在行为。 在【帧数】这一行中，显示时间轴上不同时间对应的动画帧。 【回放头】是位于帧数行上的红色方块，它表明当前的动画放映的位置，通过
4、在【时间轴】面板上拖动回放头，可以在文档窗口中看到相应时间上动画放映的状态。同时，当前回放头所在的帧位置会显示在【时间轴】面板上方的前进箭头按钮和后退箭头按钮之间的文本框中。,9.1.1 【时间轴】面板,在【时间轴】面板上有33个【动画通道】，分别从1排列至33，表示可以在同一时间进行33路动画设置。一旦某个动画通道上存在动画，就会显示动画条。 【动画条】表明某个对象在某段时间内的持续状态，动画条是真正的动画实体。其中一些空白圆圈表明关键帧。在一个动画通道上可以包含多个动画条，表示多个不同的对象。不同的动画条在同一帧内不能控制相同的对象。 【关键帧】就是由用户为对象所指定的在某一确定时刻(帧)
5、上的状态。Dreamweaver会自动根据两个关键帧的位置计算对象在其间的动作。例如，要使对象直线运动，只需要定义开始和结束的位置，这两个位置就是关键帧，Dreamweaver会根据直线的开始和结束位置自动计算中间状态。在动画条上，关键帧以一个圆圈的形式表示。 单击【返回】按钮，可以使回放头返回到动画的开始位置。 单击【后退】按钮，可以将动画后退一帧，连续单击后退按钮，可以向后播放 动画。 单击【播放】按钮，可以将动画播放一帧，连续单击播放按钮，可以播放动画。 在Fps(每秒帧数)文本框中，可以设置动画播放的速度。用户可以直接输入每秒帧数的值。 选中【自动播放】复选框，则当网页被载入后自动播放
6、动画。如果取消选中该复选框，则网页载入之后，动画并不播放，用户可以利用为对象附加行为的方法，提供播放动画的命令。 选中【循环】复选框，则动画播放完毕后会自动重新播放，即动画将不断地循环播放，直至用户离开页面。取消选中该复选框，则动画只播放一次。,9.1.1 【时间轴】面板,图9.1 打开【时间轴】面板,9.1.1 【时间轴】面板,9.1.2 创建时间轴动画,要创建时间轴动画，简而言之，就是往动画通道上添加对象，构建动画条，然后构建动画条上的关键帧，并从文档窗口中设置对象在关键帧上的位置，从而完成动画的创作。 1. 创建基本动画 利用时间轴，用户可以在网页上创建层的动画效果。 要利用时间轴构建层
7、的基本动画，其具体操作如下。 (1) 将层移动到动画的起始位置，该操作实际上就是指定起始的关键帧。选中要制作动画的层。 (2) 选择【修改】|【时间轴】|【增加对象到时间轴】命令，即可在动画通道中添加一个对应该层的动画条。也可以直接将层拖动到【时间轴】面板上的相应位置来创建动画条。从动画条上，可以看到层名称。 (3) 拖动动画条上最右端的关键帧标记，可以改变动画条的长度，也即改变动画的播放时间。单击动画条最右端的关键帧标记，然后按住并拖动层面左上角的“#”手柄，将层面拖动到一个合适的位置，如图9.3所示。这时在页面中自动生成一条从起点到终点的直线，并显示在页面中，它表示这个层面的运动轨迹。这实
8、际上也创建了动画结束位置的关键帧。,9.1.2 创建时间轴动画,图9.3 为层拉出一条直线的轨迹,9.1.2 创建时间轴动画,(4) 单击【播放】按钮可以在文档窗口中预览动画效果。根据需要，选中或取消相应的【自动播放】和【循环】复选框。 单纯的直线式动画显得比较枯燥，在Dreamweaver 中还可以产生贝塞尔曲线的运动轨迹，这需要在【时间轴】面板中添加新的关键帧，关键帧是【时间轴】面板上的控制单元，在添加一个对象时，系统自动为对象设置了头和尾两个关键帧，通过改变关键帧可以改变动画的形态。 要利用时间轴产生层的贝塞尔曲线的运动轨迹，其具体操作如下。 (1) 单击需要在动画条的中间位置添加关键帧
9、的帧。 (2) 在动画条上的相应帧位置右击，在如图9.4所示的快捷菜单中选择【增加关键帧】命令；也可以选择【修改】|【时间轴】|【增加关键帧】命令来添加关键帧。 (3) 选中关键帧标记，然后从文档窗口中拖动层，并将它移动到该帧对应的位置上。这时原来的直线将变成一条圆滑的贝塞尔曲线，如图9.5所示。 (4) 单击【播放】按钮可以在文档窗口中预览动画效果。可根据需要选中或取消相应的【自动播放】和【循环】复选框。,9.1.2 创建时间轴动画,图9.4 利用快捷菜单添加关键帧,9.1.2 创建时间轴动画,图9.5 为层产生贝塞尔曲线的运动轨迹,9.1.2 创建时间轴动画,2. 录制层路径 对于简单的直
10、线路径，采用前面介绍的方法，可以很好地创建动画；然而如果动画路径较为复杂，如曲线或圆形，则无法通过先设置关键帧，再拖动层到指定位置的方法来创建动画。 Dreamweaver提供了可记录路径的方法，允许用户直接在文档窗口中拖动层，而Dreamweaver在后台记录拖动层的路径，然后将它应用到时间轴上，利用这种方法，可以很容易地创建各种移动方式的层动画。 要使用【录制层路径】命令产生层复杂运动轨迹，具体操作如下。 (1) 在文档窗口中选择要创建层动画的层。将层移动到动画的起始位置。 (2) 在动画条上的相应帧位置右击，在如图9.4所示的快捷菜单中选择【录制层路径】命令。这时就可以开始录制层的移动路
11、径。 (3) 在文档窗口中，按照需要的路径拖动层。 (4) 当希望动画停止时，可以释放鼠标，停止移动层。这时就会产生如图9.6所示的一个复杂的运动轨迹。 (5) 单击【播放】按钮可以在文档窗口中预览动画效果。可根据需要选中或取消相应的【自动播放】和【循环】复选框。 设计好动画之后，可以在【时间轴】面板中对时间轴进行各种控制，从而实现对动画的编辑和修改。利用时间轴，不仅可以改变层的位置，还可以改变层的某些属性，如大小和可见性等。利用时间轴，还可以改变图像的源文件，实现某些特殊效果。,9.1.2 创建时间轴动画,图9.6 为层产生复杂的运动轨迹,9.1.2 创建时间轴动画,3. 设置动画的可见性
12、为了设置层面的闪光效果，需要设置关键帧的可见性，这可以在【属性】面板中的【可见性】中设置，有3个选项：分别是visible (可见)、hidden (隐藏)和inherit (继承)。 要设置关键帧的可见性，具体操作如下。 (1) 从【时间轴】面板上，单击选中关键帧1，这时文档窗口中相应的对象也被选中。在【属性】面板中设置这个关键帧层的【可见性】属性为visible (可见)。 (2) 从【时间轴】面板上，单击选中关键帧15，这时文档窗口中相应的对象也被选中。在【属性】面板中设置这个关键帧层的【可见性】属性为hidden (隐藏)。 (3) 从【时间轴】面板上，单击选中关键帧30，这时文档窗口
13、中相应的对象也被选中。在【属性】面板中设置这个关键帧层的【可见性】属性为visible (可见)。 (4) 从【时间轴】面板上，单击选中关键帧45，这时文档窗口中相应的对象也被选中。在【属性】面板中设置这个关键帧层的【可见性】属性为inherit(继承)，则这个关键帧层的可见性将继承关键帧30的，也就是visible (可见)。 设置完毕，保存文档后在浏览器中预览效果。如图9.7所示为页面中的层在可见状态时的示意图，而图9.8所示为层在隐藏状态时的示意图。,9.1.2 创建时间轴动画,图9.7 页面中的层可见,9.1.2 创建时间轴动画,图9.8 页面中的层隐藏,9.1.3 修改时间轴动画,1
14、. 改变动画时间 要改变整个动画时间，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。 (2) 拖动动画条最右端的关键帧标记，将它左右拖动，如图9.9所示，这时动画条长度会发生变化，同时上面所有的关键帧标记也按照比例移动相应的位置。如果希望保持所有中间位置的关键帧不动，可以按住Ctrl键，再拖动结束帧标记。 要改变动画局部的播放时间，即改变关键帧之间的动画播放速度，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。 (2) 在动画条上左右拖动相应的关键帧标记。 要改变动画起始时间，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。 (2) 将动画条在
15、动画通道上左右拖动。 2. 改变动画对象 要改变动画条对应的对象，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。右击，在快捷菜单中选择【改变对象】命令，这时会打开如图9.10所示的对话框，提示用户选择新对象。 (2) 选择新对象，单击【确定】按钮确定操作，即可改变动画条对应的对象。,9.1.3 修改时间轴动画,图9.9 改变动画的整个时间,图9.10 【更改对象】对话框,9.2 将时间轴与行为结合起来,9.2.1 为时间轴附加行为 9.2.2 控制时间轴的行为,9.2 将时间轴与行为结合起来,若要为时间轴中某一帧触发行为(而不是让来访者的交互去触发行为)，则将行为放置在时间轴
16、中即可。例如，用户可以在时间轴的第15帧处开始播放声音。 在时间轴中只有一种事件可以触发动作：动画到达一个指定的帧编号时(如onFrame7事件)。 行为不只是影响时间轴中的对象，它可以影响页面上的任何对象。在浏览器中预览时间轴以查看该行为如何工作。用户不能在Dreamweaver中预览该行为。,9.2.1 为时间轴附加行为,利用【播放时间轴】和【停止时间轴】动作，可以让用户通过单击链接或相应的按钮来开始和停止时间轴。这些动作也可以在用户鼠标经过链接、图像或其他对象时自动开始或停止。 要使用【播放时间轴】和【停止时间轴】动作，具体操作如下。 (1) 取消时间轴上的【自己播放】复选框，单击【时间轴】面板上行为通道中的帧。 (2) 如图9.11所示，选择【窗口】|【行为】命令，打开【行为】面板。单击【行为】面板上的“+”按钮，并从如图9.12所示的动作菜单中选择【播放时间轴】命令，这时会打开如图9.13所示的对话框。 (3) 从对话框中的【播放时间轴】下拉列表中选择需要播放的时间轴为“Timeline1”。 (4) 单击【确定】按钮确定操作，查看默认事件是否是用户需要的事件
