Dreamweaver3之一学就会（八） 5D精英网 机器猫 2000年 第31期 #1 动画篇 　　眼见着教程就要接近尾声，我们渐渐进入到Dreaweaver3的精华部分，就是“时间轴”（Timeline）和“行为”（Behavior）。时间轴可以用于在页面上制作动画，行为可以用来制作网页上的交互效果。举例来说就是当鼠标移到图片上去之后，出现了另一个画面之类的东西。 　　首先我们来理解时间轴。动画的实现原理就是将一幅幅画面连起来播放，使人产生运动的视觉。所以动画的基本单位就是一幅画面，也叫做帧。而在动画中有些画面是关键的，可以影响整个动画的效果，这样的帧叫做关键帧。很多的画面按照时间先后顺序连起来就产生了动画效果。时间轴就是用来排列画面顺序的。时间轴由通道组成，每一个通道里面放一个要运动的物体。关键帧用圆点表示。还有一个播放头，播放头所指的位置就是动画当前所在的帧。 　　以^31040201a^1为例，动画是一只机器猫按照弧线从左往右运动。动画在通道1中，共15帧画面长度。其中开始结束的位置还有当中弧线的最低点三个位置是关键位置，因此都是关键帧。图中播放头播放的正好是当中的关键帧，也就是图中机器猫的位置。 　　通过上面的讲解，时间轴的作用我们大致上已经很清楚了。下面我们就来实战制作这个动画，在制作之前要强调一件事情：就是要制作动画就必须用到层，用层才能制作动画，单一的图片是无法制作动画的，文字图片都必须存放在层中，实际上运动的是层，它带动图片和文字进行运动。制作过程如下： 　　1.插入一个层，在层中插入一张图片。 　　2.将层拖曳入时间轴（时间轴可以通过菜单Window→timelines打开）。系统会弹出一个对话框，提示层的一些属性是可以做成动画的，单击OK即可。注意是将层拖曳在时间轴中，不是图片。应该看到时间轴中显示的是Layer字样。时间轴生成了一段长15帧的画面。当然觉得太短可以自己拖长一点。 　　3.现在第一帧和最后一帧都是关键帧。我们要设置最后一帧确定动画的结束位置，单击最后一帧将层拖曳到指定位置（如^31040201b^2）。 　　4.大家可以看到路径还是直的，我们要做成弯曲的怎样做呢。增加一个关键帧，单击当中的位置。按鼠标右键，选择其中的Add Keyframe（增加关键帧），时间轴中增加一个关键帧。 　　5.单击该关键帧将层拖曳到指定位置，动画制作完毕了。 　　6.还要在时间轴上单击Autoplay自动播放选项，这样页面一装入浏览器动画就播放。Loop选项表示动画播放完毕一次以后还要继续播放。选中这两个选项的时候都会弹出对话框，单击OK即可。 　　注意：一旦选中了这两个参数，时间轴上动画最后一帧位置上会出现一帧，该帧出现在B通道中。B通道不同于别的通道，是用来控制和添加行为的。这里我们添加的是一个重复和循环的行为。 　　下面我们来学习“行为”的用法，行为是实现网页上交互的一种捷径。什么是行为呢？上面我们举过例子，光标移到某张图片上面，就显示一段内容。我们来分析一下这个过程，可以分为两个部分：一是事件，也就是触发动作的条件，为鼠标移上；二是动作，也就是显示内容。这两部分就构成了这个行为。因此行为就包含事件和动作两个部分，事件→动作。 　　我们就以上面这个效果为例。光标移动到物体上面出现内容，移出物体外面内容就消失。那么，这个例子就由以下两个行为组成。行为1：鼠标进入→出现。行为2：鼠标出去→隐藏。分析清楚了思路就可以实际制作了。 　　1.在页面中插入一张图片。 　　2.在页面中插入一个层，写上说明内容（如^31040201c^3）。 　　在层面板中，将该层设置成为隐藏，因为一打开网页的时候它不显示。 　　3.单击图片，打开行为面板（菜单Windows→Behaviors或者按F8），按“＋”号，在弹出菜单中选中Show－hide Layers显示隐藏层，系统弹出对话框，单击该层，然后单击show显示（如^31040201d^4）。 　　4.我们可以在面板中看到事件和行为，Events事件为onMouse Down当鼠标按下，Actions动作为Show－Hider Layers隐藏层（如^31040201e^5）。 　　现在我们单击事件和动作之间的向下三角形箭头，选择其中的onMouseOver（当鼠标移上去）事件。注意，有的读者可能没有这个选项。这是因为面板上Events For 事件适用浏览器不是4.0 and Later Browser。如果这样单击该栏用上下光标键调整到这一项即可。 　　5.预览网页，可以看到光标移动到图片上就出现说明。接下来我们制作移出画面隐藏层。 　　6.方法同3 一样，按“＋”添加show－hide layer行为。 　　7.在对话框中选中该层，按hider键。 　　8.调整事件为onMouseOut（当鼠标移出）。 　　9.整个效果就做完了。 　　下面给出一些常见事件的一些解释 　　onClick 单击 　　onDbclick 双击 　　onKeypress按键 　　onMouseDown鼠标按下 　　onMouseOut鼠标移出 　　onMouseOver鼠标移上 　　onMouseUp鼠标抬起。 　　由于动作的门类较多，也很复杂。不可能在有限的篇幅内说清楚就只好写到这里了。行为是一个很有用的交互手段。以前要实现这样的一些交互效果非得写JavaScript代码不可，现在有了行为就可以用可视化的手段进行操作了。下面解释一下行为面板上的Event For是什么意思。众所周知IE和NetScape是死对头，他们之间有些功能是互相不兼容的，因此对于事件的响应也有一些不同，同样不同版本的浏览器兼容的事件也不同。所以必须在用行为之前加以设置，IE支持的时间要比Netscape多一些，一般我们现在都设置Event for 4.0 and Later Browser（也就是兼容4.0以后的浏览器），这样的话就不必考虑Netscape或者IE兼容性问题了。而如果是使用for 3.0浏览器的话，则一些事件就无效了，例如onMouseOut之类的。 　　OK，我们本次的教程就到这里了。下次是教程的最后一讲：我们将介绍模板和库的使用。有问题欢迎来www.5dmedia.com访问或者发E－mail给我：rudolf@21cn.com。