Interactive Videos<3-step interaction>Tutorial
#Content Editor #Blank Canvas #Basic difficulty
PreviousInteractive Videos<Two options & endings>TutorialNextSimple Tutorial - Blank Canvas Tutorial
Last updated
#Content Editor #Blank Canvas #Basic difficulty
Last updated
Please Note：This tutorial uses parkour gameplay as an example to explain how to create 3-step interactive videos in Blank Canvas. It is recommended to try the for a better understanding! For other gameplay products, simply modify the "press" event in the demo to match the interactive method of your product, and it will be applicable!
[Difficulty]: ⭐
[Applicable Products]: Universal
[Interaction]: Press
[Freedom]: Fixed process
[Core Assets]: Video
[Features]: Press-Redirect to the next scene；Starting time-Disable events；Ending time-Enable events
Scan to play
Before starting the production, we need to outline the gameplay logic for this case：
Upon entering the trial, automatically play "Parkour Video 1" once.
After the video ends, display the "Operation Guide" to guide the player in swiping to avoid obstacles.
When the player presses, play "Parkour Video 2." After the video ends, show the "Operation Guide" again to guide the player in swiping to avoid obstacles.
When the player presses, play "Parkour Video 3." After the video ends, show the "Operation Guide" again to guide the player in swiping to avoid obstacles.
When the player presses, play "Parkour Video 4." After the video ends, redirect to app store and redirect to the end scene.
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: To facilitate understanding and keep the operation simple, we have divided this case into four scenes for production.
Visual Rendering
Scene Description
After the "Parkour Video" finishes playing, the operation guide will appear to instruct the player to slide and continue the parkour.
After the "Parkour Video" finishes playing, the operation guide will appear to instruct the player to slide and continue the parkour.
Reward panel & Redirect button
Core Assets
Video：Parkour video1/Parkour video2
Static Images:Operation guide
Audio: Tap sound effect
Video：Parkour video3+Parkour video4
Static Images:Operation guide
Audio: Tap sound effect
Static Images:End frame screenshot from the video, Mask, Reward panel, Redirect button
Particle: Ribbon particles
Audio: Victory sound effect
Core Animations
Operation guide: Displacement Easing
Operation guide group: Fadeln
Operation guide: Displacement Easing
Operation guide group: Fadeln
Reward panel group: ZoomIn
Redirect button: Scale Easing
Mask: Fadeln
Core Events
Trigger Object: Video Layer
Trigger Event: Press
Response Event: Redirect to the next scene
Trigger Object: Video Layer
Trigger Event: Starting time
Response Event: Disable press event
Trigger Object: Video Layer
Trigger Event: Ending time
Response Event: Enable press event
Trigger Object: Video Layer
Trigger Event: Press
Response Event: Hide Video 3; Play Video 4 from the beginning
Trigger Object: Video Layer
Trigger Event: Starting time
Response Event: Disable press event
Trigger Object: Video Layer
Trigger Event: Ending time
Response Event: Enable press event
Trigger Object: Redirect button group
Trigger Event: Press
Response Event: Redirect to app store
*The core content is Step4 [Event Setting]
It is recommended to upload all assets into the "Project Assets" after creating the project for easier access and usage in the future.
1）Add BGM and Background Image in the "Global Settings" section.
2）Add product information such as resident download button and logo in "Global scene" section, and adjust their positions and sizes.
3）Switch to landscape mode and rearrange the product information group. Hide unnecessary bottom banner images (check "[Show&Hide] Separate Setting").
1.2.1 Scene 1
1）Add core gameplay-related assets: Parkour Video 1, Operation Guide, Click Sound Effect.
2）Adjust the position and size of each asset, and group, sort, and name them according to their types.
3）Video Parameters: Auto-play once upon entry.
4）Landscape Layout: Switch to landscape mode, select all top-level layers, use the "Reuse vertical screen position configuration" feature to automatically adjust the layout, then adjust the position and scale of each layer appropriately to display the complete content of the core gameplay.
1.2.2 Scene 2 & Scene 3 (It is recommended to perform this step after completing event setting to avoid duplication)
1）Since the production steps for Scene 2 and Scene 3 are similar to Scene 1, you can quickly set up the scenes using the "Duplicate the Scene" function. After duplicating the scene, replace the respective videos.
2）Note: In Scene 3, add an additional video, "video_4," and disable auto-play upon entry.
3）You can copy the Video 3 layer and perform the "Only paste the alignment and size of the layer" operation on Video 4 to align its position and size.
1）Add assets related to the ending page in Scene 4: End frame screenshot from the video, mask, reward panel, redirect button, victory sound effect, product information group. (Due to the limitations of "Global scene" where the layer can only be set to "put on top" or "put on the bottom," the existing product information group may be obscured on the end scene. Therefore, you can copy the product information group from the "Global scene" to Scene 4, adjust its layer order freely, and disable the "Global scene").
2）Adjust the position and size of each asset and group, sort, and name them according to their types.
3）Check Scene 4 as the "Ending Scene" for reporting the end of the playable ads.
4）Landscape Layout: Similarly, switch to landscape mode, select the reward panel group [group_end], use the "Reuse vertical screen position configuration" feature to automatically adjust the layout, and then fine-tune the position and size of each layer.
After completing the scene setup, we also need to adjust the "Screen adaptation" for certain layers (related content: Creation Tips - Adaptation).
In this case, we want the persistent information group in portrait mode to always be at the bottom of the screen for each device model. Therefore, we adjust its "Screen adaptation" to "Bottom-Fit" (other layers remain centered without adjustment).
In this case, the animations and particle effects used are as follows, which we will explain in detail:
Scenes 1-3: Finger guide animation, text guide animation, guide group fade-in animation.
Scene 4: Reward panel group entrance animation, redirect button scaling animation, mask fade-in animation, ribbon particles.
Select the finger guide image [guide_hand] and Add Animation - Universal - Displacement Easing, as a looping animation for swipe guidance. Set the parameters as follows：
Select the text guide [text_guide] and Add Animation - Universal - Displacement Easing, as a looping animation. Set the parameters as follows：
Select the guide group [group_guide] and Add Animation - Approach - Fadeln, as an entrance animation for the entire guide group. Set the parameters as follows：
Select the reward panel group [group_end] and Add Animation - Approach -ZoomIn, as an entrance animation for the entire reward group. Set the parameters as follows:
Select the redirect button group [btn] and Add Animation - Universal - Scale Easing, as a looping animation. Set the parameters as follows：
Select the mask image [mask] and Add Animation - Approach - Fadeln, as an entrance animation for the mask. Set the parameters as follows：
1）Select appropriate particle effects from the "Asset Library" and add them to Scene 2.
2）Adjust the particles to their appropriate positions (taking into account both landscape and portrait orientations).
To complete the setup of all animations, we need to configure the logic of the gameplay using "events."
In this case, the main aspects related to event settings are as follows:
Press video: Redirect to the next scene; hide assets; play the video from the beginning.
Video Starting time: Disable pressed event.
Video Ending time: Enable pressed event.
Press redirect button: Redirect to app store.
Next, we will explain each step in sequence.
In Scene 1, select the layer [video_1]
1）Add Event - Press. Add response events:
Set Tracking Event, select tracking ID 1, and edit the tracking name as "First Press"
Play click sound effect once from the beginning
Redirect to the next scene
2）Add Event - Starting time. Add response events:
Disable events: video_1 Press
3）Add Event - Ending time. Add response events:
Enable events: video_1 Press
Play Fadeln animation of the guide group from the beginning
Play Displacement Easing animation of the text guide from the beginning
Play Displacement Easing animation of the finger guide from the beginning
Note: Enable events&Disable events are set to ensure that during video playback, interaction is not allowed until the video ends.
To create Scene 2 and Scene 3 by duplicating Scene 1 and replace the respective videos.
1）In Scene 2, select the layer [video_2] and modify the tracking ID and tracking name.
2）In Scene 3, select the layer [video_3], modify the tracking ID and tracking name, and delete the response event "Redirect to the next scene."
3）Add response events in Scene 3: Hide [video_3], hide the guide group, and play [video_4] from the beginning.
4）Select the layer [video_4]. Add Event - Ending time. Add response events:
Redirect to app store
Redirect to the next scene
In Scene 4, select the layer [btn]. Add Event - Press. Add response events:
Set Tracking Event, select tracking ID 4, and edit the tracking name as "Trigger End Page Redirect"
Redirect to app store
Enter Global scene, select the persistent download button group[group_button], Add Event - Press.
Add response event: Redirect to app store.
These are all the events used in this case. With the completion of all event settings, our material 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.
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.
