Populate Dynamic Text in HTML5 Canvas in WordPress using ACF

Question

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:

Enter Text into an Advanced Custom Fields (ACF) in WordPress
That field then gets saved to an XML file (so I need to figure out how to do that too).
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 · Accepted Answer

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!

Le Pulsar · Answer

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 = ;var myVar2 = ; 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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.