Linked videos and xml text in HTML5 canvas Animate CC

[Emilia RDT]

I have created an HTML5 interactive interface on Animate using 16 frames containing movieclips, videos, and dynamic texts. I realise now that Animate was probably not the right software to design such a complex project. However, I was still learning about interactive content and Dreamweaver seemed too complicated (especially considering that the interface is meant to be locally hosted to be used in a physical installation powered by Arduino). 

Now that I want to export it in the installation's PC, I need to publish it with all the content in one folder. Nevertheless, it seems unclear how to properly integrate and link the .xml and video content in the Publish folder. If I view the file through Animate, everything seems to work properly, but when I open it in the browser through the local.host videos seems not to be linked anymore. Moreover, it seems that the .xml file is not linked anymore even though the text is correctly loaded: the text is visible but any new modification to the .xml does not appear. Can you give me any advice or tell me what I'm doing wrong (probably many things...)? Is there a way to automatically create the complete Publish package containing also the videos and .xml files?

Thanks.

[kglad]

create a new folder and save your animate fla file in that new folder.  then publish (file>publish).

everything in that new folder (except the fla) needs to be uploaded to wherever you want to host your project.

[Emilia RDT]

Thank you for the reply!

I've tried and indeed it recreates the videos too (so far I had always placed them manually creating confusion between different files), however it does not create a copy of the .xml with the texts. I linked the .xml in the custom code so I guess since it is not part of the Animate components, it is not up to Animate to gather it in the publish package, but it's also not clear whether the connection is working because, as I said, it seems that the .xml file is not linked anymore even though the text is correctly loaded: the text is visible but any new modification to the .xml does not appear.

Here is the code my colleague used to link the .xml:

// Variables to keep track of the current language
window.translation_files = ["localization/eng.xml", "localization/ger.xml"];
window.translation_iterator = 0;

// Localizations
//------------------------------------------------
// Create a connection to the file.
function loadLocalization(file) {
	var connection = new XMLHttpRequest();
	connection.addEventListener("load", response);
	// Define which file to open and send the request.
	connection.open("GET", file, false);
	connection.send();
}

// Parse the result
function response(e) {
	parser = new DOMParser();
	translations_xml = parser.parseFromString(e.target.response, "text/xml");
	insertLocalization(translations_xml);
}

// This function inserts the loaded xml contents into the corresponding elements
// All texts have to be contained in a video clip of the same instance name 
// to assure they are loaded at all times. 
function insertLocalization(xml) {
	stringList = xml.getElementsByTagName("string");
	for (i = 0; i < stringList.length; i++) {
		string = stringList[i];
		id = string.getElementsByTagName("id")[0].innerHTML;
		value = string.getElementsByTagName("text")[0].innerHTML;
		popup = string.getElementsByTagName("popup")[0]?.innerHTML;
		if (popup) {
			if (stage.getChildAt(0)[popup][id] && stage.getChildAt(0)[popup][id][id]) stage.getChildAt(0)[popup][id][id].text = value;
			else console.log("LOCALIZATION ERROR FROM XML FILE: " + id + " NOT DEFINED");
		} else {
			if (stage.getChildAt(0)[id] && stage.getChildAt(0)[id][id]) stage.getChildAt(0)[id][id].text = value;
			else console.log("LOCALIZATION ERROR FROM XML FILE: " + id + " NOT DEFINED");
		}
	}
}

//Make the function globally accessible
window.loadLocalization = loadLocalization;

// Listen out for the keypress to translate texts
document.addEventListener('keydown', localizationKeyPress, true);

function localizationKeyPress(event) {
	if (event.key == window.buttons.TRANSLATE) {
		iterateLanguage();
	}
	else return;
}

// Iterate through the available language files and load the next one
function iterateLanguage() {
	window.translation_iterator++;
	stage.getChildAt(0).LANGUAGEbutton.LANGUAGEFlags.play();
	if (window.translation_iterator >= window.translation_files.length) {
		window.translation_iterator = 0;
	}
	loadLocalization(window.translation_files[window.translation_iterator]);
}

[kglad]

in your new folder create subfolder and name it localizations.  put the two xml files (eng.xml and ger.xml) in that localizations folder.  retest.