> For the complete documentation index, see [llms.txt](https://doc.playturbo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.playturbo.com/playturbo-case-study/playable-content-editor/parkour-gameplay-cases/couple-flip-1-video-parkour-split-videos.md).

# 【Couple Flip 1】Video Parkour（split videos）&#x20;

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;<mark style="background-color:red;">Game Recording</mark>

### 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                                     |
| -------------------------------- | --------------------------------------------- | --------------------------------------------- |
| ![](/files/OQmmajIPI7fwlbzul4FC) | ![](/files/zCQ20lFBDJqDr4zMsyN1)              | ![](/files/aEJAAYtNdX2ti82Rocic)              |
| Scan to play                     | [Click to play](https://tinyurl.com/yc4ddba9) | [Click to play](https://tinyurl.com/yc4ddba9) |

### 4. Design Methods

#### 1）Game Recording Selectio&#x6E;**✨**

Selection Criteria：<mark style="background-color:red;">Game Recording</mark>

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

&#x20;② Recording contains more than 1 interactive operations；

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

{% file src="/files/OAPFbPiyb2vkUXHyeoGg" %}

#### 2）Scene Spli&#x74;**✨**

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

<table><thead><tr><th width="141">Scenes</th><th width="151">Scene 1 - 1st Guide</th><th width="160">Scene 2 - 1st Flip</th><th width="157">Scene 3 - 2nd Guide</th><th width="142">Scene 4 - 2nd Flip</th><th width="153"></th><th width="149"></th><th></th></tr></thead><tbody><tr><td><p><strong>✨video clips</strong></p><p><mark style="background-color:red;">Game Recording</mark></p></td><td><img src="/files/wJdSZ0xl04E01t9rQPZq" alt=""></td><td><img src="/files/6yX74dI0HZbjGE82ddsL" alt=""></td><td><img src="/files/AU6TuspjwtgWFjYJrIlp" alt=""></td><td><img src="/files/ioVg6DWCArUerDnB3HjC" alt=""></td><td><img src="/files/FudFBlfZFSENVV4NzDbm" alt=""></td><td><img src="/files/bFrJFq58OrshZXHXARSF" alt=""></td><td>/</td></tr><tr><td><strong>Effect</strong></td><td><img src="/files/RpBCEU7MNEly6RgDK4UW" alt=""></td><td><img src="/files/VXlprfn5BwASdHGUFQJU" alt=""></td><td><img src="/files/3tKr3KwXo5HCLKXFZvmF" alt=""></td><td><img src="/files/pEWFnKH5coE8n6h6UuXz" alt=""></td><td><img src="https://cdn.nlark.com/yuque/0/2022/gif/26147250/1661917326976-bb8907b9-741b-4cf1-b06c-402d42803a2c.gif#averageHue=%23a8eacc&#x26;clientId=u520a6a1a-3fe7-4&#x26;errorMessage=unknown%20error&#x26;from=drop&#x26;height=299&#x26;id=uaf3fce09&#x26;name=c-v-5.gif&#x26;originHeight=460&#x26;originWidth=255&#x26;originalType=binary&#x26;ratio=1&#x26;rotation=0&#x26;showTitle=false&#x26;size=631146&#x26;status=error&#x26;style=none&#x26;taskId=u80513453-72ca-4be1-8ea2-7592fd855a8&#x26;title=&#x26;width=166" alt="c-v-5.gif"><img src="/files/uJhy3I5j63B2fMdYez2F" alt=""></td><td><img src="/files/TAl4nzMlzchOlr2GULyZ" alt=""></td><td><img src="/files/rODUtTzwS9LTN2NdBmrq" alt=""></td></tr><tr><td><strong>✨Scence Description</strong></td><td>Guide the player to click to start the game</td><td>Couple flip the 1st section of the journey</td><td>Play the standby action, and the 2nd operation guide appears</td><td>Couple flip the 2nd section of the journey</td><td>Play the standby action, and the 3rd operation guide appears</td><td>Couple flip the 3rd section of the journey, then redirect to the ending page</td><td>Product information and CTA buttons</td></tr><tr><td><strong>Animation</strong></td><td>【text guide】：universal animation- scale easing</td><td>/</td><td>（same as scene 1）</td><td>//</td><td>（same as scene 1）</td><td>【celebration effects】：animation effect library - emoji, ribbon</td><td>【CTA Button】：emphasize animation- pulse front</td></tr><tr><td><strong>Scence Event✨</strong></td><td><p>Trigger object：scene 1</p><p>Trigger event：click</p><p>Response event：redirect to the next scene</p></td><td><p>Trigger object：video clip 2</p><p>Trigger event：ending time</p><p>Response event：redirect to the next scene</p></td><td><p>Trigger object：scene 3</p><p>Trigger event：click</p><p>Response event：redirect to the next scene</p></td><td><p>Trigger object：video clip 4</p><p>Trigger event：ending time</p><p>Response event：redirect to the next scene</p></td><td><p>Trigger object：scene 5</p><p>Trigger event：click</p><p>Response event：redirect to the next scene</p></td><td><p>Trigger object：scene 6</p><p>Trigger event：timing trigger</p><p>Response event 1：execution delay 2s - show material 【celebration effects】</p><p>Response event 2：execution delay 2s - redirect to the next scene</p></td><td>/</td></tr><tr><td><strong>Asset</strong></td><td><p>【images】： background image, logo, finger guide, CTA button</p><p>【text guide】</p><p>【video】video clip 1</p><p><mark style="background-color:red;">Game Recording</mark></p><p>【background music】</p></td><td><p>【video】video clip 1</p><p><mark style="background-color:red;">Game Recording</mark></p><p>【Audio】：click (optional)</p></td><td><p>【video】video clip 3</p><p><mark style="background-color:red;">Game Recording</mark></p></td><td><p>【video】video clip 4</p><p><mark style="background-color:red;">Game Recording</mark></p><p>【Audio】：click (optional)）</p></td><td><p>【video】video clip 5</p><p><mark style="background-color:red;">Game Recording</mark></p></td><td><p>【video】video clip 6</p><p><mark style="background-color:red;">Game Recording</mark></p><p>【Audio】：click, victory (optional)</p></td><td></td></tr></tbody></table>

### 5. Steps

#### Step1 - Basic Scene

<table><thead><tr><th width="363.3333333333333">Diagrams</th><th width="83">Steps</th><th>Steps</th><th data-hidden></th></tr></thead><tbody><tr><td><img src="/files/k4qWQGS7SqSY9Di8nV2Q" alt=""></td><td>1</td><td><p><strong>Global Settings</strong></p><p>Add background image, background music in <a href="/pages/TaWLw2QcVu5Gmafvjb1s">global settings</a>.</p></td><td></td></tr></tbody></table>

#### Step2 - Scene 1（**1st Guide**）

Objective：Add appropriate operation guide to the game recording.

<table><thead><tr><th width="363.3333333333333">Diagrams</th><th width="98">Steps</th><th>Steps</th></tr></thead><tbody><tr><td><img src="/files/AT7iUBlnsS99JFkDlrIB" alt=""></td><td>1</td><td><p><strong>✨Add【video 1】</strong><mark style="background-color:red;"><strong>Game Recording</strong></mark></p><p>Add the pre-recorded game recording in scene 1 and adjust it to a suitable position.</p><p>Tips: Check the "Loop" for the video.</p></td></tr><tr><td><img src="/files/hlXpErTv6xwd4w9hsS01" alt=""></td><td>2</td><td><p><strong>Add【Logo】&#x26;【CTA Button】</strong></p><p>Add logo and CTA button pictures, and adjust the size and position.</p></td></tr><tr><td><img src="/files/P2rHm3raTswH8lV5rlCW" alt=""></td><td>3</td><td><p><strong>✨Add【guide】</strong></p><p>Add text guide &#x26; finger guide and set appropriate animation.</p><p>Recommended animation:</p><p>【text guide】：universal animation- scale easing</p><p>【finger guide】：universal animation- displacement easing</p></td></tr><tr><td><img src="/files/9e27P1UMUSpNeMGFgLn7" alt=""></td><td>4</td><td><p><strong>Add【heart animation effect】（optional）</strong></p><p>There are various heart effects in the animation effect library to choose from.</p></td></tr><tr><td><img src="/files/oMlCedItxVN8KfXLm10i" alt=""></td><td>5</td><td><p><strong>Horizontal Screen Layout</strong></p><p>After the vertical screen production of each scene is completed, the <a href="/pages/AzCeWrp3uSm3o4y9Bq1b">horizontal screen layout</a> is required.</p></td></tr><tr><td><img src="/files/eJibDLdWxJwF2QUixCQJ" alt=""></td><td>6</td><td><p><strong>Screen Adaptation</strong></p><p>Perform screen adaptation for each device / horizontal &#x26; portrait screens, and preview whether the adaptation effect is appropriate.</p></td></tr></tbody></table>

#### Step3 - Scene 2（1st Flip）

Objective: Replace game recording video clip.

<table><thead><tr><th width="363.3333333333333">Diagrams</th><th width="99">Steps</th><th>Steps</th></tr></thead><tbody><tr><td><img src="/files/1d3CaczjCd5GZAnkre2I" alt=""></td><td>1</td><td><p><strong>Add scene 2</strong></p><p>Scene 2 can be copied from Scene 1, some elements can be kept/removed as needed.</p></td></tr><tr><td><img src="/files/CHy9fd7jflzEtBTwoPGK" alt=""></td><td>2</td><td><p><strong>✨Replace【video 1】with【video 2】</strong><mark style="background-color:red;"><strong>Game Recording</strong></mark></p><p>Tips: Click the "Replace" button to replace the video directly</p></td></tr><tr><td><img src="/files/Lg0AQr2Ls8bFqXgTZnKC" alt=""></td><td>3</td><td><p><strong>Horizontal Screen Layout</strong></p><p>After the vertical screen production of each scene is completed, the <a href="/pages/AzCeWrp3uSm3o4y9Bq1b">horizontal screen layout</a> is required.</p></td></tr><tr><td>/</td><td>4</td><td><p><strong>Screen Adaptation</strong></p><p>Perform screen adaptation for each device / horizontal &#x26; portrait screens, and preview whether the adaptation effect is appropriate.</p></td></tr></tbody></table>

#### Step4 - Scene 3（**2nd Guide**）

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

<table><thead><tr><th width="363.3333333333333">Diagrams</th><th width="100">Steps</th><th>Steps</th></tr></thead><tbody><tr><td><img src="/files/wDEMEEu2Gc7sXHMdmoeT" alt=""></td><td>1</td><td><strong>Add scene 3</strong></td></tr><tr><td><img src="/files/HYdIE27GozdgP0LkOzwx" alt=""></td><td>2</td><td><p><strong>✨Replace【video 2】with【video 3】</strong><mark style="background-color:red;"><strong>Game Recording</strong></mark></p><p>Tips: Click the "Replace" button to replace the video directly.</p></td></tr><tr><td><img src="/files/iduNIqSgojMobiUzjs6I" alt=""></td><td>3</td><td><p><strong>✨Add【2nd Guide】</strong></p><p>It can be copied directly from scene 1.</p></td></tr><tr><td><img src="/files/TCDJk6KReYD9oTqPsuXL" alt=""></td><td>4</td><td><p><strong>Horizontal Screen Layout</strong></p><p>After the vertical screen production of each scene is completed, the <a href="/pages/AzCeWrp3uSm3o4y9Bq1b">horizontal screen layout</a> is required.</p></td></tr><tr><td>/</td><td>5</td><td><p><strong>Screen Adaptation</strong></p><p>Perform screen adaptation for each device / horizontal &#x26; portrait screens, and preview whether the adaptation effect is appropriate.</p></td></tr></tbody></table>

#### Step5 - Scene 4（2nd Flip）

Objective: Replace game recording video clip.

<table><thead><tr><th width="349.3333333333333">Diagrams</th><th width="94">Steps</th><th>Steps</th></tr></thead><tbody><tr><td><img src="/files/VAPdm3W3R6arH4laI7yB" alt=""></td><td>1</td><td><strong>Add scene 4</strong></td></tr><tr><td><img src="/files/x9aL0LYveHgWcvULP4rd" alt=""></td><td>2</td><td><p><strong>✨Replace【video 3】with【video 4】</strong><mark style="background-color:red;"><strong>Game Recording</strong></mark></p><p>Tips: Click the "Replace" button to replace the video directly.</p></td></tr><tr><td><img src="/files/WfWYWbNHMgLY8fEIgm0P" alt=""></td><td>3</td><td><p><strong>Horizontal Screen Layout</strong></p><p>After the vertical screen production of each scene is completed, the <a href="/pages/AzCeWrp3uSm3o4y9Bq1b">horizontal screen layout</a> is required.</p></td></tr><tr><td>/</td><td>4</td><td><p><strong>Screen Adaptation</strong></p><p>Perform screen adaptation for each device / horizontal &#x26; portrait screens, and preview whether the adaptation effect is appropriate.</p></td></tr></tbody></table>

#### Step6 - Scene 5（**3rd Guide**）

Objective：Add appropriate operation guide to the game recording.

<table><thead><tr><th width="343.3333333333333">Diagrams</th><th width="103">Steps</th><th>Steps</th></tr></thead><tbody><tr><td><img src="/files/u3r4TR3WY0ropZi9qWcZ" alt=""></td><td>1</td><td><strong>Add scene 5</strong></td></tr><tr><td><img src="/files/KlosTS9x50Hus8LZKvnc" alt=""></td><td>2</td><td><p><strong>✨Replace【video 4】with【video 5】</strong><mark style="background-color:red;"><strong>Game Recording</strong></mark></p><p>Tips: Click the "Replace" button to replace the video directly.</p></td></tr><tr><td><img src="/files/LCqoRXJG8s9bVTLzfW32" alt=""></td><td>3</td><td><p><strong>✨Add【3rd Guide】</strong></p><p>It can be copied directly from scene 1.</p></td></tr><tr><td><img src="/files/xlMP53xxbPbAuI9ed5CC" alt=""></td><td>4</td><td><p><strong>Horizontal Screen Layout</strong></p><p>After the vertical screen production of each scene is completed, the <a href="/pages/AzCeWrp3uSm3o4y9Bq1b">horizontal screen layout</a> is required.</p></td></tr><tr><td>/</td><td>5</td><td><p><strong>Screen Adaptation</strong></p><p>Perform screen adaptation for each device / horizontal &#x26; portrait screens, and preview whether the adaptation effect is appropriate.</p></td></tr></tbody></table>

#### Step7 - Scene 6（3rd Flip）

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

<table><thead><tr><th width="341.3333333333333">Diagrams</th><th width="118">Steps</th><th>Steps</th></tr></thead><tbody><tr><td><img src="/files/Oh6nc810jgoQABWajrSn" alt=""></td><td>1</td><td><strong>Add scene 6</strong></td></tr><tr><td><img src="/files/DILapxuRGQjQ19yMRR4o" alt=""></td><td>2</td><td><p><strong>✨Replace【video 5】with【video 6】</strong><mark style="background-color:red;"><strong>Game Recording</strong></mark></p><p>Tips: Click the "Replace" button to replace the video directly.</p></td></tr><tr><td><img src="/files/2GujgglnCetttVRoeYgQ" alt=""></td><td>3</td><td><p><strong>✨Add【celebration effects】</strong></p><p>Celebration effects (emoji &#x26; ribbon) appear at the end of the video.</p><ol><li>Added 【Celebration Effects】: animation effect library-emoji, Ribbon</li><li>Set an event for the 【Celebration Effects】 group: timing trigger</li></ol><p>(Timed trigger setting method: reference case <a href="/pages/OlNYrvXPHVKsz6Mtk6u4"><em>Rugby Parkour</em></a>)</p></td></tr><tr><td><img src="/files/KbEoAukD3vf2diKHLBMJ" alt=""></td><td>4</td><td><p><strong>Horizontal Screen Layout</strong></p><p>After the vertical screen production of each scene is completed, the <a href="/pages/AzCeWrp3uSm3o4y9Bq1b">horizontal screen layout</a> is required.</p></td></tr><tr><td>/</td><td>5</td><td><p><strong>Screen Adaptation</strong></p><p>Perform screen adaptation for each device / horizontal &#x26; portrait screens, and preview whether the adaptation effect is appropriate.</p></td></tr></tbody></table>

#### Step8 - Scene 7（Ending Page）

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

<table><thead><tr><th width="341.3333333333333">Diagrams</th><th width="116">Steps</th><th>Steps</th></tr></thead><tbody><tr><td><img src="/files/rFIy1iknfOQZ8sq5joG8" alt=""></td><td>1</td><td><strong>Add scene 7</strong></td></tr><tr><td><img src="/files/oBp0F8YIDFJJnas9uJU6" alt=""></td><td>2</td><td><p></p><p><strong>Adjust the position of 【Logo &#x26; CTA button】</strong></p><ul><li>How to make<a href="/pages/pwkaSTWyC8d4ImBNUowV"> CTA button with Bounce Effect</a></li></ul></td></tr><tr><td><img src="/files/UolfZBE10kF88nuJFtjA" alt=""></td><td>3</td><td><p><strong>Horizontal Screen Layout</strong></p><p>After the vertical screen production of each scene is completed, the <a href="/pages/AzCeWrp3uSm3o4y9Bq1b">horizontal screen layout</a> is required.</p></td></tr><tr><td>/</td><td>4</td><td><p><strong>Screen Adaptation</strong></p><p>Perform screen adaptation for each device / horizontal &#x26; portrait screens, and preview whether the adaptation effect is appropriate.</p></td></tr></tbody></table>

#### Step9 - Scenes Connection

Objective：Clarify the redirect logic between scenes.

<table><thead><tr><th width="338.3333333333333">Diagrams</th><th width="98">Steps</th><th>Steps</th></tr></thead><tbody><tr><td><img src="/files/cICqVqARFZHJhddc6Zi9" alt=""></td><td>1</td><td><p><strong>Scene1 - Scene2</strong></p><p>Add an event to [scene 1]: click - redirect to next scene</p></td></tr><tr><td><img src="/files/IcV24mW6VjidjOidNzpg" alt=""></td><td>2</td><td><p><strong>Scene2- Scene3</strong></p><p>Add an event to [video 2]: ending time- redirect to next scene</p></td></tr><tr><td><img src="/files/rwBySxDU8JBm07rnEMR3" alt=""></td><td>3</td><td><p><strong>Scene3 - Scene4</strong></p><p>Add an event to [scene 3]: click - redirect to next scene</p></td></tr><tr><td><img src="/files/2ewRQ0lH8g6lkAyO4lx8" alt=""></td><td>4</td><td><p><strong>Scene4 - Scene5</strong></p><p>Add an event to [video 4]: ending time- redirect to next scene</p></td></tr><tr><td><img src="/files/pXRJaQOoartxdBS7O0Gm" alt=""></td><td>5</td><td><p><strong>Scene5 - Scene6</strong></p><p>Add an event to [scene 5]: click - redirect to next scene</p></td></tr><tr><td><img src="/files/xTUekHkVb0BGU02MIu8y" alt=""></td><td>6</td><td><p><strong>Scene6 - Scene7</strong></p><p><strong>Objective:</strong> Redirect to the ending page when the animation effect plays for 2s.</p><p>Add an event to [celebration effects]: timing trigger - execution delay 3s - redirect to next scene</p></td></tr></tbody></table>

#### Step10 - Overall Preview

<table><thead><tr><th width="337.3333333333333">Diagrams</th><th width="100">Steps</th><th>Steps</th></tr></thead><tbody><tr><td><img src="/files/czwgv3Pfae5BfTTlgTe0" alt=""></td><td>1</td><td><p><strong>Overall preview</strong></p><p>After the production, you can preview the whole playable of different devices / horizontal and portrait screens.</p></td></tr></tbody></table>
