---
title: Creating a Presentation
slug: author/creating-a-presentation
docTags:
createdAt: 2025-03-11T06:56:09.060Z
---
# Overview
The **Presentation** tab has a dropdown with the following options:
- **New Presentation:** see [New Presention](docId\:c9oPDf5pSFByakCQ0sjsJ) for more information about building a new presentation
- **Import Presentation:** see [Import Presentation](docId\:c9oPDf5pSFByakCQ0sjsJ) for more information about importing presentations
- **Recent Presentations:** allows you to select a presentation from a recent presentation
- **All Presentations:** lets you select a presentation from the existing presentations in your network
# New Presentation
To create a new presentation, select **New Presentation** or the **New Presentation** icon in the **Recent Presentations,** or the **New Presentation** screen. For a visual reference, see the accompanying [tutorial video](https://vimeo.com/350773959) for a step-by step guide to building a new presentation.
**Series 5 Players with Multiple Outputs**
If you select an XC5 or XT5 player, you will see the following screen and a Screens tab (the additional options have been moved to the Screens tab):
:::hint{type="warning"}
For information about how to create a multi-screen presentation on XC5 players, see [Play Back Multiscreen Video](docId\:K9HPTP4rvEBNEGdEEgRJP).
:::
**Other Players**
If you select a single output Series 5 player, or Series 4 or older players, you will see the following screen:
| Destination | Display HTML Site | Video Stream |
| ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
:inlineImage[]{src="https://api.archbee.com/api/optimize/0prk6SO2dy9LdU77jB8D1/RP6aHSdkqZVxo3Zvjj3PT_image.png" alt caption} |
:inlineImage[]{src="https://api.archbee.com/api/optimize/0prk6SO2dy9LdU77jB8D1/ztQEt-M0LR59maWReNjDz_image.png" alt caption} |
:inlineImage[]{src="https://api.archbee.com/api/optimize/0prk6SO2dy9LdU77jB8D1/mpJnzTUy82syMgClJM0mo_image.png" alt caption} |
Note that if you are using an AU335, you must select **Audio** under **Single Zone** before the AU335 will appear in the **Target Player** list:
****
1. **Select Template**: Select a pre-made zone layout for your presentation. You can modify the zone layout later when editing the presentation.
1. **Single** **Zone**: A single image, video, Node.js application, or HTML page occupies the screen at any time.
1. **Playlist**: Videos and images are displayed in a playlist
2. **HTML**: A single HTML page is displayed
3. **Video In**: Video from the HDMI**®** input is displayed (available on XTx44, XTx43, and 4Kx42 players only).
4. **Video Stream**: Video from a remote streaming source is displayed
5. **Node.js application**: A Node.js application is added to the presentation as “Support Content" and can be added, updated, removed later, through “Support Content“. For more info, see [Node.js](docId\:a6Ali6u-szxHuansk6T3-).
2. **Multi-Zone**: Multiple media items (images, videos, text) are displayed simultaneously.
1. **Two Zone Horizontal**: A playlist of videos and images is displayed with a text ticker beneath.
2. **Two Zone Vertical**: A playlist of videos and images is displayed on the left, while a playlist of images occupies the right side of the screen.
3. **Three Zone**: A playlist of videos and images occupies the left side of the screen, a playlist of images occupies the right side, and a text ticker occupies the bottom.
2. **Preview**: View a preview of the zone layout (green indicates a Video or Image zone, Blue an Image zone, and yellow a Ticker zone).
3. **Name**: Enter a name for the presentation.
4. **Destination** (Local mode only): Choose a location to save the presentation project file on your local machine.
5. **HTML Presentation** (HTML template only): Specify a HTML site to display on screen.
1. **URL**: Specify the URL for the HTML page to display.
2. **Local Content**: Browse your local machine to locate the *.html* file that you wish to display.
6. **Video Stream URL** (Video Stream template only): Specify the streaming video URL to display on screen.
7. **Target Player**: Select the target player model for the presentation. This will determine the available video resolutions, zone types, widgets, and events in the presentation.
8. **Connector**: Select the connector type that connects the player to the display.
9. **Output Resolution**: Choose a resolution that is compatible with your monitor. See [Video Modes](docId\:QpML112mBhEK7LBDGUxnv) for a list of all available video modes.
10. **Target Frame Rate**: Choose a frame rate that is compatible with your monitor.
11. **Screen Orientation**: Select a screen orientation for your presentation:
1. **Landscape**: Content is not rotated.
2. **Portrait – Bottom Left**: Content is rotated counter-clockwise 90 degrees. Select this option if the bottom of the monitor is on the left when it is portrait oriented.
3. **Portrait – Bottom Right**: Content is rotated clockwise 90 degrees. Select this option if the bottom of the monitor is on the right when it is portrait oriented.
12. **Start**: Go to the playlist/layout editing screen.
# Presentation Builder
1. **Content Mode**: Presentation content may be stored in one of two places. Importantly, a presentation cannot contain a mix of content storage types. Changing this option thus requires that you exit your current presentation. More details [here](docId:8yTHtVfOe83v1SSsbyIW-).
1. **BrightSign Author Plus **(bsn.Content) mode stores content on BrightSign Cloud.
2. **Local** mode stores content on your local computer.
2. **Library / Tree View**
The **Library** displays available content from either your BrightSign Cloud network or your local computer, depending on the selected Content Mode as described above. If you need to add media to your BrightSign Cloud network, select the dropdown next to the **Content** tab and select **Upload New** **Media**.
**Tree View** allows you to quickly view and search through a presentation by displaying it as a set of expandable / collapsible zones, states, events, and commands. See [here](docId:4jUqtTlQPFwLJZZ59NRZE) for more info.
3. **Layout / Content**: Select **Layout** to change the presentation layout and edit zone properties; select **Content** to edit the content in a zone. Series 5 players will also display a Screens tab in this location. See [Play Back Multiscreen Video](docId\:K9HPTP4rvEBNEGdEEgRJP) for information about how to set up a multiscreen presentation using the Screens tab.
4. **Presentation Name**: The name of the presentation. The cloud icon indicates that the presentation uses BrightSign Cloud content, while the computer display icon indicates that the presentation content is stored locally.
5. **Save**: Select the Save icon to save the presentation (either locally or on your BrightSign Cloud network) or select **Save As** from the file drop down menu to save the current presentation with a different name.
6. **Upload**: Select the Upload icon to upload a locally created presentation to BrightSign Cloud.
7. **Publish**: Select the Publish icon to publish the presentation to one or more BrightSign players.
8. **Zones**: Use this pane to add, delete, and layer zones. See below for more details.
9. **Presentation Settings**: Modify various settings that apply to the entire presentation. See [Presentation Settings](docId\:a6Ali6u-szxHuansk6T3-) for more details.
10. **Zone Properties** (**Layout** tab only): Modify settings associated with a selected zone. See [Zone Types](docId\:v-EVnMU6c7K5NHUNs86qT) for a description of each zone type.
11. **State Properties** (**Content** tab only): Modify settings associated with a selected state. See [State Properties](docId:2eh0-u7XsTxqw_emIiign) for a description of each state.
# Layout (Zone Ordering)
In the **Layout** tab, click on a zone to select it. The selected zone can be resized by manually dragging the drag handles (light blue squares) or by entering pixel values for the zone’s **Size** and **Position** in the **Properties** tab. Pressing the **Delete** key deletes the selected zone. Various properties can be configured for each zone. See the [Zones](docId\:v-EVnMU6c7K5NHUNs86qT) page for more details.
::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
The **Zones** pane organizes visible zones into three layers:
- **Graphics**: This layer includes all Ticker, Clock, Video or Images, and Image Only zones.
- **Video 1:** This layer contains a Video Only, Video or Images, or Background Image zone.
- **Video 2**: This layer contains a second Video Only or Video or Images zone. The Video 2 layer is only supported on player models with multiple video decoders: XTx44, XDx34, XTx43, XDx33, and 4Kx42
Use the Layers icon to change the display order of the three layers - top layers are displayed above layers beneath them.
:::
:::VerticalSplitItem
::Image[]{src="https://api.archbee.com/api/optimize/0prk6SO2dy9LdU77jB8D1/H_ozQywzs6Gq_Ufg7UFPm_image.png" size="80" width="1280" height="1760" position="center" darkWidth="1280" darkHeight="1760" showCaption="false"}
:::
::::
:::hint{type="info"}
Because a **Video or Image** zone can display either graphics or video, it belongs to both the graphics layer and one of the video layers. The **Video or Image** zone will switch between those two layers depending on the type of media being displayed.
:::
For a more comprehensive explanation of the various layer types, please refer to the [Zones](docId\:v-EVnMU6c7K5NHUNs86qT) page.
The display order of graphics zones within the **Graphics** layer can be unpredictable, and may change if the player OS is updated or other presentation settings are changed. To ensure one image is displayed behind other graphics elements, place a Background Image zone in a video layer behind the graphics layer.
# Simple Zones
::::VerticalSplit{layout="right"}
:::VerticalSplitItem
A Simple Zone displays media in a looping playlist. Click the **Content** tab (or double-click a zone) to begin editing a non-interactive playlist.
To add content to the playlist, drag items from the **Assets** or **Widgets** pane into the playlist area above. To align the elements in your playlist area, right-click on the background grid to bring up the **Snap to grid** checkbox option. You can also adjust the spacing of the grid by selecting **Grid Spacing**. Use the arrows in the pop up to adjust the spacing.
Transitions occur automatically at the end of audio and video files, but you can configure the display duration of image and HTML files by selecting the stopwatch icon after an image / HTML file to modify its display duration.
:::
:::VerticalSplitItem
:::
::::
1. **Library**: Select a folder containing media files or components that you wish to add to the presentation playlist. The **Library** is sourced from either your BrightSign Cloud network or local machine, depending on the setting of the [Content Mode](docId:8yTHtVfOe83v1SSsbyIW-). If you need to add media to your BrightSign Cloud network, click the **Content** tab and select **Upload New** **Media**.
2. **Assets / Widgets**: Switch between adding media files (**Assets**) and other presentation states (**Widgets**). See [State Properties](docId:2eh0-u7XsTxqw_emIiign) for more details about various widgets.
3. **Select All / Clear**: Select/unselect all media files in a folder. You can select multiple files:
1. *Select a series of adjacent media files* – Hold the **Shift** key as you select the files in the Library.
2. *Select a group of non-adjacent files* – Hold the **Ctrl** key as you select the files in the Library.
4. **Search**: Enter text in the search field to search the folder for a filename
5. **Sort**: Use the dropdown list to select a sort criteria. Use the icon to toggle between ascending and descending order.
6. **Refresh**: Click the Refresh icon to query the contents of the folder again.
7. **Resize**: Use the dropdown menu to change the size of the media thumbnails in the **Assets** pane.
8. **Playlist**: Drag media or widgets into this area to add them to the playlist. Once an item is added, you can also drag it to a different position in the playlist. To delete an item or state from the playlist, hover your cursor over it and click the "X" that appears in the top right corner of the object. See pic below.
9. **Presentation and Zone**: The name of the presentation project and the zone that the playlist belongs to. If your presentation has multiple zones, switch between zone playlists in the **Navigator** pane.
10. **Simple** or **Advanced** Zone: Use the drop-down to select whether the Zone will be Simple or Advanced. Simple Zones contain basic functionality (e.g., looping images or videos) while Advanced Zones can contain interactivity, widgets, etc.
11. **Zones**: Configure zones and set zone layers.
12. **State Properties**: Edit the properties of media items and widgets. See [State Properties](docId:2eh0-u7XsTxqw_emIiign) to learn more about different state properties.
::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/QDIv7HK8_z8M-6QHPXBXD_image-20241216-214456.png" size="70" width="754" height="772" position="center" alt="image-20241216-214456.png" darkWidth="754" darkHeight="772" showCaption="false"}
# Advanced Zones
Unlike Simple Zones which loop endlessly, Advanced Zones can transition to new media by responding to [events](docId\:VNsooBt2TyX2rkudmLeCn), such as input from a GPIO button or touchscreen. Be default, a Zone is Simple. To make it Advanced, click the **Simple / Advanced** drop-down menu and selected **Advanced**:
::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/BshMkhFz19m36CLFX5NYj_image-20241216-214739.png" size="50" width="412" height="205" position="center" alt="image-20241216-214739.png" darkWidth="412" darkHeight="205" showCaption="false"}
:::hint{type="info"}
You can convert a Simple Zone to an Advanced one. However, once you add events in Advanced mode, you will no longer be able to convert it back to a Simple Zone.
:::
## Home Screen
The Home Screen is the first media file or widget in an Advanced playlist. It is where the Advanced playlist begins.
By default, the first media file or widget you drag into an Advanced playlist will become the Home Screen, identified by the
**Home** icon. You can change the Home Screen at any time by selecting a state in the playlist and checking the **Initial State** box in the **State Properties** pane.
## Advanced Events
Advanced events link states in the playlist and determine what must occur before one state transitions to another. Follow these steps to define an event:
1. Select an event icon in the **Event Toolbar**.
2. Click (and hold) the state name below the thumbnail image of the current state.
3. Drag the pointer to the thumbnail of the state you want to play next.
Alternatively, you can select an event and click the state name. This will add the event to the state, but will not define the transition target. You can then set the target state in the **Event Properties > Target State** pane. This is useful if you haven't added all states to the playlist yet or if the presentation is too complex to easily drag the mouse cursor between states.
:::hint{type="warning"}
In most cases, your Advanced Zone should work in a loop. In the playlist shown above, a user can transition from the Home Screen to the other images by interacting with a USB device. After a set period of time (indicated by the timeout event) or via USB input, the playlist will return to the Home Screen.
:::
## Event Inputs
Most events are triggered by a specific input that you need to define. A red dot on an event indicates that it is missing the required input.
Select an event to view the **Event Properties** pane on the right. See the [Event Properties](docId\:VNsooBt2TyX2rkudmLeCn) page for more information on defining interactive triggers for different events.
::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/_AZzJWErNDN_ZO2Fwvz_M_image-20241216-220935.png" size="70" width="526" height="422" position="center" alt="image-20241216-220935.png" darkWidth="526" darkHeight="422" showCaption="false"}
# Import Presentation
**Import Presentation** lets you import BrightAuthor Classic presentations in Local Content mode. Alternatively, you can do this via **File > Import…** In BrightSign Author Plus (bsn.Content) mode, **Import Presentation** can also import presentations from a BrightSign Network (not BrightSign Cloud) account.