【Couple Flip 1】Video Parkour（split videos）

#Content Editor #Blank Canvas #Basic difficulty

3D parkour game is harder to make playable ads because it has models and other elements. 😎But using the game video recording as material for playable production, the effect can be easily achieved! This chapter will show you how to use split game recording videos to create a playable that can be interacted multiple times!

1. Objectives

• Game screen recording selection & split: Record a game screen recording that includes multiple operations, and by splitting the game recording, you can complete the playables that can interact multiple times;Game Recording

2. Tags

• 【Difficulty】：⭐⭐⭐

• 【Product】：Hyper Casual Game

• 【Gameplay】：Parkour, Racing

• 【Interactive Event】：Click

• 【Story branch】：One-way

• 【Feature】：Emphasize Animation, Timing Trigger

3. Preview

View on mobile	Portrait	Landscape
Scan to play	Click to play	Click to play

4. Design Methods

1）Game Recording Selection✨

Selection Criteria：Game Recording

① Select the part of the game with simple and clear operations (such as: click, swipe, etc.);

② Recording contains more than 1 interactive operations；

③ When recording the game screen, pause for a while before each operation to split the video (please refer to the following video as example)；

2MB

hi9byTLFRPMzrrMFFCU_375228850430___hd.mp4

2）Scene Split✨

Objective：Split the game recording into different scenes according to the interactive operation.

Scenes	Scene 1 - 1st Guide	Scene 2 - 1st Flip	Scene 3 - 2nd Guide	Scene 4 - 2nd Flip
✨video clips Game Recording							/
Effect
✨Scence Description	Guide the player to click to start the game	Couple flip the 1st section of the journey	Play the standby action, and the 2nd operation guide appears	Couple flip the 2nd section of the journey	Play the standby action, and the 3rd operation guide appears	Couple flip the 3rd section of the journey, then redirect to the ending page	Product information and CTA buttons
Animation	【text guide】：universal animation- scale easing	/	（same as scene 1）	//	（same as scene 1）	【celebration effects】：animation effect library - emoji, ribbon	【CTA Button】：emphasize animation- pulse front
Scence Event✨	Trigger object：scene 1 Trigger event：click Response event：redirect to the next scene	Trigger object：video clip 2 Trigger event：ending time Response event：redirect to the next scene	Trigger object：scene 3 Trigger event：click Response event：redirect to the next scene	Trigger object：video clip 4 Trigger event：ending time Response event：redirect to the next scene	Trigger object：scene 5 Trigger event：click Response event：redirect to the next scene	Trigger object：scene 6 Trigger event：timing trigger Response event 1：execution delay 2s - show material 【celebration effects】 Response event 2：execution delay 2s - redirect to the next scene	/
Asset	【images】： background image, logo, finger guide, CTA button 【text guide】 【video】video clip 1 Game Recording 【background music】	【video】video clip 1 Game Recording 【Audio】：click (optional)	【video】video clip 3 Game Recording	【video】video clip 4 Game Recording 【Audio】：click (optional)）	【video】video clip 5 Game Recording	【video】video clip 6 Game Recording 【Audio】：click, victory (optional)

5. Steps

Step1 - Basic Scene

Diagrams	Steps	Steps
	1	Global Settings Add background image, background music in global settings.

Step2 - Scene 1（1st Guide）

Objective：Add appropriate operation guide to the game recording.

Diagrams	Steps	Steps
	1	✨Add【video 1】Game Recording Add the pre-recorded game recording in scene 1 and adjust it to a suitable position. Tips: Check the "Loop" for the video.
	2	Add【Logo】&【CTA Button】 Add logo and CTA button pictures, and adjust the size and position.
	3	✨Add【guide】 Add text guide & finger guide and set appropriate animation. Recommended animation: 【text guide】：universal animation- scale easing 【finger guide】：universal animation- displacement easing
	4	Add【heart animation effect】（optional） There are various heart effects in the animation effect library to choose from.
	5	Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required.
	6	Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate.

Step3 - Scene 2（1st Flip）

Objective: Replace game recording video clip.

Diagrams	Steps	Steps
	1	Add scene 2 Scene 2 can be copied from Scene 1, some elements can be kept/removed as needed.
	2	✨Replace【video 1】with【video 2】Game Recording Tips: Click the "Replace" button to replace the video directly
	3	Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required.
/	4	Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate.

Step4 - Scene 3（2nd Guide）

Objective：：Add appropriate operation guide to the game recording.

Diagrams	Steps	Steps
	1	Add scene 3
	2	✨Replace【video 2】with【video 3】Game Recording Tips: Click the "Replace" button to replace the video directly.
	3	✨Add【2nd Guide】 It can be copied directly from scene 1.
	4	Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required.
/	5	Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate.

Step5 - Scene 4（2nd Flip）

Objective: Replace game recording video clip.

Diagrams	Steps	Steps
	1	Add scene 4
	2	✨Replace【video 3】with【video 4】Game Recording Tips: Click the "Replace" button to replace the video directly.
	3	Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required.
/	4	Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate.

Step6 - Scene 5（3rd Guide）

Objective：Add appropriate operation guide to the game recording.

Diagrams	Steps	Steps
	1	Add scene 5
	2	✨Replace【video 4】with【video 5】Game Recording Tips: Click the "Replace" button to replace the video directly.
	3	✨Add【3rd Guide】 It can be copied directly from scene 1.
	4	Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required.
/	5	Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate.

Step7 - Scene 6（3rd Flip）

Objective: Replace game recording video clip, and show the "celebration effects" at the end of the video.

Diagrams	Steps	Steps
	1	Add scene 6
	2	✨Replace【video 5】with【video 6】Game Recording Tips: Click the "Replace" button to replace the video directly.
	3	✨Add【celebration effects】 Celebration effects (emoji & ribbon) appear at the end of the video. Added 【Celebration Effects】: animation effect library-emoji, Ribbon Set an event for the 【Celebration Effects】 group: timing trigger (Timed trigger setting method: reference case Rugby Parkour)
	4	Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required.
/	5	Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate.

Step8 - Scene 7（Ending Page）

Objective：Display product information （logo, CTA button, etc）.

Diagrams	Steps	Steps
	1	Add scene 7
	2	Adjust the position of 【Logo & CTA button】 How to make CTA button with Bounce Effect
	3	Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required.
/	4	Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate.

Step9 - Scenes Connection

Objective：Clarify the redirect logic between scenes.

Diagrams	Steps	Steps
	1	Scene1 - Scene2 Add an event to [scene 1]: click - redirect to next scene
	2	Scene2- Scene3 Add an event to [video 2]: ending time- redirect to next scene
	3	Scene3 - Scene4 Add an event to [scene 3]: click - redirect to next scene
	4	Scene4 - Scene5 Add an event to [video 4]: ending time- redirect to next scene
	5	Scene5 - Scene6 Add an event to [scene 5]: click - redirect to next scene
	6	Scene6 - Scene7 Objective: Redirect to the ending page when the animation effect plays for 2s. Add an event to [celebration effects]: timing trigger - execution delay 3s - redirect to next scene

Step10 - Overall Preview

Diagrams	Steps	Steps
	1	Overall preview After the production, you can preview the whole playable of different devices / horizontal and portrait screens.