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.
- Learn HTML, CSS, and Javascript. Dash has a great free program for this found here.
- Learn SVG and Canvas, they are your friends!
- Understand media event listeners so you can control your scrips around loading resources.
- 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:
- NodeJS - To launch a server and connect to the CasparCG Server
- Express to host a Web Server
- Pug to build out a front end for the user to interact with.
- AMCP Commands to interact with the CasparCG Server. A lot of this is handled by the Caspar Connection Library.
- The Caspar Connection Library.
- 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 
@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?
- https://webdesigner.withgoogle.com/
- https://github.com/o3jvind/Google-Web-Designer-Templates-for-CasparCG
- Mac , Win , Linux
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.
I recently stumbled upon the Three.js API and made some nice proof of concept templates using it and the result so far is very nice. Worth giving it a try, specially for complex scenes/templates.
Here is an example:
I dont want to open another Thread for more or less, the same question.
Situation: I am good in working with adobe software. I can use animate cc, after effects cc, etc. and I can create Lower Thirds with After Effects and create Templates in AnimateCC. We do live Pen and Paper roleplays on twitch and I want to do votes on Twitch and display the Results via Caspar CG-Graphic. How to do voting bars, which values can be changed via casparCG. Would that be easier to do in HTML?
I was thinking about using the Excel Add-In but then I still need some Flash Template which shows voting results.
Regards,
Deniz
Regards
I did a lot of voting graphics in Flash, but you can also do them in HTML, what ever is easier for you. You will sure need to do some scripting inside the template in either case to make the bars change their size. And yes, the Excel Add-In is no help when it comes to building templates.
What I like nowadays to work with, is Google Charts.
There are a lot of tools, and examples for starters in HTML5