> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.playturbo.cn/ke-wan-gong-ju-shi-pin-zhuan-ke-wan/shi-pin-zhuan-ke-wan-shi-yong-zhi-nan/gui-dao-qu.md).

# 轨道区

完成故事板的编辑后，可以在轨道区进一步做精细化的编辑，如：

* 在某个视频场景内，添加和编辑图片、音频、文本等资源；
* 在某个视频场景内，添加和配置互动元件，如互动定格、互动循环和长按播放；
* 设置以上各元件在轨道区的时长和参数，满足丰富的交互视频效果

<figure><img src="/files/8booaPMau9zmsx1WR3xc" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">一、轨道区使用说明</mark>

轨道区用于展示和编辑“**某一条完整分支**”的所有视频元件、交互元件及其他元件

### 1.切换&查看分支

* <mark style="color:red;">在故事板中点击选中某个节点，轨道区会自动切换到该节点对应的分支，并展示该分支内的所有元件</mark>
* 轨道区展示的内容包括：
  * 场景内的元件：视频、图片、音频、文本等
  * 场景之间的互动元件：如互动定格、互动循环等

<div><figure><img src="/files/a21VJ7LY5kKK4BLtdSiF" alt=""><figcaption><p>分支1</p></figcaption></figure> <figure><img src="/files/bhddIno6qitvd9GyndZF" alt=""><figcaption><p>分支2</p></figcaption></figure></div>

### 2.不同的轨道类型

轨道区现包含以下几种轨道类型：

* **视频轨道**：仅允许存在一条视频轨道(在故事板中添加的视频)。<mark style="color:red;">**支持前后拖拽视频以快捷裁剪**</mark><mark style="color:red;">：拖拽裁剪视频尾部时 松手即完成裁剪；拖拽裁剪视频头部时 则需要点击预览区的播放按钮后，裁剪才生效</mark>
* **图片轨道**：支持图片、序列帧、粒子等资产类型
* **文本轨道**：用于添加和编辑文本资产
* **音频轨道**：用于添加和编辑音频资产
* **互动元件轨道**：用于放置互动元件，如互动定格、互动循环、长按播放等

🌟 轨道类型的层级关系：互动元件＞文本＞图片＞视频＞音频

<div align="left"><figure><img src="/files/taDp7WdpzLA13TE6hF2n" alt=""><figcaption></figcaption></figure></div>

### 3.添加和编辑资产

* 指针选中某一场景，从资产区选择并添加所需资产到该场景所在的轨道，如图片、文本、音频
* <mark style="color:red;">支持前后拖拽资产 以调整展示位置和时长</mark>
  * 同样支持拖拽裁剪视频时长；实际打包时会按裁剪后的时长计算
* 当场景内存在互动元件时，拖拽其他资产到互动元件下，可快速复用和互动元件相同的时长

<figure><img src="/files/QZiks9ckVDtj3jFiNwvM" alt=""><figcaption></figcaption></figure>

* 支持 复制、粘贴、删除 某一资产元件
* 支持 撤回、重做

<div align="left"><figure><img src="/files/Y0YxyVQrZvYw854d7wOI" alt=""><figcaption></figcaption></figure></div>

### <mark style="color:red;">4.添加和编辑互动元件</mark>

点击资产区的“互动元件”按钮，选择对应的互动元件类型并添加到轨道

<div align="left"><figure><img src="/files/F7qP7zaZid5HWpnq19Os" alt=""><figcaption></figcaption></figure></div>

当前互动元件共包含三种：互动定格、互动循环、长按播放，用于实现丰富的互动效果

#### **1）互动定格**

互动定格元件用于在视频播放到指定位置时暂停，直到用户交互(按下/滑动)后继续播放<mark style="color:red;">（互动定格在轨道上所占的时长 仅是视频的某一帧，因此不支持拖拽调整时长）</mark>

* 将互动定格元件**放置在需要视频暂停的位置**，然后进行参数设置
* **编辑热区** (可以理解为手势区域)：用户需在指定区域内操作才能触发交互
* **设置手势** (可以理解为触发事件)：包含“点击”和“滑动”两种类型
  * 点击：用户在指定区域"按下"后，继续播放视频或触发其他事件
  * 滑动：需额外配置滑动方向 (上/下/左/右/任意方向)，用户在指定区域按指定方向滑动后，继续播放视频或触发其他事件

<div align="left"><figure><img src="/files/WWRO8dWXOoNV7S6eVmGi" alt=""><figcaption><p>互动定格示意</p></figcaption></figure></div>

#### **2）互动循环**

互动循环元件用于在视频播放到指定位置时进入循环播放模式，直到用户交互(按下/滑动)后继续播放

* 将互动循环元件**放置在需要视频循环播放的位置，并可拖拽调整元件时长**，然后进行参数设置
* **需选择循环方式**：分"单向循环"和"双向循环"
* **编辑热区**：用户需在指定区域内操作才能触发交互
* **设置手势**：包含“点击”和“滑动”两种类型
  * 点击：用户在指定区域"按下"后，从元件最后继续播放视频或触发其他事件，结束循环
  * 滑动：需额外配置滑动方向 (上/下/左/右/任意方向)，用户在指定区域按指定方向滑动后，继续播放视频或触发其他事件，结束循环

<figure><img src="/files/Rc5ZNNLQTbLHZ7KYc2nk" alt=""><figcaption><p>互动循环示意</p></figcaption></figure>

#### **3）长按播放**

长按播放元件用于在视频播放到指定位置时暂停，用户长按时继续播放，松开时再次暂停，直到当前这段视频播完

* 将长按播放元件**放置在需要长按播放视频的位置，并可拖拽调整元件时长**，然后进行参数设置
* **编辑热区**：用户需在指定区域内操作才能触发交互
* **设置手势**：仅支持“长按”。用户在指定区域"长按"后，继续播放视频或触发其他事件，抬起时暂停

<figure><img src="/files/52xlqOTv7YLORKgX17U0" alt=""><figcaption><p>长按播放示意</p></figcaption></figure>