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

分类: 365beat怎么下载 发布时间: 2026-10-06 22:00:20
作者: admin 阅读: 5441 | 点赞: 28
An动画基础之按钮动画与基础代码相结合

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

一、新建按钮

(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。

叉掉之后,看一下效果:

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