在这里插入图片描述

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

一、新建按钮

（1）画一个矩形

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZtANaru9-1659313395233)(D:\Typora图片\image-20220731191239419.png)]$

（2）转化为按钮

将刚才做的矩形，选中。

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U4a7nO0r-1659313395237)(D:\Typora图片\image-20220731191355120.png)]$

二、指向

（1）内部建立元件

双击进入按钮。

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBzffrkx-1659313395239)(D:\Typora图片\image-20220731191528431.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OeLtvatt-1659313395239)(D:\Typora图片\image-20220731191711798.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7bgVDGpx-1659313395240)(D:\Typora图片\image-20220731191834409.png)]$

（2）创建关键帧

然后双击进入。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uxq1CWPY-1659313395240)(D:\Typora图片\image-20220731191939306.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OODaznpe-1659313395241)(D:\Typora图片\image-20220731192201333.png)]$

（3）改变颜色

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KLYV3XSk-1659313395242)(D:\Typora图片\image-20220731192451405.png)]$

（4）创建补间形状

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0yshURGf-1659313395242)(D:\Typora图片\image-20220731192629068.png)]$

三、点击

（1）创建关键帧

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yLiP6RqY-1659313395242)(D:\Typora图片\image-20220731193020495.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NvzOu1YD-1659313395244)(D:\Typora图片\image-20220731193105757.png)]$

（2）换颜色

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

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

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

在这里插入图片描述

（3）目前效果

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rqWjW5p3-1659313395244)(D:\Typora图片\image-20220731193629059.png)]$

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

请添加图片描述

（4）更改代码

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

怎样才能不闪呢？

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7WnbxVpR-1659313395245)(D:\Typora图片\image-20220731194039188.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-saHCfpAI-1659313395245)(D:\Typora图片\image-20220731194127693.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-da3QnNvc-1659313395246)(D:\Typora图片\image-20220731194201658.png)]$

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IRK9oXv3-1659313395246)(D:\Typora图片\image-20220731194332481.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MuYhPzfk-1659313395246)(D:\Typora图片\image-20220731194438647.png)]$

这里就会有代码。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-alLVLoRa-1659313395246)(D:\Typora图片\image-20220731194607701.png)]$

（5）效果

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PGMWCENW-1659313395247)(D:\Typora图片\image-20220731194659974.png)]$

然后ctrl+Enter看一下效果。

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

四、小案例

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

（1）插入第一张

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUZ22MTU-1659313395247)(D:\Typora图片\image-20220731195905831.png)]$

（2）插入第二张

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GWM7miJg-1659313395247)(D:\Typora图片\image-20220731200017473.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vgnzk3zv-1659313395248)(D:\Typora图片\image-20220731200531908.png)]$

（3）插入第三张

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ClJo2hKT-1659313395248)(D:\Typora图片\image-20220731213957089.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pvyfEK5O-1659313395249)(D:\Typora图片\image-20220731214052444.png)]$

（4）创建按钮

新建一个图层。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-94ySi4Ci-1659313395249)(D:\Typora图片\image-20220731214229325.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wDIgy3ZC-1659313395249)(D:\Typora图片\image-20220731214301677.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ISc24vEm-1659313395250)(D:\Typora图片\image-20220731214419164.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-034euyy9-1659313395250)(D:\Typora图片\image-20220731214538500.png)]$

（5）单击到下一帧停止

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rAvShQ0j-1659313395255)(D:\Typora图片\image-20220731214732720.png)]$

点击“确定”。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nUW4ZhWf-1659313395256)(D:\Typora图片\image-20220731214845521.png)]$

代码就有了。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VVsen3Gd-1659313395256)(D:\Typora图片\image-20220731214924830.png)]$

然后将它们关掉。

看一下效果：

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

（6）在此帧处停止

哎呀，一直跳呀。

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-svqr88My-1659313395257)(D:\Typora图片\image-20220731215607252.png)]$

代码就自动填入了。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qgbK7t7t-1659313395258)(D:\Typora图片\image-20220731215648530.png)]$

然后将它们叉掉，看一下效果：（点击一次，转到下一张图）
请添加图片描述

（7）返回到第一帧

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

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

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

在图层二，第三帧按F9。

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NQrkywYz-1659313395258)(D:\Typora图片\image-20220731221140071.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M0fme1Ea-1659313395259)(D:\Typora图片\image-20220731221329659.png)]$

叉掉之后，看一下效果：

请添加图片描述
希望文章对你有帮助，原创不易，多多支持~
在这里插入图片描述

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

一、新建按钮

（1）画一个矩形

（2）转化为按钮

二、指向

（1）内部建立元件

（2）创建关键帧

（3）改变颜色

（4）创建补间形状

三、点击

（1）创建关键帧

（2）换颜色

（3）目前效果

（4）更改代码

（5）效果

四、小案例

（1）插入第一张

（2）插入第二张

（3）插入第三张

（4）创建按钮

（5）单击到下一帧停止

（6）在此帧处停止

（7）返回到第一帧

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

一、新建按钮

（1）画一个矩形

（2）转化为按钮

二、指向

（1）内部建立元件

（2）创建关键帧

（3）改变颜色

（4）创建补间形状

三、点击

（1）创建关键帧

（2）换颜色

（3）目前效果

（4）更改代码

（5）效果

四、小案例

（1）插入第一张

（2）插入第二张

（3）插入第三张

（4）创建按钮

（5）单击到下一帧停止

（6）在此帧处停止

（7）返回到第一帧

热门文章

最新文章

相关电子书

相关实验场景