From Design to Broadcast

This guide walks you through the complete Tweenly workflow — from creating a graphic to using it in broadcast. It connects all the pieces documented in separate sections into one continuous path.

Tweenly supports multiple playout scenarios. Choose the path that matches your setup:

Path A — Export and load into your playout system (most common)
Path B — Use Tweenly On Air as your playout interface
Path C — Control via API from an automation system

All three paths share the same first three steps.

Step 1: Design your graphic

Open the Editor and build your graphic layout.

Add objects from the Left Sidebar — rectangles, text, images.
Arrange and style them on the Canvas using the Right Sidebar properties.
Add animations — fade, slide, scale, reveal — and adjust timing on the Timeline.

Set the correct resolution and frame rate in Canvas settings before you start. Frame rate cannot be changed later.

Step 2: Prepare for broadcast

Depending on your playout scenario, configure the graphic for the level of control you need.

Add timeline structure

Set up how the graphic behaves during playout:

Add animations for intro (how the graphic appears) and outro (how it exits).
Set the Intro end and Outro start markers in the Timeline settings.
Add pause labels where the graphic should wait for a command to continue (e.g., between intro and outro).
Set the Init state:
- play — graphic starts animating immediately when loaded.
- pause — graphic is visible but paused at frame 0.
- hide-and-pause — graphic is invisible until triggered (recommended for playout systems).

Mark fields as editable (optional)

If text or images need to change at playout time (player names, scores, logos):

Select the object on the Canvas.
In the Right Sidebar, enable isTextEditable (for text) or isImageEditable (for images).

These fields can then be updated via On Air, the API, or any system that controls the exported HTML.

Connect data sources (optional)

If your graphic displays live data (scores, standings, weather):

Create a Data Source in the Left Sidebar.
Point it to your JSON or XML feed URL.
Select the attributes you need and bind them to text or image objects.
Enable auto-refresh at the desired interval.

Step 3: Save your graphic

Click Save in the top bar. Fill in title, description, tags, and workspace.
The graphic is now stored in the Gallery.

If you plan to use On Air (Path B), also enable the Final flag:

Click the filename to open the metadata form.
Enable the Final flag.

Step 4: Export

Export your graphic for use outside the Editor.

Open the More menu in the top bar.
Choose your export format:

Format	Best for	License
Export Package (ZIP)	Production playout — includes all assets, works offline. Recommended.	Unlimited
Export HTML	Quick testing — lightweight, assets stay online.	Free + Unlimited

For full details on export formats, see Export Options.

Step 5: Use in broadcast

Path A: Export into your playout system

This is the most common workflow. You export the graphic and load it into your existing playout or CG system.

Export the graphic as a ZIP Package.
Unzip the package to a location accessible by your playout system.
Load the HTML file in your playout system’s HTML/web renderer.
Control playback from the playout system using its native commands.

The exported graphic is a self-contained HTML page. Most modern playout systems support HTML graphics natively — the graphic runs its timeline automatically based on the Init state and labels you configured.

Path B: Use Tweenly On Air

On Air is Tweenly’s built-in live control interface. No export needed — On Air loads graphics directly from the Tweenly backend.

Mark the graphic as Final in the Editor (Step 3 above).
Open On Air and log in.
Drag the graphic from the sidebar into a session’s standby slot.
Edit text and image fields as needed (player names, scores, logos).
Preview the graphic to verify appearance and animation.
Click IN to send the graphic live.
Use NEXT to advance through labels, or OUTRO to play the outro animation.
Click OUT to remove the graphic from the live output.

For setup and configuration, see On Air Setup.

Path C: Control via API

For automation systems or custom integrations that need programmatic control over the graphic.

Export as a ZIP Package (Step 4 above).
Load the HTML file in an iframe or browser instance.

Set values before playback:

tweenly.setText("headline", "Breaking News");
tweenly.setImage("team-logo", "https://example.com/logo.png");

Start playback:
```
tweenly.playAnimation();
```

Control during playout:

tweenly.next();              // Advance to next label
tweenly.outro();             // Play outro and exit
tweenly.continueAnimation(); // Resume after a pause label

For the full integration walkthrough, see Playout Integration Guide. For the API method reference, see API Control.

Common workflow patterns

Lower third (Path A — export to playout)

Create a rectangle container with two text objects (name, title).
Add a slide-in animation for intro, slide-out for outro.
Set Intro end and Outro start markers.
Set Init state to hide-and-pause.
Export as ZIP Package.
Load in your playout system. Trigger play to show, trigger outro to hide.

Lower third with live editing (Path B — On Air)

Same design as above, but also enable isTextEditable on name and title.
Mark as Final.
In On Air: drag to standby → type the name and title → IN → (when done) → OUTRO → OUT.

Data-driven scoreboard (Path A or B)

Create the scoreboard layout with text objects for team names, scores, time.
Create a Data Source pointing to your scores JSON feed. Enable auto-refresh (e.g., every 5 seconds).
Bind data attributes to the text objects.
Add animations for intro/outro.
Export (Path A) or mark as Final (Path B).

Scores update automatically via the data source refresh — no manual intervention needed during the match.

Automated graphics (Path C — API control)

Design the graphic with editable fields.
Export as ZIP Package.
Load in your automation system’s HTML renderer.
Use tweenly.setText() / tweenly.setImage() to set content from your data system.
Use tweenly.playAnimation() to trigger, tweenly.outro() to remove.

Ideal for automated workflows where graphics are triggered by external events (goal scored, breaking news, ad insertion).

TL;DR

Design in the Editor → Prepare (animations, labels, editable fields) → Save → Export → Use in broadcast.
Path A (most common): Export ZIP → load in playout system → control with native playout commands.
Path B (On Air): Mark as Final → drag to session → edit fields → IN/OUT.
Path C (API): Export ZIP → load in iframe → setText/setImage → playAnimation.
Use ZIP Package for production. HTML export is for testing only.
Set Init state to hide-and-pause for playout-triggered graphics.
Use pause labels to create controllable stop points in the animation.
Use Data Sources with auto-refresh for live-updating content.