Interactive Videos<3-step interaction>Tutorial

#Content Editor #Blank Canvas #General production #Basic difficulty

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 DEMO 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!

1. Basic Info

[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

2.Effect Preview

Best experience for playable on mobile devices

Vertical screen

Horizontal screen

3. Gameplay Overview

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.

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: To facilitate understanding and keep the operation simple, we have divided this case into four scenes for production.

5. Production Guidelines

*The core content is Step4 [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.

1.1 Global Settings

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 General Scene

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.2.3 Scene 4

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.

Step 2 - Landscape & Portrait Orientation Adaptation

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

Step 3 - Animation Setting

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.

3.1 Finger Guide: Displacement Easing

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：

3.2 Text Guide: Displacement Easing

Select the text guide [text_guide] and Add Animation - Universal - Displacement Easing, as a looping animation. Set the parameters as follows：

3.3 Guide Group: Fadeln

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：

3.4 Reward Panel Group: ZoomIn

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:

3.5 Redirect button: Scale Easing

Select the redirect button group [btn] and Add Animation - Universal - Scale Easing, as a looping animation. Set the parameters as follows：

3.6 Mask: Fadeln

Select the mask image [mask] and Add Animation - Approach - Fadeln, as an entrance animation for the mask. Set the parameters as follows：

3.7 Ribbon Particle Effects

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

Step 4 - Event Setting

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.

4.1 Layer: video_1

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.

4.2 Layer: video_2, video_3, video_4

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

4.3 Layer: Redirect button

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

4.4 Layer: Persistent download button

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.

Step 5 - 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.

PreviousInteractive Videos<Two options & endings>Tutorial NextBasic Tutorial - Template content creation Tutorial

Last updated 4 months ago