《清华大学 网页设计培训教程 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) 单击【确定】按钮确定操作,查看默认事件是否是用户需要的事件