Graphics Editor

The Click Effects PRIME Graphics Editor enables you to create and edit Graphics Buttons. A Graphic comprises Objects, the Canvas, Toolbars and underlying Data Sources. Graphics Objects are defined images or text within the graphic. The Canvas is the field where Objects are placed. Object properties, position and transition effects are modified using the Toolbars, and Data Sources provide a way to update objects while the Graphic is in program.

Home screen:

The Graphics Editor can be used to create graphic media buttons with different types of behavior: Bugs, Overlays, and Full Screen Graphics.

To Create a Graphic button, right-click an empty button on the media page and select Create Graphic.

Objects are the building blocks of your Graphic. They can be text or images, static or animated, and they can change based on data sources. There are eight objects available in the Graphics Editor. To create an object, select the appropriate Graphic Object Button:

When a new object is added, the system will assign it a name. For Images and Animations, the object name will be the filename. If the same image is added twice, the filename plus a number increment will be used. For all other objects, the object name will correspond to the object type and automatically increment: Text, Text1, Text2, etc. When copy/pasting one of these types of objects, then the name will add a digit to the end. For example, Text2 copy/pasted would become Text21, and if pasted it again, it would be Text22. If Text22 is copy/pasted, the resulting object name will be Text221.

BEST PRACTICE

Object Names can be changed to any name. However, it is possible to have two or more objects with the same object name, and this could lead to confusion when looking at objects in the Canvas’ Object dropdown selector. Best practice is to name each object individually.

The Objects and their specific toolbars will be defined later in this section.

Once the graphic has been created, then it needs to be Saved to create a button on the Media Page.

To save the graphic click the SAVE button in the lower right corner. The first time a Graphic is saved, the user will be prompted to create a PRIME Designer Scene File which uses the *.pbx file format. This file should be stored in the PRIME directory on the M: drive in this path:

M:\PRIME\Projects\<Click Effects PRIME Username>\Scenes

This path should automatically appear when choosing to save the *.pbx file.

NOTE

The name chosen for the Scene file will update the graphic button name to match but can be overridden if needed. 

Once this is complete, the new graphic has been saved, the SAVE button is now gray, and the CLOSE button is active.

Any subsequent changes to this graphic will not require the user to create a Scene file.

The Click Effects PRIME Graphics Editor has two indicators to give the user more information about the Scene file in use and to show the user which PRIME Designer Project to link to.

This info is displayed below the Canvas and contains the location to the current .pbx file in use.

NOTE

This example is the result of a Save As. It has _0 at the end of the filename.

This info is displayed above the Canvas and shows which PRIME Designer project this graphic is attached to. Normally, this Project selection will match the file path of the .pbx file as it links the graphic configuration to the proper Scene.

If the user needs to save a copy of a graphic, the SAVE AS button is available to create a new button with the current changes. The user is prompted to either Keep the same scene file or Create a new one.

If the “Don’t ask me again this app session” box is checked, then the choice selected at the first Save As will be used for all subsequent Save As clicks.

When the user has completed all changes the Close button at the bottom right of the Editor.

Click Effects PRIME GPU & Event Workflows allow for multiple video board control, and therefore must be able to create graphics for any board. The Board/Segment selectors (number 11 in the illustration) allow the user to specify which video board the graphic will belong to. If the board has multiple segments [segments will be explained later in this User Guide], then a segment can be selected, changing the canvas to match that segment.

The Graphics Editor Canvas represents the video output and is where you position Objects to create your Graphic. The Canvas can be zoomed in and out and can also display Action and Title Safe boundaries.

NOTE

For GPU & Event Workflows, the GFX Editor Canvas will size itself to match the current board selected. If you change boards while editing, objects may not be visible until you move them back into visible coordinates.

The lower left side of the Canvas holds the Zoom in and out controls. The choices in the dropdown menu run from 12.5% (Zoomed Out) to 3200% (Zoomed In), and the Fit selection will display the entire canvas within the viewing window.

