airZStudio
Solutions Products airZ Editor airZ Controller airZ Engine Docs Blog Request a demo

From design to air: how a broadcast graphic works in airZ

A lower third, a scoreboard or an election map takes the same path in airZ: it is designed once, its changing parts are given names, an operator fills them in the show, and the engine renders it live. This article follows one graphic along that path: a quarterly revenue chart.

1. Design it, and name what changes

In airZ Editor, the designer builds the graphic: its artwork, how it animates in and out, and in 3D if the show needs it. Then the designer decides which parts change from show to show, such as a name, a role, a colour, a picture or a score, and gives each one a name in the graphic's data.

airZ Editor designing a broadcast bar chart: the Quarterly revenue chart on the stage, its title, subtitle, source and footer layers in the hierarchy, and the first bar's named values label, value and color in the Data panel
The quarterly revenue chart in airZ Editor. On the left, under DATA, values an operator will fill: here the first bar's label, value and colour. The title, subtitle, source and footnote are named values too.

Those names are the graphic's contract with the rest of the system. The designer connects each one to what it changes on screen, so the text, the colour or the length of a bar follows the value. How the graphic behaves is designed the same way: a trigger such as takeIn plays its entrance, another its exit, and a change of value can animate instead of jumping. None of it needs code.

2. Send it to the control room

When the graphic is ready, the designer sends it to the control room with Sync to controllers. Before anything changes there, the editor asks each airZ Controller what would happen and shows it: a new template, or an update of one that is already in a rundown.

airZ Editor Sync to controllers window sending the Bar Chart to the Gallery 1 control room for the first time, to play out on the PGM-1 and PRV channels
Sending the chart from airZ Editor to airZ Controller for the first time, to play out on two channels.

In airZ Controller, the template arrives in the Templates view, drawn with its sample values and with its triggers and values beside it.

airZ Controller Templates view with the Bar Chart template from airZ Editor: the quarterly revenue chart drawn on the left, its triggers and named values on the right
The template in airZ Controller, as it arrived from airZ Editor.

When the designer changes the chart later, the same window sends an update. An update keeps the template's place in every rundown and what an operator has already set up, so a designer can correct a graphic during the day without disturbing the show.

3. Fill it in the rundown

In airZ Controller, the operator adds the template to the rundown as an item. Selecting the item never puts it on air: it opens in preview and is prepared, so it goes up at once when taken. Its values appear by the names the designer gave them, ready to type into, and its triggers appear as buttons.

airZ Controller with a rundown item selected but not on air: the Quarterly revenue bar chart in Preview, its values in Item Configuration, and an empty Program monitor
"Quarterly revenue" selected in the rundown: its chart in Preview, its values below, and nothing on the Program monitor yet.
airZ Controller Item Configuration for a chart graphic: the template's triggers takeIn, takeOut, update and resort, and its text values title, subtitle, source, footnote and timestamp
An item in airZ Controller: the template's triggers and values, by the designer's names.

Values do not have to be typed. airZ Controller can fill them from live data, from SQL databases, spreadsheets, web APIs, RSS feeds and web pages, so scores, results and prices keep themselves up to date. A newsroom can fill them from its own rundown, through MOS or the web rundown built into airZ Controller.

4. Take it to air

When it is time, the operator presses a trigger, such as TAKEIN, and the graphic goes to air. A red edge and ON AIR mark it in the rundown.

airZ Controller taking a broadcast graphic to air: the Quarterly revenue item selected and ON AIR in the rundown, the bar chart in Preview with its values in Item Configuration, and the same chart in the Program Output monitor
airZ Controller with the chart on air: the item marked ON AIR in the rundown, the chart in Preview with its values below, and on the Program monitor.

While it is up, the operator can correct a value and press UPDATE: the graphic on air changes without playing its animation again. Another trigger takes it out, or moves it to its next shot.

5. Rendered live by airZ Engine

airZ Engine plays the same file the designer made. It renders every frame in real time at the channel's format and frame rate, and sends fill and key over SDI, or NDI with alpha, to the vision mixer. Because the graphic is rendered live rather than pre-rendered, a new value or a new version of the template reaches air straight away.

Quarterly revenue broadcast chart on air, rendered live: horizontal bars for six business units, with the title, subtitle, source and footnote filled from the rundown item in airZ Controller
The quarterly revenue chart as it goes to air, rendered live at full HD. Its title, subtitle, source and footnote are the item's values from step 3.

Why the path matters

  • Made once. The designer's file is the file on air. Nothing is rebuilt between design and playout.
  • One set of names. The values the designer named are the ones the operator, the data source and the newsroom fill.
  • Safe updates. A designer's correction reaches the control room as an update, keeping the rundown as the operator set it.
  • Live, not pre-rendered. New data and changes reach air within frames, not after a render.

Next in the series

Part 3 covers getting graphics into your control room: fill and key over SDI, NDI with alpha, genlock and HDR channels. Part 1, What airZ brings broadcasters, introduces the three products.

The manuals cover each step in detail: airZ Editor and airZ Controller. To see it with your own graphics, request a demonstration.