Layers, components and data
A composition is layers of components. Each component is a graphic with its own elements, fields and events.
Layers and components
Layers stack: one higher in the list draws over the ones below. Put graphics that share space on the same layer, such as every lower third, so you can take a whole layer off air at once.
Components are the graphics: a lower third, a score bug, a full-screen. Each goes on and off air on its own.
Every layer and component has an ID, shown at the top of the properties panel with a copy button. The control room and the API use it, so give the ones you'll script against readable ids like lower-third before you publish.
Elements
Elements are what you draw: text, rectangles, ellipses, images and groups. Each has a position, size and style, and can be bound to a field, so a text element shows the name field.
Images take a URL, or a key from the asset library. Text can use an uploaded font.
Data
Fields hold the values that change during a show. Each has a key, such as homeScore, which the API uses, and a type: text, number, true or false, colour, image or timer.
Fields live in one of three places:
- Global fields belong to the composition, for things every graphic shares, like team names.
- Layer fields belong to a layer and the components on it.
- Component fields belong to one component.
A field can inherit one further out, so a lower third's team shows the global homeTeam until it's given a value of its own.
Events
Every component has three events, and you can add more:
| Event | Plays when |
|---|---|
| In | It goes to air. |
| Out | It comes off air. |
| Change | One of its trigger fields changes while it's on air, such as the score. |
| Custom | You fire it by name from the control room or with invoke, like Goal. |
On the timeline, each element in an event moves with a preset or with keyframes.
Timers
A timer field shows a time that runs by itself: a countdown, a count-up, a countdown to a time of day, or a clock. Countdowns and count-ups are started, paused, reset and set from the control room or with the timer command. A countdown can fire an event on a component when it reaches zero.