To start managing objects, they first must be selected. An object is selected when clicked on from the mouse and will then show the object size via an object outline. The Layers tool can also be used to select objects, including ones that are hidden or otherwise not visible.

To multi-select objects hold down the CTRL key and click multiple objects in the Canvas or the Layers tool. Note that these objects display their object outlines on the canvas and are highlighted blue in the Layers tool.

To move one or more objects, left-click the selected object(s), and move it to the desired location. The keyboard arrow keys can be used to move objects one pixel at a time. A combination of the SHIFT key + the arrow key will move objects five pixels at a time.

To resize an object, move the mouse over the boundaries of the selected object. Notice the mouse pointer changes to reflect the type of resizing available at that location. Once the desired type of resizing is found, click and hold down the left mouse button, and drag the mouse to resize the object.

NOTE

If you have additional objects selected, any changes made to one of the selected objects will be mimicked by the other objects.

To copy objects, select one object or multi-select multiple objects you want to copy. Right-click the object(s) and choose COPY from the context menu. Right-click anywhere on the canvas and choose PASTE from the context menu.

You can also press CTRL-C to copy object(s) and press CTRL-V to paste a copy of the object(s) in the desired location on the canvas.

NOTE

New objects that are created via copy/paste will be named based on the original object. A copy of object TEST1 will be named TEST11, with each copy adding an additional digit.

To delete an object(s) from the canvas, first select the object(s) to be deleted. Right-click the object(s) and select DELETE from the context menu (or press the Delete key on the keyboard).

NOTE

This action is not able to be reversed once completed. A new object must be created.

The Graphics Editor can undo multiple levels of Object position changes. To use Undo, select EDIT – UNDO from the editor’s menu or press CTRL-Z on your keyboard.

The Click Effects PRIME Graphics Editor has several floating tools that allow you to manipulate objects. The following tools apply either to the entire Graphic or to any/all objects.

NOTE

These tools and the Object-specific tools will retain their visibility/placement settings between uses of the Graphics Editor. You can save or load a specific tool setup via the Workspace menu. Multiple workspace files with different tool layouts can be useful when editing graphics buttons.

This tool contains the following controls: 

The Layers Tool functions similarly to layer tool windows featured in many graphics editing software packages. This tool can perform many actions:

You can select multiple layers (Objects) by holding down the CTRL key on your keyboard. Any selected layer will appear highlighted in blue, and the physical objects they represent on the canvas will show a white outline and multiple resize handles. Each Layer will have an Icon to the left of the Layer name that signifies what kind type of Object is listed.

The Layer Tool Window can be used to create new objects by clicking the middle icon at the bottom of the Layer Tool Window and then selecting the type of object you would like to create. The object is placed on the canvas just like it would when you select one of the New Object buttons in the graphics editor.

For each object added to the canvas, a new layer appears in the Layer Tool Window, indicated by an icon and the object’s title.

Double-clicking the Layer name allows the user to type in a new name. This also changes the Object name.

Select the object by clicking the layer in the Layer Tool Window. To delete the object from the canvas: Right-click the layer to open the context menu and then select DELETE, use the DELETE key, click the trashcan icon, or drag and drop the selected layer onto the trashcan.

The Layer Tool Window makes it easy to duplicate objects. Right-click the layer you want to duplicate and select DUPLICATE from the context menu. Note that an exact copy of the original object or objects is created on the canvas.

Select the layer or layers that will have their Z-order changed. Click and drag them to the desired location in the layer stack. You can also open the context menu by right-clicking the layer and selecting one of the four Z-order related options:

Select a Layer or Layers and use the Opacity slider at the top of the tool to adjust the Layer transparency.

With at least one Layer selected, clicking the Eye button to the left of the Layer name causes the object to be invisible. It will remain on the canvas but cannot be seen or selected. An invisible object does not appear in Program output for this Graphic.

