# IEC\<Animation Loop>Tutorial

Please note: The basic template "Animation Loop" was created following this tutorial!

## <mark style="color:blue;">1. Basic Info</mark> <a href="#h5pts" id="h5pts"></a>

* \[Difficulty]:⭐
* &#x20;\[Applicable Products]:Universal
* &#x20;\[Interaction]: Click
* \[Number of Interactions]: 1 Step Rediect
* \[Threads]: Single-threaded
* \[Core Assets]: Video (1 segment/loopable)
* \[Features]:Animation-Flash, Animation-Displacement Easing, Event-Press to Redirect to app store

## <mark style="color:blue;">2.Effect Preview</mark>

| Best experience for playable on mobile devices                      | Vertical screen                                                     | Horizontal screen                                                   |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="/files/hlfdZ0bo6jqrkwHF6znM" alt="" data-size="original"> | <img src="/files/F0nbOt5RCmPzFt5btrVv" alt="" data-size="original"> | <img src="/files/W0MpInaltMIhOEXFd3eh" alt="" data-size="original"> |
| Scan to play                                                        | [Click to play](https://tinyurl.com/73htexfd)                       | [Click to play](https://tinyurl.com/73htexfd)                       |

## <mark style="color:blue;">3. Gameplay Overview</mark>

**Before starting the production, we need to outline the gameplay logic for this case：**

* Upon entering the trial version, the initial screen displays a dynamically animated scene with worms crawling all over the cake.
* Operation instructions appear, guiding players to click on the screen to spray insecticide.
* When players press anywhere on the screen, they will be redirected to the app store.

## <mark style="color:blue;">4.Production Approach</mark>

**Core Concept:** Minimize the number of animations and events within each scene, maintain clear logic in scene segmentation, and keep the layer structure simple.

**Scene Segmentation:** Based on the gameplay overview in Part Three, we determine that only one scene is needed for this case.

<table><thead><tr><th width="208">Scene Name</th><th>Scene 1 - Inducing Click</th></tr></thead><tbody><tr><td><strong>Visual Rendering</strong></td><td><img src="/files/F0nbOt5RCmPzFt5btrVv" alt="" data-size="original"></td></tr><tr><td><strong>Scene Description</strong></td><td>The dynamic scene plays in a loop, guiding players to click and drive away the insects.</td></tr><tr><td><strong>Animation</strong></td><td><p>[Insecticide (represented by a guiding finger)]: Displacement Easing</p><p>[Guiding Text]: Flash</p></td></tr><tr><td><strong>Core Events</strong></td><td><p>Trigger Object: Layer - Group Node (Screen size should be sufficient)</p><p>Trigger Event: Press</p><p>Response Event: Redirect to app store</p></td></tr><tr><td><strong>Asset List</strong></td><td><p>[Audio]: Background music, click sound effects</p><p>[Image]: Background image, insecticide (finger), guiding text background image, logo, CTA button</p><p>[Text]: Guiding text, download text</p></td></tr></tbody></table>

## <mark style="color:blue;">5.</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Production Guidelines**</mark> <a href="#qh8tn" id="qh8tn"></a>

### **Step 1 - Scene Setup** <a href="#znmfx" id="znmfx"></a>

#### **ⅰ. Global Settings**

Add background music and background image in the "Global Settings" section.

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

#### **ⅱ. Scene 1**

1）Add the following assets to "Scene 1": video, sound effects, guiding finger (insecticide), guiding text, logo, CTA button.

2）Adjust the position and size of each asset accordingly.

3）Group, arrange, and name the assets based on their types.

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

### Step 2 - Animation Production <a href="#dcm38" id="dcm38"></a>

#### **ⅰ. Guiding Text**

Select the "guidanceText" in the left layer and add an animation effect - Emphasize - Flash. Set the parameters as follows:

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

#### **ⅱ. Insecticide Spray (Hand)**

Select the insecticide spray image 【hand】 in the left layer and add an animation - Universal - Displacement Easing. Set the parameters as follows:

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

### Step 3 - Logic Settings <a href="#lnpxj" id="lnpxj"></a>

#### **ⅰ. Layer Event - Group Node**

1）Select the group node (Note: Since we need to set a full-screen press event to redirect to the app store, the range of the group should be large enough; alternatively, you can directly set the scene event in Scene 1, following the same steps);

2）Add event - Press;

3）Add response event - Redirect to app store;

4）Other response events: Set postback event / Report the end of the playable ads / Play click sound effect from the beginning.

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

#### **ⅱ. Layer Event - CTA Button**

Select the button group and add an event - Press. Add a response event - Redirect to app store.

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

### Step 4 - Overall Preview <a href="#q96z9" id="q96z9"></a>

#### <mark style="color:red;">**ⅰ. Landscape Layout**</mark>

After completing the vertical layout for each scene, it is recommended to perform landscape layout (using the "Reuse Vertical Position and Size Configuration" button frequently).

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

#### <mark style="color:red;">**ⅱ. Screen Adaptation**</mark>

Perform screen adaptation for various device models and their orientations (portrait and landscape), and preview to check if the adaptation is appropriate.

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

#### **ⅲ. Overall Preview**

After completing the entire production, you can perform an overall preview for different device models, languages, and orientations (portrait and landscape).

<figure><img src="/files/5EwiG2VqjV13pdLJP9r4" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">6. Demo Screen Recording</mark>

Note: This video is a **demonstration recording** of the tutorial mentioned above. It includes only visual content and does not have audio narration.&#x20;

The video provides a detailed record of the step-by-step process of Blank Canvas in this case. The demonstration speed has not been adjusted significantly, making it convenient for you to view and learn. If you are already familiar with a particular step, you can skip it as needed.

Furthermore, below the demonstration recording, we have **provided a complete set of assets** used in this case. Click on the compressed file to download it. You can use these assets to follow the tutorial and try creating your own content, enabling you to get familiar with using the Content editor more quickly.

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

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


---

# 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.com/playturbo-case-study/playable-content-editor/general-gameplay-cases/basic-tutorial-blank-canvas-tutorial/iec-less-than-animation-loop-greater-than-tutorial.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.