# Animation Loop-Template content creation Tutorial

## <mark style="color:blue;">Comparison Showcase</mark>

Let's first take a look at the before and after comparison of Template content creation：

[Before](https://tinyurl.com/73htexfd) VS[ After](https://tinyurl.com/4atvsh46)

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

## <mark style="color:blue;">Summary of Iteration Content</mark>&#x20;

The main modifications after template iteration are focused on the following aspects:

### 1.Scenes and Assets

1）Asset Replacement: Replaced videos/audios/images/texts.

2）Scene Addition: The original template had only one scene, but after iteration, a new "Scene 2" was added as the end page.

3）Asset Addition: Scene 1 ——warning images,help text, and help sound effects. Scene 2——images and texts.

### 2.Animations and Effects

1）Animation Optimization: Replaced the finger animation and adjusted parameters accordingly.

2）Animation Addition: Added corresponding animations for the newly added assets.

### 3.Event Settings

1）Event Optimization: Copied the entire "Press" event from Scene 1 to Scene 2 as scene event. Modified the response event of the "Press" event in Scene 1 to "Redirect to the next scene" and "Pause playing help sound effect."

2）Event Addition: Added a event "Redirect to app store" for the download button in Scene 2.

### 4.Language Translation&#x20;

Translated the modified and newly added English text into Chinese while fine-tuning the formatting.

### 5.Landscape Adaptation&#x20;

Made layout adjustments for each scene to ensure landscape compatibility.

## <mark style="color:blue;">Detailed Explanation of Iteration Content</mark>

Next, we will provide a detailed illustration of each step.

### 1.Scenes and Assets

<mark style="color:red;">**Tips:**</mark> Before starting the adjustments, it is recommended to upload all new assets to the "Project Assets" for easier replacement or addition of assets later on.

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

#### 1）Asset Replacement

The main assets to be replaced include: background image, background music, video, sound effects, finger image (pesticides), instructional text, logo, and download button.

* Select the asset layer that needs to be replaced, click on the "Replace" button on the right side to open the asset library dialog box.&#x20;
* In the "Project Assets" section, select the asset you want to replace and click the "+" button to complete the replacement.

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

* For text, you can directly select the text layer and make modifications in the text box on the right side.
* After adjusting the text content and style, you can also click the "Apply to Other Languages" button, making it more convenient and efficient when adjusting the styles for other languages later on.

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

#### 2）Scene Addition

Right-click on the scene thumbnail and select "Create new Scene" or simply click the "+" button to add a new scene under the current scene.

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

#### 3）Asset Addition

Scene 1: Warning image, help text, help sound effect.&#x20;

Scene 2: Logo, download button.

* Click to open the "Project Assets" window and add the required assets.
* Adjust the position and size of the assets.
* <mark style="color:red;">**Note:**</mark> When adding new assets, pay attention to whether screen adaptation needs to be adjusted (default is centered). If necessary, you can make the adaptations while adjusting the assets.

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

### 2.Animations and Effects

#### 1）Animation Optimization

Replace the finger (pesticides) animation with "Scale Easing" instead of "Displacement Easing", and adjust the position and parameters. The parameter settings are as follows:

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

#### 2）Animation Addition

2-1）Add an animation "Emphasize - Flash" to a warning image, the parameter settings are as follows:

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

After completing the settings, we click on the "Copy" button and paste the flash animation onto the other three warning images. To do this, hold down the Ctrl key (Command key for Apple computers), select the layers of the other three images, and click on the "Paste - Paste the Layer Animation Only" option at the top.

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

2-2）Add an animation "Displacement Easing" to help text, the parameter settings are as follows:

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

2-3）Add an animation "Scale Easing" to the download button on the end page. The parameter settings are as follows:

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

### 3.Events Settings

#### 1）Event Optimization

1-1) Copy the entire "Press" layer event from Scene 1 to Scene 2 as scene event.&#x20;

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

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

1-2)Modify the response event of the "Press" layer event in Scene 1 to "Redirect to next scene" and add the response event "Pause playing help sound effect."

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

#### 2）Event Addition

Add the event "Press - Redirect to app store" for the download button in Scene 2.

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

### 4.Language Translation&#x20;

* Click on "Global Settings" and click on the brush icon next to "Default Language" to open the language translation window.&#x20;

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

* Select the target language as Chinese and check all the text boxes. Click on the "Translate (Beta)" button for automatic translation.
* If you are not satisfied with the translation result, you can make manual adjustments directly in the text boxes.&#x20;
* After all adjustments, click on "Confirm" to apply the multilingual translation.&#x20;

<div align="left"><figure><img src="/files/cvwUvkUdhjHNL4ZWhoei" alt="" width="467"><figcaption></figcaption></figure></div>

* Next, switch to the Chinese version for preview and make minor adjustments to the style of the Chinese text.

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

### 5.Landscape Adaptation&#x20;

* <mark style="color:red;">Note: After completing the vertical adjustments for each scene, it is necessary to perform landscape adaptation (You can use the "Reuse vertical screen position configuration" button frequently).</mark>&#x20;
* <mark style="color:red;">Also, pay attention to whether the screen adaptation settings for each layer are correct in landscape mode.</mark>

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

### 6.**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/3gQ7Yi7UPoUNcwd8YBmQ" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">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 iterative process of Template content creation. The demonstration speed has not been adjusted significantly, allowing you to follow along with the video step by step. If you are already familiar with a particular step, you can skip it as needed.

{% embed url="<https://mmp-cdn.rayjump.com/res_store/1984825/65421e64a30c9.mp4>" %}


---

# 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-template-content-creation-tutorial/animation-loop-template-content-creation-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.