I started using CasparCG a few weeks ago. Without prior knowledge of Flash / Actionscript, I choose HTML as the solution to create my template. Better people than me can probably create those templates with a text editor, I choose to search a WYSIWYG software.
There is a lot of softwares available for that. For some tools have been published to make your template communicate with CasparCG.
Adobe Edge Animate Adobe Edge Animate is no longer being developed by Adobe but because of the library written for it, it is still a good solution at the moment.
Adobe Edge Animate CC 2015 is still available to download with a CC subscription.
In the previous forum, an user shared a library he created to make template created with Adobe Edge Animate CC 2015 be manipulated by CasparCG.
He posted two videos on Youtube showing how to use that library:
The first video that show some basic functionalities:
The second video showing more advanced functionalities with a later version of the library :
A link to download the last version of the library is available in the description of both videos. At the moment I am not certain of the type of licence under which that library is available. I will try to contact the creator to see if i will accepted to release his library under a licence that would allow us to expand on it (i know i made modifications to some of the functionality I would share with other if copyright allows it).
I hope other will accept to share their work on templates created with other WYSIWYG HTML software (Google Web Designer or Adobe Animate)
I have used this library for quite a few templates.
I would suggest to down load edge animate 2014. As opposed to 2015.
2015 changes a few thing that make testing your templates harder to do unless you are familiar with html and java script. Although it still works it just doesn’t work as expected
2014 is available for download from Adobe.
that’s definatly a nice starting point !
I used it my self for a while and for the normal stuff it’s really really nice.
there is one but !
edge minify’s / isolates / makes the js code hard to understand when you want to do specific stuff.
specially when you are new to it.
i find using the KISS principle in template design the way to go.
one strong tool is in CasparCG it self, its the remote debugging port.
changing css in there shows directly the end result which i find very usefull
I’ve been meaning to test “Hype 3” on macOS (only) which has lots of HTML5 animation features. I know @Soprani likes it.
We used to build a lot of templates in Flash, but all new projects for the last year have all been built in HTML. However, almost all of our templates are so complex that there’s no way to build them using a graphical editor. Creating an efficient workflow for exporting SVGs from Illustrator and animated SVGs from After Effects using BodyMovin is pretty straight-forward.
It’s not rocket science, really. The archery target in the first lower-third in this clip https://www.youtube.com/watch?v=s9TeYNzDc0s is After Effects “Shape Layers” animated and exported using BodyMovin and then just played by the HTML5 template in CasparCG Server.
We do a lot of animation on the HTML canvas based on logic (for example the archery target in-animation in the above video), but predefined animations are really easy to create in After Effects, export through “BodyMovin” and then played using the “Lottie” player.
To make the player work is probably not the issue, but it seems, that Chrome does not support masks in SVG animations. Do you have any advice / experiance about this?
I’ve been using “Hype 3” soon to be “Hype 4”, works really well when paired with WebSockets and a custom client pushing data over WebSockets.
