七

七、实现动画效果的 Timeline

作 者 : 阿文

　　 Dhtml 通过 Jscript 或 Vbscript 语言来改变样式和位置的特性。本章中所要介绍的 Timelines 利用 Dhtml 所提供的这项功能，随着时间的改变通过一系列连续的帧变换层的特性以形成动画。

　　单击 Lancher 面板上的 Timelines 按钮，或按 F9 键，启动 Timelines 面板。假如你用过 Micromadia 公司其它的产品，例如 Director 、 Flash 这些软件，你很容易发现 Timelines 操作面板几乎与其是一模一样的，当然，操作手法和命令也大致相同。

　　 Timeline 下拉菜单：当建立了不止一条时间链时从中选择其一。 回放头：即图中的红色方块，显示时间链中的当前帧。红色方块的定位与当前帧的显示是一致的。

　　行为通道：双击此处添加 Behavior ，让动画显示 到某一特定帧。
　　动画通道：显示各个层在 Timeline 上的动画。
　　动画条：即图中紫色条形，记录了每个层时间链的动画。
　　Keyframe ：即关键帧，在 Timeline 面板中显示为一个空心小圆。定义某一帧为关键帧，并定义物体在关键帧时的特性， Dreamweaver 自动计算从前一关键帧到当前关键帧之间的运动过程。
　　Autoplay ：选中该项指定在加载页面的同时动画将自动播放。
　　Loop ：选中该项则意味着动画将连续循环播放。 现在还是让我们来看一个实例。

1. 首先在页面上建立一个层，输入“移动文字”四个字，随意设定其大小、颜色和字体。层名为 Layer1 ，将该层放置在页面左上角。
2. 回放头定位在 Frame 1 ，按右键，选择“ Add Object ”，如有对话框弹出按 OK 即可。现在建立了一条初始时间链，到 15 帧为止。
3. 回放头定位在 Frame 15 ，并拖动其向右，使时间链扩展到 Frame 40 。
4. 回放头定位在 Frame 40 ，把 Layer1 拖动至页面右下角。选中 Autoplay 和 Loop 。现在完成了初步动画，按住 Timeline 面板中的向右播放箭头不放，以观看动画效果，页面上“移动文字”四个字从左上角直线缓慢移动至右下角。
5. 这个大大咧咧的动画放在页面上是不会取得任何期望中的优美效果的。改变动画的路径，可以通过增加关键帧来实现。当前帧定位到 Frame 20 ，按右键从弹出菜单中选择 Add Keyframe （或者选择主菜单 Modify/ Timeline/ Add Keyframe ），此时 Layer1 在页面上显示为定位在 Frame 20 的地方，选定 Layer1 把其拖动至页面左下角，原先的直线动画路径就变成了曲线动画路径。如图参照改变前的动画路径和改变后的动画路径 ，按住向右播放箭头播放可以观看改变后的动画路径效果。关键帧可向前或向后随意移动，动画路线也可进一步调整修改以得到满意的、细腻的画面效果。

6. 给当前的时间链再加上一个移动对象。建立 一个新层，名为 Layer2 ，在 Layer2 中插入一幅图象，在本例中是我们以前用过的 Dreamweaver 字母图像（ dw031.gif ），将该层定位在页页左边的中央。
7. 选中 Layer2 ，在 Timeline 面板上按右键，从弹出菜单中选取“ Add Object ”，并把其时间链扩展到 20 帧。
8. 当前帧定位在第 20 帧，把图象水平拉到页面右边。
9. 要是你还想使动画变得更复杂一些，你可以象上面所讲的办法那样添加关键帧改变动画路径。但总而言之，添加一个运动物体就是如此简单！（附：例 HTML 页）

　　 Timeline 无疑会为你的主页增添动感和亮丽之处，但是应该注意到宜慎用此项功能。特别在动画采用了大量图象来实现、动画组成十分复杂的时候，理所当然会使页面容量变得非常庞大，而使得网页传输速度变得相当缓慢。尤其是动画页面作为网站首页时，一个漂亮的动画首页很可能会产生与期望中相反的负作用，它会使浏览者白白等待了半天而在失去耐心之前仍然不晓得这一页究竟是做什么的！