# Interactive Videos<3 Taps>Tutorial

Please note: The basic template "3 Taps Interactive Videos" 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]: 3-Step Rediect
* \[Threads]: Single-threaded
* \[Core Assets]: Video (5 segments/coherent)
* \[Features]:Animation - Displacement Easing, Event - Press to play video from the beginning, Event - Redirect to next scene at video end.

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

| Best experience for playable on mobile devices                      | Vertical screen                                                     | Horizontal screen                                                   |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="/files/GrKFqabI2y3KI1Lr00di" alt="" data-size="original"> | <img src="/files/4alny2UWiJ39dugIYcdS" alt="" data-size="original"> | <img src="/files/cFDvekDjw1JAYkZSePOU" alt="" data-size="original"> |
| Scan to play                                                        | [Click to play](https://tinyurl.com/mry8dkzw)                       | [Click to play](https://tinyurl.com/mry8dkzw)                       |

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

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

* Enter the trial, display "Initial Car Movement - Ready to Launch."
* Show the "Operation Guide" to prompt the player to press for car launch.
* Player presses anywhere on the screen, play the "First Car Launch" video.
* Play the "Second Idle" video, show the "Operation Guide" again to prompt the player for car launch.
* Player presses anywhere on the screen, play the "Second Car Launch" video.
* Play the "Third Idle" video, show the "Operation Guide" again to prompt the player for car launch.
* Player presses anywhere on the screen, redirect 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 outlined in Part 3, we can divide this case into 3 scenes for production.

(Consisting of 5 video segments, Scene 1 and Scene 2 each include a looping video and feedback video, while Scene 3 serves as an ending page with a looping video).

<table data-full-width="true"><thead><tr><th width="177">Scene Name</th><th>Scene 1-Inducing Click+Video playback</th><th>Scene 2-Inducing Click+Video playback</th><th>Scene 3-End page with clickable prompt</th></tr></thead><tbody><tr><td><strong>Visual Rendering</strong></td><td><img src="/files/LqKj4trPtivz2SIsYzof" alt="" data-size="original"></td><td><img src="/files/l2fn1LmiKukqDI7AljCi" alt="" data-size="original"></td><td><img src="/files/CaxifDsYGfmQQpR9AkmN" alt="" data-size="original"></td></tr><tr><td><strong>Scene Description</strong></td><td>Looping video for the first idle phase, guiding players to click and assemble the car. After the player clicks, play the video for the first car launch.</td><td>Looping video for the second idle phase, guiding players to click and assemble the car. After the player clicks, play the video for the second car launch.</td><td>Looping video for the third idle phase, guiding players to click and assemble the car. After the player clicks, redirect to the app store.</td></tr><tr><td><strong>Animation</strong></td><td><p>【Guide Text】：Flashing</p><p>【Guide Finger】：Displacement Easing</p><p>【Guide Arrow】：Swipe left and right</p></td><td><p>【Guide Text】：Flashing</p><p>【Guide Finger】：Displacement Easing</p><p>【Guide Arrow】：Swipe left and right</p></td><td><p>【Guide Text】：Flashing</p><p>【Guide Finger】：Displacement Easing</p><p>【Guide Arrow】：Swipe left and right</p></td></tr><tr><td><strong>Core Events</strong></td><td><p>Trigger Object: Scene - Scene 1</p><p>Trigger Event: Press</p><p>Response Event: Play video from the beginning</p><hr><p>Trigger Object: Layer - Video</p><p>Trigger Event: Ending time</p><p>Response Event: Redirect to the next scene</p></td><td><p>Trigger Object: Scene - Scene 2</p><p>Trigger Event: Press</p><p>Response Event: Play video from the beginning</p><hr><p>Trigger Object: Layer - Video</p><p>Trigger Event: Ending time</p><p>Response Event: Redirect to the next scene</p></td><td><p>Trigger Object: Scene - Scene 3</p><p>Trigger Event: Press</p><p>Response Event: Redirect to the app store</p></td></tr><tr><td><strong>Asset List</strong></td><td><p>【Video】：Video A (Autoplay &#x26; Looping); Video A (Disable Autoplay &#x26; Looping)</p><p>【Audio】：Car launch sound effect, Car collision sound effect</p><p>【Image】：Guidance text, Guidance finger, Guidance arrow</p></td><td><p>【Video】：Video B (Autoplay &#x26; Looping); Video B (Disable Autoplay &#x26; Looping)</p><p>【Audio】：Car launch sound effect, Car collision sound effect</p><p>【Image】：Guide text, Guide finger, Guide arrow</p></td><td><p>【Video】：Video C (Autoplay &#x26; Looping)</p><p>【Image】：Guide text, Guide finger, Guide arrow</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/omJxw83G3TUd6TIhDQLT" alt=""><figcaption></figcaption></figure></div>

#### **ⅱ. Global Scene**

1）Add persistent information in the "Global Scene": 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/tR2Ua06ADmLvC3Y60Pf9" alt=""><figcaption></figcaption></figure></div>

#### **ⅲ. Scene 1-3**

1\) In Scene 1, Scene 2, and Scene 3, respectively, add video, sound effects, guide finger, guide arrow, and guide text.

2\) Adjust the position and size of each asset as necessary.

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

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

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

#### **ⅰ. Guide Text**

Select the guide text group "text:guide" on the left side of the layer panel and add the animation - Emphasize - Flashing. Set the parameters as follows:

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

#### **ⅱ. Guide Finger**

Select the finger group "hand" on the left side of the layer panel and add the animation - Universal - Displacement Easing. Set the parameters as follows:

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

#### **ⅲ. Guide Dotted Line**

Select the right arrow image on the left layer, 【rightarrow】, and add an animation - Emphasize - Slide left and right. Set the parameters as follows:

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

Note: The animation for the left arrow image can be copied directly from the right arrow image, with the X-axis displacement parameter changed to -22.

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

#### **ⅰ. Scene 1/2: Scene events**

1）In Scene 1, add event - Press.

2）Add response events - Hide guide-related assets; Hide looping video A.

Add response events - Play video A from the beginning; Play sound effects from the beginning.

3）Add a response event - Disable the "Press" event (to ensure players can only click once).

4）Other response events: Set postback event information.

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

#### **ⅱ. Scene 1/2: Layer events - Video**

1）Select video layer A.

2）Add an event - Ending time.

3）Add a response event - Redirect to the next scene.

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

Note: The event setup for Scene 2 is the same as Scene 1, with only the relevant assets being replaced with those from Scene 2. Therefore, we can use the "Copy/Paste Event" method to quickly create it.

#### **ⅲ. Scene 3: Scene events**

1）In Scene 3, add an event - Press.

2）Add response events - Redirect to the app store; Set postback event information; Report the end of the playable ads.

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

#### **ⅳ. Global Scene: Layer events - CTA button**

In the global scene, select the button group and add an event - Press. Then, add a response event - Redirect to the app store.

<div align="left"><figure><img src="/files/vG8Wj84pJAQ5Ohh251wl" 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/QO4tV89ll5InXHpu8T6P" 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.

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

#### **ⅲ. 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/TODRl7cOdiGLODEIZFqR" 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/2042965/65964fd483f35.mp4>" %}

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


---

# 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/interactive-videos-less-than-3-taps-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.