Interactive Videos<Two options & endings>Tutorial
#Content editor #Blank Canvas #General production #basic difficulty
Please note: The basic template "Two options & endings" was created following this tutorial!
1. Basic Info
[Difficulty]:β
[Applicable Products]:Universal
[Interaction]: Click
[Number of Interactions]: 2-Step Rediect
[Threads]: Both-threaded
[Core Assets]: Video(3 segments/coherent)
[Features]:Animation - Scale easing, Event - Press to redirect to the specified scene,Event - Timing trigger to play all animations from the beginning
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, play the video [Girl Being Harassed] in a loop;
Display [Left/Right Choice Guide] to direct player to press options for identification.
When player presses the left option [Save Her]: enter the rescue ending
Play the video once [Protagonist's Flying Kick Scene + Girl's Gratitude];
Display the [Left/Right Choice Guide] again, directing player to press options for identification;
Player presses anywhere on the screen, redirect to the app store.
When player presses the right option [Don't Save]: enter the escape ending
Play the video once [Protagonist's Reverse Escape Encounter with Boss];
Display the [Left/Right Choice Guide] again, directing player to press options for identification;
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 overview in Part Three, we can divide this case into 3 scenes for production.
(Scene 1: Inducing Choice; Scene 2: Ending A; Scene 3: Ending B)
| Scene Name | Scene 1-Inducing Choice | Scene 2- Ending A | Scene 3- Ending B |
|---|---|---|---|
Visual Rendering | |||
Scene Description | Play the video [Girl Being Harassed] in a loop,guiding player to make a choice. | Play the video for Ending A, and at the end of the video, guide player to make a second round of choices. | Play the video for Ending B, and at the end of the video, guide player to make a second round of choices. |
Animation | [Option Buttons]: Scale easing [Guide Finger]: Scale easing + Displacement easing | [Option Buttons]: Scale easing + Alpha easing [Guide Finger]: Scale easing + Displacement easing | [Option Buttons]: Scale easing + Alpha easing [Guide Finger]: Scale easing + Displacement easing |
Core Events | Trigger Object: Layer - interactive area Trigger Event: Press Response Event: Redirect to the specified scene | Trigger Object:Scene-Scene 2 Trigger Event: Timing trigger Response Event: Play all animations from the beginning Trigger Object:Scene-Scene 2 Trigger Event: Press Response Event:Redirect to app store | Trigger Object:Scene-Scene 3 Trigger Event: Timing trigger Response Event: Play all animations from the beginning Trigger Object:Scene-Scene 3 Trigger Event: Press Response Event:Redirect to app store |
Asset List | [Video]: Autoplay,Loop [Audio]: Click sound effect [Image]: Guide text, guide finger,option buttons | [Video]: Autoplay,close loop [Image]: Guide finger,option buttons | [Video]: Autoplay,close loop [Image]: Guide finger,option buttons |
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
1οΌAdd video, sound effect, guide finger, guide text, option buttons to "Scene 1".
2οΌAdjust the position and size of each asset accordingly.
3οΌGroup, arrange, and name the assets based on their types.
β
³. Scene 2-3
1οΌAdd video, guide finger, and option buttons in Scene 2 and Scene 3 respectively.
2οΌAdjust the position and size of each asset accordingly.
3οΌGroup, arrange, and name the assets based on their types.
Step 2 - Animation Production
β
°. Guide Finger
Since the finger needs to move and scale synchronously with the button during the decision, we will set up two general animations for the finger: Scale Easing and Displacement Easing.
1) Select the finger image "gf_hand" on the left side of the layer and add the animation - Universal - Displacement Easing. Set the parameters as follows:
2οΌContinue to add the animation - Universal - Scale Easing. Set the parameters as follows:
β
±. Scene 1 - Option Buttons
1οΌSelect the option button group "left_options" on the left side of the layer and add the animation - Universal - Scale Easing. Set the parameters as follows:
2οΌCopy the animation to the option button group "right_options" , and modify the animation curve accordingly:
β
². Scene 2/3 - Alpha Easing
Since the finger animation and option button animation in Scene 2/Scene 3 are the same as in Scene 1, we can quickly complete the production by copying/pasting the animations.
Additionally, we can also add Alpha Easing animation. Set the initial opacity of the asset to 0, so that the fingers and option buttons are not visible when entering the scene. They will be displayed at the end of the video.Set the parameters as follows:
Step 3 - Logic Settings
β
°. Layer Events - interactive area
We will set two interactive areas for the left and right option buttons separately. First, we'll set up events for the left interactive area and then copy the events to the right interactive area. With some simple adjustments, we can quickly complete the production.
1) Select the layer "left operating area" .
2) Add Event - Press.
3) Add the response event - Pause a single animation.(the Scale Easing animation of option button)
4οΌAdd the response event - Redirect to the specified scene after execution delay of 0.3 seconds.(Redirect to the corresponding ending after player presses the button for 0.3 seconds)
5) Other response events: Play sound/Set tracking information.
β
±. Scene 2/3οΌScene Event
1οΌIn Scene 2, add event - Timing trigger.
2οΌAdd a response event - Play all animations from the beginning after execution delay of 3 seconds.(When the video playback ends, play the finger and option button animation from the beginning)
3οΌAdd Event - PressοΌAdd response events - Redirect to the app store; Set postback event information; Report the end of the playable ads.
Note: The event settings for Scene 3 are the same as Scene 2, and can be quickly completed by 'Copying/Pasting Events'.
β
². 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.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 creating your own content, enabling you to get familiar with using the Content editor more quickly.
Last updated
