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