Create HTML graphic template for Caspar with Adobe Edge Animate

template

#1

Hi!

I’m quite new to using CasparCG and would like to create HTML craphic templates. I’ve used Viz and Xpression in the past and they both have dedicated graphic creating software to go along with their playout software.

I’ve tried to make graphic templates in Adobe Edge Animate 2015. I’ve followed this guide: https://github.com/CasparCG/help/wiki/Media:-HTML-Templates

In step number 6 there seems to be missing some text (Using your text editor of choice, open the project .html file and find this line:). Which line is it reffering to? My graphics will now only animate in but not continue with the out animation. I’ve defined my out animation with “stop” label.

Another thing is how do you define the text field to be accesible inside of Caspar CG. I’ve manged to edit text inside CasparCG making a template with Adobe Flash and using dynamic text but I can’t figure it out in Adobe Edge Animate. I see in step 9 there is some text to input into the stage actions but I don’t know how to define what text to edit.

If there is some other tutorials I should check out regarding creating HTML graphics for CasparCG I would appriacte if you would share some links.

-Herman


#2

in your adobe edge file folder is the file “example.html” (example is your filename)
you open it with the windows editor or any other plain text editor.

you add the two following lines:

<script type="text/javascript" charset="utf-8" src="js/E2C_Libraries-0.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/E2C_Main-0.7.1.js"></script>

BEFORE the </body>

EXAMPLE:
redetimer.html (969 Bytes)

then you add the two complete Folders css and js into your template folder, as subfolders.

there are videos on Youtube, if you follow these, it should be no problem.

https://www.youtube.com/watch?v=2HEMLY-N8fk

You can download latest version 0.7.1 of library from here: http://jmp.sh/UaCoqg8


#3

one small advice i have for you as well as you do more of these.
i use edge 2014.
2015 changed the way it wraps text fields in a div.
and the text element will have its own CSS style for the text.
when you dynamically change the text in Caspar either form a data source or a client.
you will have to code all the CSS in to the data or make a function to handle this.
or customize the css for the DOM.

in 2014 the default css was for the div and the text you sent to the template will retain the stile you gave it in edge. new live data will act as expected in the tutorial video.
i find it faster.


#4

Thank you! Helped a lot!


#5

Thank you for the tip!


#6

HI there,

I would like to start investigating this also and I notice I have animate 2017 on my machine.

Can this version still be used ok?

Cheers
Chumby


#7

animate is the new name for adobe flash. it includes html development, but unfortunately the edge library is not supported.
adobe edge animate is discontinued.
you can still download all versions 2015
https://prodesigntools.com/adobe-cc-2015-direct-download-links.html
read carefully the description how to download.


#8

I find the html-graphics-boilerplate repo to be very interesting. It uses react.js to create the template and performs animation with GSAP TweenLite. You’d then fire up the node server running react and add it to the CasparCG command with something like cg 1 add 1 http://localhost:8080 1 if you’re using server v2.2.0 beta7. The repo has been updated relatively recently which makes me think the author uses this workflow for his Html Producers. This doesn’t help with Adobe Edge, but I didn’t get a great feeling about the Edge Animate workflow when I noticed Adobe has ended development for the edge family of products