Interactive Videos<3 Taps>Tutorial

#Content Editor #Blank Canvas #Basic difficulty

Please note: The basic template "3 Taps Interactive Videos" was created following this tutorial!

1. Basic Info

[Difficulty]:⭐
[Applicable Products]:Universal
[Interaction]: Click
[Number of Interactions]: 3-Step Rediect
[Threads]: Single-threaded
[Core Assets]: Video (5 segments/coherent)
[Features]:Animation - Displacement Easing, Event - Press to play video from the beginning, Event - Redirect to next scene at video end.

2.Effect Preview

Best experience for playable on mobile devices

Vertical screen

Horizontal screen

Scan to play

3. Gameplay Overview

Before starting the production, we need to outline the gameplay logic for this case：

Enter the trial, display "Initial Car Movement - Ready to Launch."
Show the "Operation Guide" to prompt the player to press for car launch.
Player presses anywhere on the screen, play the "First Car Launch" video.
Play the "Second Idle" video, show the "Operation Guide" again to prompt the player for car launch.
Player presses anywhere on the screen, play the "Second Car Launch" video.
Play the "Third Idle" video, show the "Operation Guide" again to prompt the player for car launch.
Player presses anywhere on the screen, redirect to the app 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: Based on the gameplay outlined in Part 3, we can divide this case into 3 scenes for production.

(Consisting of 5 video segments, Scene 1 and Scene 2 each include a looping video and feedback video, while Scene 3 serves as an ending page with a looping video).

Scene Name

Scene 1-Inducing Click+Video playback

Scene 2-Inducing Click+Video playback

Scene 3-End page with clickable prompt

Visual Rendering

Scene Description

Looping video for the first idle phase, guiding players to click and assemble the car. After the player clicks, play the video for the first car launch.

Looping video for the second idle phase, guiding players to click and assemble the car. After the player clicks, play the video for the second car launch.

Looping video for the third idle phase, guiding players to click and assemble the car. After the player clicks, redirect to the app store.

Animation

【Guide Text】：Flashing

【Guide Finger】：Displacement Easing

【Guide Arrow】：Swipe left and right

【Guide Text】：Flashing

【Guide Finger】：Displacement Easing

【Guide Arrow】：Swipe left and right

【Guide Text】：Flashing

【Guide Finger】：Displacement Easing

【Guide Arrow】：Swipe left and right

Core Events

Trigger Object: Scene - Scene 1

Trigger Event: Press

Response Event: Play video from the beginning

Trigger Object: Layer - Video

Trigger Event: Ending time

Response Event: Redirect to the next scene

Trigger Object: Scene - Scene 2

Trigger Event: Press

Response Event: Play video from the beginning

Trigger Object: Layer - Video

Trigger Event: Ending time

Response Event: Redirect to the next scene

Trigger Object: Scene - Scene 3

Trigger Event: Press

Response Event: Redirect to the app store

Asset List

【Video】：Video A (Autoplay & Looping); Video A (Disable Autoplay & Looping)

【Audio】：Car launch sound effect, Car collision sound effect

【Image】：Guidance text, Guidance finger, Guidance arrow

【Video】：Video B (Autoplay & Looping); Video B (Disable Autoplay & Looping)

【Audio】：Car launch sound effect, Car collision sound effect

【Image】：Guide text, Guide finger, Guide arrow

【Video】：Video C (Autoplay & Looping)

【Image】：Guide text, Guide finger, Guide arrow

5. Production Guidelines

Step 1 - Scene Setup

ⅰ. Global Settings

Add background music and background image in the "Global Settings" section.

ⅱ. Global Scene

1）Add persistent information in the "Global Scene": logo, CTA button.

2）Adjust the position and size of each asset accordingly.

3）Group, arrange, and name the assets based on their types.

ⅲ. Scene 1-3

1) In Scene 1, Scene 2, and Scene 3, respectively, add video, sound effects, guide finger, guide arrow, and guide text.

2) Adjust the position and size of each asset as necessary.

3) Group, arrange, and name the assets based on their types.

Step 2 - Animation Production

ⅰ. Guide Text

Select the guide text group "text:guide" on the left side of the layer panel and add the animation - Emphasize - Flashing. Set the parameters as follows:

ⅱ. Guide Finger

