Copy link to clipboard
Copied
Hi,
I've searched the forums here and not been able to quite find exactly what i want unfortunately, so thought I would write my own question.
I'm creating a file exporting to HTML5 Canvas and I need to allow any text in the file to be edited / modified externally by someone else once I hand it over. I would like to do this so it is as simple as possible for them, so i'm trying to rule out having them update XML and JS files. Is it possible to have my HTML5 Canvas code import external text from something like an Excel document, or even a basic Notepad text file?
I've had a bit of experience in the past with importing external text using XML in AS3, but my coding skills are still relatively basic and I just can't find anything that points me in the right direction on this.
When you test a file from Animate it runs the page through a local web server, so any XMLHttpRequest calls should work properly.
Copy link to clipboard
Copied
UPDATE - Okay, so I've found a way to create XML Schema and XML files through Excel, which should make the process easier for the end user. All they need to do is fill out the Excel and Export XML via the Developer tab.
Now I just need to get that data from the XML that they generate into the dynamic text fields on my Animate file and exported out into HTML5 Canvas.
Is it true that I can't test how my XML import works on a local filesystem due to the browser restrictions? If so, is there ANY way around this, so I can test it? I mean without having to go the complete other route of JS?
Copy link to clipboard
Copied
When you test a file from Animate it runs the page through a local web server, so any XMLHttpRequest calls should work properly.
Copy link to clipboard
Copied
Excellent, thanks Clay. Thanks for your other posts on this subject as well. I've been reading those too. Very helpful.
Copy link to clipboard
Copied
Hi Clay,
I seem to still be getting whitescreen when I test it. I've created a one frame test file which has 3 dynamic text boxes on it, just to get used to the process before using on a live project. I've used / adapted your code from your replies on other topics to load the XML and display it, but its just not showing up for me either hitting Test, or Publishing.
The HTML5 Canvas Actions:
this.stop();
// load XML file
var req = new XMLHttpRequest();
req.open("GET", "test-data-set.xml", true);
req.addEventListener("load", transferComplete);
req.send();
function transferComplete(e) {
console.log(e.target.response);
}
// return array of all matching tag values
function getTagValues(xml, tag) {
var match;
var matches = [];
var re = new RegExp("<" + tag + ">(.*?)</" + tag + ">", "gi");
while (match = re.exec(xml)) {
matches.push(match[1]);
}
return matches;
}
var textEntry = getTagValues(rawXML, "TextEntry");
this.textFile01.text = textEntry[0];
this.textFile02.text = textEntry[1];
this.textFile03.text = textEntry[2];
with the XML code looking like this:
<textFiles>
<TextEntry>This text should appear within the textfile 01</TextEntry>
<TextEntry>This text should appear for textfile 02</TextEntry>
<TextEntry>More text to appear here for textfile 03</TextEntry>
</textFiles>
What am I missing?
Copy link to clipboard
Copied
White screen almost always means a runtime error. Open your browser's dev console and check for errors.
Copy link to clipboard
Copied
Just the one error was listed. It said, "Uncaught ReferenceError: rawXML is not defined"
So after re-reading your other posts, I took a guess that it might be that I was using the wrong code in the function, and so rawXML wasn't there to be found. So I changed it to:
function transferComplete(e) {
var rawXML = e.target.response;
console.log(rawXML);
}
But that doesn't seem to have fixed it either.
UPDATE - After playing around and commenting out aspects of the code, the problem seems to be in this line:
var textEntry = getTagValues(rawXML, "TextEntry");
rawXML logs to the console fine earlier on in the transferComplete function, but when it comes to getTagValues, it says that rawXML is not defined.
Copy link to clipboard
Copied
"rawXML" is just an example variable name I made up to illustrate a point.
When you define rawXML inside the transferComplete function, of course it won't be visible anywhere else, because you've defined it as a local variable to that function. If you want a variable visible to multiple functions you have to define it outside of those functions.