<Ragdoll Fall>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 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

📒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.

📒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.