当前位置：网站首页>An animation based button animation combined with basic code

An animation based button animation combined with basic code

2022-08-03 13:13:00 【The rain wing light dust】

在这里插入图片描述

The previous section covered the basic use of buttons,This section talks about the use in conjunction with the base code.

一、新建按钮

（1）画一个矩形

用【矩形工具】画一个圆角矩形.（Change the round angle to 80）

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

（2）Convert to button

Place the rectangle you just made,选中.

按F8转化为元件,类型为“按钮”.

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

二、指向

（1）Build components internally

Double click the enter button.

“弹起”when it is blue.

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

在“指向”的位置,按F6Convert to keyframes.

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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帧和第20The position of the frame creates keyframes.（快捷键F6）

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

（3）改变颜色

在第20帧的位置,Change its color to green.

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

（4）创建补间形状

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

这样的话,第5帧到第20The frame color is the transition.（From blue to green）

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

三、点击

（1）创建关键帧

First exit the current component and return to it“按钮”.

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

在“按下”的地方,按F6Convert to keyframes.

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

（2）换颜色

Just now we did“指向”is a movie clip.

那么,现在还是“影片剪辑”.

我们要Ctrl+B打散,Change it to yellow.

在这里插入图片描述

（3）目前效果

Go out and go back first“场景1”.

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

然后Ctrl+Enter查看效果.（Only the mouseover button color change is demonstrated here,Click the button and it will turn yellow,No demo just,I'm afraid everyone will be confused）

请添加图片描述

（4）更改代码

可以看到,上边,when the mouse is placed（指向）,The button color keeps flashing.

How can it not flash？

First double-click the rectangle to enter“按钮”.

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

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

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

Then double click to enter“矩形（内）”.

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

按下快捷键F9,打开代码.

点击这个小箭头,然后点击“AS”.

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

双击文件“Stop at this frame”.

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

There will be code here.

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

（5）效果

Then we fork these off,Click out to go back“场景1”.

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

然后ctrl+Enter看一下效果.

可以看到,当鼠标放上去的时候,按钮颜色（from blue to green）change naturally,It didn't jump.
请添加图片描述

四、小案例

Do a mouse click here,A small case of image rotation.

（1）Insert the first sheet

在第1Frame insert bunny picture.（Resize the picture to fit the stage）

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

（2）Insert the second sheet

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

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

Then drag the squirrel picture into it.

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

（3）Insert the third sheet

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

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

Then drag in the kitten picture.

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

（4）创建按钮

新建一个图层.

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

在第1帧的位置,画一个矩形,Cover the stage.

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

Then convert this rectangle into a component,类型为“按钮”.（按F8）

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

降低Alpha值,Make it a transparent button.

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

（5）Click to stop at the next frame

Press on the first frameF9打开代码,双击文件“Click to go to the next frame and stop”.

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

点击“确定”.

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

The code is there.

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

Then turn them off.

看一下效果：

图片太大,无法显示,跳转查看.

（6）Stop at this frame

哎呀,keep jumping.

我们继续在第1帧按F9call out code.

双击文件“Stop at this frame”.

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

The code is automatically filled in.

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

Then fork them off,看一下效果：（点击一次,Go to the next image）
请添加图片描述

（7）返回到第一帧

The effect just now,is a single click,Just go to the next picture.

to the last picture,Just don't move.

Now I want to click on the last image,转到第一张.

on layer two,Press the third frameF9.

然后双击文件“Click to go to frame and stop”.

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

We want to start with the last one,转移到第1帧,So this place changed to1.

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

After fork off,看一下效果：

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

原网站

版权声明
本文为[The rain wing light dust]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/215/202208031228576823.html