Populate Dynamic Text in HTML5 Canvas in WordPress using ACF

[lcg_2012]

I am trying to find a tutorial or documentation on how to populate a dynamic text box in HTML5 Canvas. 

My goal is to put the animation I created in Animate into a WordPress website and then, using Advanced Custom Fields (WP plugin that allows me to create fields on the backend anyone with access can change without knowing any coding), allow the client to change the text in the slider.

I know this is a HUGE ask because the only way I found to put my finished animation into WordPress is via an iframe. Not ideal.

I thought there was a way to populate based on an XML document, but I am not very familiar with the scripting side of Adobe Animate. So I am trying to learn how to do this and have not had much luck finding documentation.

If you respond, assume I am a moron, because currently with Animate coding, I am.

So make it as easy to understand as possible. Sharing a script would be great for grabbing text from XML and populating the dynamic text. But I will also need to know exactly how to add that script to the Adobe Animate file. Meaning, I am not even sure where to add scripts in Animate.

I think this will be the path:

1. Enter Text into an Advanced Custom Fields (ACF) in WordPress
2. That field then gets saved to an XML file (so I need to figure out how to do that too).
3. The XML file is then read by the Adobe Animate HTML5 Canvas document so the text replaces the default text typed in.

Thanks in advance for any help you can offer.

[Le Pulsar]

Hi!

You can achieve your goal by passing Javascript variables in your HTML. You don't (and shouldn't) have to put your animation in an iframe. It's quiete easy to take the generated code and paste it in a page template (or anywhere else in your theme). Don't forget to include the librairies.

So what you can do is to create javascript variables and to call them in your animate file.

Put this in your HTML file.

var myVar1 = <?php the_field('var1'); ?>;
var myVar2 = <?php the_field('var2'); ?>;

And you can call it in your animate file this way:

console.log(window.myVar1);

I'm pretty sure there is a prettiest way to do this, but it does the job 😉

Let me know.

[lcg_2012]

This is really helpful, thank you!

In order for this to work, I will need to get the Adobe HTML5 Canvas into WordPress withouth an iframe.

Any idea how to do that?

[Le Pulsar · Accepted solution]

This is a Wordpress matter.

Take all of the code generated in your HTML from animate and paste it in your page template. 

Take care to load all of the assets (usually createJS and an index.js). 

And you'll be good to go!