Artile_Title
六、动态交互篇
三、时间线(Timeline) 。使用行为面板我们已经可以简便和快捷的创建交互式动态效果,但Dreamweaver还提供了更复杂和强大的工具可以实现高级动态效果,这就是时间线(Timeline),使用时间线是进入四维空间的必由之路。前面我们介绍的动态效果都是发生在瞬间的变化之中,而利用时间线我们可以实现真正的运动效果,但Dreamweaver中的时间线并不仅仅是实现运动的工具,它也有助于实现定时完成指定任务。例如在指定的时间和状态下执行一个行为,或者跳转到另一个行为,可以说时间线将页面中的各种交互行为有机和有序的组织结合到了一起。这是一个非常复杂的过程,但Dreamweaver将它变得操作起来非常简单,所有的程序代码都自动为我们添加好。下面我简单的介绍一下。
(一)、使用时间线的基本原则。
1、 所有在时间线控制范围内运动的元素,都必须放入各自的层中,也就是说只有层可以被时间线面板接受。
2、 在一个时间线上可以包含多个动画,他们将按各自的属性运动,但必须保证他们没有作用在同一个层上。
3、 在时间线上的任意位置都可以添加行为,也就是说我们不需要将所有的行为都从时间线的开始位置启动,可以根据我们的需要在指定的帧位置启动。
(二)、使用时间线创建动画。
1、 将层添加到时间线。首先我们必须将需要运动的元素放入一个层中,然后点击并拖动层的标示,将其拖入时间线面板中。Dreamweaver会自动创建一个15帧的动画条。
2、 单击并拖动动画条可以改变它从何时开始播放,但击并拖动动画条的最后一帧,可以改变动画执行的时间长度。
3、 一个动画并不仅仅是只有开始和结束两个状态,我们可以添加多个关键帧,并设定每个关键帧时,相关层的位置、属性,以及执行的行为。使用鼠标右键单击动画条上的一个帧位置,执行Add Keyframe即可添加一个关键帧。
4、 选定相应的关键帧,然后在文档窗口改变层的位置或属性。最后根据需要勾选Autoplay(自动播放)或Loop(循环播放),即可实现一个动画。
(三)、在时间线中改变行为。我们除了可以自动执行一个动态运动的层效果,还可以为时间线上的关键帧指定单独执行的行为,也可以把时间线附着于某个事件上。
1、 将时间线指定到特定的事件。选择一个特定的元素,如图像、链接,打开行为面板,选择添加行为,从弹出菜单中选择Timeline|Play Timeline开始播放一个时间线动画;选择Timeline|Stop Timeline停止一个正在播放的时间线动画;选择Goto Timeline Frame直接跳转到时间线上的一个关键帧位置。
2、 为时间线添加行为。在时间线的行为通道中我们可以添加相应的行为,这样当动画执行到此位置时将启动相应的行为。鼠标定位在一个帧位置,打开行为面板,添加需要的一个行为,例如我们在第12帧添加了一个打开浏览器窗口的行为,当动画播放到第12帧时会自动打开一个浏览器窗口。
小结:到这里为止我概要介绍了在Dreamweaver中实现动态交互效果的途径,我们可以看到,通过使用层并改变层的定位、可视性、深度等特性,我们创建了多种的动态效果,可以说层的应用是实现动态效果的基础。通过为层增加相应的行为,并使用时间线来控制,我们将动态的Web页面引入了四维的空间。
由于篇幅所限,本节我不再为大家介绍相应的使用技巧,但只要大家认真研究好Layer、Behaviors、Timeline三个面板的各个参数,相信你可以作出更加充满变换的页面效果。限制你的只有你的想象力而已。
