Highlighted

Linked videos and xml text in HTML5 canvas Animate CC

New Here ,
Aug 27, 2020

Copy link to clipboard

Copied

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.

TOPICS
Publish package

Views

32

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Linked videos and xml text in HTML5 canvas Animate CC

New Here ,
Aug 27, 2020

Copy link to clipboard

Copied

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.

TOPICS
Publish package

Views

33

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 27, 2020 0
Adobe Community Professional ,
Aug 27, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2020 1
New Here ,
Aug 28, 2020

Copy link to clipboard

Copied

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]);
}

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 28, 2020 0
kglad LATEST
Adobe Community Professional ,
Aug 28, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 28, 2020 0