HTML Template workflow using Adobe Edge Animate

For those who wish to use HTML templates with CasparCG and don't know where to get started (like I was few days ago),
here is a simple workflow example using Adobe Edge Animate.
I've tried a few different HTML designers and have settled on Edge Animate because: _
Following is a basic sequence of steps to get going:
  1. Download and install Edge Animate.
  2. Open it and Create New project.
  3. Resize the Stage to match your screen resolution (eg, 1920x1080), set Autoplay to on and change Composition Class name to "edge".
    Optionally, make Stage background transparent.
  4. Save the project.
  5. Using your text editor of choice, create new file called "control.js" inside the project folder and put the following contents into it:

    Code: Select all

    var saved;
    function update(data) { saved = data; }
    function play() { }
    function stop() {
    	var stage = AdobeEdge.getComposition("edge").getStage();
    function next() { }
  6. Using your text editor of choice, open the project .html file and find this line:

    Code: Select all

    <!--Adobe Edge Runtime End-->
    Add the following line right after it:

    Code: Select all

        <script type="text/javascript" charset="utf-8" src="control.js"></script>
  7. Create your animation in Adobe Edge Animate.
  8. If you want the animation to stop at some point on the timeline and wait for you to issue the stop command (press F1 in CCG Client),
    position the marker on that point and press Ctrl + T to create a trigger. In the trigger window type in:

    Code: Select all

    This will cause the animation to stop playing once it reaches that point.

    Next press Ctrl + L to create a label and call it "stop". This will be the starting point for the stop command (ie, the animation will start playing from this point once you press F1 in CCG Client).
  9. Of course, the coolest thing about templates is that you can pass data to them from CasparCG. Let's say you have 2 text boxes in the template called "first" and "last" and you want to be able to set their text from CCG. To do that, right click on the Stage and select "Open Actions for Stage" from the menu; then select "compositionReady" action and type in the following:

    Code: Select all

    var json = JSON.parse(saved);
    Save your composition. Go to CCG Client, set "Send as JSON" to ON and 2 key/value pairs, e.g. "first"/"John" and "last"/"Doe".

    If you text boxes in the template have different names, adjust the above code and your template keys accordingly.
Voila you should have a working HTML template that accepts dynamic data.

Share and enjoy.


PS: Attached you will find working example template that I've created with Edge Animate.

PPS: I hate BBCode. :)
(71.96 KiB) Downloaded 97 times

Re: HTML Template workflow using Adobe Edge Animate

Cool, thanks for sharing! I have added this as a guide on the wiki, I hope you don't mind me doing so.

I'd suggest using this code for step 9:

Code: Select all

var json = {};
saved = saved.replace(/^(<templateData>|<componentData>|<data>)|(<\/templateData>|<\/componentData>|<\/data>)$/ig, '');
try {
    json = JSON.parse(decodeURI(saved));
} catch (e) {}
for (var key in json) {
It adds support for clients based on CasparCG 2.0.7 (which doesn't allow for JSON data) and makes the data keys dynamic.
CasparCG enthusiast and broadcast geek