Interactive Videos<Two-slides>Tutorial
#Content Editor #Blank Canvas #Basic difficulty
Please note: The basic template "Two-slides Interactive Videos" was created following this tutorial!
1. Basic Info
[Difficulty]:β
[Applicable Products]:Universal
[Interaction]: Swipe
[Number of Interactions]: 2-Step Rediect
[Threads]: Single-threaded
[Core Assets]: Video(1 segment/coherent)
[Features]:Animation - Spin easing, Event - Press to play video from the beginning, Event - Press to hide layers, Event - Show layers when video ends
2.Effect Preview
Scan to play
3. Gameplay Overview
Before starting the production, we need to outline the gameplay logic for this caseοΌ
Enter the gameplay and display the "Initial Instruction Screen", guiding the player to swipe and catch sheep.
Player performs a full-screen swipe to play the "Sheep Flying into Car Video".
After the video ends, the "Guide Finger" appears again, guiding the player to continue swiping and catching sheep.
Player performs a full-screen press to 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 determine that only one scene is needed for this case.
Visual Rendering
Scene Description
Guide players to swipe and catch sheep while the video is paused.
Animation
[Guide Text]: Displacement Easing
[Guide Dotted Line]: Alpha Easing
[Guide Finger]: Spin Easing + Alpha Easing + Displacement Easing
Core Events
Trigger Object: Layer - interactive area (ensuring sufficient screen size)
Trigger Event: Press (or swipe arbitrarily)
Response Event: Play video from the beginning
Trigger Object: Layer - Video
Trigger Event: Ending time
Response Event: Show layers
Asset List
[Video]: Video (disabled autoplay, infinite loop)
[Audio]: Background music, swipe sound effect, sheep into car sound effect
[Images]: Background image, finger, guide dotted line, guide text background image, logo, CTA button
[Text]: Guide text, download text
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, audio, guide finger, guide dotted line, and guide text to "Scene 1".
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 "group_guide" 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 guide dotted line image "hand_line" on the left side of the layer panel and add the animation - Universal - Alpha Easing. Set the parameters as follows:
β
². Guide Finger
To achieve a more natural effect for the finger animation during swipe guidance, we can apply three general animations: Spin easing, Displacement easing, and Alpha easing.
1) Select the finger image "gf_hand" on the left side of the layer panel and add the animation - Universal - Spin Easing. Set the parameters as follows:
2οΌContinue to add the animation - Universal - Displacement Easing. Set the parameters as follows:
3οΌContinue to add the animation - Universal - Alpha Easing. Set the parameters as follows:
Step 3 - Logic Settings
β
°. Layer Events - interactive area 1
To allow full-screen swipe for players and differentiate between the first and second swipes, we will add two larger interactive areas as separate regions for the first and second swipes. We will also set up events on these interactive areas.
1) Select the layer for interactive area 1.
2) Add event - Press.
(Note: Alternatively, the trigger action can be changed to "Swipe," but using "Press" will make it easier to trigger the event.)
3) Add response events - Play video from the beginning, play swipe sound effect from the beginning.
4) Add response events - Hide guide-related layers, hide interactive area 1.
(Note: After the video plays, we need to hide the guide finger and text, as well as hide interactive area 1. This is because interactive area 1 becomes irrelevant after the first swipe, and the second swipe will occur in interactive area 2.)
5) Additional response events: Set tracking information, play sheep into car sound effect with Execution delay 0.5 seconds.
β
±. Layer Events - Video
1) Select the video layer.
2) Add the event - Ending time.
3) Add response events - Show guide-related layers, show interactive area 2.
β
². Layer Events - interactive area 2
1) Select the layer for interactive area 2.
2) Add the event - Press.
3) Add response events - Redirect to the app store, set tracking information, report the end of the playable ads.
β
³. Layer Events - CTA Button
Select the button group, add event - Press, and add the response event - Redirect to 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
