# 《布娃娃坠落》互动视频制作教程

温馨提示：本篇教程主要讲解**如何使用互动视频编辑器**来制作出**单线程玩法的互动视频素材**，建议搭配[DEMO](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fps%252Fpreview%252F25%252F02%252F28%252F67c15ee12e29c%252Findex.html%253Floading%253D1%2526preview%253Dtrue%2526lang%253Dzh-cn%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0%26is_browser_tips%3D1%26ptloading%3D1%26track_data%3D%257B%2522pid%2522%253A5416562%252C%2522uid%2522%253A109685%252C%2522sct%2522%253A%2522%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522SG%2522%257D\&orientation=3\&name=\&language=en%2Czh-cn)食用效果更佳哦！

💡参照本案例的制作逻辑，您也可以迭代其他同类玩法的素材哦！

## <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="238">手机试玩效果最佳</th><th width="206.00000000000003">竖屏</th><th>横屏</th></tr></thead><tbody><tr><td><img src="/files/KSmPVL3QYGvCNRrzBY6P" alt="" data-size="original"></td><td><img src="/files/8vqRLW736321uh84J1Lk" alt="" data-size="original"></td><td><img src="/files/IYJu35W3AXfY1o9awrar" alt="" data-size="original"></td></tr><tr><td>扫码试玩</td><td><a href="https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fps%252Fpreview%252F25%252F02%252F28%252F67c15ee12e29c%252Findex.html%253Floading%253D1%2526preview%253Dtrue%2526lang%253Dzh-cn%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0%26is_browser_tips%3D1%26ptloading%3D1%26track_data%3D%257B%2522pid%2522%253A5416562%252C%2522uid%2522%253A109685%252C%2522sct%2522%253A%2522%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522SG%2522%257D&#x26;orientation=3&#x26;name=&#x26;language=en%2Czh-cn">点击试玩</a></td><td><a href="https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fps%252Fpreview%252F25%252F02%252F28%252F67c15ee12e29c%252Findex.html%253Floading%253D1%2526preview%253Dtrue%2526lang%253Dzh-cn%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0%26is_browser_tips%3D1%26ptloading%3D1%26track_data%3D%257B%2522pid%2522%253A5416562%252C%2522uid%2522%253A109685%252C%2522sct%2522%253A%2522%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522SG%2522%257D&#x26;orientation=3&#x26;name=&#x26;language=en%2Czh-cn">点击试玩</a></td></tr></tbody></table>

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

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

1. 进入试玩，展示【角色待机画面】，同时出现【操作指引】，引导玩家拖拽角色坠落
2. 玩家在全屏任意滑动，播放【角色坠落视频1】
3. 当视频1播放结束，继续出现【操作指引】，引导玩家拖拽角色撞击更多
4. 玩家在全屏任意滑动，播放【角色坠落视频2】
5. 当视频2播放结束，继续出现【操作指引】，引导玩家拖拽角色撞击更多
6. 玩家在全屏任意滑动，播放【角色坠落视频3】
7. 当视频3播放结束，自动跳转应用商店同时自动跳转至结束页

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

**核心思想：**&#x4FDD;证故事板的脚本结构清晰，根据结构划分视频节点。结合上一部分的玩法梳理可知，本案例的故事板是单线程结构，由 3段视频节点+1个结束页 构成

<table data-full-width="false"><thead><tr><th width="113">节点</th><th>视频节点1-video1</th><th>视频节点2-video2</th><th>视频节点3-video3</th><th>结束页</th></tr></thead><tbody><tr><td><strong>效果预览</strong></td><td><img src="/files/KcfqTbKe8YMi3KmwkTBT" alt="" data-size="original"></td><td><img src="/files/j3FkbP51R7Bmy85x7yqk" alt="" data-size="original"></td><td><img src="/files/VQ6TYVy8FzbRDYm3aqNi" alt="" data-size="original"></td><td><img src="/files/GMjz9oJ1OxP1SGN4IwTY" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>玩家任意滑动，播放视频1</td><td>玩家任意滑动，播放视频2</td><td>玩家任意滑动，播放视频3</td><td>产品信息+下载按钮</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>视频</strong>：角色坠落视频1</p><p><strong>图片</strong>：指引手指、指引线</p><p><strong>音效：</strong>受伤音效</p></td><td><p><strong>视频</strong>：角色坠落视频2</p><p><strong>图片</strong>：指引手指、指引图片</p><p><strong>音效：</strong>遭受重击音效</p></td><td><p><strong>视频</strong>：角色坠落视频3</p><p><strong>音效：</strong>遭受重击音效</p></td><td><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></td><td>同节点1</td><td>同节点1</td><td><strong>下载按钮</strong>：缩放缓动</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>：跳转指定场景video2</p></td><td><p><strong>互动元件</strong>：互动定格（节点间）</p><p><strong>手势</strong>：任意滑动</p><p><strong>响应事件</strong>：跳转指定场景video3</p></td><td><strong>互动元件</strong>：自动跳转</td><td><p><strong>手势</strong>：按下</p><p><strong>响应事件</strong>：跳转应用商店</p></td></tr></tbody></table>

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

