# Two-slides Interactive Videos-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/mrefj46z) VS [After](https://tinyurl.com/4j5t4y2d)

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

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

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）Asset Hiding: Hid or deleted unnecessary assets, including instructional text groups and guide line.

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

4）Asset Addition: Global scene——product name text.Scene 1 ——amount panel, particle effects. Scene 2——reward panel, two download buttons.

### 2.Animations and Effects

1）Animation Optimization: Deleted and replaced finger animation and adjusted parameters.

2）Animation Addition: Added corresponding animations to the newly added assets, including amount text and download buttons.

### 3.Event Settings

1）Event Optimization: Copied the entire "Press" event from interactive area 2 of Scene 1  to Scene 2 as scene event.  Modified the response event of the "Press" event in Scene 1 to "Redirect to app store" and "Redirect to the next scene" .

2）Event Addition: Added response events for Scene 1 video "Ending time"："Display particle effect" and "Play text animation from the beginning."  Added event "Redirect to app store" for the download buttons 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/LuC5kR76Wv0uzTNgoANr" alt=""><figcaption></figcaption></figure>

#### 1）Asset Replacement

The main assets to be replaced include:Background image/background music/video/sound effects/finger image/logo/download button/disclaimer.

* 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/7UgY0EuuoIPLyv7jARvM" 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/RDrwzm8LL5dM3R4BjOTf" alt=""><figcaption></figcaption></figure>

#### 2）Asset Hidden/Deletion

In this case, since the prepared video assets already include an indication of "RAFFLE" , the original instructional text in the template is not needed. The guide line is also unnecessary during the iteration process and can be hidden or deleted.

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

#### 3）Scene Addition

In this case, we want the settlement screen in Scene 2 to be placed on top of the gameplay screen. Therefore, we can use the "Duplicate the Scene" feature to preserve the gameplay screen and then add new assets to complete the quick production of Scene 2. After duplicating, we can delete the unnecessary layers.

<figure><img src="/files/6fmUTU3YgtePDCSxXxMT" alt=""><figcaption></figcaption></figure>

Also, in the "Scene setting" of Scene 2, we choose to set the global scene to be placed at the bottom layer of the scene.

<figure><img src="/files/3DuxDEedq1gLYcXxqOLK" alt=""><figcaption></figcaption></figure>

#### 4）Asset Addition

Global Scene: Product name

Scene 1: Amount Panel/Amount Text/Cash Out Button/Coin Particle Effect.

Scene 2: Mask/Raffle Image/Reward Panel/Reward Item Image/Reward Text/Download Button\*2/Scattered Light Particle Effect.

* Click to open the "Project Assets" window and add the required assets.
* Adjust the position and size of each asset, and group similar assets together.
* <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/X0IMBBaKEX2dYFauhIt9" alt=""><figcaption></figcaption></figure>

### 2.Animations and Effects

#### 1）Animation Optimization

In this case, we need to create a click effect for the finger. Therefore, we will replace the "Spin Easing" animation with the "Scale Easing" animation and delete the unnecessary "Alpha Easing" and "Displacement Easing" animations. We will then readjust the position and parameters. The parameter settings are as follows:

<div align="left"><figure><img src="/files/1sW7Q3N7FxKojqO0IA6p" alt="" width="518"><figcaption></figcaption></figure></div>

#### 2）Animation Addition

2-1）Add an animation "Exit - FadeOut" to the text "$ 0" and turn off automatic playback.The parameter settings are as follows:&#x20;

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

2-2）Add an animation "Approach - FadeIn" to the text "$ 999" and turn off automatic playback.The parameter settings are as follows:&#x20;

<figure><img src="/files/4hPFGESIj8XVLDpp5s5g" alt=""><figcaption></figcaption></figure>

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

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

#### 3）Particle Addition

After adjusting the animations, we proceed to add and adjust the particle effects.

3-1) Coin Burst Effect&#x20;

Scene 1: Click on "Asset Library" to open the asset library window. Under the particle category, add the desired particle effect.&#x20;

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

After making simple adjustments to the position and parameters of the particles, we hide them. We will trigger the display of the particles later using events.

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

3-2) Scattering Light Effect&#x20;

Scene 2: Click on "Asset Library" to open the asset library window. Under the particle category, add the desired particle effect.&#x20;

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

Make simple adjustments to the position and parameters of the particles. Drag the particle layer below the reward panel layer to display it as a background effect.

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

### 3.Events Settings

#### 1）Event Optimization

1-1) Copy the entire "Press" layer event from interactive area 2 of Scene 1 to Scene 2 as scene event. (You can add a response event of "play click sound effect" in Scene 2 as needed)

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

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

1-2)Modify the response event of "press" in interactive area 2 of scene 1 to"Redirect to app store"  and "Redirect to next scene".

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

#### 2）Event Addition

2-1）Add response events to the event  "Ending time" of Scene1's video: "Display particle effect" and "Play text fade in and out animation from the beginning";&#x20;

Add a response event of "execution delay of 1.5s" and drag it before the original response events of Show hand guidance and interactive area 2 (ensuring that the instructional prompts appear after the video playback is complete and can be clicked again).

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

2-2）Add a interactive area to cash out button in Scene 1 and add the event "Press - Redirect to app store".

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

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

<figure><img src="/files/4S99KgiOHggCDHLyU70H" alt=""><figcaption></figcaption></figure>

### 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/OSJg57AR4OoL7iol2oF5" 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/HIAZ6XLm6YDgOgmfN7Gw" alt="" width="476"><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/T8sqLWudNQP3sNFnC6EE" 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/3Z4WAsaC3UUGrWuR90gU" 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/A60tXP1VN3KWzIQQjrmM" 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/1984983/654311879ee16.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/two-slides-interactive-videos-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.