One of the most asked questions when discussing HTML graphics in the context of broadcast and live production is this,
“This looks great but how do we actually create these graphics?”
The convention in graphics template creation is using proprietary editors that are linked to the specific playout system. But when thinking about HTML graphics, we need to change our perspective to a more open, web-based approach.
This means that HTML graphics relies on an ecosystem of tools and providers which can be mixed and matched to fit the specific needs of the user and their use-case. Let me explain.
The first big question is whether the graphics creator is a designer or a developer. The strength of HTML graphics is that it opens up the talent pool for graphics developers to the ~30M web developers around the world. With a little bit of adjustment, this enormous pool of devs are able to start creating graphic templates to be used in broadcast and live productions.
But while web devs are able to implement graphics using code, graphics designers also need a way to develop HTML graphics using familiar visual tools.
We’ve gathered and broken down the main tools currently being used by graphic professionals to create HTML graphics. Each of these tools are designed for different workflows and what sort of graphics you are trying to create.
After Effects + StreamShapers
We all know that the industry standard for animation is Adobe After Effects and that probably won’t be changing anytime soon. Currently, designers are using AE to animate references of how the template should look, which is then being passed down to implementers using various tools to recreate the look. Obviously, this is an inefficiency in workflow.
One of the draws of HTML graphics is that there is a potential to use existing design tools like AE and turn them into graphic templates with ease.
Ferryman by StreamShapers offers a web application which can convert AE animations into dynamic templates via a Lottie file. This means that the AE file will first need to be exported to a Lottie file (using a plugin such as BodyMovin) then be put through StreamShaper’s app where you can define the dynamic fields and out comes a HTML graphic or OGraf ready to be used in your playout system.
Key Takeaways
- It’s AE, what more is there to say
- No code required, which also means no modifying after export
- StreamShapers and Adobe are part of the EBU working group for OGraf
- Currently requires multiple external tools for conversion (ie. BodyMovin & StreamShapers)
- Limitations in supported effects/expressions, see here for details
Future Outlook
StreamShapers is rumored to be working on a more seamless workflow for After Effects as well as support for Rive exports. In addition, there seems to be interest from Adobe when it comes to HTML graphics, as they are a part of EBU’s OGraf working group, but development is yet to be seen.
Resources
After Effects to HTML Graphics workflow
Example graphics made with StreamShapers
Loopic
For users that are looking for the most seamless workflow of creating an animation and exporting to HTML graphics, Loopic is the choice. It can be thought of as the “Figma for HTML graphics” in that it offers its user friendly version of a familiar animation tool on the web.
Since the tool is designed specifically for HTML graphics template creation, the workflow is streamlined with a single click export of a template that is ready to be imported into various playout tools. And while the app is simple to use, you can still implement complex animations such as transition logics using the browser's native feature, as well as ingesting live data via API.
Key Takeaways
- The only native HTML graphics editor with one click export to SPX, CCG, OGraf, etc.
- After effects-like UI makes the transition easy for designers
- Part of EBU working group for OGraf
- Effects are limited by CSS properties
Future Outlook
Loopic just released their latest update which includes Lottie support, as well as general improvements. And while not official, they are teasing an on-prem version of the app to fit into existing on-prem workflows, as well as a more native way to handle transition logics.
Resources
Rive
Another tool that has recently been gaining attraction for HTML graphics is Rive, a web app originally created for mobile app UI/ game animations.
The draw of Rive is in its powerful animation editor which includes a state machine for complex animations and transitions. In addition to the editor, Rive uses its own .riv file format and the runtime renderer, which allows them to go beyond traditional CSS effects and HTML performance.
Though there is potential, Rive is not created with traditional broadcast and live production graphics workflow in mind, and thus requires manual work to be used in existing playout systems.
Key Takeaways
- State machine, vector feathering, and other complex animations and transitions.
- Rive develops and owns the editor, file format, and the runtime renderer
- Requires manual connection after exporting rive file to connect to SPX/OGraf definitions
Future Outlook
Still relatively new tool for HTML graphics creation, and will need more investigation to see how it fits into actual production. Things like StreamShaper's potential integration with rive might make the tool more viable for use in broadcast graphics.
Resources
Read more about Rive for the web
Custom Code + AI
Then of course there is the option to code graphics by hand. At SPX when we work on complex graphics packages for clients, 9/10 times we are doing these by hand because our team is made up of web developers who are fluent in creating graphics using code.
And with the recent innovation in AI along with clearly defined standards for HTML graphics (such as the OGraf standard), it is becoming more accessible than ever to get started using code to generate dynamic templates.
Key Takeaways
- Complete control of graphics and logic
- Unlimitedly extendable with libraries from the web
- Take advantage of the latest AI innovation for efficient coding
- Requires web developers, along with HTML graphics specific knowledge
Future Outlook
We believe that AI and standardized structure will open up a entirely new workflow for coding HTML graphics. You can imagine an AI tool that is trained on thousands of HTML graphic templates to be able to code a new template just from a visual mockup.
Other Mentions
Adobe Animate
A classic tool originally for creating flash animations. As it can export the animation as a <canvas>, it can be relatively simple converted into HTML graphics. Good option if you are already a long time Animate wizard, it is relatively simple to convert them into usable templates. Learn more here.
Godot
While mostly overkill and complex for creating 2D overlay templates, Godot has the ability to be exported to the web with it's powerful engine that can run in the browser. This does open up a potential for use to run 3D templates but will need to be investigated more by the community as well as a general improvement in the graphics processing capabilities of the browser (upcoming WebGPU support may change things up). Learn more here.
Lottie Creator
The latest addition to the list of tools is the official Lottie editor web app by the organization behind Lottie files. Similar to Rive, it offers an animation view as well as a state machine view which allows you to visually create complex animation logic. With its built-in AI co-pilot and potential support of Lottie State Machine by Ferryman in the future, this tool should be evaluated further by the community. Lean more here.
This was a high level overview of the state of tools for creating HTML graphics. But as you can already tell from this non-exhaustive list of tools and workflows, the real power of HTML graphics is in its open ecosystem of tools and standardized formats, which allows for a very flexible workflow to fit the user’s exact needs for live graphics.
It’s an exciting time to be involved in the world of live graphics as we are seeing a visible trend of moving from an end-to-end, proprietary tools approach to an open ecosystem of tools based on the ideology of the web.
We will continue to update this blog post with new tools and updates as they come, but since this is such a crucial topic, we will be making videos and more content diving deeper into each of these creation workflows in the near future, so stay tuned.
The best way to stay notified about our latest content is by following our LinkedIn page where we will be sharing links to everything that we want to share to the world.