10: Graphics Editor – Chyron

Overview

The Click Effects 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:

Key

1. The Canvas	5. Save/Close Buttons	9. Global Toolbars
2. Add Object Buttons	6. Canvas Zoom	10. Object-Specific Toolbars
3. Open Toolbar buttons	7. Button Properties	11. Board/Segment Selector
4. PRIME Project	8. Layers Toolbar

Create a graphics button

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 graphics button:

Right-click on an empty button on the media page.
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:

Text
Image
Animation
Fill
Crawl
Data
Message
System Clock

Name or rename objects in the graphics editor

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.

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

Save a graphic

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. When this is complete, the new graphic has been saved, the Save button becomes gray, and the CLOSE button is active. Any subsequent changes to this graphic will not require the creation of a Scene file.

Scene info

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.

Save as

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.

Keep: A new button is created but will share the same source file. A change to either the original or the new button will affect both buttons.
Create: A new .pbx file is created based on the original name: <current pbx file>_0.pbx. A change to one button will not affect the other button.

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.

Close the editor

When you have completed all changes the Close button at the bottom right of the Editor.

GPU Board Selection and Segment Selection

Click Effects PRIME GPU and Event Workflows allow for multiple video board control, and therefore must be able to create graphics for any board. The Board/Segment selectors (see item 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.

Zoom controls

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.

Select object(s)

To start managing objects, do one of the following:

Click on an object to select it. Selected objects object size via an object outline.
Or, the Layers tool can also be used to select objects, including ones that are hidden or otherwise not visible.

Multi-select objects

To multi-select objects:

Hold down the CTRL key and click multiple objects in the Canvas or the Layers tool.
The selected objects display their object outlines on the canvas and are highlighted blue in the Layers tool.

Move object(s)

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.

Resize object

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.

Copy/Paste

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.

Delete object

To delete an object(s) from the canvas,

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.

Undo edit

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.

Media Button tool

This tool contains the following controls:

Thumbnail Preview/Picker Mode: Click the Thumbnail image to turn the canvas into Thumbnail Picker Mode. The Thumbnail Picker tool appears on the canvas and you can position it and resize it to indicate exactly what portion of the canvas should be converted to a thumbnail. Click the green checkmark to use the selected thumbnail.
Button Title: Enter a button title.
Caching: This option is designed for buttons with complex animations or a large number of Objects. At the first load (Pre-Show) it takes the time needed to load the graphic. When using the graphic later in the show, it will load much faster.
Transition: This option forces this Graphic Button to perform a CUT transition, regardless of the main transition selection.
Graphic Button Behavior: Set the Graphic Button behavior:
- - Bug
  - Overlay
  - Fullscreen

Layers tool

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

Create new objects
Rename objects
Delete objects
Duplicate objects
Change object layer order
Change object opacity
Change object visibility
Lock objects
Group objects

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.

New Objects

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.

Create a new object

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.

Rename object

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

Delete an object

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.

Duplicate an object

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.

Change object layer order

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:

Bring to Front: Moves the layer all the way to the front of the z-order related to its containing folder.
Send to Back: Moves the layer all the way to the back of the z-order related to its containing folder.
Bring Forward: Moves the layer up one position in the z-order.
Send Backward: Moves the layer down one position in the z-order.

Change object opacity

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

Change object visibility

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.

Lock objects

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.

Group objects

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
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.

Object tool

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.

Alignment tool

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. The Click Effects Alignment tools ensure objects are perfectly aligned.

Functions (listed from top-left to bottom-right)	Description
Align left	Aligns the left boundary of multiple objects to the left of the primary selected object
Align middle	Aligns the vertical middle of the boundary of multiple objects to the middle of the primary selected object
Align right	Aligns the right boundary of multiple objects to the right of the primary selected object
Center on canvas horizontally	Centers one or multiple objects on the canvas horizontally (X-axis only)
Center on canvas vertically	Centers one or multiple objects on the canvas vertically (Y-axis only)
Align to Object top	Aligns the top boundary of multiple objects to the top of the primary selected object
Align to Object center	Aligns the horizontal center of multiple objects to the horizontal center of the primary selected object
Align to Object bottom	Aligns the bottom boundary of multiple objects to the bottom of the primary selected object
Equal horizontal spacing	Spaces multiple objects so that the number of horizontal pixels between each object is exactly the same
Equal vertical spacing	Spaces multiple objects so that the number of vertical pixels between each object is exactly the same
Align to Canvas Left	Aligns the left side of the object to the left of the Canvas
Align to Canvas Top	Aligns the top side of the object to the top of the Canvas
Align to Canvas Right	Aligns the right side of the object to the right of the Canvas
Align to Canvas Bottom	Aligns the bottom side of the object to the bottom of the Canvas
Size to canvas – Screen width	Resizes one or multiple objects to fit the canvas width
Size to canvas – Screen height	Resizes one or multiple objects to fit the canvas height
Size to canvas – Full screen	Resizes one or multiple objects to fit the entire canvas
Bring to front	Brings the selected object to the front of the layer stack or z-order. The object will sit on top of all other objects
Send to back	Sends the selected object to the back of the layer stack or z-order. The object will sit under all other objects
Bring forward	Brings the selected object one layer up
Send backward	Sends the selected object one layer down

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

Transform tool

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.

Position sets the Objects place on the Canvas in pixels
Transform sets the Objects Width & Height in pixels, and Constrain Proportions keeps the object’s Aspect Ratio by altering the opposite value
Scale sets an Image’s or Animation’s relative percent size, and Constrain Proportions keeps the object’s Aspect Ratio by altering the opposite value
Rotation sets the Object’s angle in degrees

Delta Move 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.

Effects tool

The Effects Tool is not supported at this time.

Text object

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
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:

Page 1: Character
Name	Description
Font	In addition to fonts already available, any True Type font installed on your Click Effects system is supported.
Font Format	Bold or Italic
Size	Font Sizes can be selected from the dropdown list
Color	Opens the Color Picker to select Font Color
All Caps button	Will alter the text to be all capital letters
Shrink to Fit	Will adjust the horizontal size and spacing of the letters to fit inside the object dimensions
Kerning	Adjusts the space between all characters
Space Width	Displays the text with a modified width. 50% will squeeze the text into half the width of Normal, 200% will expand the width to twice normal.
Fixed Pitch	Adjusts the width of each character to be the same. Overrides Kerning
Caps Ratio	Changes lower case characters to Caps and then adjusts their size
Numeric	Mono-spacing to prevent game-clock text movement
Format	If Numeric is selected, a Number format can be chosen: 0 or 0.0 or #,0 etc.

Page 2: Paragraph
Name	Description
Horizontal Justification	Sets the justification of your text to LEFT, CENTER, or RIGHT.
Vertical Justification	Sets the justification of your text to TOP, MIDDLE, or BOTTOM.
Line Flow	Selects the response to text longer than the Object dimensions. Scale to Fit, Wrap, Crop, etc.
Leading	When multiple lines of text are present, this setting will move the Second line of text up or down based on the starting point of the line.
Line Space	Sets the distance from the top of the 1st line of text to the top of the 2nd line of text. Usually needs to be at least the font size selected on the Character Page.

Page 3: Shadow
Name	Description
Enabled	Enables/Disables font shadow
Font Shadow Color	Opens the Color Picker to select the color of the text shadow
Distance X	Defines the location of the shadow on the X-axis in pixels
Distance Y	Defines the location of the shadow on the Y-axis in pixels
Opacity	Defines the visibility level of the shadow by percentage

Page 4: Outline
Name	Description
Enabled	Enables/Disables font outline
Font Shadow Color	Opens the Color Picker to select the color of the text shadow
Opacity	Defines the visibility level of the shadow by percentage
Size	Defines the width of outline

Image Object

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

TGA (32 bits only)
BMP (24 bits only)
JPG
TIFF
PNG

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:

File Path: Shows the Location of the file and allows the user to change to a different file.
Lock Aspect Ratio: When resized, the object retains its height/width ratio.
Auto Size: Used when changing the Image Object to a different file or by using an Image Rotate List.
- When enabled, changes the Object Size and Aspect Ratio to match the new image.
- When disabled, the Image is adjusted to fit within the Object dimensions.

Animation Object

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:

File Path: Shows the Location of the file and allows the user to change to a different file
Lock Aspect Ratio: When resized, the object will retain its height/width ratio
Auto Size: Used when changing the Animation Object to a different file or by using an Animation Rotate List.
- When enabled, changes the Object Size and Aspect Ratio to match the new Animation.
- When disabled, the Animation is adjusted to fit within the Object dimensions.
Animation Speed: Speed of the animation.
Animation Loop: Can set to Infinite or a specified number of Loops.
Play when graphic is loaded: This control allows you to load a graphic but not play the animation – you can use a data trigger to play the animation at the desired time
Remove graphic on play end: This plays the Animation as many times as you specify and then take the button out of Program.

Image Rotate Lists and Animation Rotate Lists

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:

Right-click the object.
Select Image Rotate List Options or Animation Rotate List Options.
Select Create.
This opens the appropriate List Editor. In the Editor, add all files that should be part of the rotation.
Select an Advance On method.

The Advance On options are as follows:

INTERVAL: Image rotates based the number of seconds you specify.
DATA CHANGE: Image advances when a change occurs to a specified data source.
STOP: Image advances when the graphic is removed and re-sent to program. Reset On Stop control must be disabled when using this option.

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

Fill Object

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.

Fill Objects are always rectangles, so multiple Fill Objects may be required to create complex shapes.
To change the color of the Fill Object, open the Fill Toolbar via the Window menu and click the CHANGE button next to the fill color box. This will launch a color picker window from which you can select the new color.
You can also open the Fill toolbar by right-clicking the Fill and choosing Options.

Crawl Object

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.

Data Object

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:

Manual Data Object
Dynamic Data Object
Dynamic Image Data Object
Dynamic Animation Data Object

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.

Message Object

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.

Clock Object

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,
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.
The Set Clock Object window displays
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.

Video Source Object

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.

Data Sheet

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.

Data Update Options

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 the "External Stats/Data Feeds" section.

Parameters

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

Document image

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

Scene Action Control

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

Document image

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).