mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-03 20:37:30 +00:00
Ular Kimsanov
0390f3f908
* docs(studio): the browser editor in six pages, named the browser editor * docs(studio): mute where the editor has it, and no solo control The audio pages still described a solo control and a group-row mute that the editor does not render. Muting is the speaker button on an audio track (Mute track / Unmute track), the same toggle on a selected clip, and the Muted switch; a group is silenced through its members' tracks. The audio reference drops its solo section for the same reason.
101 lines
4.4 KiB
Plaintext
101 lines
4.4 KiB
Plaintext
---
|
||
title: "Export and slideshows"
|
||
description: "In the browser editor: set up and run renders in the Renders panel, and build a navigable slideshow."
|
||
sidebarTitle: "Export and slideshows"
|
||
---
|
||
|
||
**Export** in the header starts a render straight away, with the settings in the **Renders** panel on the right. So
|
||
set those first.
|
||
|
||
<Frame caption="The Renders panel contains delivery settings and the render queue.">
|
||
<img
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio/export-v1.jpg"
|
||
alt="The Renders panel with format, resolution, frame rate, and quality controls"
|
||
/>
|
||
</Frame>
|
||
|
||
## Set up the file
|
||
|
||
| Setting | Choose |
|
||
| --- | --- |
|
||
| **Format** | **MP4** for sharing and uploading; **WebM** for the web and transparent overlays; **MOV** (ProRes) when another editor needs a high-quality master |
|
||
| **Resolution** | **Auto** keeps the project's size. Bigger renders are slower and don't sharpen low-resolution footage |
|
||
| **Frame rate** | 30 unless the destination or the footage needs 24 or 60 |
|
||
| **Quality** | Hidden for MOV, which always uses ProRes quality |
|
||
| **Use GPU encoding** | Faster on machines that support it |
|
||
|
||
**About video formats**, next to the settings, explains the choices.
|
||
|
||
## The render queue
|
||
|
||
Each export becomes a row in **Renders**, with its progress. Cancel a running one, download or delete a finished
|
||
one, and **Hide finished** to tidy the list without deleting files.
|
||
|
||
Before sending: open the file itself, watch the start and the end, check captions, cuts and sound at the busiest
|
||
moment, and give it a name that says which version it is. If a render fails, keep the error and see
|
||
[troubleshooting](/studio/troubleshooting).
|
||
|
||
## Build a slideshow
|
||
|
||
A slideshow is a live, navigable presentation—not one linear video. The **Slideshow** tab appears when the active composition contains a HyperFrames slideshow manifest.
|
||
|
||
<Frame caption="The Slideshow panel builds the main route from real scenes before optional branches are added.">
|
||
<img
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio-slideshow-panel-v1.jpg"
|
||
alt="HyperFrames browser editor showing three main-line slides in the Slideshow panel beside the deck timeline"
|
||
/>
|
||
</Frame>
|
||
|
||
### Build the main path
|
||
|
||
Start with the route everyone should see:
|
||
|
||
1. In **Slides**, check the scenes that belong in the main presentation.
|
||
2. Use the arrows to put them in order.
|
||
3. Select each slide and confirm that it makes one complete point.
|
||
4. In **Slide Inspector**, add speaker notes that help the presenter rather than repeat the slide.
|
||
|
||
The browser editor saves slideshow changes into the project’s manifest. Notes save after a short pause; other edits save immediately and participate in project history.
|
||
|
||
### Add fragment reveals
|
||
|
||
Move the playhead to the moment when the presentation should pause, then click **Mark** in Slide Inspector. That time becomes a fragment hold-point for the selected slide.
|
||
|
||
Use fragments when the presenter needs to reveal part of an idea before advancing. A slide does not need a hold-point for every bullet.
|
||
|
||
### Add an optional path
|
||
|
||
Branches keep optional detail outside the main story:
|
||
|
||
1. Open **Branches**, name a branch, and assign its slides.
|
||
2. On the slide where the choice appears, select the visible button or object on the canvas.
|
||
3. Open **Hotspot Tool**, choose the target branch, add a useful label, and click **Make hotspot**.
|
||
4. Keep a clear route back to the main story.
|
||
|
||
Deleting a branch removes that branch definition and every hotspot that points to it, so the browser editor asks for confirmation first. The source scenes remain in the project.
|
||
|
||
### Test it as a presentation
|
||
|
||
Run the presenter locally:
|
||
|
||
```bash
|
||
npx hyperframes present <project-directory>
|
||
```
|
||
|
||
Test next and previous navigation, every fragment, every hotspot, every branch, and the return path. Click **Present** or press **P** to open the synchronized audience view.
|
||
|
||
<Note>
|
||
A slideshow stays interactive. If the result should simply play from beginning to end as an MP4,
|
||
use a [video workflow](/workflows) instead.
|
||
</Note>
|
||
|
||
To create the deck with an agent before refining it here, follow [Make an interactive presentation with AI](/guides/slideshow).
|
||
|
||
## Related topics
|
||
|
||
- [Render from the command line](/guides/rendering)
|
||
- [Finish, render and share](/guides/export-and-share)
|
||
- [Make an interactive presentation with AI](/guides/slideshow)
|
||
- [Use variables and templates](/studio/assets-and-blocks#use-variables)
|
||
- [Work with source and an agent](/studio/canvas#edit-the-source)
|