Features

The Interface of Ferryman is split into three phases: Edit, Preview and Export. Each phase gives you the opportunity to add valuable functions and information to your OGraf or HTML graphic template.

1. Ferryman Edit

Inspect your Animation

Once an animation is loaded in Ferryman you will have an animated live preview of your template on the right hand side and options to test and make sure it works as expected on the left hand side.

Export Format

Our default Export format is OGraf as specified by the European Broadcasting Union (EBU). As there is the possibiliy to define vendorspecific fields in an OGraf, you also have the possibility to switch to an OGraf that is tailored to work with SPX Graphics Software. There is currently also the option to create an HTML Universal/ HTML SPX Template of your animation. As the OGraf specification, being first released in 2025, is a fairly new specification, its technically similar but also very different predecessor 'HTML graphic template' that paved the way for OGraf for many years is still available as an export format.

Changing the export format also changes which field definitions are available and it is recommended to be chosen as soon as the Ferrman-panel receives your animation.

The documentation primarily shows the default OGraf export.

Edit and specify your fields

The 'Visible' checkbox on the top-right corner of each field determines, wether your field is attributed with a '"hidden": true' in the final OGraf html graphic templates manifest.

The first line underscored in light blue is the 'label' attribute and you can freely change it to whatever makes sense to you.

The leftmost arrows pointing up and down and the six dots indicate that you can change the input fields order. This is meant to change the order of appearence when filling your template with information.

Field-Types

By default, every input into your animation is of the type 'Text'. It often makes sense to change the input type for some of your fields to be another field type. This way your data input will be much more robust to be used by non-technical people as it will only be possible to fill in what the final user is supposed to.

note

Starting you layername with an "_" underscore in After Effects is a convention for our template to define a text layer to be dynamic. You can find all of the necessary conventions in Guidelines for your Project.

Validation

When you click on 'Validation', you get options to define boundaries for your inputfield. Putting '15' in the 'Max length' for example restricts the user to only type in up to 15 characters.

There is also an input for a regular expression, that's a neat way to validate an input field for an email adress is a real email adress with an '@' character and everything a real email adress has.

General field types

The general field types in Ferryman follow the data definition for OGrafs as mentioned here in the OGraf Github Repository (Issue 24)

Ferrymans field types

Through Ferrymans input field types you can also connect your text-layers to different sources externally controlled data. This is directly integrated into the template, so no further settings are required on the client side. It loads the source right before playing your graphic and of course you can update it with the "update" function.

Google Sheets Integration

Defining an input field as to be filled by an external source leads you to the External Sources window. Here you can add a link to your google sheet and test the connection to it.

note

Make sure to make your google sheet publicly available when using this feature. As your OGraf template will not be logged into your google account, it won't be able to fetch data if it is not allowed to do so.

Once your external source is added, you can close the external source window, choose your google sheet as the source for your input field and specify which cell of the sheet to be used as input.

Whenever your template is displayed, it will now automatically fetch the data from google.

Here are the steps for a google sheet as external source in a short list:

• Create a Google Sheet in Google Drive
• Publish you Spreadsheet so everyone with just the link can at least view it
• Copy the link from the url
• Add an external source in Ferryman and paste the link
• Connect the source to as many text layers you want
• Add the specific cell for each layer

Realtime Clock Integration

Ferryman makes it possible to link an input field to the realtime clock of the playout machine. The are six different formats available:

• 24h hh:mm:ss
• 24h hh:mm
• 12h hh:mm:ss am/pm
• 12h hh:mm am/pm
• 12h hh:mm:ss
• 12h hh:mm

Timer Integration

It is super easy to link an input field to a timer that you can start and stop while your OGraf is On Air. We have prepared six different formats:

• s
• ss
• m:ss
• mm:ss
• h:mm:ss
• hh:mm:ss

Starting and stoping your timer is a functionality your playout system will have to support for you to be able to use it properly. Most systems however will have at least the opportunity to at least send custom function calls to your OGraf and it is as simple as calling functions in your OGraf HTML graphic template while it is On Air.

If you are using CasparCG for example, look for invoke, it will give you the opportunity to call whatever function you want.

The functions you need to call are:

startTimer("textlayerName")
stopTimer("textlayerName")

setTimer("textlayerName", time)
setTimerStop("textlayerName", time)

"textlayerName" is the name of the textlayer in your AfterEffects composition that is the one displaying the timer. It is in quotes because it is a string.

'time' is a variable you will need to pass in seconds.

e. g.:

startTimer("_timer")

Stopwatch Integration

It is also super easy to link an input field to a stopwatch that you can start and stop while your OGraf is On Air. We have prepared the same six different formats as there are available for the timer:

• s
• ss
• m:ss
• mm:ss
• h:mm:ss
• hh:mm:ss

Starting and stoping your stopwatch is a functionality your playout system will have to support for you to be able to use it properly. Most systems however will have at least the opportunity to at least send custom function calls to your OGraf and it is as simple as calling functions in your OGraf HTML graphic template while it is On Air.

If you are using CasparCG for example, look for invoke, it will give you the opportunity to call whatever function you want.

The functions you need to call are:

startStopwatch("textlayerName")
stopStopwatch("textlayerName")

setStopwatch("textlayerName", time)
setStopwatchStop("textlayerName", time)

"textlayerName" is the name of the textlayer in your AfterEffects composition that is the one displaying the timer. It is in quotes because it is a string.

'time' is a variable you will need to pass in seconds.

