# 交互视频《模拟移动》教程

温馨提示：本篇教程主要讲解**如何通过交互视频来实现"模拟玩家实时操作"的效果**，建议搭配DEMO食用效果更佳哦！

## <mark style="color:blue;">一、特征标签</mark> <a href="#nubzy" id="nubzy"></a>

* 【制作难度】：⭐⭐
* 【适用产品】：普遍适用(尤其是摇杆玩法产品)
* 【交互方式】：按下/抬起
* 【自由度】：固定流程
* 【核心资产】：视频
* 【核心功能】：按下-继续播放视频；抬起-暂停播放视频

## <mark style="color:blue;">二、效果预览</mark> <a href="#dlwsv" id="dlwsv"></a>

| 手机试玩效果最佳                                                            | 竖屏                                                                  | 横屏                                                                  |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="/files/R0ABeS10KSq0OUS5CcaO" alt="" data-size="original"> | <img src="/files/7FYYPB8lvKFh7C4XtPBY" alt="" data-size="original"> | <img src="/files/zsCp64Zhz7OxzrnOGOgI" alt="" data-size="original"> |
| 扫码试玩                                                                | [点击试玩](https://tinyurl.com/3tndebp6)                                | [点击试玩](https://tinyurl.com/3tndebp6)                                |

## <mark style="color:blue;">三、玩法梳理</mark> <a href="#nbhek" id="nbhek"></a>

**我们在开始制作之前需要将本案例的玩法逻辑进行简单的梳理：**

1）进入试玩，自动播放【丧失围攻视频】<mark style="background-color:yellow;">（初始视频1）</mark>

2）视频播放结束，出现【操作指引】，引导玩家按下继续对抗丧尸

3）玩家全屏任意按下，播放【对抗丧尸视频】<mark style="background-color:yellow;">（核心视频2）</mark>，同时加载进度条；每当玩家抬起，暂停播放【对抗丧尸视频】，同时进度条停止加载，并出现【操作指引】

4）视频播放结束，自动跳转商店，玩家从商店返回可继续试玩

5）玩家全屏任意按下，播放【对抗丧尸视频】<mark style="background-color:yellow;">（核心视频3）</mark>，同时加载进度条；每当玩家抬起，暂停播放【对抗丧尸视频】，同时进度条停止加载，并出现【操作指引】

6）视频播放结束，进度条停止加载，并出现【操作指引】，玩家按下即跳转商店

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

## <mark style="color:blue;">四、制作思路</mark> <a href="#agjmh" id="agjmh"></a>

**核心思想：**&#x573A;景拆分逻辑清晰，图层结构简单，单个场景里的动画和事件尽可能少

**场景拆分：**&#x56E0;本案例玩法较简单，我们只需用 1 个场景来制作即可

<table data-full-width="false"><thead><tr><th width="164">场景名称</th><th>场景1-核心玩法</th></tr></thead><tbody><tr><td><strong>效果图</strong></td><td><img src="/files/7FYYPB8lvKFh7C4XtPBY" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>玩家按下就播放视频，抬手就暂停播放视频，以此来模拟玩家实时交互的效果</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>静帧图片：</strong>操作指引、进度条</p><p><strong>视频：</strong>初始视频1、核心视频2、核心视频3</p><p><mark style="color:red;">注：因为我们对本案例的DEMO有"核心视频播放4s后,有一次强制跳转"的设定，为了便于理解和制作，将核心视频拆分成了两段(核心视频2总时长为4s)。若您不需要中途的强制跳转，只需准备一段核心视频即可</mark></p></td></tr><tr><td><strong>核心动画</strong></td><td><p>操作指引：位移缓动</p><p>进度条：缩放缓动</p></td></tr><tr><td><strong>核心事件</strong></td><td><p>触发对象：视频图层</p><p>触发事件：按下；抬起</p><p>响应事件：继续播放视频；暂停播放视频</p></td></tr></tbody></table>

## <mark style="color:blue;">五、制作指南</mark> <a href="#cria2" id="cria2"></a>

\*核心内容为Step3【事件设置】

### Step1 - 场景搭建 <a href="#wepzn" id="wepzn"></a>

建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用

#### **1.全局设置**

1）在【全局设置】中添加背景音乐、背景图片

2）在【全局场景】下添加常驻下载按钮、logo等产品信息

#### **2.场景1**

1）将所需视频、图片添加进场景1

<mark style="color:red;">温馨提示："进度条"和"操作指引"相关资产，都可从【预设库】直接获取哦！</mark>

<figure><img src="/files/4kzrYGhoUnFAm49joeoE" alt=""><figcaption></figcaption></figure>

2）调整各资产到合适的位置大小

3）根据资产类型对资产进行编组、排序、命名

<figure><img src="/files/6HwtpC1CIZV1jslPgRZB" alt=""><figcaption></figcaption></figure>

4）将核心视频(核心视频2+核心视频3)设为"隐藏"状态，并关闭【入场自动播放】，在后续通过事件来控制视频的显示和播放

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

5）调整横屏排版：可选中所有最高层级的图层，使用【复用竖屏位置尺寸配置】功能一键排版，然后再适当调整【位置】和【缩放比例】即可

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

6）调整屏幕适配方式：在本案例中，我们想要竖屏下的产品信息始终位于屏幕底部，所以我们要调整其适配方式。直接选中该图层，在右侧【屏幕适配方式】处点击向下图标即可（其他图层默认居中适配，无需调整）

<figure><img src="/files/78P0qO4bpxK3TL5Ts5xR" alt=""><figcaption></figcaption></figure>

### Step2 - 动画设置 <a href="#tpuup" id="tpuup"></a>

在本案例中，需要设置动画的资产有：指引手指、指引文案、进度条(选做)、角色(选做)

<mark style="color:red;">温馨提示：若您使用了预设，则无需自己设置动画！</mark>

#### **1.指引手指**

1）选中手指图片\[gf\_hand]，添加动画-通用-位移缓动，参数设置如下(手指横向移动动画)：

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

2）选中手指组\[gf\_1]，添加动画-通用-位移缓动，参数设置如下(手指纵向移动动画)：

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

#### **2.指引文案**

选中指引文本\[tguidelines]，添加动画-强调动画-上下来回，参数设置如下（设置完成后可隐藏整个指引组，在后续通过事件控制）：

<figure><img src="/files/4UDDiMZvorG6wEtxErmW" alt=""><figcaption></figcaption></figure>

#### 3.进度条(选做)

1）选中进度条图片\[progress\_bar]，将其【锚点】修改为（0,50），并取消勾选【参数横竖屏拆分】

注意：进度条图片左右需贴边，不能留空

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

2）添加动画-通用-缩放缓动，参数设置如下：

注意：这里的【持续时间】代表的是进度条加载到头所需的总时长。在本案例中，我们设定了"在进度条快加载完时，玩家不能再交互"，也就是当所有视频播放结束后，进度条需要差一截才到头，所以就需要"进度条播放的总时长＞所有视频加起来的总时长"。本案例的三段视频总时长为8.7s左右，所以在这里我们可以将进度条的【持续时间】设置为10s或更长

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

#### 4.角色(选做)

1）选中角色图片\[role\_1]，将其【锚点】修改为（50,100），并取消勾选【参数横竖屏拆分】

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

2）添加动画-通用-缩放缓动，参数设置如下（设置完成后可隐藏该图层，在后续通过事件控制）：

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

### <mark style="background-color:red;">Step3 - 事件设置</mark> <a href="#umduz" id="umduz"></a>

本案例的所有事件集中设置在三个视频图层上以及场景1上，我们按操作顺序依次讲解

#### <mark style="color:red;">1.图层: video\_01（初始视频1）</mark>

1）选中图层\[video\_01]，添加事件-开始时

* 添加响应事件：从头播放进度条动画

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

2）添加事件-结束时

* 添加响应事件：隐藏初始视频1；显示核心视频2、显示角色图片、显示操作指引组
* 添加响应事件：从头播放所有指引相关动画；同时暂停播放进度条动画

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

#### <mark style="color:red;">2.图层: video\_02（核心视频2）</mark>

1）选中图层\[video\_02]，添加事件-按下

* 添加响应事件：设置埋点，修改埋点名称为"玩家第一次按下"
* 添加响应事件：隐藏角色图片、隐藏操作指引组
* 添加响应事件：继续播放核心视频2；并播放进度条动画和一次点击音效

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

2）添加事件-抬起

* 添加响应事件：暂停播放视频核心视频2
* 添加响应事件：显示操作指引组；并从头播放操作指引相关动画；同时暂停播放进度条动画

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

3）复制事件：复制\[video\_01]的"结束时"事件

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

粘贴事件：选中\[video\_02]，粘贴 - 仅粘贴图层事件

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

* 修改响应事件为：隐藏核心视频2；显示核心视频3；并删除显示角色图片
* 添加响应事件：跳转应用商店（此步骤就是前面提到的"强制跳转"）

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

#### <mark style="color:red;">3.图层: video\_03（核心视频3）</mark>

1）复制事件：复制整个图层\[video\_02]

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

2）粘贴事件：选中\[video\_03]，粘贴 - 仅粘贴图层事件（即一键粘贴该图层的所有事件）

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

3）事件-按下

* 修改响应事件为：继续播放视频\[video\_03]；删除埋点事件、删除隐藏角色图片；

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

4）事件-抬起

* 修改响应事件为：暂停播放视频\[video\_03]

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

5）事件-结束时

* 删除响应事件：删除隐藏视频\[video\_02]、删除显示视频\[video\_03]、删除跳转应用商店
* 添加响应事件：禁用\[video\_03]的按下事件、禁用\[video\_03]的抬起事件（在设置完下一步的场景事件后，还需在这里添加一个响应事件"启用场景1的按下事件"）

<mark style="background-color:yellow;">注：这代表当最后一段视频播放结束，该视频的"按下/抬起"事件将不再生效，场景1的"按下"事件(即跳转事件)开始生效</mark>

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

#### <mark style="color:red;">4.场景: Scene 1</mark>

1）点击场景1 ，添加事件-按下

* 添加响应事件：跳转应用商店
* 添加响应事件：上报试玩结束
* 添加响应事件：从头播放一次点击音效

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

2）添加事件-定时触发

* 设置执行延迟时间为0s
* 添加响应事件：禁用场景1的按下事件

<mark style="background-color:yellow;">注：这代表一进入试玩，场景1的"按下"事件(即跳转事件)即被禁用，不会生效。然后我们在核心视频3的"结束时"事件下添加"启用场景1的按下事件"</mark>

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

以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。

### Step4 - 整体预览 <a href="#j1kmp" id="j1kmp"></a>

1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确

2）全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览，确认无误

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

## <mark style="color:blue;">六、资源提供</mark>

在教程最后，我们为您**提供了本案例所使用到的全部资源，**&#x70B9;击压缩包即可下载。您可以用此资源跟着教程尝试制作，以便尽快上手使用自由编辑器制作此类素材

{% file src="/files/PcrC1xG77yRdY1GZMOv6" %}


---

# 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/chu-ji-jiao-xue-kong-bai-zhi-zuo-jiao-cheng/jiao-hu-shi-pin-mo-ni-yi-dong-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.