Adobe Animate HTML with dynamic text fields Help needed

General
, ,
1

Hello everybody! So ill get right to it. I have undertaken a project (a little more than I can handle) and I am getting stuck when creating dynamic text fields that CasparCG can work with inside of Animate CC.

I have very little programming experience however I was able to successfully create most of the graphics I need like lower thirds, simple full screen plates however this one bumper graphic has some animations to the text which I had no idea where to even begin with something like that so I used Animate to export a .HTML and .js folder.

On the first try, it works with Caspar and the playout is exactly as I need however I can’t get the text fields to work and I was wondering if someone could help me out.

I’ve included the index.html as well as rundown.js

https://drive.google.com/drive/folders/1vslMhhMfliHkKHcr0KS2RxTFDYLVCFUe?usp=sharing

thank you for your time.

2

Also just wanted to provide a little bit of context to the project and maybe you could also just point me in the right direction.

After taking on this project I had to very quickly learn as much as possible about Caspar and HTML, and thanks to the resources here and youtube i was able to build a nice templates folder for the graphics i needed.

However this bumper is giving me a hard time. Ive sort of figured out animations but not enough to pull off the fluid look I’m looking for. Second this bumper has a video that plays out and the text only comes on screen after a certain point. So this is why I tried using Animate it allowed me to import a png sequence, and scale and modify the text graphically then export it as an HTML file. Most things worked smoother than i expected however i thought i would be able to just copy paste a few lines of code to take the animations but it was way more complicated than that. so now I am trying to figure out a way to fix this code so that the dynamic text fields work within CasparCG.

Thank you again in advance any advice is welcome.

3

Hi, do you need to do that on animate or could you use after effect?
Do you a video to show what exactly you have to achieve?

4

Ive added the video into the drive folder now. if there is a way to do this in after effects I’m all ears.

https://drive.google.com/drive/folders/1vslMhhMfliHkKHcr0KS2RxTFDYLVCFUe?usp=sharing

5

I would render the video as a WebM (with alpha) and just do the texts being dynamic. You can play a WebM video inside a template without problems.

6

well thats a simple thing. I already had exported everything as webM. I will experiment with now. thank you.

7

or i guess maybe im confused again. are you suggesting that I use AE to create the dynamic text fields or Animate. in Animate i tried importing a webm but it didn’t work so that’s why i used the png sequence. I figured worst-case scenario i could just play both the video and graphics simultaneously inside of caspar.

I also inside of Animate created dynamic text fields however this is what it spit out and Caspar doesn’t recognize the f0_title field as editable or dynamic.

// Layer_1
this.f0_title = new cjs.Text(“A much Longer\nchapter title”, “61px ‘Minecraft Ten’”, “#FFFFFF”);
this.f0_title.name = “f0_title”;
this.f0_title.textAlign = “center”;
this.f0_title.lineHeight = 78;
this.f0_title.lineWidth = 1116;
this.f0_title.parent = this;
this.f0_title.setTransform(561.1,-8.5);
this.f0_title.shadow = new cjs.Shadow(“rgba(51,51,51,1)”,-8,23,0);

I feel like i need to create some kind of parent or something in the index to tell caspar what to edit or add. but this is where my skills (or lack there of) vanish.

8

maybe there is something i need to do to make the text in the code above get the info from somewhere else that caspar can read as being a text field.

    <div id='name-parent' class='retina black Five name-parent'>
      <span id='name' class='name'>Jack</span>
    </div>
    <div id='twitter-parent' class='retina black Seven twitter-parent'>
      <span id='twitter' class='twitter'>@jwoodsproductions</span>
    </div>

This is code taken straight from Geert’s tutorial as an example. but i guess i get lost with the understanding of parenting.

maybe I am way off base and definatly out of my depth a little bit here.