《动态画面循环播放》模板自由编辑教程

#自由编辑器 #模板自由编辑 #入门难度

一、对比展示

我们先来看一下使用模板自由编辑前后的对比:迭代前 VS 迭代后

二、迭代内容概括

模板迭代后的改动,主要在以下几方面:

1.场景及资产

1)替换资产——视频/音频/图片/文本

2)新增场景——原模板仅有一个场景,迭代后的素材新增了“场景2”,即结束页面

3)新增资产——场景1求救相关资产:图片/文本/音效;场景2结束页相关资产:图片/文本

2.动画及特效

1)修改动画——替换手指动画,并重新调整参数

2)新增动画——为新增资产添加相应动画

3.事件设置

1)修改事件——将场景1的“按下”事件整个复制到场景2,作为场景事件;修改场景1“按下”的响应事件为“跳转下一场景”“暂停播放求救音效”

2)新增事件——为场景2的下载按钮增加跳转事件

4.文本翻译

将修改及新增后的中文文本翻译为英文,并微调格式

5.横屏适配

对每个场景的横屏进行排版调整

三、迭代内容详解

接下来,我们将配图详细介绍每一步骤。

1.场景及资产

Tips:在开始调整前,我们可先统一将新的资产上传到【项目资产】,方便后续替换或新增资产

1)替换资产

主要替换的资产有:背景图/背景音乐/视频/音效/手指图片(杀虫水)/指引文本/logo/下载按钮

  • 选中需要替换的资产图层,点击右侧【替换】按钮,调起资产库弹窗

  • 在【项目资产】一栏选择要替换的资产,点击【+】按钮即可完成替换

  • 文本可直接选中图层,在右侧文本框直接进行修改

  • 调整完文本内容和样式,我们可顺便点击【应用到其他语言】按钮,后续调整其他语言样式时会更加方便快捷

2)新增场景

在场景缩略图处右键选择【新建场景】或直接点击【+】按钮,即可在当前场景下增加一个新的场景

3)新增资产

场景1:警示图片/求救文案/求救音效

场景2:logo/下载按钮

  • 点击打开【项目资产】窗口,添加所需资产

  • 调整位置及大小

  • 注意:在新增资产时需关注是否要调整屏幕适配方式(默认居中),如需要,可在调整资产时一并调整

2.动画及特效

1)修改动画

将手指(杀虫水)动画由“位移缓动”替换为“缩放缓动”,并重新调整位置及参数。参数设置如下:

2)新增动画

2-1)为一张警示图片增加“强调动画-闪烁”。参数设置如下:

设置完成后,我们点击复制动画按钮,将该闪烁动画粘贴到另外三张警示图片上:按住Ctrl键(苹果电脑需按钮Command键),选中另外三张图片的图层,点击上方【粘贴-仅粘贴图层动画】即可

2-2)为求救文本增加“位移缓动”动画。参数设置如下:

2-3)为结束页下载按钮增加“缩放缓动”动画。参数设置如下:

3.事件设置

1)修改事件

1-1)将场景1的图层事件“按下”整个复制到场景2,作为场景事件:

1-2)将场景1的图层事件“按下”的响应事件修改为“跳转下一场景”,并添加响应事件“暂停播放求救音效”

2)新增事件

为场景2的下载按钮增加事件“按下-跳转应用商店”

4.文本翻译

  • 点击【全局设置】,在【默认语言】处点击笔刷图标,调起文本翻译窗口

  • 选择目标语言英语,并勾选所有文本,点击【翻译(内测)】按钮进行智能翻译

  • 若对翻译结果不满意,我们可直接在文本框内进行微调

  • 调整完毕后,点击【提交】,多语言翻译即生效

  • 然后我们点击切换到英语版本下预览,对英语文本的样式进行微调

5.横屏适配

  • 注意:每个场景竖屏调整完成后,均需进行横屏排版(建议多使用“复用竖屏位置尺寸配置”按钮)

  • 同时需注意横屏下各图层的屏幕适配方式是否正确

6.整体预览

全部调整完成后,我们对不同机型/不同语言/横竖屏进行整体预览试玩

四、演示录屏

注:本视频为以上图文教程的演示录屏,仅有画面内容,未添加配音;

视频详细记录了模板自由制作的迭代过程,演示速度基本没有调整,以方便您可以跟着视频一步步操作(如果已能对某一步骤熟悉操作,可酌情跳过)

最后更新于