# \Interactive Video Tutorial Please Note: This tutorial focuses on creating a **single-thread interactive video** **using the Interactive Video Editor**. For the best learning experience, we recommend checking out the [DEMO](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fps%252Fpreview%252F25%252F02%252F28%252F67c15ee12e29c%252Findex.html%253Floading%253D1%2526preview%253Dtrue%2526lang%253Dzh-cn%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0%26is_browser_tips%3D1%26ptloading%3D1%26track_data%3D%257B%2522pid%2522%253A5416562%252C%2522uid%2522%253A109685%252C%2522sct%2522%253A%2522%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522SG%2522%257D\&orientation=3\&name=\&language=en%2Czh-cn) alongside this guide! 💡 By following the production logic in this case, you can also iterate on other similar gameplay materials! ## 📒Basic Info * \[Difficulty]: ⭐⭐ * \[Applicable Products]: Universal, especially for drag/swipe-based gameplay * \[Freedom]: Fixed * \[Core Assets]: Video * \[Core Interactive Element]: Freeze * \[Core Event]: Swipe arbitrarily - Continue playing video / Redirect to the specified scene ## 📒Effect Preview

Best experience for playable on mobile devices	Vertical screen	Horizontal screen

Scan to play	Click to play	Click to play

## 📒Gameplay Overview **Before starting the production, we need to outline the gameplay logic for this case：** 1. Enter the playable, the idle screen appears with an instruction prompt, guiding the player to drag the character to fall. 2. When the player swipes anywhere on the screen, "Ragdoll Fall Video 1" starts playing. 3. At the end of Video 1, another instruction prompt appears, guiding the player to drag the character for further collisions. 4. When the player swipes again, "Ragdoll Fall Video 2" starts playing. 5. At the end of Video 2, another instruction prompt appears, guiding the player to drag the character for further collisions. 6. When the player swipes again, "Ragdoll Fall Video 3" starts playing. 7. After Video 3 ends, the trial automatically redirects to the app store and the end card. ## 📒Production Approach **Core Concept:** Ensure a clear storyboard script structure and divide video nodes accordingly. Based on the gameplay logic from the previous section, this case follows a single-thread structure, consisting of **three video nodes + one end card**.

Node	Node 1 - Video 1	Node 2 - Video 2	Node 3 - Video 3	End Card
Visual Rendering
Scene Description	Player swipes anywhere to play Video 1	Player swipes anywhere to play Video 2	Player swipes anywhere to play Video 3	Product info + Download button
Core Assets	Video: Ragdoll Fall Video 1 Image: Guide hand, Guide line Sound: Injury sound effect	Video: Ragdoll Fall Video 2 Image: Guide hand, Guide line Sound: Heavy impact sound effect	Video: Ragdoll Fall Video 3 Sound: Heavy impact sound effect	Image: Product info Particle Effect: Floating stars
Core Animations	Guide hand:Displacement Easing Guide line:Scale Easing Character idle: CycleZoomIn	Same as Node 1	Same as Node 1	Download button: Scale Easing
Core Events	Interactive Element: Freeze(Within Node) Gesture: Swipe arbitrarily Response Event: Continue playing video Interactive Element: Freeze(Between Nodes) Gesture: Swipe arbitrarily Response Event: Redirect to the specified scene2	Interactive Element: Freeze(Between Nodes) Gesture: Swipe arbitrarily Response Event: Redirect to the specified scene3	Interactive Element: Auto Redirection	Gesture: Press Response Event: Redirect to app store

## 📒**Production Guidelines** *\*The core contents are Step 1 \[Storyboard Setup] & Step 2 \[Interactive Element Settings]* ### **Step 1 -** Storyboard Setup Before starting, it’s recommended to upload all assets into **Project Assets** and **Project Video** for easier access and usage. #### **1. Adding Nodes** * Under the existing "Video Node 1", add two more video nodes. * Click "+End Card" below Video Node 3 to add an End Card. This completes the script structure.

#### **2. Adding Videos** * Upload the pre-cut three video clips into their corresponding video nodes.

* Select each video in sequence and adjust its position and size accordingly. *(Note: **The position and size of all three videos must be identical** for a more seamless interactive experience.)*

### **Step 2 - Interactive Elements Setup** Once video assets are added, the platform automatically links the nodes using **Freeze** elements. You can adjust them as needed or add additional interactive elements within the nodes. #### **1. Interactive Elements Between Nodes** Based on the gameplay flow in this case, when Video 1 finishes playing, an instruction guide should appear, and players need to swipe arbitrarily to continue playing Video 2 (the same logic applies to subsequent steps). Therefore: * The Freeze elements between videos do not need any modifications. * Select the interactive element between Video Node 3 and the End Card, and change it to Auto Redirection.