\*核心内容为Step1【故事板搭建】 & Step2【互动元件设置】

### <mark style="color:red;">Step1 - 故事板搭建</mark> <a href="#wepzn" id="wepzn"></a>

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

#### 1.添加节点

1）在【故事板】区域原有的视频节点1之下新增两个视频节点

2）在视频节点3之下点击【+结束页】，新增一个结束页，本案例的脚本结构即搭建完成

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

#### 2.添加视频

1）将提前裁剪好的三段视频，依次添加进对应的视频节点

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

2）依次选中视频，将位置尺寸调整至合适（注意：**三段视频的位置&尺寸需完全一致**，互动效果才更加自然）

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

### <mark style="color:red;">Step2 - 互动元件设置</mark>

添加视频资产后，平台默认在节点之间使用【互动定格】元件进行串联，可根据实际需要进行调整，或在节点内新增所需互动元件。

#### 1.节点间的互动元件

通过本案例的玩法流程可知：当视频1播放结束时，需出现【操作指引】，待玩家任意滑动后，才能播放视频2（后续流程同理），因此：

1）视频之间的【互动定格】元件不需要更改

2）选中视频节点3与结束页之间的互动元件，将其修改为【自动跳转】即可

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

3）选中第一个【互动定格】元件，将手势设置为【任意滑动】（**因“热区”在画布内的层级最高，先扩大热区的范围会影响后续操作，因此可先将热区移出画布，最后调整。以下同理**）

4）同理，选中第二个【互动定格】元件，将手势设置为【任意滑动】

<div><figure><img src="/files/crhaQgQJjBot5vVMm3fY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/3zhySQEUKqOUpSMfPq3S" alt=""><figcaption></figcaption></figure></div>

#### 2.节点内的互动元件

同时，我们需要视频1在入场时保持“暂停”状态，并出现【操作指引】，待玩家任意滑动后再播放视频1。这就需要：

1）在视频1开头位置添加【互动定格】元件

<figure><img src="/files/01DTkZr228FWzM7PJOho" alt=""><figcaption></figcaption></figure>

2）选中该元件，将手势设置为【任意滑动】（响应事件默认为“继续播放视频”，无需调整）

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

### <mark style="color:blue;">Step3 - 其他资产添加</mark> <a href="#wepzn" id="wepzn"></a>

继续添加其他用以丰富互动效果的资产

#### 1.全局设置

1）点击【全局设置】，依次添加背景音乐和背景图片

2）因本案例玩法需要（在玩家最后一次滑动后跳转应用商店，也就是试玩结束时），所以可以直接在【设置跳转】处打开【试玩结束自动跳转应用商店】按钮

3）如有多语言投放需求，还可在【默认语言】处进行添加/修改

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

#### 2.视频节点1 - 视频节点3

1）将指针停留在视频1的第一个【互动定格】元件内，从【项目资产】或【资产库】中添加相关元素，如操作指引/产品信息/角色待机图片/音效/文本

2）调整各资产的位置/尺寸到合适

3）调整各资产元件的长度（出现的时间范围）

* 因操作指引相关资产只需出现在入场时，即第一个【互动定格】元件下，因此无需调整元件长度
* 将音效直接放置于视频1对应的位置
* 产品信息相关资产需在整个试玩流程中常驻，因此需要拉长各元件长度至视频1结尾

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

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

