# 交互视频《3步交互》教程

温馨提示：本篇教程以跑酷玩法为例，主要讲解空白制作**如何制作3步跳转的交互视频素材**，建议搭配[DEMO](https://tinyurl.com/bdcmpfe4)食用效果更佳哦！其他玩法产品只需将DEMO内的"按下"事件改为符合产品的交互方式，即可适用！

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

* 【制作难度】：⭐
* 【适用产品】：普遍适用
* 【交互方式】：按下
* 【自由度】：固定流程
* 【核心资产】：视频
* 【核心功能】：按下-跳转到下一场景；视频开始时-禁用按下事件；视频结束时-启用按下事件

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

<table><thead><tr><th width="210.33333333333331">手机试玩效果最佳</th><th>竖屏</th><th>横屏</th></tr></thead><tbody><tr><td><img src="/files/8L5w3uFxvfEFhRw97XkJ" alt="" data-size="original"></td><td><img src="/files/tPKtYay3CMrGK09QsZVE" alt="" data-size="original"></td><td><img src="/files/JIuE5NBu95pHCGVjnd5S" alt="" data-size="original"></td></tr><tr><td>扫码试玩</td><td><a href="https://tinyurl.com/y4d4ckad">点击试玩</a></td><td><a href="https://tinyurl.com/y4d4ckad">点击试玩</a></td></tr></tbody></table>

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

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

1）进入试玩，自动播放1次【跑酷视频1】

2）视频结束，出现【操作指引】，引导玩家滑动躲避障碍物

3）玩家按下即播放【跑酷视频2】，视频结束，再次出现【操作指引】，引导玩家滑动躲避障碍物

4）玩家按下即播放【跑酷视频3】，视频结束，再次出现【操作指引】，引导玩家滑动躲避障碍物

5）玩家按下即播放【跑酷视频4】，视频结束，跳转应用商店，同时进入结束页面

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

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

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

**场景拆分：**&#x4E3A;了便于理解&操作简单，本案例我们拆分为4个场景来制作

<table data-full-width="false"><thead><tr><th width="115">场景名称</th><th width="233">场景1&#x26;2-核心玩法</th><th width="226">场景3-核心玩法</th><th>场景4-结束页面</th></tr></thead><tbody><tr><td><strong>效果图</strong></td><td><img src="/files/KRaV21l7aJwZyvdGBv4H" alt="" data-size="original"></td><td><img src="/files/5suf7ySbuQkwKeHjfhEW" alt="" data-size="original"></td><td><img src="/files/WVy4tNHhckfRFWzwCsEH" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>【跑酷视频】播放结束，出现操作指引，引导玩家滑动继续跑酷</td><td>【跑酷视频】播放结束，出现操作指引，引导玩家滑动继续跑酷</td><td>奖励面板+跳转按钮</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>视频：</strong>跑酷视频1/跑酷视频2</p><p><strong>静帧图片：</strong>操作指引</p><p><strong>音频：</strong>点击音效</p></td><td><p><strong>视频：</strong>跑酷视频3+跑酷视频4</p><p><strong>静帧图片：</strong>操作指引</p><p><strong>音频：</strong>点击音效</p></td><td><p><strong>静帧图片：</strong>视频尾帧截图、遮罩、奖励面板、跳转按钮</p><p><strong>粒子：</strong>彩带粒子</p><p><strong>音频：</strong>胜利音效</p></td></tr><tr><td><strong>核心动画</strong></td><td><p><strong>操作指引：</strong>位移缓动</p><p><strong>操作指引组：</strong>淡入</p></td><td><p><strong>操作指引：</strong>位移缓动</p><p><strong>操作指引组：</strong>淡入</p></td><td><p><strong>奖励面板组：</strong>放大出现</p><p><strong>跳转按钮：</strong>缩放缓动</p><p><strong>遮罩：</strong>淡入</p></td></tr><tr><td><strong>核心事件</strong></td><td><p><strong>触发对象：</strong>视频图层</p><p><strong>触发事件：</strong>按下</p><p><strong>响应事件：</strong>跳转到下一场景</p><hr><p><strong>触发对象：</strong>视频图层</p><p><strong>触发事件：</strong>开始时</p><p><strong>响应事件：</strong>禁用按下事件</p><hr><p><strong>触发对象：</strong>视频图层</p><p><strong>触发事件：</strong>结束时</p><p><strong>响应事件：</strong>启用按下事件</p></td><td><p><strong>触发对象：</strong>视频图层</p><p><strong>触发事件：</strong>按下</p><p><strong>响应事件：</strong>隐藏视频3；从头播放视频4</p><hr><p><strong>触发对象：</strong>视频图层</p><p><strong>触发事件：</strong>开始时</p><p><strong>响应事件：</strong>禁用按下事件</p><hr><p><strong>触发对象：</strong>视频图层</p><p><strong>触发事件：</strong>结束时</p><p><strong>响应事件：</strong>启用按下事件</p></td><td><p><strong>触发对象：</strong>跳转按钮组</p><p><strong>触发事件：</strong>按下</p><p><strong>响应事件：</strong>跳转应用商店</p></td></tr></tbody></table>

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

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

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

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

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

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

2）在【全局场景】下添加常驻下载按钮、logo等产品信息，并调整位置大小

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

3）横屏排版：切换到横屏模式，对产品信息组重新排版。并隐藏不需要的底图\[banner]（需勾选\[显示隐藏参数]横竖屏拆分）

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

#### **2.普通场景**

**2.1 场景1**

1）在场景1中添加核心玩法相关资产：跑酷视频1、操作指引、点击音效

2）调整各资产到合适的位置大小，并根据资产类型对资产进行编组、排序、命名

3）视频参数：入场自动播放1次

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

4）横屏排版：切换到横屏模式，选中所有最高层级的图层，使用【复用竖屏位置尺寸配置】功能一键排版，然后再适当调整各图层的【位置】和【缩放比例】，让画面展示出完整的核心玩法相关内容

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

**2.2 场景2&场景3**<mark style="background-color:orange;">**（此步骤建议在完成事件设置后进行，避免重复操作）**</mark>

1）因场景2、场景3的制作步骤基本同场景1一致，可以通过"复制场景"功能快速完成场景搭建。复制场景后，替换相应视频即可

<div align="left"><figure><img src="/files/7wLaNmNzQKncVaOh9QK7" alt="" width="300"><figcaption></figcaption></figure></div>

2）注意：场景3还需额外添加视频4"video\_4"，并关闭入场自动播放

3）可复制视频3图层，对视频4进行"仅粘贴位置大小"的操作，即可对齐视频的位置与大小

<figure><img src="/files/8JXyNAtqS74oeOd4P73F" alt=""><figcaption></figcaption></figure>

**2.3 场景4**

1）在场景4中添加结束页面相关资产：视频尾帧截图、遮罩、奖励面板、跳转按钮、胜利音效、产品信息&#x7EC4;*（因"全局场景"的层级只能设置"置于场景顶层或底层"，在结束页面，原有的产品信息组会被遮挡，因此可以复制"全局场景"的产品信息组到场景4，自由调整层级，并关闭"全局场景"）*

2）调整各资产到合适的位置大小，并根据资产类型对资产进行编组、排序、命名

3）勾选场景4为【结束场景】，以便上报试玩结束

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

4）横屏排版：同样，切换到横屏模式，选中奖励面板组\[group\_end]，使用【复用竖屏位置尺寸配置】功能一键排版，再微调各图层的位置大小

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

### Step2 - 横竖屏适配 <a href="#tpuup" id="tpuup"></a>

完成场景的搭建后，我们还需对部分图层的"屏幕适配方式"进行调整（相关阅读:[制作技巧-适配相关](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-zhi-zuo-ji-qiao-zhong-xin/tong-yong-zhi-zuo-ji-qiao/zhi-zuo-ji-qiao-shi-pei-xiang-guan.md)）

在本案例中，我们想要竖屏下的常驻信息组始终位于各机型屏幕的底部，所以我们调整其"屏幕适配方式"为贴底适配（其他图层默认居中适配，无需调整）

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

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

在本案例中，用到的动画和粒子特效如下，我们依次展开介绍：

场景1-3：指引手指位移动画、指引文案位移动画、指引组淡入动画

场景4：奖励面板组入场动画、跳转按钮缩放动画、遮罩淡入动画、彩带粒子

#### **1.指引手指：位移缓动**

选中指引手指图片\[guide\_hand]，添加动画-通用-位移缓动，作为滑动循环指引动画。参数设置如下：

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

#### **2.指引文本：位移缓动**

选中指引文本\[text\_guide]，添加动画-通用-位移缓动，作为循环指引动画。参数设置如下：

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

#### 3.指引组：淡入

选中指引组\[group\_guide]，添加动画-进场动画-淡入，作为整个指引组的入场动画。参数设置如下：

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

#### 4.奖励面板组：放大出现

选中奖励面板组\[group\_end]，添加动画-进场动画-放大出现，作为整个奖励组的入场动画。参数设置如下：

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

#### 5.跳转按钮：缩放缓动

选中跳转按钮组\[btn]，添加动画-通用-缩放缓动，作为循环指引动画。参数设置如下：

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

#### 6.遮罩：淡入

选中遮罩图片\[mask]，添加动画-进场动画-淡入，作为遮罩的入场动画。参数设置如下：

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

#### 7.彩带**粒子特效**

1）打开公共粒子库，选择并添加合适的粒子特效到场景2

2）调整粒子到合适的位置（注意横竖屏都要调整）

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

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

完成所有动效的设置，我们对试玩的逻辑 也就是"事件"进行设置

本案例与事件设置相关的主要内容有：

* 按下视频：跳转到下一场景；隐藏素材；从头播放视频
* 视频开始时：禁用按下事件
* 视频结束时：启用按下事件
* 按下跳转按钮：跳转应用商店

接下来，我们按顺序依次讲解

#### <mark style="color:red;">1.图层: video\_1</mark>

在场景1中选中图层\[video\_1]

1）添加事件 - 按下，依次添加响应事件：

* 设置埋点。选择埋点id1，并编辑埋点名称为"第一次按下"
* 从头播放1次点击音效
* 跳转到下一场景

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

2）添加事件 - 开始时，添加响应事件：

* 禁用事件：\[video\_1]按下

3）添加事件 - 结束时，依次添加响应事件：

* 启用事件：\[video\_1]按下
* 从头播放指引组的淡入动画、从头播放指引文本的位移动画、从头播放指引手指的位移动画

<mark style="background-color:yellow;">注：禁用事件&启用事件的设置是为了保证在视频播放期间，玩家不可点击，需要等到视频结束才允许交互</mark>

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

#### <mark style="color:red;">2.图层: video\_2、video\_3、video\_4</mark>

复制场景1，由此创建场景2、场景3，并替换相应视频

1）在场景2中选中图层\[video\_2]，修改埋点id与埋点名称

2）在场景3中选中图层\[video\_3]，修改埋点id与埋点名称，并删除响应事件"跳转到下一场景"

3）添加响应事件：隐藏\[video\_3]，隐藏指引组，从头播放\[video\_4]

<div align="left"><figure><img src="/files/fKDLvrYrqgzCDXYACM8X" alt="" width="563"><figcaption></figcaption></figure></div>

4）选中图层\[video\_4]，添加事件 - 结束时，添加响应事件：

* 跳转应用商店
* 跳转到下一场景

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

#### <mark style="color:red;">3.图层: 跳转按钮</mark>

在场景4中选中图层\[btn]，添加事件 - 按下，添加响应事件：

* 设置埋点。选择埋点id4，并编辑埋点名称为"结束页触发跳转"
* 跳转应用商店

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

#### <mark style="color:red;">4.图层: 常驻下载按钮</mark>

进入"全局场景"，选中常驻下载按钮组\[group\_button]，添加事件 - 按下

添加响应事件：跳转应用商店

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

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

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

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

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

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

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

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

{% file src="/files/0zukFFc88zw4TiedIBLl" %}


---

# 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-kong-bai-zhi-zuo-jiao-cheng/jiao-hu-shi-pin-3-bu-jiao-hu-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.