# 《2步滑动交互视频》模板自由编辑教程

## <mark style="color:blue;">**一、对比展示**</mark> <a href="#aluje" id="aluje"></a>

我们先来看一下使用**模板自由编辑**前后的对比：[迭代前](https://tinyurl.com/335cx5e6) VS [迭代后](https://tinyurl.com/32fwappc)

<div align="left"><figure><img src="/files/iukOEXVa7A2IqQqBBJJ0" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">**二、迭代内容概括**</mark> <a href="#zxvfg" id="zxvfg"></a>

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

### 1.场景及资产 <a href="#yjysk" id="yjysk"></a>

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

2）隐藏资产——隐藏或删除了不需要的资产，包含指引文本组及指引虚线

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

4）新增资产——全局场景新增产品名称文本；场景1增加金额面板相关资产及粒子特效；场景2结束页增加奖励面板相关资产及两个下载按钮

### 2.动画及特效 <a href="#hndzz" id="hndzz"></a>

1）修改动画——删减同时替换手指动画，并重新调整参数

2）新增动画——为新增资产添加相应动画，包括：金额文本、下载按钮

### 3.事件设置 <a href="#ylidl" id="ylidl"></a>

1）修改事件——将场景1手势区域2的“按下”事件整个复制到场景2，作为场景事件；修改场景1手势区域2“按下”的响应事件为“跳转应用商店”“跳转下一场景”；

2）新增事件——增加场景1视频“结束时”的响应事件“显示并播放粒子特效”“从头播放文本动画”；为场景2的下载按钮增加跳转事件

### 4.文本翻译 <a href="#cs5zi" id="cs5zi"></a>

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

### 5.横屏适配 <a href="#gqxtf" id="gqxtf"></a>

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

## <mark style="color:blue;">**三、迭代内容详解**</mark> <a href="#ypqot" id="ypqot"></a>

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

### 1.场景及资产 <a href="#aqu3j" id="aqu3j"></a>

<mark style="color:red;">**Tips：**</mark>在开始调整前，我们可先统一将新的资产上传到【项目资产】，方便后续替换或新增资产

<figure><img src="/files/d7qfM77AaAe3JATdc3yh" alt=""><figcaption></figcaption></figure>

#### **1）替换资产**

主要替换的资产有：背景图/背景音乐/视频/音效/手指图片/logo/下载按钮/免责声明

* 选中需要替换的资产图层，点击右侧【替换】按钮，调起资产库弹窗
* 在【项目资产】一栏选择要替换的资产，点击【+】按钮即可完成替换

<figure><img src="/files/rHy4XgWIgJKdJcKZx0Fw" alt=""><figcaption></figcaption></figure>

* 文本可直接选中图层，在右侧文本框直接进行修改
* 调整完文本内容和样式，我们可顺便点击【应用到其他语言】按钮，后续调整其他语言样式时会更加方便快捷

<figure><img src="/files/lkrTD9OV7U6YoRxqedWC" alt=""><figcaption></figcaption></figure>

#### **2）隐藏/删除资产**

在本案例中，因准备的视频资产已包含“抽奖”字样的指示，所以模板原有的指引文案就不需要了，指引虚线在迭代时也不需要，可以将其隐藏或删除；

<figure><img src="/files/sjvBFaUYMN84311VYj5E" alt=""><figcaption></figcaption></figure>

#### **3）新增场景**

在本案例中，我们希望场景2的结算画面是置于玩法画面之上的，因此我们可以通过【复制场景】的方式来保留玩法画面，在此基础上新增资产来完成场景2的快速制作。复制完成后，我们可删除无用图层。

<figure><img src="/files/2KRQiPIWDLPG1aTZ1JB4" alt=""><figcaption></figcaption></figure>

同时，在场景2的【场景设置】中，我们选择将全局场景【置于场景底层】

<figure><img src="/files/IoNk15hM9BISoxwjDg4J" alt=""><figcaption></figcaption></figure>

#### **4）新增资产**

全局场景：产品名称

场景1：金额面板/金额文本/提现按钮/金币粒子特效

场景2：遮罩/抽奖底图/奖励面板/奖励物品图片/奖励文本/下载按钮\*2/散射光粒子特效

* 点击打开【项目资产】窗口，添加所需资产
* 调整各资产位置及大小，并对同类资产进行编组
* <mark style="color:red;">**注意：**</mark>在新增资产时需关注是否要调整屏幕适配方式（默认居中），如需要，可在调整资产时一并调整

<figure><img src="/files/9UDsIHJzs1gqylRmTjic" alt=""><figcaption></figcaption></figure>

### 2.动画及特效 <a href="#ssrbm" id="ssrbm"></a>

#### **1）修改动画**

在本案例中，我们需要将手指做成点击效果，因此我们将“旋转缓动”替换为“缩放缓动”，并删除“透明度缓动”“位移缓动”这两个不需要的动画，并重新调整位置及参数。具体参数设置如下：

<div align="left"><figure><img src="/files/zCOzBtfgEdsJHRUu1vtX" alt=""><figcaption></figcaption></figure></div>

#### **2）新增动画**

2-1）为金额文本“¥0”增加“退场动画-淡出”，关闭自动播放，具体参数设置如下：

<figure><img src="/files/uJjog1BGD8Mzjul3w4oe" alt=""><figcaption></figcaption></figure>

2-2）为金额文本“¥999”增加“入场动画-淡入”，关闭自动播放，具体参数设置如下：

<figure><img src="/files/Dlx9XQNKSoukKTeOGB53" alt=""><figcaption></figcaption></figure>

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

<div align="left"><figure><img src="/files/SitqtCCtdxitDFjRDBv2" alt=""><figcaption></figcaption></figure></div>

#### **3）新增粒子特效**

调整完动画，我们对粒子特效进行添加和调整。

3-1）金币爆出特效

场景1：点击【资产库】，调起资产库弹窗，在粒子分类下添加需要的粒子特效

<figure><img src="/files/zCGTPIFJcv5ktqg2fpFZ" alt=""><figcaption></figcaption></figure>

简单调整粒子的位置及参数后，我们将其隐藏掉，在后续通过事件触发显示粒子

<figure><img src="/files/TPE8RdylUMcK5XGBrcEX" alt=""><figcaption></figcaption></figure>

3-2）背景散射光特效

场景2：点击【资产库】，调起资产库弹窗，在粒子分类下添加需要的粒子特效

<figure><img src="/files/9h1dDVTh2XnH6b6EjNzt" alt=""><figcaption></figcaption></figure>

简单调整粒子的位置及参数，并将其图层拖拽到奖励面板之下，作为背景显示

<figure><img src="/files/DEE0l3aHfviA08bq2tnz" alt=""><figcaption></figcaption></figure>

### 3.事件设置 <a href="#xhudq" id="xhudq"></a>

#### **1）修改事件**

1-1）将场景1手势区域2的“按下”事件整个复制到场景2，作为场景事件（可根据需要在场景2添加“按下播放点击音效”的响应事件）：

<div align="left"><figure><img src="/files/icow23NiFnA5jTY7XkKp" alt=""><figcaption></figcaption></figure></div>

1-2）将场景1手势区域2“按下”的响应事件修改为“跳转应用商店”“跳转下一场景”

<div align="left"><figure><img src="/files/iVjmgXmiphk0W7hiEho5" alt=""><figcaption></figcaption></figure></div>

#### **2）新增事件**

2-1）为场景1视频事件“结束时”增加响应事件“显示并播放粒子特效”“从头播放文本的淡入淡出动画”；增加响应事件“执行延迟1.5s”，并将其拖拽到原本的显示手指指引与手势区域2的响应事件前（即在视频播放完成后再出现操作指引，才可继续点击）

<div align="left"><figure><img src="/files/YeVpINBKN2nfzyKPCVi1" alt=""><figcaption></figcaption></figure></div>

2-2)为场景1的提现按钮添加手势区域及“按下-跳转应用商店”的事件

