How can I load external XML content to my HTML5 doc?

[cesarb_pixelstudio]

Noob question, so I'd appreciate some help. I'm trying to load some external texts and images into an Animate HTML5 canvas project via XML of JSON. It's been quite a while since I worked with Flash (around v8) and I'm trying to get acquainted with all the changes and I see most of my old Flash files - in which I managed to do this with ActionScript- are now worthless.

[ClayUUID · Accepted solution]

To load an XML file, you use XMLHttpRequest. However, XML loading from JavaScript does NOT work (by design) from a local filesystem, which will prevent you from being able to test your project unless it's running from a web server. The alternative is to store your data in a .js file—either as direct variable declarations (basically JSON) or as XML data stored in a single JavaScript string—which you'd then load like this:

var script = document.createElement("script");
script.src = "mydata.js";
document.head.appendChild(script);

For this particular setup you'd need a function call of some sort in the last line of the .js file to let your main code know it had finished loading. Or, you could hard-code the load into the containing HTML page, like so:

<script src="mydata.js"></script>

Then just listen for the page to finish loading everything:

$(document).ready(function() { initStuff(); });

That's using jQuery. Anyway, as you can see there are a few way to do this sort of thing. Just remember that you're not an ActionScript programmer anymore, you're now a JavaScript programmer (subclassed in CreateJS). Look to sites like Stack Exchange for these sort of questions.

[cesarb_pixelstudio]

I'm sorry to be a pest, but would you happen to have an example of the XML loading script?. I'm trying to get acquainted with it all as fast as I can but there's all sorts of data about Edge and very little information for Animate, I assume because it is new software.

Thanks again!

[ClayUUID]

Again, your question is really nothing to do with Flash/Animate. Where the AS2/AS3 environments present APIs for doing pretty much anything you could want, in Canvas mode Flanimate only provides the CreateJS library, which is focused on animation. For anything else, you'll need to roll your own solution or bring in a third-party library.

Loading XML via JavaScript is the core of AJAX, so it's a very well-documented subject. For example:

http://www.dummies.com/how-to/content/how-to-load-xml-with-javascript-on-an-html5-page.html

[anthonyc47215134]

For me this would be valuable to see an example of how the code would look in the actions panel and where the instance name of the dynamic text field would be in the code. 

Also, Is there a way to test this locally so that I do not have to publish to a web server?

Thanks

[theLingorian]

Ok - let's get down to business. Adobe has dropped ActionScript and replaced it with JavaScript. Fine.
But dropping the ability to dynamically load any XML and use any part of the XML to put content in a dynamic text field? Really?
I think not. This simply cannot be true.
So, guys, how are we supposed to load external text content from any XML file we choose, and use any node we choose to feed our dynamic text fields in runtime in the final HTML5 environment?

I just has to be possible to write JavaScript code in the code window of Animate CC that loads an external XML from anywhere, and use the content to display dynamic text.

[ClayUUID]

theLingorian wrote:

Ok - let's get down to business. Adobe has dropped ActionScript and replaced it with JavaScript.

False. ActionScript is still fully supported in AS3 and AIR documents. JavaScript is only used in Canvas and WebGL documents.

But dropping the ability to dynamically load any XML and use any part of the XML to put content in a dynamic text field? Really?

No, not really. You can load any XML document and extract any data you want from it and put that data in textfields just fine.

I think not. This simply cannot be true.

Correct, none of what you've asserted so far is true.

So, guys, how are we supposed to load external text content from any XML file we choose, and use any node we choose to feed our dynamic text fields in runtime in the final HTML5 environment?

The same way every other JavaScript application on the planet does so—by using XMLHttpRequest.

I just has to be possible to write JavaScript code in the code window of Animate CC that loads an external XML from anywhere, and use the content to display dynamic text.

Ah, "from anywhere". Finally the actual complaint rears its head. No, you cannot load an XML file from the local filesystem. This is a security restriction imposed by the browsers. It is completely out of Adobe's control. If you really really need to load data from the local filesystem, you have to use a JS file instead.

[theLingorian]

ClayUUID wrote:

theLingorian wrote:

Ok - let's get down to business. Adobe has dropped ActionScript and replaced it with JavaScript.

False. ActionScript is still fully supported in AS3 and AIR documents. JavaScript is only used in Canvas and WebGL documents.

Ok, sorry - I only target Canvas, so for me it was true. 🙂

But dropping the ability to dynamically load any XML and use any part of the XML to put content in a dynamic text field? Really?

No, not really. You can load any XML document and extract any data you want from it and put that data in textfields just fine.

Are you referring to Animate CC text fields now, or HTML text fields? I need to direct my text (preferably html formatted) to Animate CC text objects.

I think not. This simply cannot be true.

Correct, none of what you've asserted so far is true.

So, guys, how are we supposed to load external text content from any XML file we choose, and use any node we choose to feed our dynamic text fields in runtime in the final HTML5 environment?

The same way every other JavaScript application on the planet does so—by using XMLHttpRequest.

I just has to be possible to write JavaScript code in the code window of Animate CC that loads an external XML from anywhere, and use the content to display dynamic text.

Ah, "from anywhere". Finally the actual complaint rears its head. No, you cannot load an XML file from the local filesystem. This is a security restriction imposed by the browsers. It is completely out of Adobe's control. If you really really need to load data from the local filesystem, you have to use a JS file instead.

Ok, so basically I need to load a JS file and the XML reading would be handled by this JS file, and then somehow I should pass the extracted text parts to specified text objects "on canvas". Correct?

Example:
I have a text object on frame 72 with the instance name "textObj_1", and another text object on frame 88 with the instance name "textObj_2".
The javascript in the external JS file I load, should load an XML containing both texts I need, place them in an array, and later on - when entering frame 72, a script written in Animate CC on frame 72 will call a function in the external JS file which gets the first text and passes it to textObj_1. And when entering frame 88 a new call to the function in the external JS file will get the second text and pass it to textObj_2.

Doable?

I tried doing this, but couldn't figure out how to make the text object switch text from the external JS file. It would be great to get some directions on that. 🙂

[ClayUUID]

Re: Assigning XML content to dynamic text fields

[Long Con]

That link is broken, but it might have been just what I'm looking for.  I have an HTML5 Canvas document in Animate, and I have loaded an XML file in successfully, but none of my attempts to interact with it are working.