# Interactive Videos\Tutorial Please note: The basic template "Two-slides Interactive Videos" was created following this tutorial! ## 1. Basic Info * \[Difficulty]:⭐ * \[Applicable Products]:Universal * \[Interaction]: Swipe * \[Number of Interactions]: 2-Step Rediect * \[Threads]: Single-threaded * \[Core Assets]: Video(1 segment/coherent) * \[Features]:Animation - Spin easing, Event - Press to play video from the beginning, Event - Press to hide layers, Event - Show layers when video ends ## 2.Effect Preview | Best experience for playable on mobile devices | Vertical screen | Horizontal screen | | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | |

| | Scan to play | [Click to play](https://tinyurl.com/mrefj46z) | [Click to play](https://tinyurl.com/mrefj46z) | ## 3. Gameplay Overview **Before starting the production, we need to outline the gameplay logic for this case：** * Enter the gameplay and display the "Initial Instruction Screen", guiding the player to swipe and catch sheep. * Player performs a full-screen swipe to play the "Sheep Flying into Car Video". * After the video ends, the "Guide Finger" appears again, guiding the player to continue swiping and catching sheep. * Player performs a full-screen press to redirect to the app store. ## 4.Production Approach **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.

Scene Name	Scene 1-Inducing Swipe
Visual Rendering
Scene Description	Guide players to swipe and catch sheep while the video is paused.
Animation	[Guide Text]: Displacement Easing [Guide Dotted Line]: Alpha Easing [Guide Finger]: Spin Easing + Alpha Easing + Displacement Easing
Core Events	Trigger Object: Layer - interactive area (ensuring sufficient screen size) Trigger Event: Press (or swipe arbitrarily) Response Event: Play video from the beginning Trigger Object: Layer - Video Trigger Event: Ending time Response Event: Show layers
Asset List	[Video]: Video (disabled autoplay, infinite loop) [Audio]: Background music, swipe sound effect, sheep into car sound effect [Images]: Background image, finger, guide dotted line, guide text background image, logo, CTA button [Text]: Guide text, download text

## 5. **Production Guidelines** ### **Step 1 - Scene Setup** #### **ⅰ. Global Settings** Add background music and background image in the "Global Settings" section.

#### **ⅱ. 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.

#### **ⅲ. Scene 1** 1\) Add video, audio, guide finger, guide dotted line, and guide text to "Scene 1". 2\) Adjust the position and size of each asset as necessary. 3\) Group, arrange, and name the assets based on their types.

### Step 2 - Animation Production #### **ⅰ. Guide Text** Select the guide text group "group\_guide" on the left side of the layer panel and add the animation - Universal - Displacement Easing. Set the parameters as follows:

#### **ⅱ. Guide Dotted Line** Select the guide dotted line image "hand\_line" on the left side of the layer panel and add the animation - Universal - Alpha Easing. Set the parameters as follows:

#### **ⅲ. Guide Finger** To achieve a more natural effect for the finger animation during swipe guidance, we can apply three general animations: Spin easing, Displacement easing, and Alpha easing. 1\) Select the finger image "gf\_hand" on the left side of the layer panel and add the animation - Universal - Spin Easing. Set the parameters as follows:

2）Continue to add the animation - Universal - Displacement Easing. Set the parameters as follows:

3）Continue to add the animation - Universal - Alpha Easing. Set the parameters as follows:

### Step 3 - Logic Settings #### **ⅰ. Layer Events -** interactive area **1** To allow full-screen swipe for players and differentiate between the first and second swipes, we will add two larger interactive areas as separate regions for the first and second swipes. We will also set up events on these interactive areas. 1\) Select the layer for interactive area 1. 2\) Add event - Press. *(Note: Alternatively, the trigger action can be changed to "Swipe," but using "Press" will make it easier to trigger the event.)* 3\) Add response events - Play video from the beginning, play swipe sound effect from the beginning. 4\) Add response events - Hide guide-related layers, hide interactive area 1. *(Note: After the video plays, we need to hide the guide finger and text, as well as hide interactive area 1. This is because interactive area 1 becomes irrelevant after the first swipe, and the second swipe will occur in interactive area 2.)* 5\) Additional response events: Set tracking information, play sheep into car sound effect with Execution delay 0.5 seconds.

#### **ⅱ. Layer Events - Video** 1\) Select the video layer. 2\) Add the event - Ending time. 3\) Add response events - Show guide-related layers, show interactive area 2.

#### **ⅲ. Layer Events -** interactive area 2 1\) Select the layer for interactive area 2. 2\) Add the event - Press. 3\) Add response events - Redirect to the app store, set tracking information, report the end of the playable ads.

#### **ⅳ. Layer Events - CTA Button** Select the button group, add event - Press, and add the response event - Redirect to app store.

### Step 4 - Overall Preview #### **ⅰ. Landscape Layout** 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).

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

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

## 6.Assets Provision At the end of the tutorial, we have **provided all the assets used in this case** for you. 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. {% file src="/files/IcbDJXSszKaab1rLes7V" %} --- # 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-two-slides-greater-than-tutorial.md?ask= ``` 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.