Select the finger group "hand" on the left side of the layer panel and add the animation - Universal - Displacement Easing. Set the parameters as follows:

ⅲ. Guide Dotted Line

Select the right arrow image on the left layer, 【rightarrow】, and add an animation - Emphasize - Slide left and right. Set the parameters as follows:

Note: The animation for the left arrow image can be copied directly from the right arrow image, with the X-axis displacement parameter changed to -22.

Step 3 - Logic Settings

ⅰ. Scene 1/2: Scene events

1）In Scene 1, add event - Press.

2）Add response events - Hide guide-related assets; Hide looping video A.

Add response events - Play video A from the beginning; Play sound effects from the beginning.

3）Add a response event - Disable the "Press" event (to ensure players can only click once).

4）Other response events: Set postback event information.

ⅱ. Scene 1/2: Layer events - Video

1）Select video layer A.

2）Add an event - Ending time.

3）Add a response event - Redirect to the next scene.

Note: The event setup for Scene 2 is the same as Scene 1, with only the relevant assets being replaced with those from Scene 2. Therefore, we can use the "Copy/Paste Event" method to quickly create it.

ⅲ. Scene 3: Scene events

1）In Scene 3, add an event - Press.

2）Add response events - Redirect to the app store; Set postback event information; Report the end of the playable ads.

ⅳ. Global Scene: Layer events - CTA button

In the global scene, select the button group and add an event - Press. Then, add a response event - Redirect to the app store.

Step 4 - Overall Preview

ⅰ. Landscape Layout

After completing the vertical layout for each scene, it is recommended to perform landscape layout (using the "Reuse Vertical Position and Size Configuration" button frequently).

ⅱ. Screen Adaptation

Perform screen adaptation for various device models and their orientations (portrait and landscape), and preview to check if the adaptation is appropriate.

ⅲ. Overall Preview

After completing the entire production, you can perform an overall preview for different device models, languages, and orientations (portrait and landscape).

6. Demo Screen Recording

Note: This video is a demonstration recording of the tutorial mentioned above. It includes only visual content and does not have audio narration.

The video provides a detailed record of the step-by-step process of Blank Canvas in this case. The demonstration speed has not been adjusted significantly, making it convenient for you to view and learn. If you are already familiar with a particular step, you can skip it as needed.

Furthermore, below the demonstration recording, we have provided a complete set of assets used in this case. Click on the compressed file to download it. You can use these assets to follow the tutorial and try creating your own content, enabling you to get familiar with using the Content editor more quickly.

PreviousInteractive Videos<Two-slides>Tutorial NextInteractive Videos<Two options & endings>Tutorial

Last updated 5 months ago

Interactive Videos<3 Taps>Tutorial

#Content Editor #Blank Canvas #Basic difficulty

Please note: The basic template "3 Taps Interactive Videos" was created following this tutorial!

1. Basic Info

[Difficulty]:⭐
[Applicable Products]:Universal
[Interaction]: Click
[Number of Interactions]: 3-Step Rediect
[Threads]: Single-threaded
[Core Assets]: Video (5 segments/coherent)
[Features]:Animation - Displacement Easing, Event - Press to play video from the beginning, Event - Redirect to next scene at video end.

2.Effect Preview

Best experience for playable on mobile devices

Vertical screen

Horizontal screen

Scan to play

3. Gameplay Overview

Before starting the production, we need to outline the gameplay logic for this case：

Enter the trial, display "Initial Car Movement - Ready to Launch."
Show the "Operation Guide" to prompt the player to press for car launch.
Player presses anywhere on the screen, play the "First Car Launch" video.
Play the "Second Idle" video, show the "Operation Guide" again to prompt the player for car launch.
Player presses anywhere on the screen, play the "Second Car Launch" video.
Play the "Third Idle" video, show the "Operation Guide" again to prompt the player for car launch.
Player presses anywhere on the screen, redirect to the app 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: Based on the gameplay outlined in Part 3, we can divide this case into 3 scenes for production.

(Consisting of 5 video segments, Scene 1 and Scene 2 each include a looping video and feedback video, while Scene 3 serves as an ending page with a looping video).

Scene Name

Scene 1-Inducing Click+Video playback

Scene 2-Inducing Click+Video playback

Scene 3-End page with clickable prompt

Visual Rendering

Scene Description