* Select the first Freeze element, and set the gesture to Swipe Arbitrarily. *(**Since the Click Area is the topmost layer in the canvas, resizing it first may affect other operations. You can move it outside the canvas temporarily and adjust it at the end. The same applies below.**)* * Similarly, select the second Freeze element and set the gesture to Swipe Arbitrarily.

#### **2. Interactive Elements Within Nodes** Additionally, Video 1 should start in a paused state with an instruction guide displayed. Players need to swipe arbitrarily to start playing Video 1. This requires: * Adding a Freeze element at the beginning of Video 1. * Selecting this element and setting the gesture to Swipe Arbitrarily *(the response event is set to "Continue playing video" by default, so no further adjustments are needed).*

### **Step 3 - Other Assets** Addition Continue adding additional assets to enhance the interactive experience. #### **1.Global Settings** * Click "Global Settings", then add background music and background image. * Since this case requires an Auto Redirection to app store when the player swipes for the last time (which marks the end of the playable ad), simply enable "Auto-redirect to app store after end" in the Setting Redirect section. * If multiple language versions are needed, you can add/modify them in the Default Language section.

#### 2.**Video Node 1 - Video Node 3** * Place the cursor inside the first Freeze interactive element of Video 1, then add relevant assets from Project Assets or Asset Library, such as guidance elements, product information, character idle images, sound effects, and text. * Adjust the position and size of each asset to fit properly. * Modify the duration of each interactive element (i.e., when they appear on screen): * Guidance elements should only appear at the start of the video, under the first Freeze interactive element, so their duration does not need adjustments. * Sound effects should be placed directly at the relevant point in Video 1. * Product information should remain visible throughout the entire playable experience, so its duration needs to be extended to the end of Video 1.

* Video Node 2 and Video Node 3 should follow the same process as Video Node 1. Use the "Copy-Paste" function to speed up the process. *(Tip: To maximize efficiency, complete Step 4 and Step 5 first before using Copy-Paste, ensuring animations and horizontal-screen parameters are also replicated.)* 💡 When multiple assets need to be repeated across interactive elements, use "Copy-Paste" for efficiency: Select the elements to copy, click Copy ➡ place the cursor in the target position, then click Paste.

#### **3.End Card** * Click on the "End Card" in the timeline and replace the default product information with your own product. * You can also browse the Asset Library and add suitable particle effects to enrich the visuals.

### **Step 4 -** Landscape & Portrait Orientation Adaptation After completing the layout for portrait orientation, we need to adjust the "layout for landscape orientation" and the "screen adaptation for both landscape and portrait orientations." **1.Adjust the layout for landscape orientation.** * Switch to landscape mode, then select all asset elements and click "**Reuse vertical screen position configuration**" to auto-adjust their layout. * Adjust the position and scaling of individual elements to ensure that all content is fully visible in landscape mode.

**2.Adjust the screen adaptation.** * In this case, we want: "Product information" to always be positioned at the top of the screen across different device sizes. "Persistent Download Button" to always stay at the bottom of the screen across different device sizes. To achieve this: * Select icon/app name, go to the "Screen adaptation" settings on the right, and set it to top-centered adaptation. * Select the Download button (image & text), go to the "Screen adaptation" settings on the right, and set it to bottom-centered adaptation. * Other assets remain center adaptation by default and do not need changes.

### **Step 5 - Animation Settings** The animations used in this case include: Displacement Easing for the guiding finger, Scale Easing for the guiding line, CycleZoomIn for the idle character, and Scale Easing for the download button. Let's go through them one by one. #### 1. Guiding Finger - **Displacement Easing** * Select the finger image and click Add Animation in the right parameter panel. * Choose Universal - Displacement Easing and configure the parameters as follows.

#### 2. Guiding Line - **Scale Easing** * Select the guiding line image and move its pivot to the bottom center of the image, e.g., (46,90). * Click Add Animation in the right parameter panel, choose Universal - Scale Easing, and configure the parameters as follows.

#### 3. Idle Character - **CycleZoomIn** (Optional) To add more dynamic effects to the initial screen, you can separately add an idle character image and apply a breathing effect animation. * Select the idle character image and move its pivot to the bottom center of the image, e.g., (50,80). * Click Add Animation in the right parameter panel, choose Emphasize - CycleZoomIn, and configure the parameters as follows.

#### 4. Download Button - **Scale Easing** * Select the download button image and text on the end screen, then add an animation. * Choose Emphasize - PulseFront and configure the parameters as follows.

💡After completing landscape & portrait adaptation and animation settings, **remember to copy and paste** the product information/interaction guidance. 💡Also, check all interactive elements' **Click Areas** to ensure they are properly positioned and sized. Once all steps are complete, your interactive video is completed. ### Step 6 - Overall Preview 1）It is advisable to preview your work promptly after completing each step in the creation process to check if the settings are correct. 2）Once everything is completed, it is recommended to perform an overall preview on different devices, languages, and orientations to ensure everything is working correctly.

--- # 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-video-to-playable/less-than-ragdoll-fall-greater-than-interactive-video-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.