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.
1 Like
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.
1 Like
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
1 Like
I’ve been use Hype for real time graphics for swimming, works great.
3 Likes
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:
3 Likes
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
1 Like
@rrebuffo : Last time I looked at Three.js there was a font handling problem, it looked it could handle only basic fonts in 3D and no standard 2D font manipulation was available. Have things changed?
Just as a side note: This tread is entitled “Professional smooth live graphics - what to choose” currently it should be named “General discussion about this and that”.
It would be nice, if people, who want to share their valuable knowledge or opinion, but that is off topic would simply open up a new tread. It will not fall under corona lock down rules, so it will not be forbidden or something and does not hurt either.
I think you get my point.
I agree… But, many of these technologies are necessary to be able to develop complete solution, I mean we are talking about several years of knowledge and it may also require other types of necessary technologies.
The most important thing is that you set a goal for what you really need, because you may start a new life before you will be able to reach a goal that you may not have needed in the first place anyway.
After working for over 19 years with development in the media, I can say for sure that very large tasks can be solved easily if you set a clear goal in the project. Several years may be resolved in a few hours or days.
Remember, sometimes you can buy a complete solution, and it can cost you much less than what you would use to develop something for yourself. Time is more valuable than money .
2 Likes
After working with CasparCG we had the same issues, sometimes html have performance issues. At the begining we use TweenMax with frame by frame… Some times it was not smooth.
Then we passed to lottie and it was a great improvement in graphics possibilities but have a lot of performance issues too if there were a lot of objects moving. We have templates with more than 200 objects moving!
Our last project with lottie was Olympic Boxing Qualification (https://www.youtube.com/watch?v=DrVHrYtF6yU)
Our clients have graphics designers and we like to give them the freedom to make the graphics so we had reseached a lot to resolve this.
At this moment we are testing templates in html divided in 2 parts… Static part we make it with video and dynamic part we make it with lottie… It unbelivable fast, smooth and sync. Still on test fase but we love it…
For us caspar is good because we have a lot of resources to make our client app for any project… Whaiting for default cliente app with plugin based solution… 
1 Like