Adobe Edge Animate 1.0 -- 制作自定义动态菜单

Adobe Edge Animate 1.0 -- 制作自定义动态菜单

版权声明:

本文版权属于 北京联友天下科技发展有限公司。

转载的时候请注明版权和原文地址。

之前讲过在Edge中使用Bootstrap制作菜单按钮的例子，那么我们是否可以自主设计并制作一个含有动画菜单呢？答案当然是可以，下面用一个简单的例子为大家讲解如何制作自定义动态菜单。

一、制作菜单元件：

1.这是菜单元件list：

2.list内部结构：由一个按钮btn_list和菜单构成

3.btn_list内部结构：

二、为菜单添加动画：

1.如图，进入list内部，将播放头拖至1.0秒处，添加标签list_open，在list_backgroud上右击选择add keyframe -->top，然后将list_backgroud拖到场景之外；

2.拖动播放头至1.750秒处，然后拖动list_backgroud到途中位置；

3.将播放头拖至2.0秒处，然后将list_backgroud拖动到最终位置

敲击空格键预览动画，可以看到动画有个弹性缓冲的效果。

4.将播放头拖至2秒，选中动画条，复制，然后菜单Edit-->Paste Special-->Paste Inversed，复制一个反向的动画，添加标签list_close。

二、添加控制代码

1.因为我们要点击按钮才开始弹出菜单，所以在list元件的开始要添加不播放动画的代码：在0秒处添加触发器；

2.因为我们点击按钮的时候，要判断列表是否已经打开，来决定播放打开还是关闭列表，所以在这里还要添加一个变量来判定：

3.在打开列表动画结束的时候（2.0秒）将变量修改：

4.在关闭列表动画结束的时候（3.0秒）修改变量：

5.为按钮btn_list添加click事件：

6.修改按钮的鼠标指针为小手，在浏览器中预览效果。

三、制作列表显示反馈文字：

在舞台中添加一个Text文本，内容为空，用于下面点击列表内容反馈的信息显示：

四、添加列表文字：

1.添加一个列表项目文字，为了让文字跟随列表背景运动，将list_backgroud的动画复制到Title_one上：

2.为文字添加控制代码：mouseover、mouseout

3.添加click事件：

在浏览器中预览，可以看到效果。

4.我们将Title_one复制，调整好位置，改名为Title_two

5.进入click事件，将反馈信息修改为You Click The List Title Two！，将mouseover和mouseout事件里面的Title_one也改为Title_two即可。

在浏览器中预览，可以看到点击不同的文字，反馈不同的信息，这样就可以由列表来控制动画的播放了。

本文地址：

http://www.cnblogs.com/adobeedge/archive/2012/12/07/Adobe_Edge_Animate_List.html

作者：北京联友天下科技发展有限公司  肖伟民