文章目录

一、新建按钮
- （1）画一个矩形
- （2）转化为按钮
二、指向
- （1）内部建立元件
- （2）创建关键帧
- （3）改变颜色
- （4）创建补间形状
三、点击
- （1）创建关键帧
- （2）换颜色
- （3）目前效果
- （4）更改代码
- （5）效果
四、小案例
- （1）插入第一张
- （2）插入第二张
- （3）插入第三张
- （4）创建按钮
- （5）单击到下一帧停止
- （6）在此帧处停止
- （7）返回到第一帧

上节介绍了按钮的基本使用，这节说一下与基础代码结合的使用。

一、新建按钮

（1）画一个矩形

用【矩形工具】画一个圆角矩形。（将圆角度改为80）

（2）转化为按钮

将刚才做的矩形，选中。

按F8转化为元件，类型为“按钮”。

二、指向

（1）内部建立元件

双击进入按钮。

“弹起”的时候是蓝色的。

在“指向”的位置，按F6转化为关键帧。

再次选中，F8转化为元件，类型改为“影片剪辑”。

（2）创建关键帧

然后双击进入。

在第5帧和第20帧的位置创建关键帧。（快捷键F6）

（3）改变颜色

在第20帧的位置，将它的颜色改为绿色。

（4）创建补间形状

将第5帧到第20帧中间，右键“创建补间形状”。

这样的话，第5帧到第20帧颜色就是过渡的了。（从蓝色到绿色）

三、点击

（1）创建关键帧

先退出现在的元件回到“按钮”。

在“按下”的地方，按F6转化为关键帧。

（2）换颜色

刚才我们做的“指向”是影片剪辑。

那么，现在还是“影片剪辑”。

我们要Ctrl+B打散，给它换成黄色。

（3）目前效果

先点出去回到“场景1”。

然后Ctrl+Enter查看效果。（这里只演示了鼠标悬停按钮颜色变化，点击按钮就会变成黄色啦，没有演示而已，怕大家颜色混乱）

（4）更改代码

可以看到，上边，将鼠标放上去的时候（指向），按钮颜色在不停地闪。

怎样才能不闪呢？

先双击矩形进入“按钮”。

点击一下“指向”关键帧。

然后再双击进入“矩形（内）”。

按下快捷键F9，打开代码。

点击这个小箭头，然后点击“AS”。

双击文件“在此帧处停止”。

这里就会有代码。

（5）效果

然后咱们叉掉这些，点出去回到“场景1”。

然后ctrl+Enter看一下效果。

可以看到，当鼠标放上去的时候，按钮颜色（从蓝色变为绿色）很自然地变化，并没有跳动啦。

四、小案例

这里做一个鼠标点击，图片轮换的小案例。

（1）插入第一张

在第1帧插入小兔子图片。（调整图片大小与舞台贴合）

（2）插入第二张

在第2帧按F7插入“空白关键帧”。

然后将小松鼠图片拖拽进来。

（3）插入第三张

在第3帧按F7插入“空白关键帧”。

然后将小猫咪图片拖拽进来。

（4）创建按钮

新建一个图层。

在第1帧的位置，画一个矩形，将舞台遮盖。

然后将这个矩形转化为元件，类型为“按钮”。（按F8）

降低Alpha值，将它调为透明按钮。

（5）单击到下一帧停止

在第一帧按F9打开代码，双击文件“单击转到下一帧并停止”。

点击“确定”。

代码就有了。

然后将它们关掉。

看一下效果：

图片太大，无法显示，跳转查看。

（6）在此帧处停止

哎呀，一直跳呀。

我们继续在第1帧按F9调出代码。

双击文件“在此帧处停止”。

代码就自动填入了。

然后将它们叉掉，看一下效果：（点击一次，转到下一张图）

（7）返回到第一帧

刚才的效果，是单击一次，就转到下一张图片。

到最后一张图片，就点不动啦。

现在我想点击最后一张图片，转到第一张。

在图层二，第三帧按F9。

然后双击文件“单击以转到帧并停止”。

我们是想从最后一张，转移到第1帧，所以这个地方改为1。

叉掉之后，看一下效果：

希望文章对你有帮助，原创不易，多多支持~

An动画基础之按钮动画与基础代码相结合相关推荐

【Unity游戏开发】动画系统（三）按钮动画
文章目录动画系统之按钮动画 1. 按钮Botton 2. 创建一个Button按钮 3. 按钮动画 3.1 改变颜色 3.2 改变图片 3.3 改变动画结语动画系统之按钮动画动画系统是一个比较 ...
layaAir引擎制作游戏的图集动画、时间轴动画、和骨骼动画总结二
一.角色序列帧.ani动画的制作 1.在项目管理器中创建动画文件 2.创建动画模板,编辑动效名称 3.编辑序列帧动画 .ani格式动画的代码控制 1.动画加载loadAnmition() 2.播放与停 ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
An动画基础之元件的图形动画与按钮动画
文章目录一.图形动画 (1)图形动画与影片剪辑动画区别 (2)播放一次 (3)单帧效果二.按钮动画 (1)画一个圆角矩形 (2)元件类型转化为按钮 (3)功能介绍 1)指向 2)按下 3)点击 ( ...
【Android 基础】Animation 动画介绍和实现
转载自:http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Animation 动画类型 Android的animation由四种类型组成: XM ...
【Android基础】从属性动画看代码设计的艺术
3.0引入的属性动画相比之前的帧动画及补间动画做出了很大的设计上的突破,功能更加强大,结构上更加松耦合.在设计上很值得我们去学习. 做了这么几层抽象第一层:任何View的动画都可以抽象成对View某 ...
IOS开发基础之核心动画基础动画、关键帧、组动画案例
IOS开发基础之核心动画基础动画.关键帧.组动画案例案例源码在我的主页里.实现效果图 // // ViewController.m // 30-核心动画 // // Created by 鲁军 o ...
小人快跑之WPF基础——图形与动画（一）
前言: 之前为了完成一些任务,因为公司只能限定一些网络访问且不能用存储设备进行拷贝,所以自己在家里写了一个demo就放到csdn的下载区回公司再下下来,令人意外的是这个非常小的demo居然两天里就有几 ...

An动画基础之按钮动画与基础代码相结合