Modify a stock template, import work from Photoshop, Illustrator, or After Effects, or build a graphic from scratch in the Designer.
You don't need to design graphics to run a great show — VideoPro ships with a rich suite of ready-to-use designs, and the Data Controllers in Play and update graphics cover the typical production. Come here when you're ready to go further: modify a stock graphic to match your brand, import work from Adobe tools, or design something entirely your own.
- Modify a template — use this when a stock graphic is 90% right and you need to change colors, fonts, or a logo to match your brand.
- Designer Workspace panel — use this when you've never opened the Designer and want to get comfortable with the canvas where you build graphics.
- Create variables in graphics — use this when you're building a graphic that will later be driven by a Data Controller and need to expose fields the controller can fill.
- Import an After Effects design — use this when your team already has assets in Adobe tools and you want to bring them in rather than rebuild.
- Modify an existing template — start from a Library template and customize it: change its values, restyle it in the Designer, and save your version.
- Designer overview & Workspace — the Workspace, the Timeline, and the Properties panel.
- Build a graphic from scratch — text, shape, image and video layers, styles, alignment, lighting and camera, groups.
- Animate & transition — keyframes, transitions, effects, looping, flexible durations.
- Variables & linked data — expose variables in a graphic and link them to multiple sources.
- Conductors — Crawl, Roll, and Leaderboard conductors and their how-tos.
- Import designs from other tools — Photoshop, EPS (Illustrator), and After Effects flows.
- Media sequences & clip roles — build reusable media sequences and assign playback roles.
- Save, package & export — save to the library, package a project, export as image or video.
- Graphics Library (build-side reference) — the Library viewed from the author's side.
- The graphic you just built will likely need to be wired to data next. Continue to Play and update graphics, specifically steps 4 and 5 where variables and controllers connect.
- To route the result to SDI, NDI, or a virtual webcam, see Set up your production.
- When the Designer misbehaves (a layer won't move, a font won't load, a project won't open), see Troubleshooting.
Start from a VideoPro Library graphic and adjust it to fit your show, instead of building from a blank canvas.
This is the fastest path to a broadcast-ready graphic. Pick a template from the Library, change colors, swap text, drop in your logo, and you have a graphic on air in minutes. Most operators never need to build from scratch. This chapter teaches the modify-a-template workflow end to end.
- Modify a template — the complete walkthrough: add a template, change its values, redesign it in the Designer, and save your version back to the Library.
- Design & customize graphics — section overview
- Build a graphic from scratch — use this when no template fits and you need to start from a blank canvas.
The fastest way to a finished, on-air graphic is to start from a VideoPro Library template and make it your own, rather than building from a blank canvas. This article walks the whole path: drop a template into your show, change what you need, and — if you want to keep it — save your version back to the Library.
There are two levels of change, and most of the time you only need the first:
- Change its values — the text, logos, and colors a template exposes — from the playout side, in seconds, without opening the Designer.
- Change its design — restyle layers, swap a logo, recolor, rearrange, or add and remove layers — in the Designer.
- Open the Graphics Library panel.
- Browse for a template. Hover a thumbnail to preview it.
- Drag the template into your Project List. It becomes a graphic in your show, ready to play.
For the full Library tour — browsing, previewing, and organizing — see Graphics Library / Library overview. To play a graphic on and off air, see Play a graphic.
Most templates expose their text, images, and colors as variables. To rebrand a stock graphic — new wording, your logo, your team colors — you don't need the Designer at all:
- Select the graphic in the Project List.
- Open the Live Values tab.
- Edit the values. Watch the result in the Preview panel; you can even change values while the graphic is on air.
That's all most customizations need. See Customize its values for a worked example, and the Live Values tab for the full reference.
When you want to change the design itself — not just the words and the logo — open the template in the Designer.
Select the graphic and click Edit Graphic in the Preview panel. The template opens in the Designer with all of its layers, ready to edit.
Reshape the template however you need. The most common edits, and where each one lives:
- Recolor or restyle a layer — select it and use the Properties > Style tab. See Add styles to design layers.
- Swap a logo or background image — select the layer, then in Properties > Style choose Image/Video and pick your file. See Add styles to design layers.
- Reposition, resize, or rotate — use the Workspace handles, or Properties > Transform for exact values. See Customize a design layer's transform and additional properties.
- Add or remove a layer — use Add Text or Add Shape above the canvas, or delete a layer the template includes but you don't need. See Add and modify text layers and Add and modify shape layers.
- Expose or rename a variable — so the playout operator can drive a field you've changed or added — use Properties > Variables. See Create variables in graphics.
Tip: When you're done editing in the Designer, click the green checkmark at the bottom of the Timeline to commit your changes back to the playout interface.
To keep your version for reuse, save it back to the Library:
- In the Designer, choose File > Save to Library > Design….
- Type a name in the Design name dialog, then click OK:
+
- A new name saves your version as a new template and leaves the original stock template untouched — usually what you want.
- The same name as an existing template prompts you to overwrite it; confirm to replace it.
Your saved design appears in the Graphics Library, ready to drop into any show. For the other things you can save to the Library — styles, shapes, effects, transitions, and lighting — see Save graphics and presets to the library.
Note: Saving to the Library doesn't change the copy already in your show — it adds (or updates) a reusable template. The graphic you were editing keeps the changes you committed with the green checkmark.
- Build a graphic from scratch — when no template is close enough and you want to start from a blank canvas.
- Graphics Library / Library overview
- Save graphics and presets to the library
Tour the Designer — the VideoPro window where you edit and build graphics — before you start changing anything.
The Designer is a separate workspace from the playout main view. Read this chapter once so you can name every panel: the Workspace canvas, the Timeline where animation lives, and the Properties Panel where every layer setting is exposed. Once you can find each surface, the editing chapters that follow will make sense.
- Designer Workspace panel — the canvas at the center of the Designer, where you click in and shape graphics directly with the mouse, in 2D and 3D.
- Designer Library panel — use this to find the templates, styles, effects, and other components you build a design from.
- Designer Timeline panel — use this when you need to understand how layers and animation are arranged in time.
- Designer Properties panel — use this when you need to find a specific layer setting.
- Design & customize graphics — section overview
- Build a graphic from scratch — the next chapter once you know the Workspace.
The Workspace canvas is the Designer's main view and a direct, visual editor: you build a graphic by working on it with the mouse. Click a layer to select it, drag to move it, drag its handles to resize or rotate it, and double-click text to edit it in place. The Properties panel and the Timeline give you precise, numeric control, but most of the design happens right on the canvas.
Every visual layer — text, shape, or image — can be selected and shaped on the canvas:
- Select — click a layer. A selection box appears around it. Click an empty area to deselect.
- Move — drag the body of the selected layer to reposition it.
- Resize — drag the handles on the selection box. The corner handles scale both dimensions at once; the edge handles scale one.
- Rotate in 2D — drag the rotate handle above the selection box.
+
- Rotate in 3D — click the globe to turn on 3D rotation, then drag to spin the layer in three dimensions. Click the globe or an empty area to turn it off.
+
- Edit text — double-click a text layer to place a cursor and type. You can also select individual letters to move, scale, or rotate them on their own.
- Nudge — with a layer selected, use the arrow keys to move it a pixel at a time.
Note: For exact values, the Properties > Transform tab holds numeric position, scale, and rotation in both 2D and 3D.
Tip: Press Ctrl/Cmd + H to hide or show the selected layer's bounding box.
To work on several layers together, lasso-select them by dragging from an empty area:
- On the canvas, start the drag away from any layer, then drag across the layers you want.
- In the Timeline, start the drag near a layer and drag across the others.
Hold Shift while clicking to add or remove individual layers from the selection.
The Workspace includes alignment aids at the top of the canvas.
Layers snap to grids and guidelines when those are on; hold Alt to disable snapping temporarily.
Click the Marking Grid button to show a grid across the canvas.
- Click the Guidelines button to show the horizontal and vertical rules.
+
- To add a guideline, drag from the side rule (for a horizontal guideline) or the top rule (for a vertical one) into the canvas.
+
- To move a guideline, drag its end. To remove one, drag its end back to the rule. To clear them all, choose View > Clear Guidelines.
Click the Safe Margins button to show the title-safe areas.
To choose the aspect ratio and turn crosshairs on, choose View > Margins setup and select Crosshairs, 16:9 Margins, 16:9 HD Margins, or 4:3 Margins.
Choose a percentage from the Zoom dropdown in the top-right corner of the Workspace.
When the zoom is above 100%, move around the canvas by dragging the scrollbars or the panning square at the bottom-right corner.
To reverse the drag direction when panning, turn on Invert Pan Behavior in the Designer's Preferences.
The Library panel is the Designer's browser of reusable components. It holds far more than finished graphics: alongside complete project templates, it offers collections of styles, effects, lighting, shapes, and transitions that you apply to the layers of a design. You build a graphic by combining these with the work you do in the Workspace, the Timeline, and the Properties panel.
Note: The same panel is the Graphics Library in the playout interface, where it shows finished title designs only. The preset collections below appear when you open it in the Designer.
- Project Templates — complete, ready-to-use title designs, organized into collections. Drop one in to start a design, or use it as a starting point to customize.
- Styles — the look and feel of a 2D or 3D layer: font, alignment, kerning, color, transparency, bevel, extrusion, and more.
- Effects — animations, warps, and other motion applied to a layer.
- Lighting — a scene's lighting, camera angle, and camera width.
- Shapes — predesigned shapes, such as circles and rectangles.
- Transitions — in and out animations: fly-ins, warps, zooms, and more.
The Library works together with the rest of the Designer:
- Select the layer you want to change, on the canvas or in the Timeline.
- In the Library panel, choose a collection from the drop-down at the top, then open a folder to see its presets.
- Hover a thumbnail to preview it on the selected layer in the canvas.
- Double-click the item — or drag it onto the layer — to apply it. A style restyles the layer; an effect or transition adds motion that shows up in the Timeline; a template starts or replaces the design.
- Fine-tune the result in the Properties panel.
For the full browse, preview, apply, and save procedures — switching between thumbnail and list views, adding your own categories, and more — see Graphics Library / Library overview.
Anything you build can become a reusable Library item. Save a finished graphic to a collection, or save a layer's style, effect, or transition as a preset, so you can apply it again later. See Save graphics and presets to the library.
- Designer Workspace panel
- Designer Properties panel
- Graphics Library / Library overview — the full Library reference.
- Library panel — the Library in the playout interface.
The Timeline is where you build a graphic and organize how it behaves over time. Every design layer — text, shapes, images, video, and the scene lights — has its own track here, stacked in render order and laid out along a time ruler. This is where you set when each layer appears and for how long, arrange which layer sits in front of which, and attach and retime the transitions, effects, and keyframes that animate the graphic. Setting a graphic's overall duration is just one small part of the work you do here.
Enter a duration in the Timeline field near the bottom-right of the canvas. Format is MM:SS;FF.
Note: If the timeline includes a Pause point (orange marker), VideoPro pauses the graphic at that moment during broadcast until the operator animates it out. See Create custom designs with flexible durations.
Text and shapes appear in playback based on the design layer's position and duration in the timeline.
- To move a layer, drag it left or right in the timeline, or press Ctrl/Cmd + left/right arrow to nudge by one frame.
- To trim or extend, drag the layer's start or end.
Click a layer and drag it up or down to a different track. There is no keyboard shortcut for moving a layer between tracks.
Click the show/hide (eye) icon at the top-left of a layer to turn the layer on and off. Hidden layers are not included in rendered graphics.
Click the triangle next to the show/hide icon to show or hide a layer's transitions, effects, and keyframes.
When you expand a layer, the Timeline reveals:
- The layer's transition strip — bars representing the in/out transitions, draggable to retime.
- The layer's effect strip — bars representing attached effects.
- Keyframe diamonds on each keyframable channel. Right-click a diamond for Copy Keyframe, Paste Keyframe, or Delete Keyframe.
Note: You must click directly on a keyframe diamond for Copy Keyframe and Delete Keyframe to appear in the context menu. Paste Keyframe additionally requires clicking in the upper portion of the layer row.
Use the Zoom In and Zoom Out buttons in the Timeline toolbar to change the horizontal scale. The Timeline opens fully zoomed-out so the entire title fits.
When you open the Properties > Global > Light & Cam tab, the scene-level light tracks — Light 1, Light 2, and Light 3 — appear at the top of the Timeline, above the design-layer tracks, one per light slot and animatable independently. They show only while that tab is open. See Customize lighting and camera settings.
Each light track shows keyframe diamonds when keyframing is enabled for that channel.
Right-click the ruler at the top of the Timeline to add a marker.
The Designer supports five marker types: Pause Point, Transition Midpoint, Fade In Endpoint, Fade Out Startpoint, and Custom. See Create custom designs with flexible durations for marker semantics and authoring guidance.
Right-click in an empty area of the Timeline to add a layer:
- Add Text — submenu of Static Text and Dynamic Text.
- Add Shape — submenu of Ellipse and Rectangle.
- Add Image/Video... — opens a file dialog.
Note: Star shapes are added from the top toolbar's Add Shape button only. The Timeline right-click Add Shape submenu lists Ellipse and Rectangle.
Note: The Timeline's Add Image/Video... dialog filters for common formats: PNG, JPG, JPEG, GIF, BMP, TGA, DDS, plus the video formats MP4, MPG, MPEG, MOV, AVI, WEBM. TIFF and WEBP image files are not supported as design-layer images; convert them to PNG or JPG first.
The Properties panel is where you adjust everything about the part of a graphic you have selected in the Designer — its look, position, motion, audio, variables, effects, and transitions. Select a layer, group, or conductor on the Workspace or in the Timeline, and its settings appear here. With nothing selected, the panel reads "Select a layer in the design to see its properties here."
The panel is context-sensitive: the tabs it shows depend on what you've selected, so you only ever see the tabs that apply to the current object.
Note: On scope: This article is about the Designer Properties panel — what you see inside the Designer while editing a graphic. The playout main view has its own, separate Properties panel (Live Values, Values Grid, and so on); for that one, see Properties panel.
The panel has two top-level tabs:
- Layer — settings for the object you've selected: a single layer, a group, or a conductor. This is where you spend most of your time, and it holds the sub-tabs described under The Layer Tabs.
- Global — scene-wide settings that apply to the whole graphic rather than to one layer: its variables and its lighting and camera. See The Global Tabs.
When you select a layer or other object, the Layer tab shows a context-sensitive set of sub-tabs. Not every tab appears for every selection — the "appears for" note on each tab tells you when to expect it.
The look of a text or shape layer, built up as a stack of style elements — fonts, fills, gradients, outlines, shadows, bevels, and extrusions. Appears for a paragraph or shape. See Add styles to design layers.
Position, rotation, scale, and anchor point, plus the keyframes that animate them, and per-layer extras such as opacity, column width, clipping, and Object Following. This is the bulk of what used to be the single Motion tab. Appears for a paragraph, shape, or group. See Customize a design layer's transform and additional properties.
The text, pattern, and visibility variables a layer exposes, and how they're wired to a data source. Color and image variables aren't here — those live on the Style tab, embedded in the style design. Appears for a paragraph, shape, or group; a Text Variable applies only to a paragraph, not a shape. See Create variables in graphics.
NTX features and layer-specific behaviors — crawling text, rolling credits, looping, data graphs, and live-video variables. Appears for a paragraph or shape.
Attach an audio file — a WAV or MP3 — that plays when this layer plays, so you can pair a sound effect with a title's motion. Browse to the file, and set how loud it plays with Audio Level. Appears for a paragraph.
What a layer does beyond its base look: add and tune effects and animations, set a Blending mode for how the layer composites with what's behind it, and assign masking — mark a layer as a mask, or pick which mask a layer is Masked by. Appears for a paragraph, shape, or group. See Add effects to design layers.
The in and out transitions applied to a layer. Appears for a paragraph, shape, or group. See Add transitions to design layers.
The parameters for a conductor you've added to the graphic — a Crawl, Roll, or Leaderboard. Appears when a conductor is selected. See Crawl Conductor, Roll Conductor, and Leaderboard Conductor.
A group's own settings: its name, plus the Transform that positions, rotates, and scales the whole group at once. Appears when a group of layers is selected. See Group design layers in a graphic.
The Global tab holds settings that belong to the whole scene rather than to one layer. It has two sub-tabs.
Every variable in the graphic, gathered in one place — each with its current value and an Update Live toggle. Set or preview all of your values from this one tab instead of selecting each layer in turn.
The scene's camera and lighting: the camera Wide Angle and Depth Of Field, and up to three lights (Light 1–Light 3) with type, direction, color, and brightness. See Customize lighting and camera settings.
In VideoPro 2026.0, the Properties panel was reorganized. The single Motion tab from prior versions was broken out into the focused tabs above, so you can find a specific setting without scrolling through one long list.
If you can't find a setting that used to live on the Motion tab:
| Old location | 2026.0 location |
|---|---|
| Motion → keyframes, position, scale, rotation | Transform |
| Motion → audio | Audio |
| Motion → variables panel | Variables |
| Motion → "Crawl" / "Rolling Credits" toggle for text layers | Special |
| Motion → conductor settings | Conductor tab (visible when you select the conductor instance) |
| Motion & Data → variable wiring | Variables |
Internally, the Transform tab is still the old Motion editor — only the label changed.
The Motion tab had grown to hold every layer-modifying setting VideoPro had — animation keyframes, audio, variables, transition choices. Splitting it into focused tabs keeps each one short and makes it obvious which tab a setting belongs in.
Build a graphic from a blank canvas using VideoPro's design layers — text, shapes, images, video — and the styling and arrangement tools around them.
Reach for this chapter when no Library template fits and you need full creative control. Each article covers one layer type or one editing operation; work through them in order to build a complete graphic, or jump to the one you need. Familiarity with the Designer Workspace is assumed.
Tip: If a stock graphic is already close to what you want, it's usually faster to start from one and adjust it. See Modify an existing template first, and build from scratch only when no template fits.
- Add and modify text layers — start every graphic with the text it needs.
- Add and modify shape layers — backgrounds, bars, geometric accents.
- Import images and videos as design layers — bring in logos, footage, and stills.
- Add styles to design layers — fills, gradients, outlines, drop shadows.
- Align and arrange design layers — layout and stacking order.
- Customize lighting and camera settings — 3D look across the scene.
- Customize a design layer's motion and additional properties — per-layer movement and extras.
- Group design layers in a graphic — keep related layers together.
- Import VideoPro and legacy Titler Live graphics — reuse an existing graphic as a starting point.
- Build a graphic end to end — a complete worked example that ties the pieces together, from a blank canvas to a saved, variable-driven graphic.
- Designer overview & Workspace — read this first if the Workspace is unfamiliar.
- Animate & transition — once layers are placed, give them motion.
When you customize graphics in the Designer, you can add text and control every aspect of how it renders — typeface, size, weight, alignment, kerning, leading, and how it fits inside its bounding box. Text layers are a paragraph object that holds the typed string plus a per-character style record.
You can add a text layer from two places:
- The top toolbar's Add Text button. Choose Static text (a fixed string) or Variable text (a string the playout operator or data controller updates).
- The Workspace or Timeline right-click menu. Right-click an empty area and choose Add Text > Static Text or Add Text > Dynamic Text.
Note: Static and dynamic text differ only at creation. After creation, you can toggle a paragraph between static and dynamic by clearing or marking Text Variable in Properties > Variables.
- Open a graphic in the Designer.
- Double-click a text layer in the Workspace or Timeline to enter inline edit mode.
- Type to update the text.
- Click outside the layer to commit the edit.
The Style tab in the Properties panel shows the Font Controls section at the top.
Select a character, paragraph, or group of characters, then use the controls:
- Font family — typeface selector.
- Font style — weight or variant available within the family.
- Font size — point size.
- Bold, Italic, Underline — toggleable style buttons.
Each control applies to whatever is selected. If no characters are selected, the change applies to the entire paragraph.
The Font Controls section includes two alignment menus:
- Horizontal alignment — Left, Center, Right, or Justify (also labeled Left and Right in some contexts).
- Vertical alignment — Top, Middle, or Bottom.
Vertical alignment matters when the paragraph's bounding box is taller than the rendered text.
- Kerning controls horizontal spacing between characters. Enter a value in the kerning spin box in Properties > Style, or select characters in the Workspace and press Alt + Left/Right arrow.
- Leading controls vertical spacing between lines. Enter a value in the leading spin box.
You can also drag the blue bounding box around selected characters in the Workspace to adjust kerning visually.
The Fit Mode dropdown in Properties > Style controls how the paragraph relates to its bounding box:
- Fit Box to Text — the bounding box grows or shrinks to match the rendered text. This is the default for new paragraphs.
- Fit Text to Box — the text scales to fit inside a fixed bounding box.
- Fit Text to Box Width — text scales to fit the box width. Useful for credit rolls and lists.
- Cut Text to Box — text is clipped at the bounding box edges.
- Squash Text to Box — text stretches non-uniformly to fill the box.
Pick Fit Box to Text when the content drives the size, and one of the others when the bounding box is fixed by the design.
The Caps menu in Font Controls transforms how text renders without changing the stored string:
- Normal — render exactly as typed.
- All Caps — render in uppercase.
Because Caps is a render-time transform, a Text Variable round-trip preserves the original case. The playout operator types Smith and the graphic shows SMITH when Caps is All Caps.
Style Breaks let a single paragraph hold multiple styles separated by a special character. The runtime swaps styles at each delimiter.
- With a text layer selected, open Properties > Variables.
- Mark Style Break.
- In the Change style with a combobox, choose a delimiter character (for example,
|). - Type some test text using the delimiter to separate segments.
- Set up the style you want for the first segment in Properties > Style.
- Click Record Styles to capture the active style for that segment.
- Move the caret past the next delimiter and repeat.
At playout time, the operator types Home|Away and the rendered text uses Style A for Home and Style B for Away.
Note: Style Break availability depends on your edition. If the Style Break checkbox does not appear, the feature is not enabled in your license.
A text layer's look is built on the Style tab, and it's a deep toolset. You stack style elements — 3D faces, outlines, shadows, glows, bevels, and extrusions — give each its own color, gradient, image, or video fill, and animate any of it. Between them you can build out just about any text design you can imagine.
For the full set of style elements and how to edit each one, see Add styles to design layers.
You can give individual characters their own style, position, size, or rotation. Select characters by dragging across them, or by holding Shift and pressing the arrow keys, then apply any of the controls above to just that selection. This is powerful for fixed designs where each letter is placed by hand.
Reserve per-character styling for Static text. When you change a Text Variable at playout time, the paragraph's default style is applied to the new string, so any mid-paragraph per-character styling is lost on update. Author a variable-driven paragraph so the entire string shares one style.
When you customize graphics in the Designer, you can add shape layers such as ellipses, rectangles, and stars to your graphics, as well as import shapes from PSD and EPS files.
- Open a graphic in the Designer.
- Click the Add Shape button at the top of the Workspace and choose Ellipse, Rectangle, or Star.
+
Note: Star is only available from the top toolbar Add Shape menu. The timeline right-click submenu shows Ellipse and Rectangle only.
- Open a graphic in the Designer.
- Open the Library panel.
- Select Shapes from the dropdown at the top of the Library panel.
- Double-click the Circles or Rectangles category to browse.
- Double-click a shape to add it to the graphic.
- Open a graphic in the Designer.
- Double-click a paragraph to make it editable.
- Move the cursor to where you want to insert the shape.
- Click Add Shape and choose a shape.
- Open a graphic in the Designer.
- Choose File > Import > Vector or PSD.
- Open a graphic in the Designer.
- Select a shape layer in the graphic.
- In Properties > Transform, access the position, rotation, and scale parameters. Toggle the lock to lock the scale ratio.
+
Note: Shape layers do not expose an Audio tab in the Properties panel. To attach audio, use a paragraph layer or import an audio file as its own layer. See Import images, videos, and audio as design layers.
See also Add styles to design layers, Add effects to design layers, and Add transitions to design layers.
When you customize graphics in the Designer, you can import images, videos, and audio files, which you can scale, move, rotate, and customize with effects and transitions.
The Designer supports PNG, JPG, JPEG, GIF, BMP, TGA, and DDS files.
Note: PNGs can include transparent backgrounds, but since they're raster-based, if extruded they will be extruded as a rectangle regardless of transparency.
- In VideoPro's playout interface, select a graphic layer and click Edit Graphic.
- To import into an existing layer, double-click the layer and place the cursor where the image should appear. Otherwise the image is imported as its own new layer.
- Choose File > Import > Image.
- Select an image and click Open.
VideoPro supports MP4, MPG, MPEG, MOV, AVI, WEBM, and animated GIF files.
- In VideoPro's playout interface, select a graphic layer and click Edit Graphic.
- To import into an existing layer, double-click the layer and place the cursor where the video should appear.
- Choose File > Import > Video.
- Select a video and click Open.
Note: GIF files can be imported as either a still image or a video. File > Import > Image tries to import a GIF as video first and falls back to a still if the file has no animation. File > Import > Video does the reverse: video first, still fallback if decoding fails.
EPS vectors are ideal for pre-designed logos or shapes you want to extrude for 3D depth. EPS artwork imports as vector shape content that you can transform and style like a native shape layer. See Import vector artwork as EPS for the dedicated reference.
Note: The Designer supports EPS only. Adobe Illustrator .ai files cannot be imported directly. In Illustrator, save or export your design as EPS before importing.- In VideoPro's playout interface, select a graphic and click Edit Graphic.
- To import into an existing layer, double-click and position the cursor.
- Choose File > Import > Vector.
- Select an EPS file and click Open.
Tip: To extrude an imported EPS image, select the image and increase Extrusion in Style Settings > 3D Face > 3D Controls.
You can import a layered Photoshop file. The Designer brings the PSD in retaining its original layer stack; PSD layers do not become independently animated Designer timeline tracks. See Import a Photoshop file for the dedicated reference.
Note: Text layers in the PSD are rasterized into shape content, not editable text. To preserve editable text, add it in the Designer after import.
Note: PSD files cannot be extruded — use EPS if you need depth.
- In VideoPro's playout interface, select a graphic and click Edit Graphic.
- To import into an existing layer, double-click and position the cursor.
- Choose File > Import > PSD.
- Select a PSD file and click Open.
The Designer supports WAV, MP3, and MP4 audio files. Audio attaches to the title's timeline and plays when the title is cued.
- With the graphic open in the Designer, do one of the following:
+
- Click Add Audio on the top toolbar.
- Choose File > Import > Audio.
- Select an audio file and click Open.
The audio appears as its own layer on the Timeline with a default level you can adjust later.
Note: The audio import dialog filters for.wav,.mp3, and.mp4files only. Other audio formats are not supported. Convert other formats before importing.
Note: Add Audio is hidden on editions that do not include the audio engine. If you do not see the button, your license does not include audio playback.
- Select the layer.
- In Properties > Audio, drag the Audio Level slider.
- Use Browse to swap the audio file, or Remove to detach it.
The Audio tab appears only for paragraph and audio layers. Shape layers do not expose an Audio tab.
When you customize graphics in the Designer, you can use the style settings to control the look and feel of 2D and 3D objects with attributes such as fonts, alignment, kerning, colors, transparencies, bevels, extrusions, and more.
- In VideoPro's playout interface, select a graphic layer and click Edit Graphic.
- In the Designer, select an object or group in the Workspace or Timeline.
+
Tip: To add text or shapes, see Add and modify text layers and Add and modify shape layers.
- To apply predesigned style presets from the library:
1. Open the Library panel.
1. Select Styles from the dropdown at the top.
1. Double-click a collection to view its style designs.
1. Hover over a preset to preview on the selected layer.
1. Double-click a preset to apply.
- To customize style presets, click the Properties > Style tab.
To customize text from Properties > Style, select a character or paragraph in the Workspace, then use the Style tab's formatting toolbar.
To scale text from within the Workspace, select characters and drag the text box to the desired size.
Adjust the horizontal and vertical space between characters, lines of text, and objects.
- In Properties > Style, enter new values in the kerning fields.
+
- In the Workspace, double-click a text layer, select characters, and either move the blue bounding box or press Alt + Left/Right arrow keys. (Alt + Up/Down adjusts leading, not kerning.)
+
Select a text layer in the Workspace or Timeline, then select one of the following from the Fit Mode dropdown:
- Fit Box to Text — The bounding box's size changes with font size.
- Fit Text to Box — Text scales to fit inside the bounding box.
- Fit Text to Box Width — Text scales to fit the bounding box width (useful for lists and credit rolls).
- Cut Text to Box — Text is limited to the bounding box size.
Select a layer in the Workspace or Timeline, then click the + Style Element tool button in Properties > Style and pick one of the following from its popup menu (note the hyphen separator in the actual labels):
- 3D - Outline — outline with extrusion and beveling.
- 3D - Face — new 3D face with 3D properties.
- 3D - Gloss Face — new 3D face with a preset gloss gradient.
- 2D - Shadow — 2D shadow with 2D properties.
- 2D Outline Glow — 2D glow.
- 2D Blurred Face — colored 2D blur.
When you add a 3D style layer, two sections appear:
- 3D Outline / 3D Face / 3D Gloss Face — change colors, gradients, map videos, enable variables, control transparency, offset, depth, and width.
- 3D Controls — set depth, bevels, and shine.
Many 2D settings are the same as 3D, but extrusion is 3D-only.
- Select the Color option in a style element section of Properties > Style.
- Click the color swatch.
- In the Pick Color dialog:
+
- Click a color on the wheel.
- Click Hex or Dec and enter values.
- Click the color picker, then click a color on your screen. (Press Esc to cancel.)
+
- Drag the horizontal sliders for hue and opacity.
Tip: To allow an operator or data source to set the color, create a color variable. See Create variables in graphics.
- Select the Gradient option in a style layer section.
- Click the color swatch and pick a color.
- In the Gradient section, select the number of colors and gradient type from the two dropdowns.
+
- In the gradient color wheel, drag the large circles to adjust the color range and the small circles to adjust the transition.
- Select Image/Video in the Style Settings of Properties > Style.
- Select an image or video from your computer.
- To map the whole image across the entire text layer (not repeating per character), mark Stretch to Paragraph.
+
- Right-click (Win) or Control+click (Mac) on the video swatch and choose Trim Video.
- Slide the playhead to the start and click Mark In.
+
+
- Slide the playhead to the end and click Mark Out.
+
- Mark Loop Video if desired.
- Click OK.
Use the Opacity, Offset, Z, and Width sliders or arrows in a Style Settings section, or double-click a value and type a new one.
Use Extrusion to add depth.
Use Shininess in 3D Controls.
Mark Map to Sides in 3D Controls.
Mark Environment Map in 3D Controls.
In 3D Controls:
- Adjust Bevel Size.
- Click a Bevel tile or drag the bevel grid points.
- Mark Include Back Side to bevel the backside.
Click Normal Map Surface in a 2D Style Settings section or in 3D Controls, then double-click a texture.
Tip: Hover the pointer over a texture in the library to preview it on the style element.
Use Blur in a 2D Style Settings section. 0 is sharp; 100 is soft.
Click Add Effect in a 2D Style Settings section, then double-click an effect.
Tip: Hover the pointer over an effect in the library to preview.
You can save the style stack from any paragraph or shape to the Library as a reusable preset. There are four entry points:
- File > Save to Library > Style... — saves the selected object's full style stack.
- Right-click on the canvas, then choose Save to Library > Style....
- Right-click on a layer in the Timeline, then choose Save to Library > Style....
- In the Style tab, right-click in the style stack and choose Save preset... (or Save paragraph preset... / Save shape preset... depending on the selection type).
All four paths save to the same Library location. Pick the entry point that matches your current focus.
Note: Applying a Style preset replaces the target's entire style stack. There is no merge option. If you want to keep some existing layers, apply the preset only to a specific style layer by dropping the preset directly onto that layer in the Style tab.
Note: Style presets cannot be dragged onto a Conductor (Crawl, Roll, Leaderboard, or Grid). The drop is silently rejected. To restyle a conductor's source group, edit the underlying paragraph or shape directly.
When you customize graphics in the Designer, you can align design layers and arrange their order in your graphic.
- In VideoPro's playout interface, select a graphic from the Project List, then click Edit Graphic.
- In the Designer, select one or more design layers in the canvas or Timeline.
+
Note: If you select more than one design layer, the layers maintain their spacing relative to each other.
- Click the Alignment menu at the top of the Design window and choose:
+
- Center in Frame — centers horizontally and vertically.
- Center in Frame Horiz — centers horizontally.
- Center in Frame Vert — centers vertically.
+
Tip: You can also right-click (Windows) or Control+click (Mac) on design layers in the Timeline and select an alignment option.
- In VideoPro's playout interface, select a graphic and click Edit Graphic.
- In the Designer, select one or more layers in the Workspace or Timeline.
- Right-click and pick from the Arrange submenu (or use the Arrange tool above the canvas):
+
- Bring to front — moves the layer to the front in the canvas and top of the timeline.
- Bring forward — moves forward one level.
- Send backward — moves backward one level.
- Send to back — moves the layer to the back.
+
Note: When more than one layer is selected, the Arrange Layers commands apply only to the first-selected layer.
- In VideoPro's playout interface, select a graphic layer and click Edit Graphic.
- In the Designer, select two or more design layers.
- Right-click and pick from the Align submenu (or use the Align tool above the canvas):
+
- Align Lefts — to the leftmost selected layer's left edge.
- Align Centers — horizontally to the group center.
- Align Rights — to the rightmost selected layer's right edge.
- Align Tops — to the topmost layer's top.
- Align Middles — vertically to the group center.
- Align Bottoms — to the bottommost layer's bottom.
- Distribute Horizontally — evenly distributes horizontally. (Requires three or more selected layers.)
- Distribute Vertically — evenly distributes vertically. (Requires three or more selected layers.)
+
Tip: You can also right-click (Windows) or Control+click (Mac) on design layers in the canvas or timeline and select an alignment option.
The Alignment menu also carries Apply Global Scale and Position. It bakes the playout-side Transform (Position and Scale) into the design's own geometry and resets the Transform, so the design file matches what plays out. See Move and resize items for Program for the playout Transform this applies.
When you customize graphics in the Designer, you can control a scene's lighting, camera angle, camera depth, and more.
- In VideoPro's playout interface, select a graphic layer and click Edit Graphic.
- In the Designer, click Properties > Global > Light & Cam.
Tip: You can use keyframes to change lighting. See Animate design layers with keyframes.
Note: The Camera Settings section is hidden when VideoPro runs inside Adobe After Effects. The host composition's camera takes over instead.
Drag the Wide Angle slider, click its steppers, or double-click the value, to distort objects as if viewed through a wide-angle lens.
- If Depth Of Field isn't enabled, click the eye icon in the Depth Of Field section header to enable it.
+
- Expand Depth Of Field and adjust:
+
- Focus Distance — distance from the camera that's in focus.
- Aperture — how broad the in-focus area is. Larger values broaden the in-focus area, which reduces Blur Level's visible effect; smaller values narrow it and emphasize the blur.
- Blur Level — amount of blur applied to out-of-focus areas.
+
- In the Designer, open the Library panel and select Lighting from the dropdown.
+
- Hover to preview a lighting effect.
- Double-click to apply.
When you add a lighting effect, Properties > Global > Light & Cam opens with editable attributes.
Note: Selecting a different preset discards changes to the previously selected preset.
You can include up to three lights in a design and set each light's color. Depending on the type of light, you may also be able to set direction and distance.
Tip: To reset a preset effect, click the Reset icon (circular arrow next to the Preset dropdown).
- Select a Type of light from the dropdown in any of the available light slots (Light 1 through Light 3):
+
- Point — light in all directions from the chosen position.
- Directional — constant beam across a scene from a direction.
- Spotlight — illuminates a specific section from a position and direction.
+
- Adjust the light's settings either via the X, Y, Z sliders or via the Workspace controls:
+
1. Select an object in the Workspace or Timeline.
1. Click a light layer heading (Light 1) in Properties > Global > Light & Cam. A light settings globe appears over the object.
1. Drag the line inside the globe to change angle.
1. Drag the line away from or toward the center to change brightness.
+
Tip: Use Soften to blend spotlight edges. 0 creates a hard edge. Lower brightness on a Point light to localize it. If a light turns gray, it's behind the objects.
+
- To change a light's color, click the color picker and pick a color, or open a color swatch:
+
+
- Click a color on the wheel.
- Click Hex or Dec and enter values.
- Use the color picker to pick from your screen. (Esc cancels.)
- Drag horizontal sliders for hue and opacity.
When you customize graphics in the Designer, you can use the Transform tab to access a design layer's position, rotation, scale, transparency, and additional properties such as a shape layer's skew or a text layer's column width.
- In VideoPro's playout interface, select a graphic in the Project List, then click Edit Graphic.
- In the Designer, select a layer or group in the canvas or timeline workspace.
- Click Properties > Transform.
Tip: You can use keyframes to animate Transform settings. See Animate design layers with keyframes.
In the Transform section, click the Position, Rotation, or Scale slider or arrows, or double-click the value and enter a new value.
Tip: Click the lock icon (tooltip: Lock aspect ratio) next to the Scale settings to adjust X, Y, and Z simultaneously and preserve aspect ratio.
Tip: Click Reset All to reset all Transform settings, or click the reset icon next to Position, Rotation, or Scale to reset that group only.
Click the Opacity slider or arrows, or double-click the value.
Note: Adjusting Opacity from the Transform tab applies across all style elements of that design layer.
Mark Hide shape or Hide paragraph to hide a layer.
Mark Isolate Layer to prevent the design layer from cutting into other design layers.
Note: Isolated design layers render separately, which takes longer to render the design.
Mark Clip to Paragraph Box to limit the render area of effects to within the boundary of a text box.
When Clip to Paragraph Box is marked, click the Margin slider or arrows to change the clip margin.
Click the Column Width slider or arrows, or double-click the value, to change the tabbed spacing between columns of text.
Tip: To create two columns: enter the first line for the first column, press Tab, then the first line for the second column. Repeat for each line.
Example with column width 0:
Example with column width 26:
When you customize graphics in the Designer, you can create a group of design layers and customize all the layers at once as if they were one layer. You can move, scale, and keyframe groups, and apply effects and animations to groups. You can still modify individual layers within a group.
- In VideoPro's playout interface, select a graphic layer and click Edit Graphic.
- In the Designer, select the design layers to group:
+
- Click outside a layer in the Workspace and drag to select.
- Click next to a layer in the timeline and drag.
- Hold Ctrl (Windows) or Command (Mac) and click each layer.
- Right-click (Windows) or Control+click (Mac) on one selected layer and choose Group. A blue bounding box appears.
+
Tip: To keyframe a group, see Animate design layers with keyframes.
Click the expand/collapse arrow on the left side of a group in the Timeline workspace.
Expand the group in the Timeline workspace, select one of the design layers, and customize as you normally would.
Tip: See Add styles to design layers for style elements.
Right-click (Windows) or Control+click (Mac) on a group in the canvas or Timeline and choose Ungroup.
Note: A group that serves as the source for a Conductor (Crawl, Roll, Leaderboard, or Grid) cannot be ungrouped. The Ungroup command is hidden when the group is the conductor's item template. To ungroup, first delete the Conductor, then ungroup the underlying source group.
Note: You cannot create a group inside another group from the right-click menu. Multi-selecting layers that are already inside a group does not offer Group.
If you previously saved a graphic with assets — from VideoPro or from its predecessor, Titler Live — you can import that graphic and its assets into the Designer. Both products save the same Design Zip Package format, which is why the old product name appears here.
- To ensure your graphic appears as you intend, verify that the ZIP file includes all relevant fonts, textures, and settings before you import the package.
- To create a new graphic, choose File > New > Graphic, then select the new graphic from your channel.
- Click Edit Graphic in the Preview panel. The new graphic opens in the Designer canvas.
- In the Designer, choose File > Import > Design Zip Package.
- If prompted to save the current graphic, click Don't Save.
- Select the ZIP file containing the graphic and click Open.
- Preview the graphic to ensure it appears correctly, or customize as needed.
- Click the green checkmark at the bottom of the timeline workspace to keep the new graphic.
VideoPro allows you to create sophisticated graphics with the included Designer. This is where you build the design layers and variables that drive the visual and dynamic data elements of your broadcast.
By the end of this tutorial, you'll have a graphic with editable text variables — built in the Designer, saved to your Library, and ready to drive from the playout interface.
- Open the Designer.
- Add a couple of text layers using the Add Text button above the canvas, type your desired text, and select a font from Properties > Style. Adjust by repositioning or resizing in the canvas, or via Properties > Transform.
- Add other visual elements like shapes from the Add Shape button.
+
- Set the variables you wish to be editable from Properties > Variables. The Variable Settings section enables text layers to become variables. Name them according to what should appear in VideoPro's Live Values tab.
+
+
- Set justification, alignment, and text fit modes from Properties > Style. For example, center justification on both text layers; alignment Bottom on the top paragraph and Top on the bottom paragraph; Fit Text to Box fit mode and stretch the box to the Title Safe margins.
+
- Animate in your title. Go to the Library and select transitions. Apply them to the beginning and end of the text layer. See Add transitions to design layers.
- Optimize the title for performance: make the graphic as short as possible while keeping in/out animations intact, leveraging VideoPro's pause point. See Create custom designs with flexible durations.
- Make beginning transitions short and drag the pause point to right after the in animations. Shorten the layer length to leave a few frames of no motion at the pause point. All durations after the pause point are treated as the animate-out.
- Save the graphic. Choose File > Save to Library > Design. Name your graphic to find it in the library.
Note: Your graphic is now saved and accessible from the VideoPro graphics library.
Bring graphics to life — keyframes, transitions, effects, and flexible durations — once the layers are in place.
Use this chapter after you have a static graphic that looks right. It covers the four ways VideoPro adds motion: keyframes for precise per-layer animation, transitions for on/off behavior, effects for built-in motion styles, and flexible durations for graphics that need to hold variable lengths on air.
- Animate design layers with keyframes — use this when you need exact, frame-level control.
- Add transitions to design layers — use this when you want a layer to fly on or off in a chosen style.
- Add effects to design layers — use this when a preset motion effect saves you from keyframing by hand.
- Loop videos and animations in a graphic — use this when a graphic must keep moving for as long as it stays on air.
- Create custom designs with flexible durations — use this when a graphic needs to hold for a variable length of time.
- Optimize the timing of a graphic — use the Designer's Title > Optimize Timing to strip dead space from a timeline before saving to the Library.
- Tune a graphic for performance — the checklist of design choices that most often slow a graphic down at playout, and the cheaper alternatives.
- Build a graphic from scratch — place layers before animating them.
- Conductors — for crawls, rolls, and leaderboards that animate themselves.
When you customize graphics in the Designer, you can create keyframes to animate various properties of a graphic, including a design layer's position, rotation, scale, opacity, effects, and transitions, as well as the lighting for the entire scene.
- In VideoPro's playout interface, select a graphic layer and click Edit Graphic.
- In the Designer's canvas or Timeline, select a design layer or group of design layers to animate.
+
Tip: Keyframe a group when you need to animate multiple objects while maintaining their relative position.
- Navigate to one of the following tabs in the Properties panel for the type of property to animate:
+
- Properties > Transform — position, scale, rotation, anchor.
- Properties > Variables — text and image variables.
- Properties > Special — NTX features (Play-through, Loop, Data Graph, Live Video Variable).
- Properties > Audio — audio level and source.
- Properties > Effects
- Properties > Transitions
- Properties > Global > Light & Cam
- Mark the Turn on keyframing checkbox in the section for the property to animate.
+
+
When you mark Turn on keyframing, VideoPro automatically adds the first keyframe at the beginning of the design layer within the timeline.
+
Note: The first keyframe at position 0 is not drawn on the timeline. It represents the starting values of the layer; subsequent keyframes appear normally.
+
+
Each keyframe records all properties for the keyframed property.
- If you want the first keyframed animation to start later, don't try to drag the hidden origin keyframe — it's not drawn and not draggable. Instead, move the playhead to where the change should begin, click Add keyframe there with the current values, then move the playhead later and add the destination keyframe. The animation now runs between those two visible keyframes.
- Add more keyframes:
+
1. Click the playhead in the timeline and drag it to the moment when you want the next keyframe.
+
Tip: If you want the last keyframe to look the same as the first, add it now before changing any properties. Move the playhead to the desired moment and click Add keyframe.
+
+
1. Change properties to reflect how the animation should change between the previous keyframe and the current playhead position. VideoPro automatically adds a keyframe when you change a property (if an existing keyframe isn't selected).
1. Repeat to add more keyframes.
+
Tip: To edit settings for an existing keyframe, select the keyframe in the list and adjust.
+
+
Tip: To delete a keyframe, select it and click Remove keyframe.
+
+
Note: Clearing the Turn on keyframing checkbox stops the layer from using the keyframes you've added. Re-enable keyframing and the existing keyframes apply again; the data is preserved while keyframing is off, so use the checkbox as a toggle rather than a delete.
- To animate smoothly at each keyframe, mark Smooth interpolation.
+
Note: Some keyframed animations may appear slower than animations between keyframes when Smooth interpolation is on. Always preview to verify. The graphic will take longer to render. Keyframes can only be mapped to specific frames along the Timeline.
- Preview the keyframed animation.
- After you finish editing, click Keep in the bottom-right corner of the Timeline panel to save and update the graphic.
+
When you customize graphics in the Designer, you can add transition presets that behave as in/out fades, fly-ins, slide-ins, warps, and more. Each transition exposes unique attributes for motion and behavior.
Tip: You can use keyframes to customize transitions in a design. See Animate design layers with keyframes.
- In VideoPro's playout interface, select a graphic layer and click Edit Graphic.
- In the Designer, select a design layer in the canvas or Timeline.
- Open the Library panel and select Transitions from the dropdown.
+
- Browse: double-click a folder; hover to preview; double-click a transition to apply.
+
Tip: You can drag and drop a transition onto any object in the Workspace or Timeline.
+
The Properties > Transitions tab opens with editable attributes.
+
You can adjust the length of transitions manually in the timeline.
- Select the layer in the Timeline and click the dropdown arrow next to the eyeball to expose the transition length.
+
- Drag the end to change the length.
- Right-click the transition strip for Copy Transition, Delete Transition, or Duplicate Transition (the labels show "Effect" or "Transition" depending on whether you right-clicked an effect strip or a transition strip).
+
To access transitions in a design layer, click the layer and open Properties > Transitions.
Customize a transition by:
- Selecting predefined settings from the Preset dropdown.
+
- Adjusting attributes unique to that transition.
+
- Choosing Apply To Paragraph, Line, Word, or Letter.
+
- Adjusting Overlap to control how much consecutive elements (letters, words, lines, or paragraphs per the Apply To selection) overlap as the transition animates. Higher values pack the elements closer in time; lower values stagger them.
+
- Reversing the transition.
+
- Turning on keyframing to manipulate motion speed and location. See Animate design layers with keyframes.
Note: You can change preset settings, but selecting a different preset discards changes to the previous preset.
When you customize graphics in the Designer, you can add effects to design layers and customize those effects to create animations, warps, and more. Effects include simple filters and complex compositing elements.
Tip: You can use keyframes to change effects in a graphic. See Animate design layers with keyframes.
- In VideoPro's playout interface, select a graphic layer from the Project List, then click the Edit Graphic button in the Preview panel.
- In the Designer, select a design layer in the canvas or Timeline workspace.
- Open the Library panel and select Effects from the dropdown at the top of the Library panel.
+
- To browse effects:
+
- Double-click a folder to browse effects within that category.
- Hover the pointer over an effect to preview it on your selected design layer.
- To add an effect to the selected design layer, double-click it.
+
Tip: You can also drag and drop an effect onto a design layer in the canvas or Timeline.
+
When you add an effect, the Properties > Effects tab opens with editable attributes.
+
To access effects in a graphic, click a design layer in the Designer's canvas or Timeline, then click the Properties > Effects tab.
Blending modes determine how a design layer's color and fill interact with elements behind it. Select a design layer, then select a blending mode from the Blending mode dropdown in Properties > Effects:
- Normal
- Hue
- Pop
- Screen
- Multiply
- Lighten
- Darken
- ColorDodge
- ColorBurn
- Negation
- Additive
- Mask
When you choose Mask, three additional checkboxes appear on the mask source layer:
- Mask Using Luma — use the brightness of the mask layer's pixels instead of its alpha channel.
- Invert Mask — invert the mask so opaque areas become transparent and vice versa.
- Preview Mask — show the mask preview overlay on the canvas while editing.
On other (non-mask) design layers, a Masked by dropdown appears: choose which Mask-mode layer in the scene masks this layer. The default value is None (no masking). This replaces the older "Mask Single Layer Only" toggle: instead of telling the mask to scope itself, you tell each consumer layer which mask to be clipped by.
Note: In the project XML and undo history, the Mask blending mode is identified by its source name Stencil. Look for Stencil when editing project XML directly.
Isolate a design layer so it renders on its own and stops intersecting or clipping into the layers around it — it ignores the usual front-to-back (z-depth) ordering with the rest of the scene. This is useful for a 3D layer that would otherwise poke through a layer in front of it.
Note: Isolated design layers render separately. Enabling this increases render times.
Select the design layer, then mark Isolate Layer in Properties > Effects.
Effect attributes appear in separate dropdown sections named for the effect applied to the layer. Adjust attributes or select predefined settings from the Preset dropdown in Properties > Effects.
Note: You can change preset settings, but selecting a different preset discards changes to the previously selected preset.
When you customize graphics in the Designer, you can loop videos and animations to create dynamic backgrounds. The affected design layer loops continuously while the graphic is live, even through the pause point.
- In VideoPro's playout interface, open a project and select a graphic in the Project List.
- Click Edit Graphic in the Preview panel.
- In the Designer, select the video/animated object you want to loop.
+
Note: End the layer slightly before the timeline ending to minimize any jumps.
- In Properties > Special, find the NTX Feature dropdown and choose Loop.
+
Note: The NTX Feature is a single dropdown with five mutually-exclusive options: None, Play-through, Loop, Data Graph, and Live Video Variable. A layer can use only one at a time.
- Enter a time in Loop Start (in seconds) for when the loop should start.
+
Tip: Set the time after the fade-in so the loop begins at full opacity. Picking similar start/end frames makes the loop smoother.
+
+
Tip: You can move the playhead in the timeline and click Use Cursor to use its position as the loop's start or end time.
- Set Loop End before any fade-out begins. Leave enough time after Loop End for the Loop Cross Fade. For example, with a 9-second layer and a 2-second cross fade, set Loop End to 7 seconds or less.
+
- If you want a delay between loops, enter a time in Loop Delay.
- For smooth looping without a jump, enter a time in Loop Cross Fade equal to or less than the time remaining between Loop End and the layer end.
- Loop Play Out controls how much of the animation plays out when you take the graphic off-air. To play out the full animation, type the time after all animation completes (or use the cursor option).
- Preview and adjust as needed.
+
- Close the Designer and click Keep to save.
This article describes how to create a graphic operators can play for a specific duration or indefinitely, without trimming or altering playback speed.
How does it work? A graphic's timeline includes a pause point, identified by the orange indicator above the timeline.
When an operator plays a graphic indefinitely, VideoPro pauses on the pause-point frame and displays it while the broadcast continues. When the operator stops playback, the graphic resumes its remaining duration to animate out.
Right-click the timeline ruler to add a marker. The Designer supports five marker types:
- Pause Point — the title holds here until you trigger the out cue. The most common marker.
- Transition Midpoint — synchronizes a mid-transition keyframe, for example when matching an in/out transition pair.
- Fade In Endpoint — marks where the fade-in completes.
- Fade Out Startpoint — marks where the fade-out begins.
- Custom — an author-named marker you can reference from animation timing.
- In VideoPro's playout interface, add a graphic layer to the channel.
- Select the layer and click Edit Graphic. The layer opens in the Designer.
- Set the graphic's fixed duration by clicking the Timeline field near the bottom-right corner of the canvas, and enter a duration in MM:SS;FF format.
+
- Customize the graphic's layers, animations, and durations.
- Reposition or adjust layer durations so all animations end before the pause point or start after it.
+
Important: If an animation overlaps the pause point, the graphic may not appear as you intend.
+
- Adjust the pause point — drag it above the timeline so it doesn't overlap animations.
- Adjust animation durations — drag the left or right side of an animation so it doesn't overlap the pause point.
+
- Preview using the play button below the canvas and adjust if needed.
- Click Keep changes in the bottom-right corner of the Timeline workspace.
+
- Later, in the Project List, use the Duration column to customize how long the graphic remains paused. Setting duration to
00:00;00keeps the graphic paused indefinitely until the operator clicks play.
+
+
The Title > Optimize Timing menu in the Designer shortens a graphic's timeline by removing dead space between animations. Tighter graphics render faster, cache faster in VideoPro, and respond more quickly when you play them on air. Run it as the last step before saving a graphic to the Library.
Designs often accumulate empty space in their timelines while you iterate: an out-animation that starts long after the last in-animation finished, layers whose visible content ends well before the timeline does, idle frames between a Pause marker and the next layer's entrance. None of that empty space carries information, but every empty frame still costs render and cache time.
Run Optimize Timing when:
- You're about to save a finished graphic to the Library.
- A graphic is taking longer to cache or play on air than its visible content suggests.
- You imported a graphic from After Effects and want to tighten its native timeline.
- You've added or removed layers and the timeline length no longer reflects the actual content.
There's no penalty to running the command more than once. If there's no dead space left to remove, the timeline doesn't change.
Two requirements are non-negotiable:
- The graphic must have a Pause marker. The optimizer uses that marker as the reference point for what counts as the on-air state versus the play-out tail.
- The graphic must not be a stinger. Graphics that carry Cut or Transition markers (the stinger marker family) are skipped because the cut point is the load-bearing time anchor and can't be moved.
Open Title > Optimize Timing and choose one:
- All Layers — optimizes every layer in the graphic and moves the Pause marker. This is the right choice in almost every case.
- Selected Layers — optimizes only the layers you've selected. The Pause marker stays put. Use this when you want to tighten part of a complex graphic while leaving other layers' timing alone.
The optimizer adjusts:
- Each layer's start time and duration.
- In-transitions: their duration is scaled to keep the same absolute end time.
- Out-transitions: their start time is shifted so they still end where they did before.
- Layer transform keyframes: shifted, not scaled, so animation speed is preserved.
- Camera and light keyframes: shifted (only when you choose All Layers).
- The Pause marker position (only when you choose All Layers).
- The overall timeline length.
The optimizer leaves alone:
- Layers entirely before the Pause marker.
- Layers entirely after the Pause marker.
- Looping layers.
- Data Graph layers.
- Middle animations and effects that aren't marked as entry or exit transitions — their normalized timing stays as authored.
- Place the Pause marker deliberately. The optimizer treats everything before the marker as the entry, and everything after as the exit. A well-placed marker is what makes the difference between a small improvement and a dramatic one.
- Mark your transitions explicitly. The optimizer adjusts in-transitions and out-transitions only when they're declared as such. Animations and effects that sit in the middle of a layer's duration and aren't marked as transitions are not adjusted. Convert "middle" animations to explicit in or out transitions when their role is really to bring the layer in or take it out.
- Save before you optimize. The change is undoable, but a saved checkpoint makes it easier to A/B the result. Run Optimize Timing, scrub the timeline, and if anything looks off you can revert.
- Re-run after structural changes. Adding, removing, or duplicating layers can reintroduce dead space. A second pass after major edits is cheap.
- Cache aware. The optimizer also tells VideoPro's caching system the new shorter timeline length, so the cache doesn't extend the title back to its original length when it next loads. The shorter timeline persists.
[NOTE]
A layer has transform keyframes on both sides of the Pause marker with different values, which means the layer is animating across the pause. The optimizer can't compress the time inside an active animation. Either move the animation entirely before or entirely after the pause, or convert the keyframe pair to matching values (so it's a hold, not an animation).
A layer would have ended within a few frames of the proposed Pause position. The optimizer moved the Pause one frame earlier so the layer has visible content during play-out. No action required.
Same situation as above, in Selected Layers mode. The optimizer extended the named layer so it doesn't disappear immediately into the pause. If you'd rather see the layer end sooner, shorten it manually.
- Effects applied to many layers, particularly heavy GPU effects like blur and glow stacks.
- High-resolution image variables that are then scaled small in the Preview.
- Looping layers that the optimizer leaves alone — a long-running loop keeps the title rendering even when there's nothing visible changing.
- Animate design layers with keyframes
- Add transitions to design layers
- Create custom designs with flexible durations — covers the Pause and Transition markers.
- Designer Timeline panel
A complex graphic that animates smoothly in the Designer can still struggle live. The Designer renders one frame at a time on demand; VideoPro's cache renders ahead and re-renders every time something changes. The difference matters: design choices that are invisible in the Designer can multiply the work the cache has to do every frame. This article is a checklist of the choices that most often slow a graphic down, with the alternative that ships without the cost.
Use Optimize the timing of a graphic as the first step — it shortens the timeline by removing dead space and is the single biggest free improvement. The items below are the next layer.
VideoPro can find and apply the most common of these optimizations for you. In the Designer, choose Title > Optimize Performance… to open the Optimize Performance dialog.
The dialog lists the graphic's layers as a tree, with a gutter on the right that groups them into the cache's combine blocks and a ⚠ on each layer the analyzer recommends changing. For each layer you can:
- Disable Live Update — make a variable static when it doesn't actually change live, so the cache can fold the layer into a combined static block.
- Simplify Blend — composite the layer with Normal instead of an expensive blend mode so it can be combined. (This changes the look — review it.)
- Move — reorder a layer within its group or conductor (also Ctrl+Up / Ctrl+Down) so static layers sit together and combine.
Changes preview live in the work view as you toggle them. Click OK to apply, or Cancel to revert everything — the tool changes nothing until you accept.
Optimize Performance automates the three highest-impact items below: static-ifying variables that aren't truly live, simplifying costly blend modes, and reordering for cache combining. The rest of this article explains when each change is safe, and covers the optimizations the tool doesn't touch — pattern variables, video encoding, effect stacks, and loops.
Every variable in a graphic carries an Update Live flag. The flag's real cost isn't that values trigger re-renders — it's that the cache's layer-combining optimizer cannot include any Update Live element in the combined static composite.
Here's why that matters. When you finish a graphic and play it on air, VideoPro builds a cache for it. The cache walks every layer and groups together everything that doesn't change at runtime into a single combined static element — one texture, one composite, fast to play. A static background, a static team-color rectangle, a static logo, and a static border can all become one frame.
The moment any one of those elements is marked Update Live, the optimizer can't include it in the combined element. It gets:
- its own render pass during cache build,
- its own memory footprint at runtime,
- its own per-frame decompress and composite during playback.
A graphic with five Update Live variables that don't actually change live is a graphic doing five times the per-frame work it needs to.
Most variables in most graphics never change while the graphic is on air. A lower-third with a fixed speaker name, a fixed subtitle, a fixed accent color, and a fixed headshot doesn't need any of those values flagged as live — they're set when you stage the graphic and then they hold. A scoreboard's Team Name and Team Logo almost never change mid-game; only the score and the clock do.
Audit the Properties > Variables tab for each layer and turn Update Live OFF on every variable that isn't genuinely live during playback. Leave it ON for the variables that genuinely change live: scores, clocks, ticker text, anything bound to a Data Controller that pushes new values during the show.
Update Live is the most common trigger, but it isn't the only one. A layer is forced to render on its own (and skips combining) when any of these is true:
- The layer has any variable marked Update Live.
- The layer is set to loop, or to play through (not stop at the Pause marker).
- The layer is a Data Graph layer.
- The layer follows another layer, or is followed by another layer.
- The layer is part of a Leaderboard or Grid Conductor. (Crawls and Rolls do combine — see the section on conductors below.)
A second cost worth knowing: making one layer dynamic can make its neighbors dynamic too. A static layer that follows a dynamic layer (or is followed by one) inherits the dynamic cost — the cache can't combine it either. When you turn Update Live on, you're often touching more than the one layer.
Normal, Additive, and Mask (the Stencil blend mode in its single-layer variant) are inexpensive in playback.
Other blend modes — Multiply, Screen, Overlay, Soft Light, Hard Light, and the rest — render fine in the Designer. The Designer uses a single-pass GPU render, and the GPU handles these modes without breaking a sweat. The problem appears during live playback. VideoPro's playout cache composites layers on the CPU per frame, and the expensive blend modes are exactly the kinds of pixel math the CPU is slow at. They become costly live, especially when:
- the layer the blend touches has a dynamic variable (a live-updated text, image, or color), so the composite has to redo from scratch on each update, and
- the affected pixel area is large.
The fact that a graphic looks and performs fine in the Designer is not a guarantee it will play smoothly live. Check the result in VideoPro's Program Monitor before committing. If a graphic with one of these blend modes drops frames, see whether you can move the blend onto a static layer above or below — the cache will combine static layers and the blend cost disappears.
Text variables that update many times per second — a clock ticking from a Tables data file, a score counting from a JSON feed — re-rasterize the whole text string each update by default. For values that only change in part (one or two digits at a time), the Pattern Variable type does the work incrementally and is dramatically cheaper.
Set up a Pattern Variable for any clock-style or scoreboard-style text driven from a data file. The Create variables in graphics article covers the setup (it's the Pattern Variable row of the variable-types table).
The savings are substantial. A clock that ticks once per second through HH:MM:SS cycles through 86,400 distinct text values across a day. Without a pattern, the cache builds 86,400 distinct text-rendered sprites. With a 6-position pattern (H, H, M, M, S, S, each rendered for 10 possible digits), it builds about 11 reusable glyph sprites and composes them on the fly. The cache becomes tiny, the rebuild is fast, and the playback is smooth.
Dedicated Data Controllers — System Time, Sportzcast, StatCrew, hardware scoreboards — set this up automatically. You only need to do it manually for custom clock-style displays driven from generic data sources via the Tables controller.
A 4K video file dropped into a 1080p project is decoded at 4K every frame and then scaled to 1080p. The pixel-shading cost is wasted; the disk and memory bandwidth is wasted; the decode time is wasted.
Before adding a video clip to a media sequence, re-encode it to match your project's working resolution and frame rate. Free tools like FFmpeg and HandBrake do this cleanly; Adobe Media Encoder and DaVinci Resolve do it with a UI.
Codec choice matters too. Pick codecs designed for playback, not for editing:
- H.264 is the safe default. It's hardware-accelerated on virtually every modern Windows and macOS machine, the files are small, and the decode quality is fine for graphics work.
- H.265 (HEVC) gives smaller files than H.264 at the same quality, but only newer hardware (roughly 2017 and later) accelerates the decode. On older machines, H.265 is software-decoded and slower than H.264.
Avoid these for playback files in VideoPro:
- ProRes 4444, ProRes HQ, and similar editing-intermediate codecs. They're designed to decode and re-encode many times during a non-linear edit, not to play back efficiently. They're software-decoded on most consumer machines.
- GoPro CineForm, DNxHR HQX, and other editing-intermediates. Same story.
- Animation, MJPEG, and uncompressed formats. Designed for very old workflows. Software-only decode; large files.
- Apple ProRes RAW, Blackmagic RAW, REDCODE, and other camera RAW formats. These are capture-side formats. Convert to H.264 before using as playout material.
When in doubt, re-encode to H.264 with a high bitrate (15-30 Mbps for 1080p; 30-60 Mbps for 4K) before adding the file to a media sequence.
One more thing to watch: pixel formats. VideoPro reads video through the OS's native decoder path — Windows Media Foundation on Windows, AVFoundation on macOS. Files in common pixel formats (NV12, YUV420, BGRA) pass straight through. Files in uncommon pixel formats trigger a software color conversion on every frame, which is a significant per-frame cost on top of the decode. If you've encoded a file outside the typical broadcast pipeline (e.g., 10-bit YUV422 from a camera) and it's playing poorly, re-encode to 8-bit H.264 with a standard YUV420 pixel format.
Also worth knowing: during a stinger or other transition between two media clips, both decoders run concurrently for the length of the cross-fade. A long fade between two heavy clips doubles the decode cost briefly. Keep cross-fade durations modest when the clips themselves are taxing.
Each GPU effect (blur, glow, drop shadow, displacement) adds a render pass. Two or three is fine; eight or ten on the same layer compounds. If a graphic feels slow, open Properties > Effects on each layer and check whether any effect is redundant or could be baked into the source asset instead.
This is especially worth doing on the layers that update most often live — every effect re-runs each time the underlying content changes.
A looping layer keeps the cache re-rendering even when nothing visible is changing. Loops are appropriate for genuinely-looping content (a spinning logo, a pulsing highlight) but they bypass the Optimize Timing tool and they don't free CPU when the rest of the graphic settles.
If a loop exists because you want a layer to "stay visible" after its animation finishes, that's not what a loop is for — extend the layer's duration instead, or use a Pause marker.
The cheapest changes are the ones that don't compromise the design. Apply them in this order:
- Run Optimize Timing on the finished graphic.
- Run Title > Optimize Performance for an automated pass at the next three items, and accept the changes you agree with.
- Audit Update Live flags. Turn off everything that isn't actually changing during playback.
- Find any non-Normal / Additive / Mask blend modes on dynamic layers. Move them, replace them, or accept the cost knowingly.
- For text driven from data files, switch the relevant variables to Pattern Variable.
- For video assets, confirm they're encoded at project resolution and frame rate in H.264.
- Audit effects per layer. Cut anything redundant.
- Audit loops. Replace "keep-visible" loops with longer durations.
Test in VideoPro's Program Monitor — not just the Designer preview. The Designer renders on demand; the cache renders ahead. The two costs are different.
Define the variables a graphic exposes — the values that live data and operators will fill — and wire multiple data sources into a single layer.
A graphic with variables is one that other systems can drive. This chapter covers two design-time tasks: creating variables in a graphic so its text, scores, or images become live-fillable, and connecting more than one data source to the same layer when no single feed has every value you need.
- Create variables in graphics — use this when you need a graphic to accept live values instead of hardcoded text.
- Connect data from multiple sources to one graphic — use this when one Data Controller does not supply every value the layer needs.
- Design & customize graphics — section overview
- Play and update graphics — once variables exist, this is how you fill them at runtime.
When you customize graphics in the Designer, you can create variables for design layers that allow manual entry or data sources to display custom information in a graphic, including variables for text, colors, gradients, images/videos, looping media files, and live video sources. You can also create variables for data-driven design layers including polls, scoreboards, and data graphs.
- In VideoPro's playout interface, open a project and select a graphic layer in the Project List.
+
Tip: Want to create a new graphic? Open the Graphics Library panel and drag a design from the library to the Project List.
- Click Edit Graphic in the Preview panel. The graphic opens in the Designer. Variables are managed across a few tabs in the Properties panel: the Variables tab is the central list for object-level variable bindings, but style-fill variables are created on the Style tab and conductor/NTX-style controls live on the Special tab. Each section below points to the tab it uses.
+
+
Tip: To change the order of variables, drag the reorder button. The order is reflected in your Layer Properties panel.
+
- Create variables (see sections below).
Important: Click the green checkmark at the bottom of the Timeline panel to confirm any changes from the Designer.
- Select an object in the Designer's Workspace or Timeline.
- Click the Properties > Style tab.
- Select Color, Gradient, or Image/Video within a style element in Style Settings.
- Mark the Variable checkbox.
- If connecting to a data source, select it from the first dropdown below the checkbox. Otherwise leave it blank or set to None.
- In the dropdown to the right of the checkbox, select a variable name or enter your own.
+
+
Tip: If your graphic is already connected to a data source, the left dropdown shows that data source and the right shows its variable names.
- Image/video variables only: select a fit mode from the dropdown below the variable dropdowns:
+
- Fill — fills the bounding box, maintains proportions.
- Fit — fits inside dimensions without cropping, retains aspect ratio.
- Stretch — resizes to fit, may not maintain aspect ratio.
Note: Gradient variables cannot be translated.
- Create a variable as described above.
- In Properties > Style, mark Variable Translation in the 3D or 2D style layer section.
- Double-click the Value In field and enter the incoming value.
- Double-click the Value Out field and enter the value to display.
- Repeat for each translation.
- Select a text layer in the timeline.
- Click Properties > Variables.
- Mark Text Variable in Variable Settings.
- If connecting to a data source, select it from the left dropdown. Otherwise leave blank or None.
- In the right dropdown, select or create a variable name.
+
Tip: To create a new variable name, double-click the selected name, type a new one, and press Tab.
+
VideoPro can read incoming data and display alternate text. For example, in a hockey scoreboard, intermissions often arrive as 1.5 and 2.5 — you can translate those to "1st INT" and "2nd INT".
- Create a text variable first.
- In Properties > Variables, mark Text Variable Translation.
- Double-click Value In and enter the incoming value.
- Double-click Value Out and enter the value to display.
- Repeat for each translation.
+
+
Use data graph variables with text or shape layers to show a percentage or quantity that changes dynamically with incoming data.
- Select an object with a starting animation, transition, or keyframe.
+
Note: If the object isn't connected to a numeric data source (or is connected to a Facebook poll), the variable can only represent percentages by text or image.
- Click Properties > Special.
- In Properties > Special, set NTX Feature to Data Graph.
+
- Select a data source (or leave blank) and pick a variable name.
Live video variables link to a webcam or NDI-enabled camera.
- Select a layer. Confirm dimensions match the live video aspect ratio.
- Click Properties > Special.
- In Properties > Special, set NTX Feature to Live Video Variable.
- Enter a variable name.
+
After saving (green checkmark), select the video source from the Layer Properties panel in the playout interface.
A Media File variable plays a local media file — an animated GIF, a video, or a still image — looped on the layer as a live source. It differs from the image/video fill variable above: that one lives on the Style tab and binds a style element's fill, while a Media File variable is an NTX feature that drives the whole layer and runs on its own loop, independent of the title's timeline. It also differs from a Live Video Variable, whose source is a live camera or NDI input rather than a file.
- Select a layer.
- Click Properties > Special.
- In Properties > Special, set NTX Feature to Media File.
- Click Choose File next to Media File and pick the animated GIF, video, or image to play.
- Set Fit Mode — Design Default, Fill, Fit, or Stretch — for how the media scales into the layer.
- Enter a Variable Name.
The file you choose is the variable's design-time value. Like other variables, you can change it from the playout side — a Media File variable appears in the Live Values tab with an image/video picker, so an operator can swap the clip without opening the Designer.
A visibility variable is a layer that appears in a graphic only when data is present.
- Select an object.
- Click Properties > Variables.
- Mark Visibility Variable in Variable Settings.
- Select a data source (or leave blank) and pick a variable name.
+
Note: Image Variable and Visibility Variable are mutually exclusive on the same layer. Enabling Visibility Variable on the Variables tab disables the Image Variable control on the Style tab, and vice versa. To get visibility-controlled imagery, either use an Image Variable with a transparent fallback image, place the image on its own layer and put the Visibility Variable on that layer, or split the design so each behavior lives on a different layer.
After saving (green checkmark), the eyeball icon in the main playout UI lets you toggle the visibility variable on and off without opening the Designer.
A single layer can host more than one kind of variable, but some kinds are mutually exclusive. This matters when you build complex layers that mix text content, fill, and visibility behavior.
| Variable type | Where it lives |
|---|---|
| Text Variable | Properties > Variables. Binds the paragraph's string content. |
| Pattern Variable | Properties > Variables. A text variable with a per-character pattern mask, used for clocks and scoreboards. |
| Visibility Variable | Properties > Variables. Binds the layer's visible/hidden state. |
| Text Variable Translation | Properties > Variables. Translates incoming text values to designer-substituted text. |
| Image, Video, or Color Variable | Properties > Style, per style layer. Binds a style element's fill. |
| Data Graph Variable | Properties > Special. Scales a layer's geometry by a 0..1 value. |
| Live Video Variable | Properties > Special. Binds the layer's content to a live video input. |
| Media File Variable | Properties > Special. Plays a looping local media file (animated GIF, video, or image) as a live source on the layer. |
The following combinations are mutually exclusive:
- Text Variable and Visibility Variable — enabling one disables the other. A single text layer cannot bind both its string and its visibility to the same source.
- Visibility Variable is also disabled when the layer has an Image or Color Variable enabled in Properties > Style, or when the layer is set up for Object Following.
- In Properties > Special, under Special (NTX) Settings, the NTX Feature dropdown is the mutually-exclusive selector. Options are None, Play-through, Loop, Data Graph, Media File, and (on editions that include video input) Live Video Variable. A layer can use only one at a time. See Loop videos and animations in a graphic.
Note: Gradient variables cannot be translated. Color and image/video variables can be translated, and text variables can use a separate translation list.
Note: A small set of variable names is reserved by the engine: Duration, Position, and Scale (case-insensitive). If you try to use a reserved name, VideoPro shows a Reserved Name warning. Pick a different name.
The variable name you enter in the Designer becomes the binding key on the playout side. The Live Values tab and Data Controller mappings look variables up by this name.
If you rename a variable in the Designer after a Data Controller is already wired to it, the controller's binding silently breaks — VideoPro does not show a warning. Re-wire the controller after any rename.
Most VideoPro products can display data from multiple sources in one graphic, including sports databases, game clocks, news feeds, and more. Currently in VideoPro, when you first create an input with a Data Controller (like a JSON file for example) it automatically replaces the current Data Controller. But once all inputs are already created you will be given an option to combine them. Refer to the steps below to assign multiple data sources to the same graphic layer.
- In VideoPro's playout interface, open a project (if a project isn't already open) that includes a graphic that you want to connect to multiple data sources.
+
Tip: Want to create a new graphic? Open the Library panel and drag a design from the library to the Project List.
- Select your first data source (e.g., Google Sheets, Spreadsheet, JSON, XML, etc.) > Select new input.
+
+
You should see the type of selected data source register in the Layer Properties Panel but no file attached. If it prompts you to choose a file, you can choose again in a later step.
+
- Connect your second data source (e.g., Google Sheets, Spreadsheet, JSON, XML, etc.) > Select new input.
- Repeat for any additional data sources you want to connect to your graphic.
- Navigate to the Data Controller dropdown, then select the input file that is labeled and listed under New Input and select the file if prompted.
+
- This will prompt a dialog box asking if you would like to Combine, Replace, or Cancel. Select Combine.
+
- Select the second input you created and attach the file.
- Repeat for all additional data sources connected.
You should now see all of your data sources in the Show Links sidebar of the Preview Panel, ready to connect to your variables in the graphic. Each data source is also assigned a separate tab in the Layer Properties Panel.
- Open the list of variables connected through the data source by clicking the Link Data button in the Preview panel to view the data variables. (If the variables aren't visible, expand the controller's list.)
- Click and drag a variable onto an object in the graphic. Repeat this step for each variable that you want to include in the graphic.
Tip: To remove an input from a graphic layer, navigate to the Preview panel. Click the link data button, then right-click on the data source name and choose Remove input.
When you broadcast the graphic, data from all data sources is automatically updated just like any graphic that is connected to one data source.
Build graphics that animate themselves — crawls, rolls, and leaderboards — using VideoPro's Conductor system.
A Conductor is a tool that takes a group of elements in a graphic, makes multiple unique copies of them, and — depending on the type — animates those copies to produce a particular behavior, from crawls and rolls to animated leaderboards. The Crawl Conductor scrolls a ticker horizontally, the Roll Conductor scrolls credits vertically, and the Leaderboard Conductor renders a ranked, self-sorting list.
Build and tune each conductor type in the Designer:
- Crawl Conductor — use this when configuring a horizontal ticker.
- Roll Conductor — use this when configuring a vertical roll.
- Leaderboard Conductor — use this when configuring a ranked-list graphic.
Once a conductor is built, drive it with data at runtime:
- Crawls Controller — feed a crawl from a Tables source at runtime.
- Leaderboard Controller — feed a leaderboard from a Tables source at runtime.
A Crawl Conductor turns one designed item — a headline, a logo with text, a stock ticker entry — into a horizontally scrolling stream of items, each fed by a connected data source. As the conductor empties its queue, it asks the data source for the next row and recycles items off the screen.
You build a Crawl Conductor by wrapping one designed crawl item (a group of layers) in a conductor. The conductor then plays a stream of cloned items across the screen, asking your data source for new content as it goes.
- In VideoPro's playout interface, select the graphic in the Project List, then click the Edit Graphic button in the Preview panel to open the Designer.
- Build one crawl item — for example, a horizontal strip with a headline text, a logo, and a separator. Arrange the layers as the item should look as it crosses the screen.
- Select all the layers that make up the item, right-click in the canvas (or in the Timeline panel) and choose Create Conductor > Crawl. This combines the layers into one group and embeds the group in a Crawl Conductor.
+
+
If the Create Conductor menu is missing, your license doesn't include the Crawl conductor; check your entitlements with NewBlue support.
- Click on the conductor in the canvas to select it. The Properties panel's Crawl tab shows the conductor's design-time settings — speed, spacing, direction, and more.
Note: The conductor's item template is the group you wrapped. Edit anything in that group and every crawl item picks up the change.
When the conductor is built, commit your changes with the green checkmark and return to the playout interface. You connect the data source there, not in the Designer — see Drive a graphic with Tables: Row.
A Crawl Conductor's settings appear in two places:
- In the Designer, when you select the Crawl Conductor instance inside the title, the Properties panel shows a Crawl tab with all settings — including design-time-only fields like spacing and clipping that don't appear at playout time.
+
- In the playout main view, when you select the title that contains the Crawl Conductor, the title's Properties shows a Crawl tab with the runtime-tunable subset (speed, reverse direction, repeat behavior, motion blur).
+
Fields marked (Designer only) below appear only in the Designer view.
The name your data source uses to address the conductor. The default is Crawl. If you rename it to, for example, Headlines, your data source must address conductor parameters as Headlines.Speed instead of Crawl.Speed. Item variable names (the columns in your data) are not affected by the conductor name.
Give each conductor a unique name when a graphic holds more than one of the same type — that's how their data and parameters stay separate. You set the name here in the Designer; in the playout Properties it's read-only.
Crawl velocity. Default 10.00. Range 0–100.00, step 0.10. Higher values are faster — 10 is slow, 100 is very fast.
When on, the crawl moves left-to-right instead of the default right-to-left. Default off.
Distance between consecutive crawl items, expressed as a fraction of the project frame's width. Default 0.05 (5% of width). Range -0.05 to 1.00, step 0.05.
Negative values let consecutive items overlap by up to 5% of the width.
When on, each crawl item plays its in-animation as it first enters the screen. Default off. Without this, items just slide in.
When on, each crawl item plays its out-animation as it leaves the screen. Default off. This is usually undesirable when the crawl items are long. Note that when the whole graphic animates out, the crawl plays its out-animation then as well.
When on, the crawl is clipped to the conductor's bounding box. Default off. Items outside the box are not drawn.
When on, the crawl re-uses the most recent item value if the data source has nothing new to send — the crawl keeps moving with whatever it last received. When off, the crawl pauses and waits for fresh content.
Default on. Turn off when you'd rather have an empty crawl than stale information.
Shutter angle in degrees applied to the crawl's motion blur. Default 180 (cinema standard). Range 0–360, step 1.
- 0 — no motion blur
- 180 — cinema standard
- 360 — maximum blur
Motion blur only renders when Motion Blur Quality is greater than 0.
Iteration count for the motion-blur sampler. Default 0 (off). Range 0–6, step 1.
Higher values produce smoother blur at higher render cost. Leave at 0 unless the crawl is fast enough to show stepping.
- Drive a graphic with Tables: Row — the most common data source for a Crawl Conductor.
- Crawls Controller — General-menu variant of the same controller, also commonly paired with this conductor.
- Roll Conductor — the vertical-axis equivalent
- Leaderboard Conductor
A Roll Conductor turns one designed item — a credit line, a name and title, a roster entry — into a vertically scrolling stream of items, each fed by a connected data source. Items roll up the screen (or down, if you reverse direction), and the conductor asks the data source for the next row as the queue drains.
A Roll Conductor is the vertical-axis sibling of the Crawl Conductor. It shares the same item-pool mechanics; only the scroll axis differs.
You build a Roll Conductor by wrapping one designed item (a group of layers) in a conductor. The conductor then rolls a stream of cloned items vertically, asking your data source for new content as it goes.
- In VideoPro's playout interface, select the graphic in the Project List, then click the Edit Graphic button in the Preview panel to open the Designer.
- Build one item — for example, a row of credits with a name on the left and a role on the right, or a vertical strip with a logo and a headline. Arrange the layers as the item should look as it rolls by.
- Select all the layers that make up the item, right-click in the canvas (or in the Timeline panel) and choose Create Conductor > Roll. This combines the layers into one group and embeds the group in a Roll Conductor.
+
If the Create Conductor menu is missing, your license doesn't include the Roll conductor; check your entitlements with NewBlue support.
- Click on the conductor in the canvas to select it. The Properties panel's Conductor tab shows the conductor's design-time settings — speed, spacing, direction, and more.
Note: The conductor's item template is the group you wrapped. Edit anything in that group and every rolled item picks up the change.
When the conductor is built, commit your changes with the green checkmark and return to the playout interface. You connect the data source there, not in the Designer — see Drive a graphic with Tables: Row.
A Roll Conductor's settings appear in two places:
- In the Designer, when you select the Roll Conductor instance inside the title, the Properties panel shows a Conductor tab with all settings — including design-time-only fields like spacing, animation, and clipping that don't appear at playout time.
+
- In the playout main view, when you select the title that contains the Roll Conductor, the title's Properties shows a Roll tab with the runtime-tunable subset (speed, reverse direction, repeat behavior, motion blur).
+
Fields marked (Designer only) below appear only in the Designer view.
The name your data source uses to address the conductor. The default is Roll. If you rename it to, for example, Credits, your data source must address conductor parameters as Credits.Speed instead of Roll.Speed. Item variable names (the columns in your data) are not affected by the conductor name.
Give each conductor a unique name when a graphic holds more than one of the same type — that's how their data and parameters stay separate. You set the name here in the Designer; in the playout Properties it's read-only.
Roll velocity. Default 10.00. Range 0–100.00, step 0.10. Higher values are faster — 10 is slow, 100 is very fast.
When on, the roll moves top-to-bottom instead of the default bottom-to-top. Default off.
The default direction is bottom-to-top, the conventional credits direction.
Distance between consecutive roll items, expressed as a fraction of the project frame's height. Default 0.05 (5% of height). Range -0.05 to 1.00, step 0.05.
Negative values let consecutive items overlap by up to 5% of the height.
When on, each roll item plays its in-animation as it first enters. Default off.
When on, each roll item plays its out-animation as it leaves. Default off.
When on, the roll is clipped to the conductor's bounding box. Default off. Items outside the box are not drawn.
When on, the roll re-uses the most recent item value if the data source has nothing new to send — useful for keeping a roll cycling on the same final row. When off, the roll pauses and waits for fresh content.
Default off. (Note: this is the opposite of the Crawl Conductor's default — a roll has a sense of completion that a crawl doesn't.) Turn on when you want the last row to keep cycling.
Shutter angle in degrees applied to the roll's motion blur. Default 180 (cinema standard). Range 0–360, step 1.
- 0 — no motion blur
- 180 — cinema standard
- 360 — maximum blur
Motion blur only renders when Motion Blur Quality is greater than 0.
Iteration count for the motion-blur sampler. Default 0 (off). Range 0–6, step 1.
Higher values produce smoother blur at higher render cost. Leave at 0 unless the roll is fast enough to show stepping.
- Drive a graphic with Tables: Row — the most common data source for a Roll Conductor.
- Crawls Controller — General-menu variant of the same controller.
- Crawl Conductor — the horizontal-axis sibling
- Leaderboard Conductor
A Leaderboard Conductor turns one designed row into a fixed list of N rows that share the same template. Each row is fed by a connected data source — usually a Tables sheet — and rows animate to new positions when the data tells them to re-rank. Use a Leaderboard whenever you need a scoreboard, a points table, or any "top N" list where every slot is always on screen.
A Leaderboard Conductor is not the same thing as the Leaderboards menu family in the Data Controller. The Data Controller publishes rows; this article is about the graphic-side container that receives them.
You build a Leaderboard Conductor by wrapping one designed row (a group of layers) in a conductor. The conductor then clones the row into N copies, lays them out, and lets a data source fill each copy.
- In VideoPro's playout interface, select the graphic in the Project List, then click the Edit Graphic button in the Preview panel to open the Designer.
- Build one row of the leaderboard. Add the design layers you need — a position number, a player or team name, a score, a logo — and arrange them as the row should look.
- Select all the layers that make up the row, right-click in the canvas (or in the Timeline panel) and choose Create Conductor > Leaderboard. This combines the layers into one group, embeds the group in a Leaderboard Conductor, and clones it into the default number of rows, laid out vertically below the original.
+
If the Create Conductor menu is missing, your license doesn't include the Leaderboard conductor; check your entitlements with NewBlue support.
- Click anywhere on the conductor in the canvas to select it. The Properties panel's Conductor tab shows the conductor's design-time settings — row count, layout, and animation.
Note: The conductor's row template is the original group you wrapped. If you change anything in that group — add a layer, change a font — the change applies to every cloned row. To redesign a single row in isolation, ungroup the conductor first.
When the conductor is built, commit your changes with the green checkmark and return to the playout interface. You connect the data source there, not in the Designer — see Tables: Block Controller.
A Leaderboard Conductor's settings appear in two places:
- In the Designer, when you select the Leaderboard Conductor instance inside the title, the Properties panel shows a Conductor tab with all settings — including design-time-only fields like Max Rows, layout spacing, and bounding-box options that don't appear at playout time.
+
- In the playout main view, when you select the title that contains the Leaderboard Conductor, the title's Properties shows a Leaderboard tab with the runtime-tunable subset (Row Count, Move Duration, Motion Curve, Play Delay, Motion Blur).
+
Fields marked (Designer only) below appear only in the Designer view.
The name your data source uses to address the conductor. The default is Leaderboard. If you rename it to, for example, TopScores, your data source must address its conductor parameters as TopScores.Row Count instead of Leaderboard.Row Count. Per-row variable names (1.Name, 2.Score, etc.) are not affected by the conductor name.
Give each conductor a unique name when a graphic holds more than one of the same type — that's how their data and parameters stay separate. You set the name here in the Designer; in the playout Properties it's read-only.
How many rows the leaderboard displays. Default 4. Range 1–40. Effective row count is capped by Max Rows below.
If your data source pushes more rows than Row Count, the extra rows are silently dropped. If it pushes fewer, the extra slots stay empty.
Changing Row Count rebuilds the conductor and the per-row variables (1., 2., …, N.*) the data source can address.
A design-time ceiling on Row Count. Default 6. Range 1–20. The leaderboard will never display more than Max Rows rows even if Row Count is set higher.
Vertical distance between rows when Use Bounding Box is off. Default 0.100. Range -1.000 to 1.000, step 0.001.
The value is a fraction of the project frame's height. Negative values let rows overlap.
When on, rows are distributed to fill the conductor's bounding box vertically and Vertical → Spacing is ignored. Default off.
Horizontal offset between rows. Default 0.000. Range -1.000 to 1.000, step 0.001.
Use this when you want the rows to step diagonally (e.g., a stair-step podium layout). Most leaderboards leave this at 0 and rely solely on Vertical → Spacing.
When on, rows are distributed to fill the conductor's bounding box horizontally and Horizontal → Spacing is ignored. Default off.
Seconds to animate a row to its new slot when the data source pushes a re-rank. Default 1.00. Range 0.00–10.00, step 0.10.
Set to 0 for instant re-ranking with no animation. The animation runs only while the title is actively playing — preview and snapshot frames always snap to the final position.
Easing curve applied to row movement when Move Duration > 0. Default Smooth. Choices:
- Instant — no easing
- Smooth — accelerates and decelerates (S-curve)
- Linear — constant speed
- Accelerate — starts slow, ends fast
- Decelerate — starts fast, ends slow
Per-row stagger on play-in. Default 0.1000. Range 0.0000–1.0000, step 0.001.
Row 1 starts at the title's play-in time; row 2 starts Play Delay seconds later; row N starts (N-1) × Play Delay seconds later. The title's play-out start is automatically pushed back by (N-1) × Play Delay so the last row gets a full lifetime.
Set to 0 for all rows to play in simultaneously.
Shutter angle in degrees applied to motion blur during row reorder animation. Default 180. Range 0–360, step 1, no decimals.
- 0 — no motion blur
- 180 — cinema standard
- 360 — maximum blur
Motion blur only renders when Motion Blur Quality is greater than 0.
Iteration count for the motion-blur sampler. Default 0 (off). Range 0–6, step 1.
Higher values produce smoother blur at higher render cost. Leave at 0 unless reorder animation is fast enough that you can see stepping.
Each row instance has a hidden variable named Order (1.Order, 2.Order, …). Your data source writes a sortable value (typically a number) into each Order variable, and the conductor sorts rows by ascending Order value, animating each row to its new slot. Without Order values the row order is undefined.
- Tables: Block Controller — the most common data source for a Leaderboard Conductor.
- Leaderboard Controller — Sports-menu variant of the same controller.
- Crawl Conductor
- Roll Conductor
Bring designs from Photoshop, Illustrator, and After Effects into VideoPro, with the data hooks they need to stay drivable from live sources.
This chapter is for design teams that already produce graphics in Adobe tools and want to play them on air through VideoPro. Photoshop (.psd) and Illustrator (.eps) imports are one-shot — the file lands in the Designer as a static graphic. After Effects has two distinct paths: native export bakes the composition into a VideoPro title, while live render via Harmonizer keeps the .aep live and renders frames during the show. Pick the After Effects approach before you start; the prep work is different for each.
- Import a Photoshop file — bring a layered
.psdinto the Designer as a single graphic that retains the original layer stack. - Import vector artwork as EPS — bring a vector logo or shape in as an editable outline that scales, extrudes, and styles like a native shape layer.
- Which After Effects approach to use — start here to choose between native export (Approach A) and live render via Harmonizer (Approach B).
- Prepare After Effects designs for import — use this before you touch VideoPro; it covers what an importable AE project needs.
- After Effects: native export with the NewBlue plugin (Approach A) — export the composition as a native VideoPro title; After Effects is out of the loop after export.
- After Effects: live render via Harmonizer (Approach B) — keep the
.aep(or.mogrt) live and let After Effects render frames during the show. - Import an After Effects design — use this when the AE project is ready and you want it inside VideoPro.
- Link data to After Effects designs — use this after import to wire variables to live data.
- Variables & linked data — how variables work in native VideoPro graphics.
- Play and update graphics — once the AE design has variables, drive it the same way as any other graphic.
Bring a layered Adobe Photoshop file (.psd) into the Designer as a single graphic that retains the original layer stack.
This article covers what the import does, the gotcha around PSD text layers, and the layer-by-layer behavior to expect after the file lands in the Designer.
- PSD import is a Designer feature. The menu item appears only on editions that include the import-PSD entitlement; lower-tier editions do not see it.
- Hide any layer you do not want in the result before saving the PSD. Hidden PSD layers are skipped on import.
- If a layer needs editable text after import, see the Edit text after import section below — PSD text is not preserved as editable text.
- Open the graphic in the Designer.
- Choose File > Import > PSD.
- In the Choose Photoshop Document dialog, select a
.psdfile and click Open.
The cursor switches to a wait state while the file parses. There is no progress bar; large PSDs may pause briefly before the layers appear on the canvas.
After import, the Designer scales the imported graphic to fit the canvas with aspect ratio locked.
Each visible PSD layer becomes a positioned layer inside one Designer paragraph object. The original stacking order is preserved.
The whole import lands as a single paragraph on one timeline track. This is the most important thing to know about PSD import: it is not one timeline track per PSD layer. A 20-layer PSD becomes one timeline element containing 20 stacked layers.
Practical consequences:
- Moving, trimming, or animating the paragraph on the timeline affects all PSD layers together.
- You cannot shift one PSD layer to a different time on the timeline without re-architecting the graphic.
- Per-layer style and position can still be edited inside the paragraph.
If you need each PSD layer on its own timeline track, build the equivalent stack directly in the Designer instead of importing.
[IMPORTANT]
PSD text layers are imported as rasterized shapes, not as editable text. The font, color, and content of a PSD text layer are baked into the imported image and cannot be edited as text after import.#
This applies to every PSD text layer regardless of font or styling. The Designer recognizes that the layer was text in Photoshop but renders it as a flat shape.#
To get editable text on top of a PSD background:
- In Photoshop, hide the text layer before saving the
.psd. - Import the PSD into the Designer.
- Add a new text layer in the Designer at the position where the Photoshop text would have been.
- Style and animate the new text layer as you would any native text.
Photoshop layer effects (drop shadow, glow, stroke, blending modes set on the PSD layer) are flattened into the rasterized pixel data on import. The Designer cannot retrieve them as editable effects.
If you need a Designer effect on a layer that was a Photoshop effect, remove the effect from the PSD before saving and apply the equivalent effect in the Designer's Effects tab after import.
.psb(large-document) files are not supported by the import filter. Save as.psdfirst.- Hidden PSD layers are not imported.
- Smart Objects and adjustment layers are flattened by the parser.
- If a PSD has no layered structure (a flat, single-image file), there is nothing to import as separate layers.
- Import vector artwork as EPS — for logos and shapes that need to stay editable as vectors.
- Import designs from other tools — the full chapter index.
Bring a vector logo or shape into the Designer as an editable vector outline that can be scaled, extruded, and styled like a native shape layer.
This article covers the EPS import path, the .ai limitation, and how Illustrator users should prepare files for import.
[IMPORTANT]
Adobe Illustrator `.ai` files are **not** supported. The file picker accepts `.eps` only. To import Illustrator artwork, export it as EPS from Illustrator first.#
- In Illustrator, choose File > Save a Copy (or File > Export).
- Set the format to Illustrator EPS (
.eps). - In the EPS Options dialog, accept the defaults and click OK.
- Use the resulting
.epsfile for the import below.
Renaming a .ai file to .eps is not supported and may produce unpredictable results.
- Open the graphic in the Designer.
- Choose File > Import > Vector.
- In the Choose Vector dialog, set the filter to Vector Files (
.eps)*, select your file, and click Open.
The cursor switches to a wait state while the file parses. There is no progress bar; complex vector files with thousands of paths may take a few seconds.
After import, the EPS lands as a CUSTOM-type shape layer. The Designer scales it to fit the canvas with aspect ratio locked.
Each EPS file imports as a single shape layer with the original vector outlines preserved. The outlines stay as vector data, not as a rasterized image, so the shape stays crisp at any scale and can be extruded into 3D.
Because the result is a native shape layer, you can:
- Apply any Style tab options — fill, stroke, gradient, shadow.
- Extrude the shape for 3D depth using the 3D Face style controls.
- Animate the shape with keyframes the same as any other layer.
If your EPS contains multiple shapes or paths, they import as multiple sub-shapes inside a single shape layer. Per-element selection inside the imported shape is not exposed in the Style tab.
If you need to manipulate each element separately, split the artwork in Illustrator (export each element as its own EPS) and import each file as a separate shape layer.
If your EPS came from an Illustrator file that contained live text, convert the text to outlines in Illustrator before exporting:
- In Illustrator, select the text.
- Choose Type > Create Outlines.
- Save or export the file as EPS.
After this conversion, the text becomes vector outlines and survives the import as shape geometry. It is no longer editable as text. To get editable text on top of the imported vector, add a Designer text layer after import.
.aifiles are not supported. Use the export-to-EPS step above..svgfiles are not exposed in the import filter.- Multi-page EPS files import only as a single combined shape.
- Raster content embedded in an EPS (an EPS that was just a wrapped JPEG, for example) does not produce vector outlines. Use File > Import > Image for raster artwork instead.
- Import a Photoshop file — for layered raster artwork from Photoshop.
- Import designs from other tools — the full chapter index.
VideoPro can now directly import both AEP and MOGRT files with all animations, effects, and expressions intact. While the import functionality is engineered to ingest virtually any After Effects design, here are a few tips and recommendations to achieve the best integration and performance in VideoPro. This feature is only available in VideoPro Broadcast.
Important: Making your After Effects compositions as short as possible, while preserving the timing of your intro/outro animations, will result in the most efficient rendering during import.
Therefore, it is recommended that you remove any sections of the composition where the graphic is static. For more information see Setting a Pause Point.
There are advantages to working with either file type. So, choosing which is preferable largely depends on your workflow and Data Controller needs. Following are some of the advantages and disadvantages of working with each.
Advantages
- Many compositions can be imported from a single project.
- Text properties are imported as VideoPro variables with no additional setup.
- No additional setup or export is required.
Disadvantages
- Types of variables supported in VideoPro are limited to text and images.
- If the
.aepcontains external media, it will not automatically be transported with the file.
Advantages
- All properties that are set up in Essential Graphics can be edited directly in VideoPro.
- Many types of VideoPro variables are supported, such as colors and visibility.
- Any external media in the composition is packaged within the
.mogrt, so migrating graphics is very simple.
Disadvantages
- Requires setup and export from AE.
In conclusion:
- AEP provides a quick, hassle-free workflow if you only need to update text from VideoPro and especially when graphics only contain elements generated in After Effects.
- MOGRT offers greater versatility and is likely necessary for more complex graphics, such as sports scoreboards. Additionally, it has added convenience/reliability when migrating graphics that reference external media.
Important: Please make sure that your AEP compositions are saved with the current version of After Effects. Also, please save your AEP compositions in the same folder as your VideoPro project if you would like to re-open the project without having to re-import the AEP files.
- Text
- Image
- Select your image layer in your AE timeline.
+
- Right-click on the current label of the layer > choose Rename.
+
- Type in the prefix
tlvar_to the beginning of the label.
+
- Then proceed to the VideoPro interface to import your design.
- Right-click in the Graphic Layers Panel or go to the File menu > Import > After Effects.
+
- Choose the
.aepor.mogrtfile containing the newly labeled graphic and double-click or select Open. - After the import and render has completed within VideoPro, select Choose image in the Live Values tab of the Layer Properties panel to change.
+
Your new image will now replace the image imported with the After Effects design. You can also use the Send to Cache function to have several instances of the same graphic with different images that can be ready for broadcast. See Pre-cache graphics before a show.
Important: When creating a clock in your graphic, the following is a workaround in case it shows differently in VideoPro. Your text box containing a clock should be just enough to fit your font. If not properly sized, sub-optimal spacing or shifting can occur. Your custom clock should now be set to play with controls located in the Clocks tab in the Layer Properties panel.
Motion Graphics templates (.mogrt) serve as After Effects' native method to encapsulate AE projects as templates that can be directly edited in Premiere Pro. These MOGRTs can also be imported to VideoPro and directly manipulated in the same fashion. Learn more about Motion Graphics templates here.
Important: Please make sure that your AEP compositions are saved with the current version of After Effects. Also, please save your MOGRTs in the same folder as your VideoPro project if you would like to re-open the project without having to re-import the MOGRTs.
- Source Text
- Image
- Color
- Media (Image, Video, PSD & Illustrator files)
- Check box Expression Control
- Anchor Point
- Position
- Opacity
- Scale
- Rotation
Additionally, you can prepare/export MOGRTs in order to update a broader range of the graphic's properties within VideoPro.
- Open the Essential Graphics panel in After Effects by going to Window > Essential Graphics.
+
- Choose the composition to export from the dropdown.
+
- Click the Solo Supported Properties button.
+
- Drag the supported properties into the Essential Graphics panel.
+
- We recommend that you group your Layer Properties by going to the Add Formatting dropdown > Add Group.
+
- Drag and drop all the properties for that layer into the group. Repeat as necessary.
- After all supported properties have been added and grouped, click the Export Motion Graphics Template button.
When you are sending a graphic on-air, it is essential that you set up a pause point so the graphic can stay live indefinitely, before you choose to animate it out. There are several methods to establish a custom Pause frame for your graphics. Additionally, VideoPro can set an automatic pause point for you directly in the middle point of your duration.
- Drag in a Composition marker by clicking and dragging to the desired location from the top right of your timeline.
- Label the marker "Pause" by double-clicking
+
+
or by right-clicking > Settings
+
+
and typing Pause in the Comment box.
+
- Go to Composition > Responsive Design - Time > Create Intro.
+
- Drag the right side of the shaded region to cover all of the Intro animations.
+
- Then go to Composition > Responsive Design - Time > Create Outro.
- To expand the Outro you will need to click and drag, then expand the right side of the shaded region to cover all of the Outro animations.
+
VideoPro will establish a Pause Point in your composition in the following order of priority:
- A Composition Marker labeled "Pause" (not case-sensitive).
- If the above is not found, the frame before the "Outro" region.
- If none of the above are found, the frame after the "Intro" region.
- If none of the above are found, the midpoint of the composition's duration.
Note: When VideoPro automatically establishes a Pause Point in this way, the imported layer's duration will be matched to the comp's original duration in the Layers list. This will cause the graphic to play for the full duration of the imported comp and immediately go off-air. You can choose to have the graphic stay on-air indefinitely, at the generated Pause Point, by setting the duration to 00;00.
Importing After Effects MOGRTs and compositions into your project lets you tap into your existing motion graphics and the know-how from creating them with After Effects, making content development a breeze. This feature is only available in VideoPro Broadcast.
Note: After Effects opens as a background application — that is the editing tool for the composition. Once you save changes to the .aep and VideoPro detects the source file has changed, VideoPro prompts you to Refresh the imported title so the new render takes effect. Live-during-show edits are not supported; expect a refresh prompt between rounds of edits.We have streamlined your workflow to import both .aep or .mogrt files directly into VideoPro. Use the Live Values and Transform tabs in the Properties panel to make any adjustments needed to fit your broadcast. The header of the Live Values tab shows the current update mode — in Auto Update, committed edits update the on-air title immediately; in Manually Update, VideoPro holds your edits until you send them with the update buttons, without or with the update animation.
Note: By default, your composition's resolution will be scaled to your VideoPro project settings. The frame-rate will be modified to match the output settings.
Important: Before importing, please save your AEP and MOGRT compositions in the same folder as your VideoPro project if you would like to re-open the project without having to re-import the files again.
- Open your project in VideoPro.
- Go to File > Import > After Effects
+
+
or right-click in the Layers panel > Import > After Effects.
+
- If your After Effects project contains multiple compositions, you will be prompted to select which composition you wish to import as an AE graphics layer.
Note: Since your MOGRT may have nested comps within it, you will need to choose the specific composition associated as well.
To support AE workflows, we orchestrate a running instance of After Effects on your machine.
We establish a communication channel with an Extension Panel — New Blue Harmonizer — running inside of After Effects to make this happen.
If we can't make a connection immediately, the following dialog will appear. It makes several attempts to make a connection before giving up.
Tip: If After Effects opens, but your project does not load automatically, and/or you receive error messages such as these:
If we can't connect to AE, it's likely because the extension panel isn't running.
We tell After Effects to automatically load our extension. Unfortunately, if it wasn't previously docked it will unload after it loads. This bug was introduced by a recent version of After Effects.
To fix the connectivity issue:
- Manually open the project in After Effects.
- Select Window > Extensions > New Blue Harmonizer.
+
- Dock the floating New Blue Harmonizer window to AE's main window or minimize the panel, but please make sure it stays open to ensure successful import and operation within VideoPro.
Your After Effects design will now load as a graphics layer and begin rendering in After Effects for playback in VideoPro. Please refer to the Live Values tab to directly modify properties of the layer. You can also connect a Data Controller to the imported layer by selecting it in the Layers list and clicking Select a data source. Then you may link data to any supported variables in the graphic by clicking Link Data in the Preview panel.
Important: If you run into any issues with your graphic fully rendering upon import, you may want to clear your cache in After Effects.
- Close VideoPro and open the After Effects interface.
- Navigate to Edit > Preferences > Media and Disk Cache.
- Choose Empty Disk Cache for optimal results. You also have the option of increasing your Cache size.
+
In the Properties panel, there is a Transform tab to provide precise control of your After Effects layers. There are four primary controls in the tab:
Note: Layer transformations can also be performed directly in the Preview panel.
- Position Offset (px) — Specify the distance (in pixels) that the layer will be offset from its default position. The first value represents the X (horizontal) axis and the second is Y (vertical).
- Scale % — Control the scale of the layer when Scale to fit project dimensions is disabled. The height and width values are linked by default, but they can be unlinked by clicking the link icon.
- After Effects Layout — Scale to fit project dimensions — This setting is enabled by default and will automatically scale your After Effects compositions to fit VideoPro's resolution settings. It can be disabled if you wish to scale or position from the native composition resolution. This can be useful if a composition was created at a lower resolution for a small element such as a logo or bug.
- Reset Values — Return all values to their defaults.
We have added an option to show all of your editable properties during broadcast at the top of the Live Values tab. Properties available to edit live include:
- Text
- Image
- Color
- Checkbox Control
The Live Values tab allows you to edit variables to a single instance of the graphic layer. MOGRT properties that will be available to edit live are listed above in the Use the Show All Variables toggle section. Any edits done in this tab will continuously update your graphic layer as variables are customized.
- Select the After Effects graphic layer you wish to update from the Project List.
- The Layer Properties panel will open, which includes the Live Values tab and all variables that are available for the selected graphic layer.
+
- Toggle the lock next to the property to enable editing when live. This will also allow you to Send to Cache to save in your Values Grid for managing on-air.
+
+
Note: Only dynamic variables can be sent to the Values Grid. When the lock is toggled open, then your property is now rendered as static and cannot be edited live or sent to the Values Grid.
- Whenever you update a property with new information, the graphic layer starts rendering and displays the change when it is fully rendered.
- You can change as many of the dynamic properties on that graphic as desired and send to the Values Grid to be played live without re-rendering.
+
Tip: Changes made to your properties while on air default to Auto Update, as indicated by the mode button in the top right of the panel. Switch it to Manually Update to hold your edits, then send them with the update buttons — without or with the update animation.
For more information on operating your Values Grid, see Values Grid.
Important: If you used our pre-cache workflow by saving a Project + cache within VideoPro and are now broadcasting on a machine that does not have After Effects installed on it, then the properties will not be available to update live.
VideoPro gives you the ability to link data to your After Effects designs with the same process as your Designer graphics. If you would like more specific detail on each Data Controller please see the Connect Data to Graphic Layers section. See below for a general workflow to connect a data source. This feature is only available in VideoPro Broadcast.
You may link any of VideoPro's Data Controllers to your After Effects designs. For a list of the types of variables that are supported in .aep and .mogrt layers, please refer to Preparing Your After Effects Designs for Import.
- Import your After Effects design into VideoPro.
- Select a Data Controller under the Data Controller column in your Graphic Layers panel.
+
- When Data Controllers are added to a layer, the Data Controller will open in its own tab in the Layer Properties panel and data fields become available for linking. You now have the option to view data in a single column:
+
+
or a single row:
+
- Select Link Data in the Preview panel to display the various data fields from the Data Controller.
+
- Select a data field from the list and drag it to a design element in the preview area.
+
Or: right-click the data field from the list and select a named design variable.
+
+
Note: If your graphic has nested comps, the bounding boxes for the various properties in the graphic may not be drawn correctly. In this event, we recommend using the right-click workflow.
- After changes are rendered and the Preview button is available, test to ensure the graphics are connected correctly.
Your graphic will automatically render and display the newly connected data. You may wish to use our pre-cache workflow to limit on-air rendering. For more information, see Pre-cache graphics before a show.
Tip: Double-clicking an object in the Preview panel will reset all scale and position values to their defaults.
VideoPro ships two ways to use After Effects designs:
- Approach A — native export: a NewBlue plugin inside After Effects exports the composition as a native VideoPro title. After export, After Effects is out of the loop.
- Approach B — live render via Harmonizer: VideoPro imports the
.aepor.mogrtdirectly and asks After Effects to render frames during the show. After Effects stays in the loop.
Both paths are supported. Pick per project based on how the graphic will be used, who owns the design, and what the playback machine looks like.
Use Approach A (native export) when:
- The design is final and not changing.
- You want the best playback performance and no After Effects process during the show.
- The playback machine does not have After Effects installed.
- You want to ship the title as a self-contained VideoPro graphic that can also be edited in the Designer.
Use Approach B (live render) when:
- The design is still iterating in After Effects.
- The composition uses After Effects features that do not survive the native export.
- Your team's workflow keeps After Effects open during production and you want the latest version on air without re-exporting.
| Question | Approach A — native export | Approach B — live render |
|---|---|---|
| Does After Effects run during the show? | No. | Yes. |
| What gets imported into VideoPro? | A baked, native title file. | The .aep or .mogrt itself, live-linked. |
| Can I edit the result in the Designer? | Yes — it is a native graphic. | No — frames come from After Effects. |
| Updating the design after import | Re-export from After Effects, then re-import. | Save the .aep; VideoPro detects the change and prompts you to Refresh the imported title. |
| After Effects required on the playout machine? | No. | Yes, unless pre-cached. |
| Best for | Final, shipped designs. | In-production designs. |
You can combine both approaches in the same VideoPro project. Use live render for graphics that are still in flux and native export for the ones that are locked. There is no project-level switch — each title carries its own approach based on how it was added.
- For native export, see After Effects: native export with the NewBlue plugin (Approach A).
- For live render, see After Effects: live render via Harmonizer (Approach B).
- For composition preparation that applies to both, see Prepare After Effects designs for import.
Use the NewBlue After Effects exporter plugin to turn an After Effects composition into a native VideoPro title. After export, the title is a normal VideoPro graphic with Designer-style layers, and After Effects is no longer needed at playback time.
This is the legacy export path. For the alternative — keeping the .aep live and rendering frames from After Effects during the show — see After Effects: live render via Harmonizer. To decide between the two, see Which After Effects approach to use.
Choose native export when:
- The design is final and is not going to change in After Effects.
- You want the best playback performance — no After Effects process running during the show.
- You want to bind VideoPro variables natively, edit further in the Designer, or open the result on a machine that does not have After Effects installed.
- You want to ship the title as a self-contained VideoPro graphic.
This approach bakes the After Effects composition into a native title. After export, edits happen in the Designer or by re-exporting from After Effects.
- Adobe After Effects, installed on the design machine.
- The NewBlue After Effects exporter plugin (
.aex), installed in your After Effects plugins folder. - A VideoPro install on the same machine. The exporter plugin reads VideoPro's installed engine to bake the title.
The exporter plugin is distributed separately. Install it into the standard After Effects plugins folder before opening After Effects.
- In After Effects: open your composition and run the NewBlue export action. The plugin walks the composition, converts each After Effects layer into a VideoPro scene object, and writes a VideoPro title file. While the export runs, After Effects shows the progress dialog Exporting to NewBlue Titler.
- In VideoPro: open the exported title in the Designer, or add it to a project from the Library. The title behaves like any other VideoPro graphic.
- Edit further (optional): open the exported title in the Designer to refine layers, change styles, or bind variables to Data Controllers.
After the title is in VideoPro, After Effects is out of the loop. The title can run on any machine with VideoPro installed; After Effects does not need to be present at playback.
Most of the preparation guidance for After Effects designs applies whether you export natively or use the live-render path. See Prepare After Effects designs for import for:
- Keeping compositions short so the export is efficient.
- Naming image layers with the
tlvar_prefix to expose them as variables. - Setting a Pause Point with a composition marker or Responsive Design intro/outro regions.
The same preparation produces a clean export on this path.
Once the exported title is in VideoPro, treat it as a native graphic:
- Open it in the Designer to adjust layers, styles, or animation.
- Link it to a Data Controller in the playout the same way as any other native graphic.
- Save it to the Library as a preset.
For linking data, the workflow is the same as for any native graphic — pick the layer in the playout, choose a Data Controller, and drag fields onto the design.
If you change the composition in After Effects, re-run the export to produce a new title file. Native export does not maintain a live link back to the .aep; the VideoPro title is a snapshot of the composition at export time.
If a graphic still needs frequent updates from After Effects, switch to the live-render approach instead.
- After Effects: live render via Harmonizer (Approach B) — keep the
.aeplive during the show. - Which After Effects approach to use — pick between native export and live render.
- Prepare After Effects designs for import — composition guidance shared across both approaches.
Import an After Effects project (.aep) or Motion Graphics Template (.mogrt) directly into VideoPro and let After Effects render frames live during the show. The composition stays an After Effects file; VideoPro drives it as if it were a native title and exposes text properties as variables.
This is the current, live-render path. For the alternative — baking the composition into a native VideoPro title and leaving After Effects out of the loop — see After Effects: native export with the NewBlue plugin. To decide between the two, see Which After Effects approach to use.
Choose live render when:
- The design is still iterating in After Effects and you want the latest version on air without re-exporting.
- The composition uses After Effects features that do not survive the native export.
- Your team's workflow keeps After Effects in the loop during production.
This approach is available in VideoPro Broadcast.
- Adobe After Effects, installed on the playout machine.
- The NewBlue Harmonizer extension panel, installed in After Effects.
- A VideoPro Broadcast license.
After Effects runs in the background during the show, rendering frames on demand. It must stay running while the imported title is in use.
VideoPro talks to After Effects through the Harmonizer extension panel that runs inside After Effects. When you import an .aep or .mogrt:
- VideoPro discovers the running Harmonizer panel.
- The composition path is sent to After Effects, which loads the project.
- VideoPro requests frames; After Effects renders them and ships them back.
- Text properties in the composition are auto-exposed as VideoPro variables on the title.
The .aep is not converted into a native title. It stays a live After Effects file, and frames come from After Effects at playback. Close After Effects and the title can no longer render new frames.
[IMPORTANT]
Save the `.aep` or `.mogrt` in the same folder as the VideoPro project file. Re-opening the project later relies on the saved reference path to find the After Effects file.#
- Open your project in VideoPro.
- Choose File > Import > After Effects, or right-click in the Project List and choose New > After Effects.
- In the Select Motion Graphics File dialog, pick the
.aepor.mogrtand click Open. - If the project contains multiple compositions, select the composition to import.
The title appears in the Project List. On first import, After Effects opens in the background and the Harmonizer connection is established. A connection dialog appears if the handshake takes longer than expected.
For composition prep that produces clean imports, see Prepare After Effects designs for import.
For the full import procedure including resolution scaling, frame-rate matching, and resolving Harmonizer connection issues, see Import an After Effects design.
The live-render path exposes a fixed set of property types as VideoPro variables.
For .aep files:
- Text
- Image
For .mogrt files (with properties prepared in the After Effects Essential Graphics panel):
- Source Text
- Image
- Color
- Media (Image, Video, PSD, and Illustrator files)
- Checkbox Expression Control
- Anchor Point, Position, Opacity, Scale, Rotation
The MOGRT path supports more variable types and packages external media inside the .mogrt. The .aep path is faster to set up but limits variables to text and images.
For setup details per file type, see Prepare After Effects designs for import.
Once the After Effects title is in VideoPro, link Data Controllers to its variables the same way as for a native graphic. See Linking data to After Effects designs for the procedure.
The playout's Show All Variables toggle in the Live Values tab filters non-dynamic properties so you can focus on the ones that can change on air.
If After Effects is closed, or the Harmonizer panel is not running, the title cannot render new frames. Common causes and fixes are covered in the Resolving AE Connection Issues section of Import an After Effects design.
There is also a Force AE Offline mode for cases where you want to deliberately disable the After Effects connection on the playout machine.
You can pre-cache an After Effects title's frames so the show plays back on a machine that does not have After Effects installed. Properties remain editable up until pre-cache; once cached, the cached property values are used during playback.
For the pre-cache procedure, see Pre-cache graphics before a show.
- After Effects: native export with the NewBlue plugin (Approach A) — bake the composition into a native title.
- Which After Effects approach to use — pick between live render and native export.
- Import an After Effects design — full import procedure and troubleshooting.
Build a graphic that plays a sequence of media clips with defined roles — intro, main, outro — instead of a single fixed asset.
Use the Media Sequencer when a graphic needs to chain video or image clips together at design time. Clip roles tell VideoPro which clip is the entrance, which is the held middle, and which is the exit, so the graphic can hold for any length on air without manual editing. This chapter covers building the sequence and assigning the roles.
- Create a media sequence — use this when you first set up a media sequence in a graphic.
- Assign playback roles for media clips — use this once clips are in the sequence and need intro/main/outro roles assigned.
- Animate & transition — for animation that doesn't involve swapping clips.
- Operate a media sequence at runtime — the playout-side companion.
In this guide, we'll walk you through creating and managing a media sequence — the tool for importing, configuring, and arranging media clips into a single playable item. By the end, you'll have a strong foundation for incorporating dynamic sequences into your projects, such as commercial breaks, demonstrations, event promotions, and sponsor callouts.
For the runtime operator workflow (Start Behavior, Playback Order, Stop Behavior, Hold Point) once a sequence is built, see Operate a media sequence.
- Start a New Media Sequence
- In the Project panel, click Add new item → Media Sequence → Sequence List (or Watch Folder to track a folder of media on disk), or Import a media file into your project.
+
- Imported media will automatically display an icon in the Project Panel indicating the media type (e.g., video or image).
- Rename the Sequence
- New sequences are named by default (e.g., Sequence 1). To rename, right-click the sequence and choose Rename.
- Example: rename to Commercial Break 1 for easy identification.
The Add new item → Media Sequence menu offers two creation flows that decide where the sequence's clip list comes from:
- Sequence List — you add clips manually by drag-and-drop or Add Media, reorder them inside the Media Sequencer, and remove individual clips. This is the classic media-sequence workflow.
- Watch Folder — VideoPro opens a Select Watch Folder directory picker. After you pick a folder, the sequence mirrors that folder's contents: media files added to the folder on disk appear in the sequence automatically; files removed from the folder drop out. A folder-badge icon appears next to the sequence header so you can see at a glance that this is a watched sequence.
+
In Watch Folder mode the manual edit gestures are deliberately hidden:
+
- Add Media is unavailable — the folder on disk is the source of truth.
- Replace Footage is unavailable on the per-clip context menu.
- Clear Sequence is unavailable — clear the folder instead.
+
Use Watch Folder for unattended playout where a producer drops files into a shared folder and VideoPro picks them up between segments.
Note: Available in VideoPro 2026.0 and later.
On the Media Properties tab of the Properties panel, the Sequence Type control offers two radio buttons that pick how the sequence behaves:
- Continuous Sequence — the sequence plays its clips in order as one continuous run. This is the classic media sequence behavior; use it for commercial breaks, demos, and anything where one clip flows into the next.
- Media List — the sequence is a list of choices. VideoPro plays one clip at a time when triggered, picking the next according to the Playback Order rule below. Use a Media List when you want to step through clips manually (or randomly) instead of running them all back-to-back.
Switching between modes changes the available options in Sequence Flow Details below — Continuous mode talks about advancing through the whole list, while Media List mode talks about which one item plays next.
- Import Media
- Add media by clicking the Add Media button or by dragging files directly into the Media Sequencer.
- Supported types include video, still images, and audio in various formats.
- Configure Media Settings
+
+
Each clip row in the table has columns for:
+
- Plays At — when the clip starts within the sequence.
- File — the source file.
- File Duration — the source's natural length.
- Cut In — where the clip starts playing within its source. Skip the first 7 seconds of a video by setting Cut In to 7 seconds.
- Duration — how long the clip plays in the sequence. Defaults to File Duration; shorten to trim.
- Repetitions — how many times the clip repeats. Default is 0 (plays once).
- Transition — the transition into this clip from the previous one.
- Transition Time — duration of the transition.
- Hold Point (2026.0) — a freeze point within the clip. When the sequence reaches the Hold Point, playback freezes on that frame until you advance the sequence manually. Useful for quote-of-the-day cards, score cards, and slideshows where you want pacing to be human-driven.
+
- Apply Transitions
- Apply transitions individually per clip, or globally to all clips in the sequence.
+
- Choose from the available transitions (cross-fades, 3D flips, custom stingers).
+
- Adjust transition durations per-clip in the Transition Time column.
+
- Reordering Clips
- Drag and drop clips within the sequence to change the playback order.
+
- Removing or Replacing Clips
- Right-click a clip and choose Remove to take it out of the sequence. A sequence always keeps at least one clip — Remove is unavailable on the last remaining clip.
+
- Choose Replace Footage to swap the clip's source file while keeping its settings.
+
At the bottom of the Media Sequencer, Sequence Flow Details controls how the whole sequence behaves at runtime.
Note: On labels: VideoPro 2026.0 renames several Sequence Flow options. The 2026.0 names are used below; older VideoPro releases used slightly different wording, called out in parentheses where relevant.
- Start from beginning — restart the sequence each time it's played.
- Resume from last position — continue from where playback was stopped.
- Sequential — play clips in the order shown. (Earlier versions: "In Sequence".)
- Random — shuffle clip order on each play.
- No Change (2026.0) — don't auto-advance; the next clip is selected only when you tell the sequence to advance (via a button, a remote action, or a variable). Useful when you want a Media List to be controlled entirely by an operator.
- Repeat sequence (earlier versions: "Repeat Indefinitely") — loops continuously.
- Hold on final item — repeats the last clip after the sequence finishes (best for still images or looping videos). In Media List mode, called simply Hold.
- Stop playback — ends after the final clip.
Icons next to the Sequence Flow Details give a quick visual summary of the current settings.
- Clear Sequence — use the Hamburger icon (top-right of the Media Sequencer) to clear all clips and start fresh.
+
- Export Sequence Content to Folder — export every clip in a sequence to a folder you choose, useful for consolidating files from multiple sources. (Disabled for Watch Folder sequences, since the source of truth is already a folder on disk.)
- New Sequence Defaults — define default playback settings (e.g., repeat indefinitely or play once) that all new sequences will inherit.
+
A media clip — including a Media Sequence — can play one of three roles: a normal project media item, a Live Video Source, or a Transition. This is set per-clip in the Properties tab. To choose a role for a media clip, see Assign playback roles for media clips.
After assembling your media sequence:
- Preview it to ensure smooth transitions and accurate clip order.
- Make final adjustments — replace unwanted clips, fine-tune Cut In and Duration, set Hold Points where you want operator-driven pacing.
Your sequence can be triggered live during broadcast — directly from the Project List, as a Shot from the Shot Launcher, or as a Live Video Source consumed by the Switcher.
A media clip in your project doesn't have to behave like a normal video — VideoPro lets you tell each clip what role it should play. The same MP4 can be a regular scheduled clip, a live-video source that other titles can subscribe to, or a transition stinger.
You set the role on the media clip's Media Properties tab, in the Playback Role dropdown (the tooltip reads "How this media item is treated by the project").
The default. The clip plays when you trigger it from the playout interface, the Project List, a Shot, or a sequence. It runs through to its end, then stops. Use this for anything you'd think of as "a video clip" — commercials, idents, replays, stings.
The clip is exposed to the rest of the project as a live video source — it shows up in the Add menu under Live Audio/Video as a video feed you can pick alongside cameras, NDI inputs, and other live sources.
When something else in the project consumes that source — for example, the Switcher cuts to it, a Live Video Layer in the Designer points to it, or an embedded live video appears in a graphic — the clip automatically starts playing. When the consumers stop using the source, the clip automatically stops.
Use this for content that you want to look and behave like a live source even though it's a recorded file:
- A persistent intro/loop that any layout can pull in
- A pre-recorded "live" host clip that triggers when you switch to its angle
- An "always-on" virtual camera you composite into multiple shots
The clip is treated as a transition — the kind of stinger that plays during a cut. Once a clip has the Transition role, it becomes available wherever transitions are picked:
- The Switcher can use it as a stinger between two shots
- A Shot can use it as the transition into or out of the shot
- Instant Replay can use it as the enter or leave transition
A transition clip plays once, in the place of (or layered over) the cut, then disappears. You won't see it in the regular media-playback flow — it only appears as a transition option.
- In the Project List or Project panel, click the media clip to open its Properties.
- Open the media's Properties tab.
- In the Playback Role dropdown, choose As Project Media, Live Video Source, or Transition.
- As Project Media → Live Video Source — the clip stops appearing in normal playout and instead appears as a live source in the Add menu. Any project content that already references the clip as scheduled media will need to be rewired to consume the live source.
- Live Video Source → As Project Media — the live source disappears from the Add menu. Anything that was consuming it (Switcher, Live Video Layer, embedded live video) will fall back to whatever it does when its source is missing.
- As Project Media → Transition — the clip leaves the regular media menu and appears in transition pickers (Switcher stinger, Shot transition, Instant Replay transition).
- Transition → As Project Media — the clip leaves transition pickers and returns to the regular media menu. Switcher / Shot / Replay configurations that referenced it as a transition lose that reference and fall back to default.
You can switch the role any time. VideoPro updates references where it can; for anything that can't auto-rewire, you'll see warnings in the project's status indicators.
- A media clip that's a Live Video Source is invisible in the regular Project List media flow — you'll only see it in the Add menu under Live Audio/Video. If you can't find a clip you set to Live Video Source, look there.
- A Transition clip plays from start to finish whenever the transition fires, regardless of clip duration. Keep transition clips short.
- Live Video Source mode auto-mutes VideoPro's normal scheduled audio for that clip — the live consumers handle audio routing themselves.
Get a finished graphic out of VideoPro — into your Library for reuse, onto disk as a portable package, or out as a rendered image or video.
This chapter covers the three save-out paths. Save to the Library when the graphic is reusable inside VideoPro. Save and package when you need to hand the graphic and its assets to another machine or another operator. Export when the destination is a video file or image, not VideoPro at all.
- Save graphics and presets to the library — use this when you want the graphic available in your VideoPro Library next time.
- Save and package graphics or projects to your computer — use this when handing off to another machine, archiving, or sending to a colleague.
- Export graphics as an image or video file — use this when the destination is a video editor or an image consumer outside VideoPro.
- Graphics Library overview — how saved graphics are organized inside VideoPro.
- Design & customize graphics — section overview
If you want to reuse custom graphics in future projects, follow the steps in this article to save complete graphics or attributes of a graphic, such as styles, shapes, effects, transitions, and lighting, to the library.
Tip: You can also save graphics to your computer and export graphics as an image or video file.
Depending on which version of VideoPro you use, you can save complete graphics to the Graphics Library while working within the playout interface (not available in NewBlueNTX) or the Designer.
- Open a graphic in VideoPro's playout interface or the Designer.
- Do one of the following:
+
- In the playout interface, choose File > Save Current Design to Library.
- In the Designer, choose File > Save selected design to library.
- In the dialog that opens, navigate to the library folder where you want to save the graphic.
- Enter a name for the graphic.
- Click Save.
Note: Graphics saved to your computer will be saved with the .nbtitle file extension.You can save graphic attributes to the library while working within the Designer, but not from within the playout interface. Graphic attributes include styles, shapes, effects, transitions, and lighting.
- Open a project in VideoPro's playout interface and select a graphic from the Project List.
- Click the Edit Graphic button in the Preview panel. The graphic will open in the Designer.
- In the Designer, choose File > Save to library and select one of the following attributes. (Menu options are enabled only for attributes the current graphic actually contains — Style requires a selected object, Shape requires a selected shape, Effect / Transition require an existing effect or transition; Design and Lighting remain enabled.)
- Style…
- Design…
- Shape…
- Effect…
- Transition…
- Lighting…
- In the dialog that opens, enter a name for the graphic attributes. (The library folder is already selected.)
- Click Save.
Later, you can access the saved attributes from the same folder in the library when editing a graphic in the Designer.
Tip: You can also save the current graphic to the library from within the Library panel. To do so, open the desired folder in the Library panel, click the Save button at the bottom of the Library panel, enter a name for the graphic, and click Save.
You can reuse custom graphics and projects in future sessions on any computer where VideoPro is installed. You can also reuse custom VideoPro graphics in Titler Pro. Follow the steps in this article to save graphics and projects as Titler files or as compressed ZIP packages.
Tip: You can also save graphics and presets to the library and export graphics as an image or video file.
Tip: Packaged graphics can be opened and used in Titler Pro.
- Open a graphic in the Designer.
- Choose File > Save As.
- In the dialog that opens, navigate to the location on your computer where you want to save the graphic.
- Select one of the following options from the drop-down list at the bottom of the dialog:
+
- NewBlue Titler design (
.nbtitle)* — Saves the open graphic, including styles, effects, transitions, and lighting. - NewBlue Titler design with Assets (
.nbtitle)* — Saves the open graphic, including styles, effects, transitions, lighting, fonts, image and video textures, and audio clips used. - NewBlue Titler design package (
.zip)* — Saves the open graphic and its assets in a compressed ZIP file, which can help you move and archive the graphic.
+
Tip: If you want to use a VideoPro graphic in Titler Pro, select NewBlue Titler design with Assets or NewBlue Titler design package.
- Enter a name for the graphic or ZIP package.
- Click Save.
Later, to open the saved graphic or ZIP file from within VideoPro's playout interface, choose File > Import > Graphic.
Project saving is split across two playout-interface menu items — one for the .nbtlproj working file (with or without assets), and one for the .nbtlpkg portable package.
- Open a project in the playout interface.
- Choose File > Save Project As….
- Pick a folder, enter a name, and choose one of:
+
- VideoPro project (
.nbtlproj)* — saves the project description but leaves media references pointing at their original locations on disk. - VideoPro project with Assets (
.nbtlproj)* — saves the project description and copies every referenced media file (graphics, image and video textures, fonts, audio clips) into a sibling folder so the project travels intact.
- Click Save.
- Open a project in the playout interface.
- Choose File > Export Project….
- Pick a folder, enter a name, and choose one of:
+
- VideoPro project package (
.nbtlpkg)* — a single archive containing the project and its assets, ready to move to another machine. - VideoPro project package + cache (
.nbtlpkg)* — same archive plus the rendered cache. Use this when the destination machine should skip the re-render step on first open (longer to produce, much larger file, faster first play on the target system).
- Click Save.
Later, to open a saved project or package file from within VideoPro's playout interface, choose File > Open — the file picker accepts .nbtlproj and .nbtlpkg together.
If you're licensed for VideoPro you can export graphics as PNG images (single frame or numbered sequence with alpha) for use in other applications. A legacy MOV export also ships, but it is marked deprecated in the menu; the modern path is a PNG sequence muxed externally if you need a video file.
Note: Before VideoPro can export a graphic as an image sequence or movie file, the title's cache must be fully built. If you choose Export and the cache is still rendering, VideoPro shows a dialog asking you to wait for the cache to complete before retrying. Single-image export and clipboard export do not require a complete cache.
When you export a graphic as a PNG image file, the exported image includes all design layers in a graphic and includes a transparent alpha layer.
- While a graphic is open in the Designer, choose File > Export > Image to file.
- In the dialog that opens, navigate to the location on your computer where you want to save the image.
- Enter a name for the PNG file.
- Click Save.
Note: Exported PNGs always render at the project's full resolution, even if you are editing the graphic at a lower draft resolution for performance. Expect the export to take longer than a preview render. VideoPro shows a wait cursor during the export and does not display a progress dialog.
You can also export the current frame to your clipboard by choosing File > Export > Image to clipboard. Paste it into any image-editing application.
If your graphic includes animation, export it as a numbered PNG sequence so you can re-mux it with an external tool.
- With the graphic open in the Designer, choose File > Export > PNG sequence. The keyboard shortcut is Ctrl+M.
- Pick a folder. VideoPro writes a numbered series of PNG files into the folder you choose.
Note: The PNG sequence export prompts you for a folder, not a filename. The series uses sequential numbering based on the title's frame rate. VideoPro refuses to start until the title cache is complete.
Note: In the playout interface, the output equivalent is called Image Sequence (it can write either PNG or JPG). The Designer's PNG sequence export and the playout's Image Sequence output are different surfaces; both use sequential PNG numbering.
The Designer still ships a MOV exporter, but it is labeled Movie File (Deprecated) in the menu and is only available when the writer builder initializes successfully. New work should use the PNG sequence path above and mux externally if a video file is required.
- With a design open in the Designer, choose File > Export > Movie File (Deprecated)….
- In the dialog that opens, pick a folder and enter a name for the MOV.
- Click Save.
VideoPro's Graphics Library includes collections of all graphics that are installed with VideoPro, which can be graphics that come with VideoPro, custom graphics you have created and saved to the Graphics Library, and graphics collections you installed separately.
Graphics are available from within the playout interface and the Designer; however, when you're working in the Designer, this library is expanded to include presets of styles, effects, transitions, shapes, and lighting so you can quickly apply preset attributes to graphics and their design layers.
Sections in this article:
Choose View > Library to view the Library / Graphics Library panel (if it's not already visible), then click the Expand icon in the Library / Graphics Library panel to browse collections of graphics and presets.
Note: The Library is named Graphics Library from the playout interface.
The Graphics Library in the playout interface shows installed graphics collections as folders (Architect, Camera Frames, Caps, and the other bundled folders, plus any add-on collections you've installed and your own custom categories). Double-click a folder to open it; see Library panel for the panel's full set of controls.
Select one of the following collections from the drop-down list at the top of the Library panel. These collections of presets are only available in the Designer.
- Effects — Create animations, warps, and more.
- Lighting — Control a scene's lighting, camera angle, camera width, and more.
- Shapes — Add predesigned circles and rectangles.
- Styles — Control the look and feel of 2D and 3D layers, including font, alignment, kerning, color, transparency, bevel, extrusion, and more.
- Transitions — Add and customize transitions to create in and out animations, fly-ins, warps, zooms, and more.
- In the Library panel, double-click a folder in the Graphics Library / Library to view graphics in that collection.
- Hover your cursor over a thumbnail image to see a preview of the graphic in the Preview panel of the playout interface or in the Designer's canvas.
- Double-click a graphic to add it to your project.
Tip: Click the View Mode toggle button to switch between thumbnail and list views of the collection.
- Open a graphic in the Designer.
- Select a design layer that you want to change in your graphic.
- In the Library panel, select a collection of presets from the drop-down list at the top of the panel.
- If necessary, double-click a folder to view presets within that collection.
- Hover your cursor over a thumbnail image to see a preview of the preset on the selected layer.
- Double-click a preset to apply it to the selected layer.
Tip: Click the View Mode toggle button to switch between thumbnail and list views of the collection.
- Open the Graphics Library / Library panel.
- Click the New Category icon.
- Enter a name for the new category.
- Click OK.
- Open the Graphics Library panel.
- Click the Save icon.
- Enter a name for the new graphic.
- Click Save to save the current graphic to the current location in the graphics library.