Blog Details

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。

叉掉之后,看一下效果:

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