[原创]Adobe Edge Animate1.0 --创建按钮及简单功能实现

[b][原创]Adobe Edge Animate1.0 --创建按钮及简单功能实现[/b]

版权声明:

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

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

以下为大家讲解如何使用Edge制作一个简单的按钮动画，使用到的方法：

--Edge动画编辑

--简单的按钮制作

--对按钮添加Javascript控制代码

[b]一、制作按钮：[/b]

1.使用Edge的圆角长方形（RoundRectangle）制作一个按钮图形



2.接下来添加文字



3.选中长方形和文字，将他们转换为元件





4.将元件的鼠标手势修改为小手，这样当我们的鼠标移动到元件上方的时候鼠标指针变为小手，提示我们这是个按钮。







5.接下来我们为按钮添加代码，比如说，当我们鼠标移到按钮上方，我们希望按钮文字发生改变。首先点击添加代码；



选择mouseover函数；



点击右侧GetSymbol函数，并添加自己的功能代码：



6.接下来让鼠标离开的时候文字恢复为原来的：

点击加号添加mouseout函数



添加功能代码：



这时按Ctrl/Command + 回车键，可以在浏览器中预览效果，可以看到效果正如我们想象的一样。

[b]二、制作动画：[/b]

既然这是一个按钮，那么我们就要让它实现按钮功能，比如点击按钮开始播放动画，下面我们首先制作一个简单的动画。

1.添加文字



我们为它添加一段Scale动画，分别添加Scale x和Scale y的关键帧



在0秒处都为为0%，在2秒处都为100%，将Easing改为Ease out-->Elastic；



[b]三、添加按钮功能：[/b]

接下来我们添加功能，点击按钮的时候开始播放动画。

1.先让动画不要播放，在时间线上0秒处，添加Trigger；



让动画不要播放，添加如下代码；



2.为按钮添加播放功能：点击添加动作控制程序，添加click事件；



添加代码；



这样按钮就制作完成了，我们可以在浏览器中预览效果。

本文地址：

/article/5833164.html

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