Graphics from Captivate's Graphics Library, and other graphics you may have created, include variables for content which you allows you customize the videos, images, color, gradients, and text. These same variables can also be updated when linked to a data source.
There are two methods for customizing your graphic layer. The two tabs that can be found in the Layer Properties for customizing your graphic layer are Live Data and Multi Entry. These two methods include a list of variables that can be customized and will vary depending on the graphic layer's variables that were enabled from the Designer.
- Live data
- Multi entry
- List of variables
Live Data
The Live data tab allows you to edit variables to a single instance of the graphic layer. Any edits done in this tab will continuously update your graphic layer as variables are customized.
- In Captivate's playout interface, open a project and select a graphic layer from the Layer's workspace.
Tip: Want to create a new graphic? Open the Graphics Library panel and drag a design from the library to the Layers workspace, or choose File > New Graphic.
2. The Layer Properties panel will open, which includes the Live data tab and all variables that are available for the selected graphic layer.
3. If you want to connect the graphic layer to a data source and automatically drive data to variables from that graphic layer, see an article in the Connect data to graphic layers section of our help center.
4. If you want to manually update the default values in variables or connect a camera to a live video variable, see the following sections in this article. Whenever you update a variable with new information, the graphic layer starts rendering and displays the change when it is fully rendered.
Values Grid
The Values Grid tab contains a spreadsheet interface that organizes all the graphic layer's variables as column headers. You can customize different sets of variables for the same graphic.
- In Captivate's playout interface, open a project and select a graphic layer from the Layer's workspace.
Tip: Want to create a new graphic? Open the Graphics Library panel and drag a design from the library to the Layers workspace, or choose File > New Graphic.
2. The Layer Properties panel will open, which includes the Values Grid tab and all variables that are available for the selected graphic layer.
Note: You can change the names of variables when you create variables in the Designer therefore, the names of variables from your own custom graphics may be different from the names shown in this article's illustrations.
3. The header cells at the top of the table are the variables that the graphic layer contains. Every cell below it is an instance of that variable. Every row that is composed of these cells will behave as an instance for the graphic layer.
4. Once you have built your rows of entries for your graphic layer's variables, the entries can be clicked to update the graphic with the customized information in that row. If that graphic layer is live then clicking on a entry will automatically update the graphic and use animations from the design layers to show those changes happen live.
Tip: Values Grid can be used to avoid duplicating the same graphic multiple times since all the possible instances that graphic can be could be built within the Values Grid tab.
Note: The variable fields from Live Data will be updated with the information from any of the selected entries from the Multi Entry tab.
List of variables
Text
Enter new text in a text field, such as Name or Subtitle, then press TAB or ENTER to update the graphic.
Colors
Click a color swatch and complete any of the following steps to select a color in the Pick Color dialog.
- Click a color on the wheel.
- Click Hex or Dec, then enter the desired Hex or Dec values.
- Click the color picker
, then click a color on your screen. (Press ESC to cancel the color picker.)
- Click and drag the horizontal sliders to adjust the selected color's hue and opacity.
Gradients
Use the Gradient style to customize design layers with gradients based on multiple colors.
- Click the color swatch.
- In the Color section of the Pick Color dialog, complete any of the following steps to select a color.
- Click a color on the wheel.
- Click Hex or Dec, then enter the desired Hex or Dec values.
- Click the color picker
, then click a color on your screen. (Press ESC to cancel the color picker.)
- Click and drag the horizontal sliders to adjust the selected color's hue and opacity.
- In the Gradient section, select the number of colors to include in the gradient and the type of gradient from the two drop-down lists.
- In the gradient color wheel, click and drag each large circle to adjust the gradient's color range, then click and drag the small circles to adjust the transition point between colors.
Images and pre-recorded videos
To replace a default image or video, click an image or video thumbnail, then locate and select a new image or video.
To customize how an image or video fits within the available space for that design layer, select one of the following fit modes from the drop-down list next to an image or video variable.
Fill: The image or video fills all of the available space in the bounding box's dimensions while maintaining its proportions.
Fit: The image or video fits inside the object's bounding box without cropping and retains its aspect ratio, which means the image may not fill the entire variable area.
Conform: The entire image or video resizes to fit in the entire variable area, but may not maintain its aspect ratio.
Live videos
You can stream video from a webcam or NDI-enabled camera.
- Connect a webcam or NDI-enabled camera to your computer.
- Select a video source from the video drop-down list on the left.
- To customize the appearance of the live video, select an effect from the drop-down list in the middle, and then select one of the effect presets from the drop-down list on the right.
Note: If the design layer's dimensions don't match the aspect ratio of the video source, the live video will be resized to fit within the design layer, which may distort the video. If necessary, resize the design layer in the Designer.
Data graphs
Use data graph variables with text or shape objects to show a percentage or quantity that changes dynamically based on incoming data.
To update the value of a data graph variable, double-click the value and enter a number between 1 and 100, which will be represented as a percentage.
Tip: You can automatically drive data from Facebook comment polls and reaction polls to data graph variables. For details, see Connect social media data to a graphic layer and complete the steps to connect the design to Facebook Live.