IEC《动态画面循环播放》教程
#自由编辑器 #空白制作 #入门难度
温馨提示：入门难度模板《动态画面循环播放》就是按照这个教程制作的哦！
一、特征标签
【制作难度】：⭐
【适用产品】：普遍适用
【交互方式】：点击
【交互次数】：1步跳转
【线程】：单线程
【核心资产】：视频（1段/可循环播放）
【功能】：动画-闪烁、动画-位移缓动、事件-按下跳转应用商店
二、效果预览
扫码试玩
三、玩法梳理
我们在开始制作之前需要将本案例的玩法逻辑进行简单的梳理：
进入试玩，初始画面展示一段循环播放的动态画面，显示蛋糕周围爬满了虫子；
出现操作指引，引导玩家点击画面来喷射杀虫水；
玩家全屏任意按下，跳转应用商店
四、制作思路
核心思想：让单个场景里的动画和事件尽可能少，场景拆分逻辑清晰，图层结构简单
场景拆分：根据第三部分的玩法梳理，我们判断本案例只需设置1个场景即可
效果图
场景描述
动态画面循环播放，引导玩家点击驱赶虫子
动画
【杀虫水(即指引手指)】：位移缓动
【指引文案】：闪烁
核心事件
触发对象：图层-组节点（画面需足够大）
触发操作：按下
响应事件：跳转应用商店
资产清单
【视频】：视频（设置为入场自动播放、无限循环）
【音频】：背景音乐、点击音效
【图片】：背景图片、杀虫水(手指)、指引文案背景图、logo、CTA按钮
【文本】：指引文案、下载文案
五、制作指南
Step1 - 场景搭建
1.全局设置
在【全局设置】中添加背景音乐、背景图片
2.场景1
1）在【场景1】中添加视频、音效、指引手指(杀虫水)、指引文案、logo、CTA按钮
2）调整各资产到合适的位置大小
3）根据资产类型对资产进行编组、排序、命名
Step2 - 动效制作
1.指引文案
在左侧图层处选中指引文本【guidanceText】，添加动画-强调动画-闪烁。参数设置如下：
2.杀虫水（手指）
在左侧图层处选中杀虫水图片【hand】，添加动画-通用-位移缓动。参数设置如下：
Step3 - 逻辑设置
1.图层事件-组节点
1）选中组节点（注：因需设置全屏按下跳转商店，所以组的范围需足够大；也可直接在场景1上设置场景事件，步骤同理）；
2）添加事件-按下；
3）添加响应事件-跳转应用商店；
4）其他响应事件：设置埋点信息/上报试玩结束/从头播放点击音效
2.图层事件-CTA按钮
选中按钮组，添加事件-按下，添加响应事件-跳转应用商店
Step4 - 整体预览
1.横屏排版
每个场景竖屏制作完成后，均需进行横屏排版（建议多使用“复用竖屏位置尺寸配置”按钮）
2.屏幕适配
对各机型及其横竖屏进行屏幕适配，并预览适配效果是否合适
3.整体预览
全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览
六、演示录屏
注：本视频为以上图文教程的演示录屏，仅有画面内容，未添加配音；
视频详细记录了本案例空白制作的操作过程，演示速度基本没有调整，方便您查看学习（如果您已能对某一步骤熟悉操作，可酌情跳过）
此外，在演示录屏下方还为您提供了本案例所使用到的全部资源，点击压缩包即可下载。您可以用此资源跟着教程尝试制作，以便尽快上手使用自由编辑器
最后更新于
