New Participant

Answered

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

Forum|Forum|9 years ago
February 23, 2016
2 replies
17482 views

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.

This topic has been closed for replies.

Correct answer ClayUUID

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.

T

theLingorian

New Participant

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.

C

ClayUUID

Brainiac

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.

T

theLingorian

New Participant

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. :-)

C

ClayUUIDCorrect answer

Brainiac

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_pixelstudioAuthor

New Participant

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!

C

ClayUUID

Brainiac

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

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.

Scanning file for viruses.

This file cannot be downloaded