交互视频《多结局交互》教程
#自由编辑器 #空白制作 #通用制作 #入门难度
最后更新于
#自由编辑器 #空白制作 #通用制作 #入门难度
最后更新于
温馨提示:入门难度模板《多结局交互视频》就是按照这个教程制作的哦!
【制作难度】:⭐
【适用产品】:普遍适用
【交互方式】:点击
【交互次数】:2步跳转
【线程】:双线程
【核心资产】:视频(3段/连贯的)
【功能】:动画-缩放缓动、事件-按下跳转指定场景、事件-定时触发从头播放动画
手机试玩效果最佳 | 竖屏 | 横屏 |
---|---|---|
我们在开始制作之前需要将本案例的玩法逻辑进行简单的梳理:
进入试玩,循环播放视频【美女被骚扰】;
出现【左右选择指引】,引导玩家按下选项进行辨别;
玩家按下左侧【救她】选项时:进入救人结局
播放1次视频【主角飞踢画面+美女感谢】
再次出现【左右选择指引】,引导玩家按下选项进行辨别
玩家全屏按下,跳转应用商店
玩家按下右侧【不救她】选项时:进入逃跑结局;
播放1次视频【主角反向逃跑遇到BOSS】
再次出现【左右选择指引】,引导玩家按下选项进行辨别
玩家全屏按下,跳转应用商店
核心思想:让单个场景里的动画和事件尽可能少,场景拆分逻辑清晰,图层结构简单
场景拆分:根据第三部分的玩法梳理,我们可将本案例设置为3个场景来制作
(场景1:诱导选择;场景2:结局A;场景3:结局B)
在【全局设置】中添加背景音乐、背景图片
1)在【全局场景】中添加常驻信息:logo、CTA按钮
2)调整各资产到合适的位置大小
3)根据资产类型对资产进行编组、排序、命名
3.场景1
1)在【场景1】中添加视频、音效、指引手指、指引文案、选项按钮
2)调整各资产到合适的位置大小
3)根据资产类型对资产进行编组、排序、命名
1)在【场景2】【场景3】中分别添加视频、指引手指、选项按钮
2)调整各资产到合适的位置大小
3)根据资产类型对资产进行编组、排序、命名
因手指在诱导选择时,需要进行位移,同时要根据按钮的缩放同步进行缩放,因此我们为手指设置2个通用动画,分别为:位移缓动、缩放缓动;
1)在场景1左侧图层处选中手指图片【gf_hand】,添加动画-通用-位移缓动。参数设置如下:
2)继续添加动画-通用-缩放缓动。参数设置如下:
1)在场景1图层处选中左侧选项按钮组【left_options】,添加动画-通用-缩放缓动。参数设置如下:
2)复制动画到右侧选项按钮组【right_options】,修改动画曲线即可:
因场景2/场景3中的手指动画和选项按钮动画同场景1,因此我们可以【复制/粘贴动画】来快速完成制作。
另外,我们可以在此基础上新增透明度缓动动画,将资产的起始透明度设为0,即进入场景时手指和选项按钮处于不显示状态,待视频播放完成后再显示。参数设置如下:
我们分别为左右两个选项按钮设置两个手势区域,先对左侧手势区域设置事件,再将事件复制到右侧手势区域,简单调整,来快速完成制作。
1)选中左侧手势区域图层;
2)添加事件-按下;
3)添加响应事件-暂停播放单个动画;(即选项按钮的缩放动画)
4)添加响应事件-执行延迟0.3s后跳转指定场景;(即在玩家按下按钮0.3s后跳转到对应结局)
5)其他响应事件:从头播放音效;设置埋点信息
1)在场景2下添加事件-定时触发;
2)添加响应事件-执行延迟3s后从头播放全部动画;(即当视频播放结束时,从头播放手指和选项按钮动画)
3)添加事件-按下,添加响应事件-跳转应用商店,设置埋点信息,上报试玩结束
注:场景3的事件设置同理场景2,可通过【复制/粘贴事件】来快速完成制作。
在【全局场景】选中按钮组,添加事件-按下,添加响应事件-跳转应用商店
每个场景竖屏制作完成后,均需进行横屏排版(建议多使用“复用竖屏位置尺寸配置”按钮)
对各机型及其横竖屏进行屏幕适配,并预览适配效果是否合适
3.整体预览
全部制作完成后,可对不同机型/不同语言/横竖屏进行整体预览
在教程最后,我们为您提供了本案例所使用到的全部资源,点击压缩包即可下载。您可以用此资源跟着教程尝试制作,以便尽快上手使用自由编辑器
场景名称 | 场景1-诱导选择 | 场景2-结局A | 场景3-结局B |
---|---|---|---|
扫码试玩
效果图
场景描述
循环播放视频【美女被骚扰】,引导玩家做出选择
播放结局A视频,视频播放结束时引导玩家做出第二轮选择
播放结局B视频,视频播放结束时引导玩家做出第二轮选择
动画
【选项按钮】:缩放缓动
【指引手指】:缩放缓动+位移缓动
【选项按钮】:缩放缓动+透明度缓动
【指引手指】:缩放缓动+位移缓动
【选项按钮】:缩放缓动+透明度缓动
【指引手指】:缩放缓动+位移缓动
核心事件
触发对象:图层-手势区域
触发操作:按下
响应事件:跳转指定场景
触发对象:场景-场景2
触发操作:定时触发
响应事件:从头播放全部动画
触发对象:场景-场景2
触发操作:按下
响应事件:跳转应用商店
触发对象:场景-场景3
触发操作:定时触发
响应事件:从头播放全部动画
触发对象:场景-场景3
触发操作:按下
响应事件:跳转应用商店
资产清单
【视频】:入场自动播放、无限循环
【音频】:点击音效
【图片】:指引文案、指引手指、选项按钮
【视频】:入场自动播放、关闭无限循环
【图片】:指引手指、选项按钮
【视频】:入场自动播放、关闭无限循环
【图片】:指引手指、选项按钮