> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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-duo-jie-ju-jiao-hu-jiao-cheng.md).

# 交互视频《多结局交互》教程

\#自由编辑器 #空白制作 #初级难度

温馨提示：入门难度模板《多结局交互视频》就是按照这个教程制作的哦！

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

* 【制作难度】：⭐
* 【适用产品】：普遍适用
* 【交互方式】：点击
* 【交互次数】：2步跳转
* 【线程】：双线程
* 【核心资产】：视频（3段/连贯的）
* 【功能】：动画-缩放缓动、事件-按下跳转指定场景、事件-定时触发从头播放动画

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

| 手机试玩效果最佳                                                                                                                                                                                                                                                  | 竖屏                                                                                                                                                                                                                                                        | 横屏                                                                                                                                                                                                                                                        |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FjKclrIlbuAQvvOz8TtU8%2Fimage.png?alt=media&amp;token=edbf74e1-052a-47f3-869e-bb39c54fa402" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F9uOryx9PvDMjQx3ogRU7%2Fimage.png?alt=media&amp;token=a116b982-6eb3-4f2c-8636-2e90d1226880" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FDjbheKvzX4LlVWqb8RHH%2Fimage.png?alt=media&amp;token=34c5782c-984e-44be-b6a2-ea35f3608989" alt="" data-size="original"> |
| 扫码试玩                                                                                                                                                                                                                                                      | [点击试玩](https://tinyurl.com/yc388fpb)                                                                                                                                                                                                                      | [点击试玩](https://tinyurl.com/yc388fpb)                                                                                                                                                                                                                      |

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

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

* 进入试玩，循环播放视频【美女被骚扰】；
* 出现【左右选择指引】，引导玩家按下选项进行辨别；
* 玩家按下左侧【救她】选项时：进入救人结局
  * 播放1次视频【主角飞踢画面+美女感谢】
  * 再次出现【左右选择指引】，引导玩家按下选项进行辨别
  * 玩家全屏按下，跳转应用商店
* 玩家按下右侧【不救她】选项时：进入逃跑结局；

  * 播放1次视频【主角反向逃跑遇到BOSS】
  * 再次出现【左右选择指引】，引导玩家按下选项进行辨别
  * 玩家全屏按下，跳转应用商店

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

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

**场景拆分：**&#x6839;据第三部分的玩法梳理，我们可将本案例设置为3个场景来制作

（场景1：诱导选择；场景2：结局A；场景3：结局B）

<table data-full-width="true"><thead><tr><th width="140">场景名称</th><th>场景1-诱导选择</th><th>场景2-结局A</th><th>场景3-结局B</th></tr></thead><tbody><tr><td><strong>效果图</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FjE2LdngRL0x8fg0Pn8aQ%2Fimage.png?alt=media&amp;token=1f299122-c99d-4658-ad8a-db7021c07d54" alt="" data-size="original"></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FrmAmHCVm2rzSbHj7RdTi%2Fimage.png?alt=media&amp;token=30114fae-73c8-4f16-8f83-e781b0a4639c" alt="" data-size="original"></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F992HtnJ3idRNSxrTZNSn%2Fimage.png?alt=media&amp;token=a9a1dbbc-b5ae-48b3-8eae-d3dfbcd8ba52" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>循环播放视频【美女被骚扰】，引导玩家做出选择</td><td>播放结局A视频，视频播放结束时引导玩家做出第二轮选择</td><td>播放结局B视频，视频播放结束时引导玩家做出第二轮选择</td></tr><tr><td><strong>动画</strong></td><td><p>【选项按钮】：缩放缓动</p><p>【指引手指】：缩放缓动+位移缓动</p></td><td><p>【选项按钮】：缩放缓动+透明度缓动</p><p>【指引手指】：缩放缓动+位移缓动</p></td><td><p>【选项按钮】：缩放缓动+透明度缓动</p><p>【指引手指】：缩放缓动+位移缓动</p></td></tr><tr><td><strong>核心事件</strong></td><td><p>触发对象：图层-手势区域</p><p>触发操作：按下</p><p>响应事件：跳转指定场景</p></td><td><p>触发对象：场景-场景2</p><p>触发操作：定时触发</p><p>响应事件：从头播放全部动画</p><hr><p>触发对象：场景-场景2</p><p>触发操作：按下</p><p>响应事件：跳转应用商店</p></td><td><p>触发对象：场景-场景3</p><p>触发操作：定时触发</p><p>响应事件：从头播放全部动画</p><hr><p>触发对象：场景-场景3</p><p>触发操作：按下</p><p>响应事件：跳转应用商店</p></td></tr><tr><td><strong>资产清单</strong></td><td><p>【视频】：入场自动播放、无限循环</p><p>【音频】：点击音效</p><p>【图片】：指引文案、指引手指、选项按钮</p></td><td><p>【视频】：入场自动播放、关闭无限循环</p><p>【图片】：指引手指、选项按钮</p></td><td><p>【视频】：入场自动播放、关闭无限循环</p><p>【图片】：指引手指、选项按钮</p></td></tr></tbody></table>

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

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

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FITLpuWrpE70KorrknfET%2Fimage.png?alt=media&amp;token=5144a9d5-b99d-49d2-9e8d-ce24330dfc0b" alt=""><figcaption></figcaption></figure>

#### **2.全局场景**

1）在【全局场景】中添加常驻信息：logo、CTA按钮

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FOMAh6I34LRtlmMRQc19q%2Fimage.png?alt=media&amp;token=54716276-073d-4e61-a447-afd78214f318" alt=""><figcaption></figcaption></figure>

**3.场景1**

1）在【场景1】中添加视频、音效、指引手指、指引文案、选项按钮

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJHjVUQA0khIMwdtL1r4D%2Fimage.png?alt=media&amp;token=0f22d805-3a08-4eee-9fab-c543510308ee" alt=""><figcaption></figcaption></figure>

#### 4.**场景2-场景3** <a href="#tpuup" id="tpuup"></a>

1）在【场景2】【场景3】中分别添加视频、指引手指、选项按钮

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FoYf76SQ8qfQR5up8IaIl%2Fimage.png?alt=media&amp;token=193fd6e3-bff9-403a-ae4f-034775b3b574" alt=""><figcaption></figcaption></figure>

### Step2 - 动效制作 <a href="#tpuup" id="tpuup"></a>

#### **1.**&#x573A;景1-指引手指

因手指在诱导选择时，需要进行位移，同时要根据按钮的缩放同步进行缩放，因此我们为手指设置2个通用动画，分别为：位移缓动、缩放缓动；

1）在场景1左侧图层处选中手指图片【gf\_hand】，添加动画-通用-位移缓动。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FekmrpHshpom5Kvo6zecR%2Fimage.png?alt=media&amp;token=db390b5f-866f-42d3-a75d-9b299da05895" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FfgJ66ipF8cvsmlttRfyR%2Fimage.png?alt=media&amp;token=25fa2e01-9a00-4198-8454-ae614bbb1741" alt=""><figcaption></figcaption></figure>

#### **2.场景1-选项按钮**

1）在场景1图层处选中左侧选项按钮组【left\_options】，添加动画-通用-缩放缓动。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FBfdxJeBO11wvroEJZDRO%2Fimage.png?alt=media&amp;token=286acaf1-aa2b-4a8f-97a4-39c46aa80b7d" alt=""><figcaption></figcaption></figure>

2）复制动画到右侧选项按钮组【right\_options】，修改动画曲线即可：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fe7LKyo97DAsWaLkQvuPO%2Fimage.png?alt=media&amp;token=9171f767-4f67-40c9-bae5-a86c55f4277d" alt=""><figcaption></figcaption></figure>

#### **3**.场景2/场景3-透明度缓动

因场景2/场景3中的手指动画和选项按钮动画同场景1，因此我们可以【复制/粘贴动画】来快速完成制作。

另外，我们可以在此基础上新增透明度缓动动画，将资产的起始透明度设为0，即进入场景时手指和选项按钮处于不显示状态，待视频播放完成后再显示。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FASizZKN0WKtMsyoKNPYA%2Fimage.png?alt=media&amp;token=dc2276f6-46a0-4e1a-be09-5573ee45c25c" alt=""><figcaption></figcaption></figure>

### Step3 - 逻辑设置 <a href="#umduz" id="umduz"></a>

#### **1.场景1：图层事件-手势区域**

我们分别为左右两个选项按钮设置两个手势区域，先对左侧手势区域设置事件，再将事件复制到右侧手势区域，简单调整，来快速完成制作。

1）选中左侧手势区域图层；

2）添加事件-按下；

3）添加响应事件-暂停播放单个动画；（即选项按钮的缩放动画）

4）添加响应事件-执行延迟0.3s后跳转指定场景；（即在玩家按下按钮0.3s后跳转到对应结局）

5）其他响应事件：从头播放音效；设置埋点信息

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FNAsfdHJ9hIfQxDcOc8bB%2Fimage.png?alt=media&amp;token=72c36dfc-a06a-42ef-861e-b028bc8e8622" alt=""><figcaption></figcaption></figure>

#### **2.场景2/3：场景事件**

1）在场景2下添加事件-定时触发；

2）添加响应事件-执行延迟3s后从头播放全部动画；（即当视频播放结束时，从头播放手指和选项按钮动画）

3）添加事件-按下，添加响应事件-跳转应用商店，设置埋点信息，上报试玩结束

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FVIDbsVlUXr8ewWCJKRfI%2Fimage.png?alt=media&amp;token=630fccd6-9894-4e77-8efb-d6e7626322ae" alt=""><figcaption></figcaption></figure>

注：场景3的事件设置同理场景2，可通过【复制/粘贴事件】来快速完成制作。

#### **3**.全局场景：图层事件-CTA按钮

在【全局场景】选中按钮组，添加事件-按下，添加响应事件-跳转应用商店

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F6OQlllWdp3lUsGJ0WOvq%2Fimage.png?alt=media&amp;token=c91b7abc-d307-4f15-bb1e-1eeeb3b422df" alt=""><figcaption></figcaption></figure>

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

#### <mark style="color:red;">**1.横屏排版**</mark>

每个场景竖屏制作完成后，均需进行横屏排版（建议多使用“复用竖屏位置尺寸配置”按钮）

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FY0KFCw0oPbTBrU6W6uHZ%2Fimage.png?alt=media&amp;token=884885c2-8b3b-4244-8c4a-0f2e187e8db1" alt=""><figcaption></figcaption></figure>

#### <mark style="color:red;">**2.屏幕适配**</mark>

对各机型及其横竖屏进行屏幕适配，并预览适配效果是否合适

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FfSjU833ZpU5mtJDaL7sM%2Fimage.png?alt=media&amp;token=80e82814-abf7-4b39-8c2a-2c7781c86c1a" alt=""><figcaption></figcaption></figure>

**3.整体预览**

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FVs4yaInRDyfMI5foNJWX%2Fimage.png?alt=media&amp;token=e030be46-2aa1-423e-8206-a34dc1c83860" alt=""><figcaption></figcaption></figure>

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

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

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