<Ragdoll Fall>Interactive Video Tutorial
#Interactive Video Editor #Basic difficulty #Single thread #Swipe gameplay
Last updated
#Interactive Video Editor #Basic difficulty #Single thread #Swipe gameplay
Last updated
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 alongside this guide!
💡 By following the production logic in this case, you can also iterate on other similar gameplay materials!
[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
Scan to play
Before starting the production, we need to outline the gameplay logic for this case：
Enter the playable, the idle screen appears with an instruction prompt, guiding the player to drag the character to fall.
When the player swipes anywhere on the screen, "Ragdoll Fall Video 1" starts playing.
At the end of Video 1, another instruction prompt appears, guiding the player to drag the character for further collisions.
When the player swipes again, "Ragdoll Fall Video 2" starts playing.
At the end of Video 2, another instruction prompt appears, guiding the player to drag the character for further collisions.
When the player swipes again, "Ragdoll Fall Video 3" starts playing.
After Video 3 ends, the trial automatically redirects to the app store and the end card.
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.
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
*The core contents are Step 1 [Storyboard Setup] & Step 2 [Interactive Element Settings]
Before starting, it’s recommended to upload all assets into Project Assets and Project Video for easier access and usage.
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.
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.)
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.
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.
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).
Continue adding additional assets to enhance the interactive experience.
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.
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.
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.
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.
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.
Select the finger image and click Add Animation in the right parameter panel.
Choose Universal - Displacement Easing and configure the parameters as follows.
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.
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.
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.
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.