<figure><img src="/files/McgbiEu3IjTm9ztFhxNO" alt=""><figcaption></figcaption></figure>

2-3)为场景2的两个下载按钮分别添加“按下-跳转应用商店”的事件

<figure><img src="/files/enIXY19ceK7Gye4SiV8k" alt=""><figcaption></figcaption></figure>

### 4.文本翻译 <a href="#fgprf" id="fgprf"></a>

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

<div align="left"><figure><img src="/files/WvUWxnENiAjYNhP4Tjvq" alt=""><figcaption></figcaption></figure></div>

* 选择目标语言英语，并勾选所有文本，点击【翻译(内测)】按钮进行智能翻译
* 若对翻译结果不满意，我们可直接在文本框内进行微调
* 调整完毕后，点击【提交】，多语言翻译即生效

<div align="left"><figure><img src="/files/9M3AJd7rln2P5PrDGhut" alt="" width="475"><figcaption></figcaption></figure></div>

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

<figure><img src="/files/0tOszuZJ32CwVChUeKeM" alt=""><figcaption></figcaption></figure>

### 5.横屏适配 <a href="#sl2ai" id="sl2ai"></a>

* <mark style="color:red;">注意：每个场景竖屏调整完成后，均需进行横屏排版（建议多使用“复用竖屏位置尺寸配置”按钮）</mark>
* <mark style="color:red;">同时需注意横屏下各图层的屏幕适配方式是否正确</mark>

<figure><img src="/files/7eoCT61Fr0o5aoFlKock" alt=""><figcaption></figcaption></figure>

### 6.**整体预览** <a href="#ozdcc" id="ozdcc"></a>

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

<figure><img src="/files/lwhycCLWpGP7SQmDOzMc" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">**四、演示录屏**</mark> <a href="#ypqot" id="ypqot"></a>

注：本视频为以上图文教程的**演示录屏**，仅有画面内容，未添加配音；

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

{% embed url="<https://mmp-cdn.rayjump.com/res_store/1985012/65431e829d47e.mp4>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.playturbo.cn/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/tong-yong-zhi-zuo-an-li/ru-men-jiao-xue-mu-ban-zi-you-bian-ji/2-bu-hua-dong-jiao-hu-shi-pin-mu-ban-zi-you-bian-ji-jiao-cheng.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.