Looping video for the first idle phase, guiding players to click and assemble the car. After the player clicks, play the video for the first car launch.

Looping video for the second idle phase, guiding players to click and assemble the car. After the player clicks, play the video for the second car launch.

Looping video for the third idle phase, guiding players to click and assemble the car. After the player clicks, redirect to the app store.

Animation

【Guide Text】：Flashing

【Guide Finger】：Displacement Easing

【Guide Arrow】：Swipe left and right

【Guide Text】：Flashing

【Guide Finger】：Displacement Easing

【Guide Arrow】：Swipe left and right

【Guide Text】：Flashing

【Guide Finger】：Displacement Easing

【Guide Arrow】：Swipe left and right

Core Events

Trigger Object: Scene - Scene 1

Trigger Event: Press

Response Event: Play video from the beginning

Trigger Object: Layer - Video

Trigger Event: Ending time

Response Event: Redirect to the next scene

Trigger Object: Scene - Scene 2

Trigger Event: Press

Response Event: Play video from the beginning

Trigger Object: Layer - Video

Trigger Event: Ending time

Response Event: Redirect to the next scene

Trigger Object: Scene - Scene 3

Trigger Event: Press

Response Event: Redirect to the app store

Asset List

【Video】：Video A (Autoplay & Looping); Video A (Disable Autoplay & Looping)

【Audio】：Car launch sound effect, Car collision sound effect

【Image】：Guidance text, Guidance finger, Guidance arrow

【Video】：Video B (Autoplay & Looping); Video B (Disable Autoplay & Looping)

【Audio】：Car launch sound effect, Car collision sound effect

【Image】：Guide text, Guide finger, Guide arrow

【Video】：Video C (Autoplay & Looping)

【Image】：Guide text, Guide finger, Guide arrow

5. Production Guidelines

Step 1 - Scene Setup

ⅰ. Global Settings

Add background music and background image in the "Global Settings" section.

ⅱ. Global Scene

1）Add persistent information in the "Global Scene": logo, CTA button.

2）Adjust the position and size of each asset accordingly.

3）Group, arrange, and name the assets based on their types.

ⅲ. Scene 1-3

1) In Scene 1, Scene 2, and Scene 3, respectively, add video, sound effects, guide finger, guide arrow, and guide text.

2) Adjust the position and size of each asset as necessary.

3) Group, arrange, and name the assets based on their types.

Step 2 - Animation Production

ⅰ. Guide Text

Select the guide text group "text:guide" on the left side of the layer panel and add the animation - Emphasize - Flashing. Set the parameters as follows:

ⅱ. Guide Finger

Select the finger group "hand" on the left side of the layer panel and add the animation - Universal - Displacement Easing. Set the parameters as follows:

ⅲ. Guide Dotted Line

Select the right arrow image on the left layer, 【rightarrow】, and add an animation - Emphasize - Slide left and right. Set the parameters as follows:

Note: The animation for the left arrow image can be copied directly from the right arrow image, with the X-axis displacement parameter changed to -22.

Step 3 - Logic Settings

ⅰ. Scene 1/2: Scene events

1）In Scene 1, add event - Press.

2）Add response events - Hide guide-related assets; Hide looping video A.

Add response events - Play video A from the beginning; Play sound effects from the beginning.

3）Add a response event - Disable the "Press" event (to ensure players can only click once).

4）Other response events: Set postback event information.

ⅱ. Scene 1/2: Layer events - Video

1）Select video layer A.

2）Add an event - Ending time.

3）Add a response event - Redirect to the next scene.

ⅲ. Scene 3: Scene events

1）In Scene 3, add an event - Press.

2）Add response events - Redirect to the app store; Set postback event information; Report the end of the playable ads.

ⅳ. Global Scene: Layer events - CTA button

In the global scene, select the button group and add an event - Press. Then, add a response event - Redirect to the app store.

Step 4 - Overall Preview

ⅰ. Landscape Layout

After completing the vertical layout for each scene, it is recommended to perform landscape layout (using the "Reuse Vertical Position and Size Configuration" button frequently).

ⅱ. Screen Adaptation

Perform screen adaptation for various device models and their orientations (portrait and landscape), and preview to check if the adaptation is appropriate.

ⅲ. Overall Preview

After completing the entire production, you can perform an overall preview for different device models, languages, and orientations (portrait and landscape).