Dreamweaver3 图层应用技巧（四）_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

Dreamweaver3 图层应用技巧（四）

作者：闵涛文章来源：闵涛的学习笔记点击数：874 更新时间：2009/4/23 12:22:09

上次讲了基本Timeline的应用，这些时到一些网站总会看到一个移动的网易广告，那个效果就是用时间轴做的非常简单，如还有人不的会话，我建议他看看此教程的（三），好言归正传，今天我准备讲一个复杂的时间轴应用，说白了就是在图层移动的过程中加一些Behaviors事件，让你的动画更具特色。先看看效果，为了这个地图我不知看了多少张光盘的图片。

>>一个比较复杂的Timeline例子（请看范例）

我先来解释一下这是怎样的一个效果，飞动的图层每当移动到一个地名时就激发一个Behaviors事件，在本例中的响应事件是显示隐藏图层，当然这种特效事件有很多种，不一定非要是显示隐藏图层，比如说跳出一个对话事件或在状态栏写字等等。在此需要提出的是：一个帧可有多个响应事件。接下来我就讲一讲怎样实现这个例子，由于有了先前的基础，我讲的可能有点粗。

1.每一个图层的例子当然先要插入一个图层，本例插入的是一个笑脸图层，同时也插入一个隐含图层，以便在地名下显示，本例中的隐含图层内容是一些文字图方便。不会吧？隐含图层都不会插入。就是先插入一个图层，把浮动属性面板的Vis项选hidden即可

2.调出时间轴面板(Ctrul+F9)，用鼠标把笑脸图层拖到动画轨道来（用DW2的朋友不能这样做），就这样建立了一个小小的动画片段，动画长度是可以变的，你用鼠标拖动圆点就可加长常动画时间。

3.把播放指针（红色的）拖到动画片段最后一帧，再拖动笑脸图层到Canada这个地方。一个简单的动画片但就这样搞定了。

4.已经把笑脸拖到Canada这个地方了，现在就要在这一帧加个Behaviors，也就是要显示隐藏图层。在时间轴的上方还有一条轨道，这就是加Behaviors事件的地方，在该帧上方的对应位置点击鼠标右建，选“Add Behavior”后跳出Behaviors事件浮动窗口。

5.在Behaviors浮动窗口中点击符号加，选Show_Hide Layers选项接着跳出一个how_Hide Layers对话框，把刚插入的一个隐藏图层选上并点击Show后确定。

6.完成了一点点，休息一下，我要是再接着讲我怕你快疯了，把前五步消化一下，我讲的非常细，生怕你在那一步出了错，这样的话后来的大量工作都是无用的。我没有使用图片来辅助说明，下面加一张图片，大家也有个对照的。

7.看了这个插图，大家一定有个疑问，为什么你在时间轴上空那么一戳有什么用。我现在来解释一下，大家知道当笑脸运动到Canada这个地方时，就显示隐藏图层，我空这么一大块就是为了笑脸在Candada这个地方停一会儿，留点时间给大家看隐藏图层的内容。

8.用鼠标拖动笑脸图层到Timeline的动画轨道，留一段空白距离如上图。把播放指针直到最后一帧，用鼠标移动到Europe，这完成了从Canada到Erope的动画，如果这个时候你按F12预览，你会发现先前介绍Canada的隐藏图层一直都显示着，并不是笑脸运动到Europe就没了。

9.这一步就是该决这个问题的，把播放帧移到第二个动画片段的第一帧（第28帧，上图），点鼠标右键选"Add Behaviors"选项，接着就会跳出一个Behaviors的一个浮动面板，按第5步做，只是这次不是选Show，而是选Hidden。到此一个完帧的动画片段完成了。剩下的事就是重复刚在的步骤完成整个效果。要做出比较好的效果来还是比较复杂，搞懂了其实也不是太难。

10.最后还罗嗦一步，当你的做完了，一定要把时间轴的Autoplaly选上，要不然你看不到你心情劳动的结果。最好也把Loop选上，循环播放。

下一节将讨论将如何用DW实现幻灯片效果。

[聊天工具]QQ2005 Beta3 珊瑚虫3.1.6 版发布__天极Yesky  [常用软件]绕过WGA安装IE 7 Beta3 5450
[常用软件][软件推荐]将MP3 压得更好  [常用软件]Expression3 与intuos2应用实例
[VB.NET程序]几个 WMI 的例子（初级） - 3  [VB.NET程序]VBCOM TUTORIAL(3)
[VB.NET程序]VB程序员眼中的C# 3  [VB.NET程序]The COM Course - Part 3--By Karl Moore
[VB.NET程序]播放 mp3 和 rmvb 的插件  [网页制作]CSS 3 选择器解释

教程录入：mintao 责任编辑：mintao

上一篇教程： Dreamweaver3 图层应用技巧（三）

下一篇教程： Dreamweaver3 图层应用技巧（五）

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……