One or more Layers can be Locked using the control checkbox next to the Visibility “Eye” control. This function is similar to Visibility, in that the user cannot select or change the object, however, a locked object remains visible in the Canvas and in Program output. This is useful when an object has been correctly positioned, but objects very close to it need to be selected and adjusted.

This function creates a Folder in the Layers window that allows the user to place individual layers into. Once Grouped, the Layers list in the tool can be collapsed, to make viewing Layers easier. Also, a Group of Layers can have their visibility, locked state and opacity all changed at the same time.

Use the Folder button at the bottom right of the Layers Tool to create the Group, and then drag and drop a layer on top of the Group to include it. The Triangle button next to the Group name will collapse or expand the group members. The Group name can be changed by double-clicking the current name.

The Object tool displays the object selected on the canvas. This tool can change the Object Name, Visibility and Opacity.

If multiple items are selected, then the Name will only show the first Object, but all Objects will adhere to the controls.

Multi-selecting objects is an essential starting point to using the alignment tools. Alignment tools can be very useful when designing graphics and lining up objects. Imagine having to manually set X and Y coordinates of tens of objects where two or three mouse-clicks could do the very same thing. Your Click Effects PRIME Graphics Editor Alignment Tools ensure objects are perfectly aligned.

NOTE

The primary selected object is always the object selected first when selecting multiple objects in the Graphics Editor.

 The Transform Tool gives you the ability to adjust specific Object properties via numeric values.

If multiple objects are selected, they will all be affected by the changes made with this tool.

The Delta Move tool will shift the X and/or Y position of the selected object a specified number of pixels. A positive number will move the object to the right or up, and a negative number will move the object left or down. A value of Zero in either field simply means no change in that direction.

NOTE

When using the Delta Move function with multiple objects selected, the objects will keep the same positions relative to each other and the group will move on the canvas. When using the Transform->Position controls, all objects will be set to the entered X or Y value.

The Effects Tool is not supported at this time.

The Text Object is a basic text element that can be placed on the canvas. You can enter a single line of text or choose to have a multi-line text element for displaying longer text. To edit the text, double-click the Text Object which will open the Enter Text window. Type the text here and click OK to update the Object content.

The Text Object – and all other objects which contain text, can all be manipulated using the Character Tool.

Each tab of the tool contains formatting controls:

The Image Object allows you to import image files created in applications such as Adobe Photoshop. The following image files are supported.

NOTE

If you want to design an image file with an alpha channel for transparency it must be exported as a PNG file with alpha. This is the only format supported by the Click Effects PRIME GPU Workflow for using alpha channels in graphics.

To learn more about using third-party software to create image files with alpha channels, please contact Chyron Technical Support.

The Image tool has 3 controls: 

The Animation Object allows you to add animations to your composition. Animations objects can be anything from a spinning logo to an animated lower third graphic, and all video formats that can be imported into the HD-SDI Workflow are allowed.

The Animation toolbar contains the following Controls:

The Graphics Editor can turn any image or animation into an automatically rotating list.

This is an extremely powerful feature that turns an image or animation into a rotating advertisement or other type of sponsor-driven content.

To turn an Image Object or Animation Object into an automatically rotating list:

This opens the appropriate List Editor. In the Editor, add all files that should be part of the rotation and then select an Advance On method.

The Advance On options are as follows:

The Reset On Stop control resets the image index when the graphic is next sent to Program.

NOTE

Image and Animation Rotate Lists are designed to work with Embedded Click Effects PRIME Data Sources, such as Plugins and COM-based data. XML-based Object changes are handled by a different method. 

A Fill Object is a solid-colored rectangle that you can use to enhance your graphics. When you add a Fill Object to the Canvas, simply position it and set the desired size.

The Crawl Object is much like a Text Object, with the addition of the ability to scroll the text from right to left within the boundaries of the Crawl Text Object.

In addition to formatting done in the Characters tool, the Crawl object has a specific tool, which contains Speed, Looping and Separator Controls. The Loop Separator options define what appears between iterations of your text.

