用Dreamweaver 3.0制作交互式动画

Author: 邹延平 Date: 2000年第46期

　　利用Dreamweaver不仅可以设计制作普通网页，而且可以直接制作交互式动画，生成动态网页。本文用实例谈谈利用Dreamweaver的“时间轴”（Time Lines）和“行为面板”（Behaviors）制作交互式动画的方法与技巧。本例的具体创意是：当你打开这个网页时，可以看到页面正中有三朵美丽的玫瑰花，网页左上角还有一只原地飞舞的蝴蝶。如果把鼠标移到蝴蝶上时，它就会向前飞舞，当它绕过一朵朵玫瑰花时，网页中会逐个字母地显示出“butterfly”（如^46040201a^1）。如果你想让页面“安静”下来，只需要用鼠标点击一下蝴蝶，蝴蝶和“butterfly”都会消失。
　　一、准备工作
　　首先准备素材：准备三张玫瑰花的jpg图片，一幅飞舞的蝴蝶的动画，也为jpg格式，还有“b”、“u”、“t”、“e”、“r”、“f”、“l”、“y”几个字母的图片（如果图省事，也可直接在层中输入字母）。其实从网上到处都可以下载这些图片。
　　二、添加时间线
　　我们先制作蝴蝶绕玫瑰花飞舞的效果。相信用时间线制作动画大家都已熟悉，这里只简单讲一下。打开Dreamweaver，插入四个“Layer”（层）并调整好大小，分别在这四个“Layer”中插入玫瑰花和蝴蝶的图片，把三个玫瑰花的层放在工作区中央，调整好相互的位置。把蝴蝶的层放到工作区左上角，并在“Properties”面板中的“Layer ID”中命名为“butter”（如没有属性面板可从“Window”菜单中选择“Properties”）。然后用鼠标右键点击层“butter”，在弹出菜单中选择“Add to TimeLines”，那么时间轴面板增加了一个名为“butter”的时间线，我们把总桢数加大为40帧。在工作区空白处点击鼠标左键，然后把鼠标放在层“butter”上，当鼠标变为十字尖头时把“butter”拖到工作区右下角。我们再在第10帧、20帧、30帧处插入关键帧（在时间轴相应帧处单击鼠标右键，在弹出的菜单中选择“Add Keyframe”），然后分别在这三桢处把“butter”拖到三朵玫瑰花附近（如^46040201b^2）。
　　三、行为的添加
　　接下来是交互效果的实现。先做第一步：首先，在“Window”菜单中选择“Behaviors”，打开行为面板。选中层“butter”，在行为面板中点击“＋”号按钮，在弹出菜单中选择“Play Timeline”，在行为面板的“Events”中，选择“OnMouseOver”。这时按“F12”进行预览。一开始时蝴蝶是在原地飞舞，当把鼠标移到它身上时，它就会绕着玫瑰花飞行了。
　　别高兴得太早，我们还要实现蝴蝶飞过时显示出“butterfly”的效果。接着做第二步：首先插入9个“Layer”，分别命名为“b”、“u”、“t1”、“t2”、“e”、“r”、“f”、“l”、“y”，并对应插入“b”、“u”、“t”、“t”、“e”、“r”、“f”、“l”、“y”这9张字母图片。然后在对象面板中把它们的“Vis”属性设置为“hidden”。现在我们要做从“b”到“y”逐个显现字母的效果。选中“butter”层，然后用鼠标右键单击时间轴面板上的第5帧，在弹出的菜单中选择“Add Behavior”，在行为面板中按“＋”按钮为该帧添加行为，在弹出的菜单中选择“Show－hide Layers”，接着弹出“Show－hide Layers”面板，我们选择“layer b”，再单击“Show”按钮并确认。可以看到时间轴面板上的第5帧格上方有一个“－”号。那么当蝴蝶飞到第5帧的时候，图片“b”便会显现。接下来用同样的方法将其余8个字母层显示时机与蝴蝶飞舞路径正确地关联起来。别以为就完工了，我们还要让点击蝴蝶后，蝴蝶和字母都消失。其实只要给“butter”层添加一个“Show－hide Layers”的行为，把除玫瑰花以外的所有层都设置为“hidden”，并在行为面板“Events”中选择“onClick”，（如^46040201c^3）至此，动画创意所提出的要求已经可以实现了。按“F12”预览，是不是很有新意？如果再配上音乐，我们就可以让蝴蝶飞舞和音乐的节奏完全同步，那就更完美了！