zoukankan      html  css  js  c++  java
  • [原创]Adobe Edge Animate1.0 创建按钮及简单功能实现

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

    版权声明:

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

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

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

    --Edge动画编辑

    --简单的按钮制作

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

    一、制作按钮:

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

    2.接下来添加文字

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

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

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

    选择mouseover函数;

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

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

    点击加号添加mouseout函数

    添加功能代码:

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

    二、制作动画:

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

    1.添加文字

    我们为它添加一段Scale动画,分别添加Scale xScale y的关键帧

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

    三、添加按钮功能:

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

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

    让动画不要播放,添加如下代码;

    2.为按钮添加播放功能:点击添加动作控制程序,添加click事件;

    添加代码;

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

    本文地址:

    http://www.cnblogs.com/adobeedge/archive/2012/11/27/Adobe_Edge_Animate_Button.html

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

  • 相关阅读:
    练习与突破
    HTML input type=file文件选择表单的汇总(一)
    webpack学习之—— Configuration(配置)
    webpack学习之—— Plugins
    webpack学习之—— Loaders
    webpack学习之——Output
    webpack学习之——Entry Points(入口起点)
    CSS3 3D transform变换
    get和post请求的区别
    日期格式之——剩余时间(天,小时,分,秒)的计算方法
  • 原文地址:https://www.cnblogs.com/adobeedge/p/Adobe_Edge_Animate_Button.html
Copyright © 2011-2022 走看看