可控制式动态菜单的制作

最新推荐文章于 2021-05-25 10:05:21 发布

zl198183

最新推荐文章于 2021-05-25 10:05:21 发布

阅读量943

点赞数

分类专栏： html特效文章标签： behavior 网格工具 go

本文链接：https://blog.youkuaiyun.com/zl198183/article/details/513477

版权

html特效专栏收录该内容

26 篇文章

订阅专栏

　　使用DW制作动态网页非常简单，我们不用编写复杂的DHTML文件，只要在DW中合理设置层和时间线就可以轻松实现。下面以可控制的动态菜单为例，来看看DW中的动态效果是如何实现的。

1.加入层
首先我们，在网页中加入一个层，点击“对象”栏中的或者点击“插入”-->“Layer”（层），状态如下图所示（我们给该层命名为“caidan”）：

2.在层中加入链接

我的方法是先加入一个表格，再在表格中做链接菜单。完成后如下图所示：

3.设置Timeline1

我们要做的动态效果应该是菜单可以隐藏又可以出现，因此需要做两个Timeline。

首先打开Timeline工具栏，方法是“窗口”-->“时间线”（或者直接按F9），如图为Timeline面板：

然后拖曳“caidan”层到Timeline面板中。注意此时生成的Timeline1中Frame1为caidan层所在位置，可以拖曳层调整到需要的位置。Timeline中默认帧数为15，拖拉最后一帧来改变帧数。如图设置帧数为25：

选中最后一帧，拖曳层到需要的位置。此时将出现运动轨迹，如果希望层的运动是水平的，应保持轨迹线为直线（红色箭头所指位置）。如图：

Timeline1动作为菜单出现，所以应设置为自动，在时间线面板上选中“自动播放”

4.增加时间线

接下来要设置菜单隐藏动作。
首先添加Timeline2，点击“修改”——>“时间线”——>“增加时间线”（或在时间线面板中点击右键选择“增加时间线”）

设置Timeline2的Frame 1和Frame end。尽量使Timeline1和Timeline2位置保持一致，否则动作时将产生抖动，可打开“标尺”或“网格”做参考。（Ctrl+Alt+Shift+R 或 Ctrl+Alt+Shift+G ）

5.设置动作

鼠标选择欲触发动作的图片或文字，在时间线面板上选择“Behavior”时间线面板切换为Behavior面板，点击面板上的按扭，选择相应动作，我们这里应该首先选择GO TO Timeline Frame，然后再选择Play Timeline，如图：

选择Play Timeline动作后会弹出Timeline对话框，让你选择触发的Timeline，如图：

默认触发条件是OnMouseOver，点击右边的箭头可重新选择触发条件，这里我们选择onClick，如图：

记的要设置两个哟，分别对应Timeline1和Timeline2，这样菜单才可以来回动作。

6.好了，到这里就算做完了，保存、预览，看看是否和你想象中的动作一样？