Interactive Videos<Simulating Movement>Tutorial
#Content Editor #Blank Canvas #Basic difficulty
Please Note：This tutorial mainly explains how to achieve the effect of "simulating real-time player actions" through interactive videos. It is recommended to try the DEMO for a better understanding!
1. Basic Info
[Difficulty]: ⭐⭐
[Applicable Products]: Universal (Especially for joystick gameplay products)
[Interaction]: Press/Lift up
[Freedom]: Fixed process
[Core Assets]: Video
[Features]: Press-Continue playing video / Lift up-Pause the video
2.Effect Preview
Scan to play
3. Gameplay Overview
Before starting the production, we need to outline the gameplay logic for this case：
Upon entering the trial, automatically play the "Siege Attack Video" (Initial Video 1).
After the video playback ends, display the "Operation Guide" to guide players to press continue and confront the zombies.
When the player presses anywhere on the video, play the "Confronting Zombies Video" (Core Video 2) while displaying a loading progress bar. Whenever the player releases the touch, pause the "Confronting Zombies Video," stop the progress bar loading, and show the "Operation Guide."
After the video playback ends, automatically redirect to the store. Players can return from the store to continue the trial.
When the player presses anywhere on the video, play the "Confronting Zombies Video" (Core Video 3) while displaying a loading progress bar. Whenever the player releases the touch, pause the "Confronting Zombies Video," stop the progress bar loading, and show the "Operation Guide."
After the video playback ends, stop the progress bar loading, and display the "Operation Guide." When the player presses, redirect to the 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: Since the gameplay for this case is relatively simple, we only need one scene to create it.
Visual Rendering
Scene Description
When the player presses, the video plays, and when they release, the video pauses. This simulates real-time player interaction.
Core Assets
Static Images: Operation Guide, Progress Bar
Videos: Initial Video 1, Core Video 2, Core Video 3
Note: In our DEMO for this case, there is a "forced redirect after 4 seconds of playing the core video" setting. For better understanding and production, we split the core video into two parts (Core Video 2 has a total duration of 4 seconds). If you don't need the mid-way forced redirect, you only need to prepare one core video segment.
Core Animations
Operation Guide: Displacement Easing
Progress Bar: Scale Easing
Core Events
Trigger Object: Layer - Video
Trigger Event: Press / Lift up
Response Event: Continue playing video / Pause the video
5. Production Guidelines
*The core content is Step3 [Event Setting]
Step 1 - Scene Setup
It is recommended to upload all assets into the "Project Assets" after creating the project for easier access and usage in the future.
I. Global Settings
Add BGM and Background Image in the "Global Settings" section.
II. Scene 1
1）Add the required videos and images to Scene 1.
Tips: You can directly obtain the assets related to the "Progress Bar" and "Operation Guide" from the "Presets Library"!
2）Adjust the position and size of each asset accordingly.
3）Group, arrange, and name the assets based on their types.
4）Set the core video (Core Video 2 + Core Video 3) to the "hidden" state, and turn off [Autoplay], because we need to control the display and playback of the video through events later.
5）Adjust landscape layout: Select all the top-level layers and use the "Reuse vertical screen position configuration" function to layout them with a single click. Then, adjust the position and scale as needed.
6）Adjust Screen adaptation: In this case, we want the product information in portrait mode to always be at the bottom of the screen. To achieve this, select the corresponding layer and click the downward arrow icon in the "Screen adaptation" section on the right side (other layers are set to default center alignment and do not require adjustment).
Step 2 - Animation Setting
In this case, the assets that need animation settings are: guiding finger, guiding text, progress bar (optional), and role (optional).
Tips: If you use presets, you don't need to set up animations by yourself!
I. Guiding finger
1）Select the finger picture [gf_hand], Add Animation - Universal - Displacement Easing, and set the parameters as follows (finger horizontal movement animation):
2）Select the finger group [gf_1], Add Animation - Universal - Displacement Easing, and set the parameters as follows (finger vertical movement animation):
II. Guiding text
Select the guiding text [tguidelines], Add Animation - Emphasize - SlideY, and set the parameters as follows (After setting up, you can hide the entire guidelines group and control it later through events):
III. Progress bar (optional)
1）Select the progress bar image [progress_bar] and modify its "Pivot" to (0, 50). Uncheck the "Separate Setting" option.
Note: The progress bar image should be aligned to the left and right edges without any gaps.
2）Add Animation - Universal - Scale Easing, and set the parameters as follows:
Note: The "Duration" here represents the total time needed for the progress bar to reach the end. In this case, we have set it so that "when the progress bar is almost fully loaded, the player cannot interact." This means that when all the videos finish playing, the progress bar needs to have a remaining portion before reaching the end. Therefore, the "Duration" of the progress bar should be greater than the total duration of all the videos combined. The total duration of the three video segments in this case is around 8.7 seconds, so you can set the "Duration" of the progress bar to 10 seconds or longer.
IV. Role (optional)
1）Select the role image [role_1] and modify its "Pivot" to (50, 100). Uncheck the "Separate Setting" option.
2）Add Animation - Universal - Scale Easing, and set the parameters as follows (After setting up, you can hide the role layer and control it later through events):
Step 3 - Event Setting
All the events in this case are centralized on three video layers and Scene 1. We will explain them in the order of operation.
I. Layer: video_01 (Initial Video 1)
1）Select the layer [video_01] , Add Event - Starting time.
Add response event: Play the progress bar animation from the beginning.
2）Add Event - Ending time.
Add response event: Hide Initial Video 1; Show Core Video 2, role image, and guidelines group.
Add response event: Play all guide-related animations from the beginning; Pause the progress bar animation simultaneously.
II. Layer: video_02 (Core Video 2)
1）Select the layer [video_02] , Add Event - Press.
Add response event: Set Tracking Event, and modify its name to "Pressing the screen for the first time."
Add response event: Hide the role image and hide the guidelines group.
Add response event: Continue playing Core Video 2; and continue playing progress bar animation and a click sound effect.
2) Add Event - Lift up.
Add response event: Pause the playback of Core Video 2.
Add response event: Show the guidelines group; Play the guide-related animations from the beginning; Simultaneously pause the progress bar animation.
3) Copy event: Copy the "Ending time" event of [video_01].
Paste event: Select [video_02], Paste - Paste layer events only.
Modify response event: Hide Core Video 2; Show Core Video 3; and remove showing the role image.
Add response event: Redirect to app store (This step is the previously mentioned "forced redirect").
III. Layer: video_03 (Core Video 3)
1）Copy event: Copy the entire layer [video_02].
2）Paste event: Select [video_03], Paste - Paste layer events only (i.e., paste all events of this layer with a single click).
3）Event - Press
Modify response event: Continue playing video [video_03]; Delete the tracking event; Delete hiding the role image.
4）Event - Lift up
Modify response event: Pause the playback of video [video_03].
5）Event - Ending time
Delete response event: Delete hiding video [video_02], showing video [video_03], and redirecting to app store.
Add response event: Disable the press event of [video_03]; Disable the lift up event of [video_03] (after setting up the scene events for the next step, you need to add a response event here to "enable the press event of Scene 1").
Note: This means that when the last video finishes playing, the press/ lift up events of that video will no longer take effect, and the press event (i.e., the redirect event) of Scene 1 will start to take effect.
IV. Scene: Scene 1
1）Click on Scene 1 and Add Event - Press.
Add response event: Redirect to app store
Add response event: Report the end of the playable ads
Add response event: Play the click sound effect.
2) Add Event - Timing trigger.
Set the execution delay time to 0s.
Add response event: Disable the press event of Scene 1.
Note: This means that when entering the trial, the press event (i.e., redirect event) of Scene 1 is disabled and will not take effect. Then, we add the response event "Enable the press event of Scene 1" under the "Ending time" event of Core Video 3.
These are all the events used in this case. With the completion of all event settings, our material is completed.
Step 4 - 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.
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 to make it, so that you can start using the Content editor to make such materials as soon as possible.
Last updated