4）视频节点2和节点3内的资产同理节点1，可使用“复制-粘贴”功能快速完成制作（**建议在完成 Step4横竖屏适配\&Step5动画设置 后再操作“复制-粘贴”，以便能同时复用动画和横屏下的参数！**）

💡<mark style="color:orange;">当有较多资产需要跨元件重复添加时，建议多使用“复制-粘贴”功能：选中要复制的元件，点击【复制】 ➡ 然后点击指针放置于目标位置，点击【粘贴】</mark>

<div><figure><img src="/files/AXqrDFPnlmXipHPJ8gnj" alt=""><figcaption></figcaption></figure> <figure><img src="/files/rBWBwHqa5tu4CB5HeuWk" alt=""><figcaption></figcaption></figure></div>

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

#### 3.结束页

1）在轨道区点击【结束页】，对结束页内的资产进行调整，将默认产品信息替换为自家的产品

2）还可从【资产库】中选取合适的粒子特效，丰富画面效果

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

### <mark style="color:blue;">Step4 - 横竖屏适配</mark> <a href="#tpuup-1" id="tpuup-1"></a>

完成所有竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整

#### 1.调整横屏排版

1）切换至横屏模式，依次选中各资产元件，点击【**复用竖屏位置尺寸配置**】功能一键排版

2）然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容

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

#### 2.调整屏幕适配方式

1）在本案例中，我们想要竖屏下的：“产品信息”始终位于不同机型屏幕的最上方，“常驻下载按钮”始终位于不同机型屏幕的最下方，所以我们要调整其适配方式：

* 依次选中icon/app name，在右侧【屏幕适配方式】处设置居中贴顶适配
* 依次选中下载按钮图片和文本，在右侧【屏幕适配方式】处设置居中贴底适配

2）其他资产元件默认居中适配，无需调整

<div><figure><img src="/files/biexboqvtaAvjouLkH8K" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ujLaaNyr9GgynnbToy6v" alt=""><figcaption></figcaption></figure></div>

### <mark style="color:blue;">Step5 - 动画设置</mark> <a href="#tpuup-4" id="tpuup-4"></a>

本案例用到的动画主要有：指引手指位移动画、指引线缩放动画、角色待机缩放动画、下载按钮缩放动画。我们依次展开介绍

#### 1.指引手指-位移缓动

1）选中手指图片，在右侧参数区【添加动画】

2）选择通用-位移缓动动画，具体参数设置如下：

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

#### 2.指引线-缩放滑动

1）选中指引线图片，将其锚点移动到图片底部居中的位置，如(46,90)

2）在右侧参数区【添加动画】，选择通用-缩放缓动动画，具体参数设置如下：

<div><figure><img src="/files/Caf7ZZQ8TeAVKeHL3T0O" alt=""><figcaption></figcaption></figure> <figure><img src="/files/95fpl3pLoKEspL67f8qz" alt=""><figcaption></figcaption></figure></div>

#### 3.角色待机-循环放大（选做）

为了让初始画面更具动态效果，可单独添加角色待机图片，并为其添加模拟呼吸感的动画

1）选中角色待机图片，将其锚点移动到图片底部居中的位置，如(50,80)

2）在右侧参数区【添加动画】，选择强调动画-循环放大，具体参数设置如下：

<div><figure><img src="/files/U91fZyxmQhrkqZ61gdCp" alt=""><figcaption></figcaption></figure> <figure><img src="/files/B8PxSiAfGzyG0sRtMAjp" alt=""><figcaption></figcaption></figure></div>

#### 4.下载按钮-缩放缓动

1）依次选中【结束页】的下载按钮图片和文本，添加动画

2）选择强调动画-脉冲向前，具体参数设置如下：

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

💡完成【横竖屏适配】和【动画设置】后，记得对产品信息/操作指引进行“复制-粘贴”

💡同时记得检查所有互动元件的【热区】，是否已调整到合适的位置和大小

完成以上所有内容的设置，我们的素材就制作完成了！

### <mark style="color:blue;">Step6 - 整体预览</mark> <a href="#j1kmp-1" id="j1kmp-1"></a>

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

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

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


---

# 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-shi-pin-zhuan-ke-wan-an-li/bu-wa-wa-zhui-luo-hu-dong-shi-pin-zhi-zuo-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.