> 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/iec-dong-tai-hua-mian-xun-huan-bo-fang-jiao-cheng.md).

# IEC《动态画面循环播放》教程

\#自由编辑器 #空白制作 #入门难度

温馨提示：入门难度模板《动态画面循环播放》就是按照这个教程制作的哦！

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

* 【制作难度】：⭐
* 【适用产品】：普遍适用
* 【交互方式】：点击
* 【交互次数】：1步跳转
* 【线程】：单线程
* 【核心资产】：视频（1段/可循环播放）
* 【功能】：动画-闪烁、动画-位移缓动、事件-按下跳转应用商店

## <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%2FaFpdWusT6s1yhKhHUTxW%2Fimage.png?alt=media&amp;token=aff40023-5852-4ddc-986d-dcc91be1f511" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FctD7h94r2Sl22cyOp2kh%2Fimage.png?alt=media&amp;token=6461e30b-9f9c-4e13-8e78-0dee712fd5fc" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fw3zdcmVC5EG6M6GaF3W9%2Fimage.png?alt=media&amp;token=e6ec1f9d-e1f9-420b-84da-c174d3235b31" alt="" data-size="original"> |
| 扫码试玩                                                                                                                                                                                                                                                      | [点击试玩](https://tinyurl.com/33r7xwhn)                                                                                                                                                                                                                      | [点击试玩](https://tinyurl.com/33r7xwhn)                                                                                                                                                                                                                      |

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

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

* 进入试玩，初始画面展示一段循环播放的动态画面，显示蛋糕周围爬满了虫子；
* 出现操作指引，引导玩家点击画面来喷射杀虫水；
* 玩家全屏任意按下，跳转应用商店

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

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

**场景拆分：**&#x6839;据第三部分的玩法梳理，我们判断本案例只需设置1个场景即可

<table><thead><tr><th width="178">场景名称</th><th>场景1-诱导点击</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%2FctD7h94r2Sl22cyOp2kh%2Fimage.png?alt=media&amp;token=6461e30b-9f9c-4e13-8e78-0dee712fd5fc" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>动态画面循环播放，引导玩家点击驱赶虫子</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><tr><td><strong>资产清单</strong></td><td><p>【视频】：视频（设置为入场自动播放、无限循环）</p><p>【音频】：背景音乐、点击音效</p><p>【图片】：背景图片、杀虫水(手指)、指引文案背景图、logo、CTA按钮</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%2Fj98cTO85tYNVg9Z8wuUq%2Fimage.png?alt=media&amp;token=fc77b4d1-a396-4cae-a69c-e3ea48e93b12" alt=""><figcaption></figcaption></figure>

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

1）在【场景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%2FcgbD9MLGtNG9VHHNBHMR%2Fimage.png?alt=media&amp;token=0a303ae1-b1fb-4773-9bc1-0813d37b342e" alt=""><figcaption></figcaption></figure>

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

#### **1.指引文案**

在左侧图层处选中指引文本【guidanceText】，添加动画-强调动画-闪烁。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F9u1Hs5EACQTwKYZiZog8%2Fimage.png?alt=media&amp;token=36d20bfa-4987-4ae1-8180-533c4bb31adf" alt=""><figcaption></figcaption></figure>

#### **2.杀虫水（手指）**

在左侧图层处选中杀虫水图片【hand】，添加动画-通用-位移缓动。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FcUDeomn5VOZ8o78zoT3R%2Fimage.png?alt=media&amp;token=de1bd63c-601d-4a17-8d73-5baf8deebe81" alt=""><figcaption></figcaption></figure>

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

#### **1.图层事件-组节点**

1）选中组节点（注：因需设置全屏按下跳转商店，所以组的范围需足够大；也可直接在场景1上设置场景事件，步骤同理）；

2）添加事件-按下；

3）添加响应事件-跳转应用商店；

4）其他响应事件：设置埋点信息/上报试玩结束/从头播放点击音效

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FBrJqxxLXEUb0527El5dz%2Fimage.png?alt=media&amp;token=b731469d-4cd0-4382-aa6f-8cd3149ea0c9" alt=""><figcaption></figcaption></figure>

**2.图层事件-CTA按钮**

选中按钮组，添加事件-按下，添加响应事件-跳转应用商店

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FDW4OqYMSZuPn8nr7NXrb%2Fimage.png?alt=media&amp;token=56874b66-6ac8-45ef-9927-c388351f901b" 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%2FGoUw5GQMAGqVpUGVvGk1%2Fimage.png?alt=media&amp;token=8a3bf0f0-c575-4bf8-997d-de26b806153f" 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%2FYZjJfLjVtOTK3zU1MPsh%2Fimage.png?alt=media&amp;token=73ea0137-bf04-4880-bc6f-4122292913e4" 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%2FUgeVKwXYLhnjqrBS3FUk%2Fimage.png?alt=media&amp;token=12577ed6-eb7d-484f-b859-8bcb9d5a01b5" alt=""><figcaption></figcaption></figure>

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

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

视频详细记录了本案例空白制作的操作过程，演示速度基本没有调整，方便您查看学习（如果您已能对某一步骤熟悉操作，可酌情跳过）

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

{% embed url="<https://mmp-cdn.rayjump.com/res_store/2110668/65eaae046dd0e.mp4>" %}

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