How to edit/make CasparCG graphics

April 16, 2016
Tutorials

In this tutorial, we’ll teach you how to edit CasparCG graphics that come in bundle with our clients. Also this technique can be applied on making your own CasparCG graphics.

In this case, we’ll be using Flash based templates.

The workflow can be divided in three parts: Photoshop editing, After Effects animation and Flash conversion. So, in order to achieve all this, you’ll need:

  • Photoshop
  • After Effects (CC version if you want to edit Navis Media graphics)
  • Flash Professional
  • FT generator

FT generator can be found on this link, as well as other useful settings like After Effects settings etc. But for this tutorial, we won’t be using it because I’ll try to keep this as simple as possible.

Example .fla files (emptyline.fla and player.fla) are available for download on this link.

1. Photoshop editing

After you’ve unzipped all files from NMHD-graphics-AEP archive, go to slices folder.

slices

You’ll see a lot of .psd files. Each one represents part of a graphic. In this tutorial we’ll be editing lower third that contains player’s name, so for this we’ll need l3rd.psd file. Open it with Photoshop.

ps

Now we can start designing our own graphic. In this case, we’ll change the color of the lower third to red (apply hue/saturation effect on the background layer) and also add a border on the bottom (just draw a rectangle). So the final design should look like this:

ps-edited

Now save this .psd. We’ll move to After Effects.

2. After Effects animation

Now open navismedia_graphics.aep project in After Effects. By default, AE will automatically replace all the .psd files you’ve edited. But in case it didn’t, select all .psd files in “Cuts” folder,  right (on any of them) and select “Reload Footage”.

ae1

Now let’s move on ‘Player’ graphic animation. Go to folder “FINAL” and open composition called “Player 3RD“. You’ll see that the ‘Player’ graphic already has new skin applied!

ae2

So, we now have to export this whole animation to Flash. The best way to do this is to export animation as image sequence. We’ll be using PNG sequence, but others like .TGA will work as well.

So go to Composition > Add to Rended Queue. In the ‘Output Module’ settings dialog, choose PNG Sequence as Format. And very important, in the ‘Video Output’ section, choose ‘RGB + Alpha‘ as Channel. If you don’t do this, your graphics won’t have any transparency.

ae3

Finally, select a location you want to save this image sequence to. After rendering is completed, we can move on Flash.

3. Flash Professional

Now we’ll need to extract NMHD-graphics-FT-FLA archive.

flash1

After you have done that, open file called ‘player.fla‘. This is what you should see:

flash2

The graphic is still blue, right? Yes it is because the animation files that are loaded in that .fla projects are the old ones. We need to replace them with the new sequence we’ve just exported from After Effects. So let’s delete all sequence images from this .fla file. Go to ‘Library’ panel on the right side and select all .png files that start with ‘Player 3RD’, right click on any of them and select ‘Delete’.

flash3

Now we don’t have any background animation. Let’s import the new image sequence.

Select the first frame on layer ‘BG’.

flash4

And go to File > Import > Import to stage. Now you’ll have to find where you saved your image sequence. Once you found it, select the first .png image and click “Open”.

flash5

Now you’ll be asked if you want to import all the files as a sequence of images. Click ‘Yes‘.

flash6

Voila! Here is our new graphic!

flash7

And finally the last step is to generate .FT template. Go to Window > Other Panels > Template Generator. And click on ‘Build template’ button (at the top).

flash8

Now the .FT file will be generated in the same folder where is your .fla file you are currently editing. Copy this new .FT file to the folder where are all other .FT graphic files and replace the old one with this new.

If you did everything correctly, this new graphic should appear when you press ‘Player’ button in the client.

We recommend you not to touch script.as file because even slightly mistake made there can cause all graphics to stop working. So, be careful. Also, in .fla document you can edit the size of all image holders and font size, style etc.

So, that’s it! Hope you now understand the workflow of editing (and making) CasparCG graphics.

Don’t have a copy of Soccer/Basketball client? Get yours here!