With Graphics Events, you can add interaction to your Graphics. This is useful for creating in-studio Graphics that the Talent can operate on a touchscreen.
Also, if you are rendering the Graphics directly on the Audience device, it enables direct audience interactivity.
How it Works
An event is an action that is executed under a user's instruction or trigger. To configure events, you need to define both the trigger and the action.
Elements that can trigger Events
Adding Events
To add an Event you have to select one of the mentioned elements and use the Events section at the inspector
Click Add Event to create one. You will see a panel in which you can configure it:
The first block (Labeled On) lets you select the action the user will need to do.
The second block, which starts with Do, lets you select what you want to happen
The options for DO are the following:
Action | Extra Parameters | Description |
Go to URL | URL (bindable) | You can use it to navigate away from the current Graphics Package. |
Send Message | Message Text (bindable) | When the Graphics Package is embedded, it can be used to send a message to the parent page. Useful for tracking and metrics |
Transition Overlay | Target: An Overlay from the current Scene | Use to transition an overlay IN or OUT |
Change Cycle Mode | Target: A Dynamic Content List from the current Scene | Use to change the Cycling mode between Autoplay or Manual. This is useful for creating Play and Pause actions. |
Go To Item | Target: A Dynamic Content List from the current Scene. Lookup Field: Set a data binding field to use for lookup. Lookup Value: Set a lookup value to search item | Use to navigate to the item that matches the Lookup Value with the value of the Lookup field |
Next Step | Target: A Dynamic Content List from the current Scene | Use it to navigate to the next page or step |
Previous Step | Target: A Dynamic Content List from the current Scene | Use to navigate to the previous page or step |
After saving the Event, you will see it listed together with control to add new events
You can configure several Events for the same Action and they will be grouped by Action type.
Once you have configured the Events you need, you can try them from the Output.
Troubleshooting
If you delete an element that was being targeted by an Event, Events that are failing will be marked :
Controlling from the Output
When using events in the output, the actions will stay scoped to that output: they won't be sent to other instances of the output and you won't see any changes at the remote.
Controlling from the Remote
All Graphics Packages have a Remote Control that an operator can use to change what's on screen, but in the case you have created a Graphics Package to control In Studio, using the Remote Control at the same time can generate unexpected situations.
Every time a change comes from the Remote Control, the Graphics Package will be reset to the status indicated by the remote. This means the talent could lose an Overlay he has opened via an event interaction or even lose the position in a list of content.
For this reason, as a good practice, we suggest having a separate Graphics Package which only the talent controls for In Studio cases.
In the case you are planning to add to the mix some control from the production team, we strongly suggest carefully trying out the case and coordinating with the talent, previous to the show.
Use cases
Previous/Next Posts Content
Previous/Next Posts Content
Previous/Next Weather Forecast
Previous/Next Weather Forecast
Transition Overlay - Weather Forecast
Transition Overlay - Weather Forecast
Go to - Weather Forecast
Go to - Weather Forecast
With the "Go to" event, you can navigate to a specific item in a list. For example, if you’re displaying a forecast for different cities and are currently viewing the city in the 1st position but want to jump to a city in the 5th or nth position, you can use the 'Go to' event to do that.
In this video, we have a list of cities and their 7-day forecasts listed in a Google Sheet.
Basically, we create a button for each city and assign the 'Go to' event to it. This way, when you tap the city name on a Studio touch screen, it displays the correct data regardless of the city’s position in the list. This means you can jump from the 1st position to the 5th or any other position in the list.