转场效果

转场包括两种转场情景:图片之间的切换和场景之间的跳转。接下来将学习白场过渡、翻转、放大缩小、旋转切入、水平切入、旋转放大等效果,每个效果都会有这两种情景的制作~

点击这里下载转场功能示例

可以参考视频学习制作思路,也可以下拉查看图文教程~
动效转场的教程视频
能力和事件表制作转场效果的教程视频

转场效果可以有两种方法实现:动效和渐隐渐显能力。两种思路大同小异,大家自行选择。

动效

可以直接给黑白转场图,添加动效

动效里选择出现消失的方式

然后通过事件控制动效的播放和暂停

思路可以参考下面方式。

使用渐隐渐显能力制作转场

黑场/白场的过渡

白场黑场效果均是用一张白图或者黑图作为承接,通过将白色图片或者黑色图片渐隐渐显,实现转场。

同场景的两张图

舞台上放好两张位置重叠的图,

准备白色图片,

添加渐隐渐现能力,三个时间数值可以自由设置。注意设置不销毁,并且取消勾选初始状态

然后把白色图放在舞台上,注意图片顺序,白图在最上面

白图最开始不显示,右边属性取消勾选开始可见

然后添加个按钮,制作点击按钮,开启白场效果


添加事件,按钮被点击时,开启白场,也就是开始白图的渐隐渐现能力。

因为白图开始不可见,所以先显示白图,使用设置显隐动作

然后开始白图的渐隐渐现

因为渐现时间是1秒,所以在1秒后,把原来的图1隐藏,这样在白图渐隐后,新图2才会显示出来。
系统的等待动作,时间设为1

图1 的设置显隐,隐藏图1。

然后在白图渐隐结束后,隐藏白图。因为渐隐时间也是1秒,所以在等待1秒,隐藏白图

现在预览看效果就是白场啦。

黑场同理,图片换成黑图即可。

不同场景的白场切换
与图片切换类似,只要在白场的渐现后,跳转到新场景,然后在新场景里继续白图的渐隐效果。

先准备好素材,两个场景分别有白图。

因为白图的渐隐渐现在两个场景里表现,所以最好给白图添加两个渐隐渐现能力,分别控制。

选中能力,鼠标右键可以改名,

然后再黑白场景1里,设置点击按钮,白图渐现,并且在渐现结束(等待1秒)后,跳转场景

因为有两个渐隐渐显能力,所以选择动作的时候,要注意对应。

新场景里,在场景开始的时候要开启白图渐隐效果,同时在渐隐结束(等待1s)后,隐藏白图

预览看一下

按钮有点突兀,可以加个动作隐藏按钮

注意隐藏按钮的动作应放在最上面。预览看效果

如果不想要单独的白图、黑图过场,可以直接给图片添加渐隐渐现能力,实现淡入淡出效果,注意一定要设置好动作里的等待时间。

翻转

翻转,其实是改变图片的宽高。比如水平翻转,是图片的宽度从原尺寸较为0 ,再从0增加到原尺寸。

同场景的两张图

同样准备好两张图和按钮。

制作图1翻转为图2的效果。也就是图1宽度减小,图2宽度增加,先把图2的宽度设为0.

然后添加一个全局变量,命名缩放。这个变量用来判断当前是缩小还是放大。

添加事件,按钮点击时,图片1宽度缩小,可以通过设置系统变量缩放为1,


然后再添加一条事件,变量为1时,


设置图片1尺寸,宽度为自身宽度减去一个值,比如当前减去10.


当图片1宽度小于0 时,设置缩放为2,让图2放大。


因为比较尺寸的条件是个持续的条件,会一直执行,我们只要改变一次变量之就可以了,所以再加个系统的仅触发一次条件。


图1宽度小于0 ,以防图1显示,还需要隐藏掉图1

同样,当变量为2时,设置图片1尺寸,宽度为自身宽度加上一个值,比如当前加10.

当图片2宽度为原始大小时,设置缩放为0,结束所有的放大缩小效果

同样记得加个系统的仅触发一次条件。

整体事件

现在的效果是点按钮,图1先宽度变小,然后图2宽度变大,也就是水平翻转预览看一下

竖直翻转,修改图片的高度值即可。

场景翻转切换
准备两个场景,

宽度减少至 小于0时,跳转场景即可

新场景开始时,图片宽度增加。

效果预览

放大缩小

与翻转类似,不同的是,放大缩小是图片的宽高同时增减。比如缩小事件

旋转切入切出

图片的角度不断变化,即为旋转效果。角度不断增加,图片会顺时针旋转,角度减少,则图片逆时针旋转。

同场景的两张图
首先准备好两张图和按钮。

首先做点击按钮图1旋转切入的效果。添加一个全局变量,用来控制图片的角度增加,进而控制旋转效果。

因为希望图1绕着左下角旋转进来,所以先修改它的锚点。双击对象库里的图1,锚点放在左下角

然后添加事件,点击按钮,先把图片的角度设为270,这样他就显示在场景外,(也可以直接在舞台上修改图片的角度,这样就可以不添加这个设置角度的动作)

然后再添加动作,系统的设置值动作,将变量设置值为1


当变量为1的时候,让图1的角度不断增加,也就是顺时针旋转

这里设置每次让角度增加10,增加的角度数值越小,旋转效果就越慢。

当图1角度为360时,也就是角度为0 ,设置变量值为0,停止旋转效果



注意要加个仅触发一次的限制

旋转切入事件

效果

锚点的位置决定了图片绕着哪里旋转,角度的增减决定旋转的方向,角度增加为顺时针旋转,减少为逆时针。

旋转切出

点击按钮的时候,不需要修改图片角度,

当变量为2时,设置角度不断增加。

角度为90,也就是竖直向下时,将变量值改回0.

如果想要跳转场景,可以再加个跳转场景的动作

旋转切出事件

效果

水平切入切出

水平切入切出,其实是水平位置的改变,从场景里移动到场景外的某位置,或者从场景外移动到场景里的某位置

同场景的两张图

添加事件,按钮被点击时,图1移动到场景外的某位置,

这里,我们设置移动到自身位置+宽度的距离。

效果

如果想要切入,则先把精灵放在场景外,

然后设置事件,点击按钮,图片移动到某位置。

效果

场景切出跳转
在图片切换的基础上,增加一条事件:比较图片的位置,然后跳转场景

整体事件

组合效果-旋转放大

同场景的两张图

在放大的基础事件上,

宽高增加的动作后面,增加设置角度增加的动作。



效果

注意这张图的锚点没有修改仍然在图片中间,所以他是绕着中间旋转哦

还可以将放大缩小与旋转组合,事件在放大的基础上,增加缩小和旋转即可。效果如下

大家可以尝试搭配更多组合效果哦~

该教程是否对你有用?
联系方式
QQ:2967340017
邮箱:user_service@newlang.cn
公司地址:广州市天河区中山大道西238号301房(部位:自编之十二)

官方交流群

扫描二维码进入

交流群①

640215025

官方交流群

扫描二维码进入

交流群②

610394080

友情链接
联系我们
QQ:2967340017
Q群1(已满):640215025
Q群2:610394080
邮箱:user_service@newlang.cn
公司地址:广州市天河区中山大道西238号301房(部位:自编之十二)

粤ICP备18033026号 《服务协议》

Copyright © 2019 广州玖兔互娱信息科技有限公司 版权所有