# Interactive Videos\Tutorial Please note: The basic template "Two options & endings" was created following this tutorial! ## 1. Basic Info * \[Difficulty]:⭐ * \[Applicable Products]:Universal * \[Interaction]: Click * \[Number of Interactions]: 2-Step Rediect * \[Threads]: Both-threaded * \[Core Assets]: Video(3 segments/coherent) * \[Features]:Animation - Scale easing, Event - Press to redirect to the specified scene,Event - Timing trigger to play all animations from the beginning ## 2.Effect Preview | Best experience for playable on mobile devices | Vertical screen | Horizontal screen | | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | |

| | Scan to play | [Click to play](https://tinyurl.com/yc6w274h) | [Click to play](https://tinyurl.com/yc6w274h) | ## 3. Gameplay Overview **Before starting the production, we need to outline the gameplay logic for this case：** * Enter the trial, play the video \[Girl Being Harassed] in a loop; * Display \[Left/Right Choice Guide] to direct player to press options for identification. * When player presses the left option \[Save Her]: enter the rescue ending * Play the video once \[Protagonist's Flying Kick Scene + Girl's Gratitude]; * Display the \[Left/Right Choice Guide] again, directing player to press options for identification; * Player presses anywhere on the screen, redirect to the app store. * When player presses the right option \[Don't Save]: enter the escape ending * Play the video once \[Protagonist's Reverse Escape Encounter with Boss]; * Display the \[Left/Right Choice Guide] again, directing player to press options for identification; * Player presses anywhere on the screen, 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 can divide this case into 3 scenes for production. (Scene 1: Inducing Choice; Scene 2: Ending A; Scene 3: Ending B)

Scene Name	Scene 1-Inducing Choice	Scene 2- Ending A	Scene 3- Ending B
Visual Rendering
Scene Description	Play the video [Girl Being Harassed] in a loop,guiding player to make a choice.	Play the video for Ending A, and at the end of the video, guide player to make a second round of choices.	Play the video for Ending B, and at the end of the video, guide player to make a second round of choices.
Animation	[Option Buttons]: Scale easing [Guide Finger]: Scale easing + Displacement easing	[Option Buttons]: Scale easing + Alpha easing [Guide Finger]: Scale easing + Displacement easing	[Option Buttons]: Scale easing + Alpha easing [Guide Finger]: Scale easing + Displacement easing
Core Events	Trigger Object: Layer - interactive area Trigger Event: Press Response Event: Redirect to the specified scene	Trigger Object:Scene-Scene 2 Trigger Event: Timing trigger Response Event: Play all animations from the beginning Trigger Object:Scene-Scene 2 Trigger Event: Press Response Event:Redirect to app store	Trigger Object:Scene-Scene 3 Trigger Event: Timing trigger Response Event: Play all animations from the beginning Trigger Object:Scene-Scene 3 Trigger Event: Press Response Event:Redirect to app store
Asset List	[Video]: Autoplay,Loop [Audio]: Click sound effect [Image]: Guide text, guide finger,option buttons	[Video]: Autoplay,close loop [Image]: Guide finger,option buttons	[Video]: Autoplay,close loop [Image]: Guide finger,option buttons

## 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, sound effect, guide finger, guide text, option buttons to "Scene 1". 2）Adjust the position and size of each asset accordingly. 3）Group, arrange, and name the assets based on their types.

#### **ⅳ. Scene 2-3** 1）Add video, guide finger, and option buttons in Scene 2 and Scene 3 respectively. 2）Adjust the position and size of each asset accordingly. 3）Group, arrange, and name the assets based on their types.

### Step 2 - Animation Production #### **ⅰ. Guide Finger** Since the finger needs to move and scale synchronously with the button during the decision, we will set up two general animations for the finger: Scale Easing and Displacement Easing. 1\) Select the finger image "gf\_hand" on the left side of the layer and add the animation - Universal - Displacement Easing. Set the parameters as follows:

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

#### **ⅱ. Scene 1 - Option Buttons** 1）Select the option button group "left\_options" on the left side of the layer and add the animation - Universal - Scale Easing. Set the parameters as follows:

2）Copy the animation to the option button group "right\_options" , and modify the animation curve accordingly:

#### **ⅲ. Scene 2/3 -** Alpha Easing Since the finger animation and option button animation in Scene 2/Scene 3 are the same as in Scene 1, we can quickly complete the production by copying/pasting the animations. Additionally, we can also add Alpha Easing animation. Set the initial opacity of the asset to 0, so that the fingers and option buttons are not visible when entering the scene. They will be displayed at the end of the video.Set the parameters as follows:

### Step 3 - Logic Settings #### **ⅰ. Layer Events -** interactive area We will set two interactive areas for the left and right option buttons separately. First, we'll set up events for the left interactive area and then copy the events to the right interactive area. With some simple adjustments, we can quickly complete the production. 1\) Select the layer "left operating area" . 2\) Add Event - Press. 3\) Add the response event - Pause a single animation.(the Scale Easing animation of option button) 4）Add the response event - Redirect to the specified scene after execution delay of 0.3 seconds.(Redirect to the corresponding ending after player presses the button for 0.3 seconds) 5\) Other response events: Play sound/Set tracking information.

#### **ⅱ. Scene 2/3：Scene Event** 1）In Scene 2, add event - Timing trigger. 2）Add a response event - Play all animations from the beginning after execution delay of 3 seconds.(When the video playback ends, play the finger and option button animation from the beginning) 3）Add Event - Press，Add response events - Redirect to the app store; Set postback event information; Report the end of the playable ads.

Note: The event settings for Scene 3 are the same as Scene 2, and can be quickly completed by 'Copying/Pasting Events'. #### **ⅲ. 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.

### 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/zfUWTuc2jtXSSsI2T2cy" %} --- # 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-options-and-endings-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.