Professional smooth live graphics - what to choose


I have been using caspar for many years. Until now I have mainly used flash templates but it is 2020 and Adobe is ending support of flash so I should find some new solution. I wonder how to create graphics for various sport events (live data) using open source softwares and my skills. I can create animations e.g. in after effects, i can programme in several languages, i can do automated template in ae. I would like to create nice professional smooth templates (with dynamic live data). What to choose? How you do that? Can somebody share knowledge about it? Is caspar and html template enough or maybe to do something on higher level there is some better solution?
Technically as a output I would to have key and fill. I have used decklink cards so far.


I either would stick with Flash for a while or use HTML. There is an way to make AE to export to HTML by using BodyMovin. Adobe willl soon add the ability to export mogrt template to HTML So that will be a good way to do it. I for myself still use Flash and will probably do the switch to HTML later.


If you do decide to move to HTML, I would recomend learning these things to get up and running quickly.

  1. Learn HTML, CSS, and Javascript. Dash has a great free program for this found here.
  2. Learn SVG and Canvas, they are your friends!
  3. Understand media event listeners so you can control your scrips around loading resources.
  4. Learn how to animate with GSAP’s animation library.

That should be enough for you to begin developing high quality, dynamic HTML graphics. But, you will learn pretty quickly that the default client is missing a few creature comforts. So, to make your own client, you will need to know:

  1. NodeJS - To launch a server and connect to the CasparCG Server
  2. Express to host a Web Server
  3. Pug to build out a front end for the user to interact with.
  4. AMCP Commands to interact with the CasparCG Server. A lot of this is handled by the Caspar Connection Library.
  5. The Caspar Connection Library.
  6. Some sort of database storage ( MongoDB recommended ) to handle and manage graphic’s status.

Creating your own client is a lot more to tackle compared to the graphics but in my opinion, worth the investment. Please let me know if you have any questions!


Actually I have my own client app that collects a lot of data (.net c#). I am now in the middle of process of changing technology to NodeJs and Angular but it is still mainly about data and control what to play.
Sometimes production company gives me tga sequences or mov files with ready animations. I have to take it and prepare live data graphics. Until now I changed it to png sequences and embedded in swf files than a little bit of action script and i had dynamic templates. Maybe sometimes it wasn`t so smooth as it should be but It was fine. It is good year to find new solution. I wonder if there is anything better than html… blender, after effect or something to do more complicated templates.


By the way, I wouldn’t embed image sequences either in Flash nor HTML - this could be the reason why things weren’t running so smoothly. I’d recommend using Flash only to handle text or smaller image resources and play transparent videos in the background using the FFmpeg producer. You’d have to account for the delays between different producers though.


@madis in many cases it is impossible to do like that. For example you have clean animation but dynamic text on it is masked by elements from it. Everything has to be synchronized frame by frame.
Look at F1 official tv graphics or FormulaE this is something I would like to do :slight_smile:


@Aston Oh yes, I’ve been there - getting different elements to sync is sometimes a pain when using separate producers. In some cases I’ve used masking layers in CasparCG to get that effect and have set up dynamic delay parameter in the client to fine tune animations on the production machine. The animation sequences were very long and it got really laggy when I embedded them.

Another reason not to use embedded sequences is You can play interlaced videos right out of the box with FFmpeg producer, which makes animations even smoother in television.


That is correct, if you have full screen image sequences. As I said earlier I still do Flash, so I cannot say anything about HTML. In Flash I only render the image sequence in the smallest possible size. So for a lower third you end up with a sequence of images for instance 700x150 pixels. Put that in a MovieClip and place it on your stage. That renders quite nicely.


It sounds like if you move to HTML templates, you can simply convert the videos to VP8 and serve then via an Express server. Sadly VP8 is the only supported video codec since chrome can only ship open source video codecs with chromium.


I’ve been having the same kind of dilemmas for a while now.
This post is an example of the questions I’ve been asking myself and the forum. Flash was a good motion graphics tool but performance has been worst and worst over time and some development hiccups like those png sequences import times are enough to (not so) slowly transition to html templates.
I’ve found html templates just as capable as flash ones in terms of “artistic expression capabilities”, only finding limitations in terms of template->server interactions.

What kind of graphics are you saying? I find them pretty simple to achieve in html or flash. The hard part is the AR ones.

I wish some 3D engine would make it into a producer for REALLY appealing templates and full GPU rendering and mixing. Just dreaming out loud.


How about using two softwares below?


I’ve been use Hype for real time graphics for swimming, works great.


Any other sensible solution (apart from VP8 encoding) to move to HTML with ‘video’? I ask this as similar to Aston, we frequently work with on-screen design packages delivered by institutions such as UEFA, FIFA etc where all animations have to be exactly as described in the design guide, not one frame different.

Till now we have worked with Flash, but as some users have already described, a lower third animation is one thing, something which covers 75% of the screen with a 10 second long animation is much heavier on the system. Plus, using HTML it is way easier to plug the graphics into online data sources - with Flash, you need some sort of middleware, which ultimately is ‘another point where things can go wrong’. Hence, we would really like to move to a full-HTML workflow


Are you just looking for general reasons to switch? I think the greater overall support and constant development really are the major reasons. It isn’t so much if you have to switch but when.


I know flash was great and since it will not be available in the future so i think html is the right answer. If you are a very professional producer then I do not think other than caspar and html you would need something higher level software.