交互视频《2步滑动》教程
#自由编辑器 #空白制作 #初级难度
温馨提示：入门难度模板《2步滑动交互视频》就是按照这个教程制作的哦！
一、特征标签
【制作难度】：⭐
【适用产品】：普遍适用
【交互方式】：滑动
【交互次数】：2步跳转
【线程】：单线程
【核心资产】：视频（1段/连贯的）
【功能】：动画-旋转缓动、事件-按下从头播放视频、事件-按下隐藏素材、事件-视频结束时显示素材
二、效果预览
扫码试玩
三、玩法梳理
我们在开始制作之前需要将本案例的玩法逻辑进行简单的梳理：
进入试玩，展示【初始指引画面】，引导玩家滑动抓羊；
玩家全屏任意滑动，播放【羊羊飞到车里视频】；
视频播放结束，再次出现【手指指引】，引导玩家继续滑动抓羊；
玩家全屏任意按下，跳转应用商店
四、制作思路
核心思想：让单个场景里的动画和事件尽可能少，场景拆分逻辑清晰，图层结构简单
场景拆分：根据第三部分的玩法梳理，我们判断本案例只需设置1个场景即可
效果图
场景描述
视频暂停状态，引导玩家滑动抓羊
动画
【指引文案】：位移缓动
【指引虚线】：透明度缓动
【指引手指】：旋转缓动+透明度缓动+位移缓动
核心事件
触发对象：图层-手势区域（画面需足够大）
触发操作：按下（或任意滑动）
响应事件：从头播放视频
触发对象：图层-视频
触发操作：结束时
响应事件：显示素材
资产清单
【视频】：视频（关闭自动播放、无限循环）
【音频】：背景音乐、滑动音效、羊羊入车音效
【图片】：背景图片、手指、指引虚线、指引文案背景图、logo、CTA按钮
【文本】：指引文案、下载文案
五、制作指南
Step1 - 场景搭建
1.全局设置
在【全局设置】中添加背景音乐、背景图片
2.全局场景
1）在【全局场景】中添加常驻信息：logo、CTA按钮
2）调整各资产到合适的位置大小
3）根据资产类型对资产进行编组、排序、命名
3.场景1
1）在【场景1】中添加视频、音效、指引手指、指引虚线、指引文案
2）调整各资产到合适的位置大小
3）根据资产类型对资产进行编组、排序、命名
Step2 - 动效制作
1.指引文案
在左侧图层处选中指引文本组【group_guide】，添加动画-通用-位移缓动。参数设置如下：
2.指引虚线
在左侧图层处选中指引虚线图片【hand_line】，添加动画-通用-透明度缓动。参数设置如下：
3.指引手指
因手指在引导滑动时，需要进行旋转和位移，因此我们为手指设置2个通用动画，分别为：旋转缓动、位移缓动；为使手指效果更加自然，还可添加透明度缓动动画。
1）在左侧图层处选中手指图片【gf_hand】，添加动画-通用-旋转缓动。参数设置如下：
2）继续添加动画-通用-位移缓动。参数设置如下：
3）继续添加动画-通用-透明度缓动。参数设置如下：
Step3 - 逻辑设置
1.图层事件-手势区域1
因我们想要玩家全屏可滑动，且要区分第一次滑动与第二次滑动的区域，因此我们添加2个较大范围的手势区域，来分别作为第一次滑动与第二次滑动的区域，并在手势区域上设置事件。
1）选中手势区域1图层；
2）添加事件-按下；
（说明：此玩法也可将触发事件改为“任意滑动”，但使用“按下”会更容易触发事件）
3）添加响应事件-从头播放视频；从头播放滑动音效；
4）添加响应事件-隐藏素材指引相关；隐藏素材手指区域1；
（说明：当视频播放后，我们需将指引手指与文案隐藏掉，同时隐藏掉手势区域1，因为在第一次滑动过后，手势区域1就无存在的意义了，第二次滑动是在手势区域2上进行的）
5）其他响应事件：设置埋点信息；执行延迟0.5秒后播放羊羊入车音效
2.图层事件-视频
1）选中视频图层；
2）添加事件-结束时；
3）添加响应事件-显示素材指引相关；显示素材手指区域2；
3.图层事件-手势区域2
1）选中手势区域2图层；
2）添加事件-按下；
3）添加响应事件-跳转应用商店；设置埋点信息；上报试玩结束
4.图层事件-CTA按钮
选中按钮组，添加事件-按下，添加响应事件-跳转应用商店
Step4 - 整体预览
1.横屏排版
每个场景竖屏制作完成后，均需进行横屏排版（建议多使用“复用竖屏位置尺寸配置”按钮）
2.屏幕适配
对各机型及其横竖屏进行屏幕适配，并预览适配效果是否合适
3.整体预览
全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览
六、资源提供
在教程最后，我们为您提供了本案例所使用到的全部资源，点击压缩包即可下载。您可以用此资源跟着教程尝试制作，以便尽快上手使用自由编辑器
最后更新于
