Stacking and animating multiple graphics

Hi All,

I am brand new to CasparCG, coming from writing my own (basic) graphics systems. Now that I am wanting to do things which are a bit more complicated it seems a good time to look at building upon an existing system.

In particular, I am keen to do results graphics like shown in this video https://www.youtube.com/watch?v=WKJXSSOGBSk&feature=youtu.be&t=3418 where the graphics stack and animate to make room for the next graphic.

For complex graphics such as these I am guessing that using Flash-based graphics would be the easiest (in terms of design)? I have successfully created some basic graphics templates in Adobe Animate, but I am unsure how to develop this kind of graphics setup where I can continually feed in new results and the graphics do the nice smooth animations to display the new results on screen, while also adjusting the position of the existing results to make room.

Thanks in advance for any assistance!

1 Like

Hey,

I’ve done some template work in CasparCG and a lot in other realtime graphics systems and I am guessing the example is done in Vizrt or Orad something of that nature (just by pixel peeping the highlight animations on the borders)…

But in CasparCG you can utilize UPDATE() to push new data into the template and then act on it in your update event handler.Another option is to create custom functions to do table sorting and animation and then call those functions using INVOKE().

Hopefully someone can shed more light on this. I’m also interested in hearing people’s best practices on approaching these with CasparCG.

Thanks for your reply and insight @Tuomo. So, talking to a total newbie here, would the logic (such as the update event handler) be in the Flash project, written in ActionScript, or is that something within the Caspar client?

Hello, I am a novice in Casparcg and I am looking for solutions like the video because every time I am asked more professionally by graphics at my sporting events, we are basically timekeepers, but we would like to have a professional solution for this area.

We have the data, the tables, we know what data should go in each template, the dynamics of showing them, but we need to know Casparcg to develop the integral solution. Does anyone dare to join the team?

Yes, this can be done in CasparCG using Flash templates, I did that many times, and sometimes also more complex things. But to explain that in a forum post is quite hard, as it would end up in a advanced ActionScript programming course, and that is not what I have time to do :slight_smile: So if you have a little budget for this, please post into the new category “Paid Work Available” with a proposal and I would love to quote you, as a few others probably will do also.

Meanwhile see this video. All graphics are done as dynamic Flash templates, that can adapt to different amount of lines etc. Watch at 23:20 for a classification, that can grow in both dimensions, lines and columns are dynamic.

Thanks for your reply @didikunz. I do have a little budget, and this would be an excellent opportunity to get an example from someone who knows their stuff - which then I can learn from, and build upon myself.

Just posted a proposal in the Paid Work Available category: Dynamic Flash Template

Look forward to hearing your thoughts!

Adding to the example pile:


There’s plenty of flash templates across the video, this entire stream is handled by CasparCG and OBS.

I think I can share some of the files as this is an old season.
The only thing left to program is the update funcition that adds the new row.

You could use the html render and do something like this with an animation library (It’s super basic but you get the idea of the animation being possible)

https://codepen.io/ScarlettCode/pen/zYvqMZR

The press me button would be replaced by a call from your caspar client. You’d send in the new data for the new row to be added and it would add that row and animate the rest out the way. I’m using https://animejs.com/ here but any js animation library would do the job. Just pick your poison. You could use svg’s for the rows in place of the divs which would save you having to “design” in html.

Michael

I’m the creator of those graphics you mention @skoota

I created that package a few years ago, based on Flash. The biggest advantage (of the time) for using Flash was in my opinion the ability to easily design and tweak the looks and feel of the graphics.

All the movement of the element is coded though, so that is just as easy (or hard) to implement in Html/js as in Flash/actionscript.

For these types of graphics with lots of advanced and dynamic movement, I recommend to put as much of the logic right into the template, and then have an external application feed it new info (results) when it changes, and let the template figure out what to do with the new info.