A Data Object is an advanced object that can be dynamically updated to display new text or images based on underlying data. Each Data Object can be assigned to a data field from stats data providers or data feeds, or it can be changed by manually updating data. Data objects are the foundation for creating graphics with real-time data for sporting events, weather information, election returns, and many other types of data streams you may want to interface with. In the world of sports, Click Effects PRIME has custom plugins for many of the current stats providers.

There are four types of Data Objects:

NOTE

In addition to the configuration required for dynamic Data Objects, the Objects can be edited using the corresponding toolbar: Character for Text, Image for Images and Animation for Animations.

NOTE

Your Click Effects PRIME system supports a subset of the Chyron® Intelligent Interface. Please contact Chyron Technical Support for more information. 

A Message Object is an advanced text object that can be dynamically updated with information from a text file. The text file must be a standard TXT file that contains lines of messages separated by a white line. To assign the TXT file used for a Message Object, open the Window menu and select “Message.” This will open the Message Toolbar allowing you to select the proper text file. In addition, the rotation interval, whether to loop, and which item in the message to start with (Index) can be specified. There is also a button to launch the Windows Notepad app to create a new text file or edit an existing file.

A Clock Object allows you to add either a Time of Day Clock or a Countdown Clock to your graphic. Use the Type selector to choose between Time of Day and Countdown.

When in Time of Day mode, the Format field is used to configure how your clock is formatted. The current formatting, h:mm:ss tt, displays as follows: 3:45:30 PM. The left dropdown arrow provides a list of Presets, and the right arrow displays a list of individual characters and what they represent.

When in Countdown mode, only the single-character dropdown is available, and the Expire at and Remove Leading Zeros controls are exposed.

If a Graphic Button contains a Countdown Clock, then additional actions are required when sending the graphic to Program. Right-click the Graphic media button and choose: Set Clock Objects -> System Clock. This Set Clock Object window displays.

From this window, you set the focus of the Countdown: a specific target time, or a number of minutes + seconds.

Click GO to set the desired goal and then use the RUN/STOP buttons to control the Clock Object while it is in Program.

A Video Source object displays the Live Input from your HD-SDI or Event Workflow within a Graphics canvas. It will start streaming when the GFX is sent to Program and can be sized to meet your requirements.

The Video Input tool for this object allows the user to select the Input source, the volume of the Object and a lock for the aspect ratio of the video source.

This tool is activated when either a Text Object, Image Object or Animation Object is selected in the Canvas.

It allows the User to link data from an XML or JSON source to display that value in an object or change an Image or Animation using a Key-Value List.



This tool is where data from an XML Data View can be set to a more dynamic format. The Controller option is where a User selects either a Data Rotator (e.g., Out of Town Scores) or a Data Selector (e.g. Player via Lineup).

The Data Rotator updates based on the XML source data and settings in the XML Data Views tab in the Data Settings Editor.

The Data Selector adds a Selector Tool window which allows the user to pick a Row of data from the Data View to display a specific data point value.

XML Data, JSON Data and XML Data Views are explained in section 8: External Stats/Data Feeds.

This tool provides a place to manage data links between Click Effects PRIME and PRIME Designer. A Parameter from a PRIME Designer template is selected in the Parameters toolbar and then a Binding can be created to a data value from Click Effects PRIME, such as a COM data stream or an XML data source. This Binding allows that data to be passed back to objects created in PRIME Designer, causing pre-programmed effects to be performed.

For more information on XML Data sources, see 9.4 Configuration & XML Data Views.

This tool provides you the ability to run a specific Action from the PRIME Designer template within the Graphics Editor. 

The dropdown menu lists all the available Actions listed in the template, along with Play/Pause/Stop commands for control.

NOTE

The Scene Action Control toolbar differs from the Effects toolbar as it plays an Action from the Scene, rather than the action of an Animation object (or any Graphics Editor object).