e. g.:

startStopwatch("_stopwatch")

Text-Layers

Most of the time you will use textlayers to insert data into your templates. Just keep in mind to have their name start with an underscore.

Image-Layers

If you need an image in your animation to be dynamic simply follow the same convention as with the textlayers. As soon as the name of an imagelayer in your timeline starts with an underscore, it will also be displayed as a dynamic image that you will be able to be change in your template or for testing and fixing purposes directly in your Ferryman-panel.

Markers

(Left side is the Ferryman timeline with markers, right side is the After Effects timeline with markers)

Markers are mandatory and have to be created in your compositions timeline, you will need at least a marker called 'start'. This way the OGraf HTML template will know what to diyplay when the graphic presents itself to the world. Markers are best to be inspected on the small timeline on the right hand side during the 'Edit' phase in Ferryman.

Edit Markers

Just in case you need to manipulate markers in Ferryman, you can modify markers and lengths of markers inside the "Markers" window, that is to be found under 'Edit -> Edit Markers'.

info

Changing your animations markers does change them for the OGraf exported in the end. But keep in mind it does not change anything in your After Effects compostion and we recommend to set them up properly in your After Effects Project in the first place.

Fonts

Fonts are automatically embedded inside your animation, the export extension copies the font that you used in your After Effects Composition from your hard-drive into your animation. Fonts have to be: ".ttf" or ".otf" or ".woff"

Edit Player

The editplayer is an HTML native player. This player together with its controls is made to help you find out if everything works like it should. It updates in realtime whenever you change a value on the left-hand side, you can also use the transport buttons underneath to navigate the timeline.

When defining the field types and testing them, the player will always show you how the finished OGraf will look like once it is used in production.

Transport buttons in Edit Phase

Navigate through the animation with the control buttons, the current time including frame numbers is also shown on the left hand side.

• Go to frame 0 - jumps to the very beginning of your timeline
• Frame back - jumps one frame backwards
• Play/Pause - starts or pauses your animation
• Frame next - jumps one frame forward
• Play current marker - jumps to the start of whatever marker you are currently in and shows the animation inside this marker, then stops at the end of this marker
• Save current frame - downloads the current output of your animation as .png image to your computer

Markers

View the markers you created in your animation and their duration on the timeline. Clicking inside a markers area in the timeline changes the position of your playhead to where your playhead will stop when a marker was played.

Save Template

If you are conected to the internet and you are logged in inside the Ferryman Panel, it is also possible to save your currently open animation to your StreamShapers Account. This is the easiest way to make it available from anywhere with just a webbrowser and internet connection.

Edit fonts

You can find a window to view and edit your font files under 'Edit -> Edit fonts...' There you can change the font used in your animation if you need to. Keep in mind this does not affect your After Effects composition.

Edit Layer Names

Under 'Edit -> Edit Layer Names...' you will find a window to edit your textlayers names if you need to do that. If your composition was prepared correctly you should not feel the urge to do so. But you could do so.

Light Theme / Dark Theme

Choose whatever theme you want depending on what pleases your eye here. You can switch your user interface from dark to light and vice versa.

Show All fields / Hide Private fields

'View -> Show All Fields'

You can toggle private fields on and off. This might be interesting if you forgot to name your textlayers with an underscore at the beginning and don't feel like fixing it in your comp properly. If you enable all private fields to be shown, you can edit these layers, change their names and fix your animation this way.

Keep in mind this does not fix your composition in After Effects and we recommend to work properly and fix things in your comp before things get messy and not just at the end in Ferryman.

2. Ferryman Preview

The Preview Player allows you to evaluate exactly how the template will look and behave during playout, directly in Ferryman.

Input fields in preview

In the preview phase, the input fields behave like they should behave in your playout solution. This means a text field allows for text to be typed in. A percentage field only takes number from 0 to 1 including decimals. If you created a select input in the Ferryman Edit phase, you will only have the options from the select field you can choose from.

Transport buttons in Preview Phase

The buttons to play your animation also differ from the ones you had in the Ferryman Edit phase. They are now built to playout an OGraf, not just analyse your animation on a merker by marker basis as you should test the OGraf playout controls in this phase.

3. Ferryman Export

All the metadata an OGraf is supposed to have can be added in the Export phase. Name and ID are mandatory, the rest is optional. But it might be a good idea to give your OGraf some metadata at this point.

Thumbnails are also optional, but Ferryman does create a thumbnail either way, so make sure to click one a marker that makes sense to you to make sure you can find your OGraf HTML graphic template later in the OGraf compliant playout solution of your choice.

The 'Download File' button lets you save your OGraf to a location within your file system, take the exported .zip from there and unpack it whereever you like.

After Export

In case you exported an HTML Graphic Template from StreamShapers Ferryman and you want to play it using CasparCG we want to point you at some features the HTML Graphic Template will have:

Invoke

To get full control over your template you can use the Invoke function in your CasparCG-Client. Use:

playMarker("markerName")

to play a specific marker.

Debugging

We have implemented two special functions into the template that are useful for development.

As you play around with different templates in development, you may forget the exact keys you need for your data. Therefore, we created a "secret" info key. By sending the key

_templateInfo

(the value doesn't matter) the CG Server shows a list of every layer starting with an underscore " _ " . That's how you can check the right keys for your text- and image layers easily if you're using the naming convention with the underscore.

By sending the key

_debug

CasparCG will log information about the playing status in the command line.