I've create a basic HTML5 Canvas animation in Adobe Animate CC 2015.2 with a 3 line headline. I need to be able to feed the text in from an external file to be able to change it for translating into different languages.
Is there an easy way to do this? Or should it just be standard HTML absolutely positioned on top?
I know this is an old question, but here's my solution for this as it took a while to find one that worked well.
I needed to have multiple dynamic text boxes in a series of HTML 5 animations created in Animate CC, that were used as part of a Bootstrap Carousel slide show. I wanted to be able to add in multiple languages later - so I used a json file for each language to store the text content and loaded this in on demand.
example json:
{
"1": {
"name": "default_text",
"text": {"0" : "Error locating text content for this animation?"}
},
"2": {
"name": "coating_systems",
"text": {"0" : "this animation has one text field"}
},
"3": {
"name": "compatability_chart",
"text": {"0" : "this animation has more than one dynamic text field", "1" : "another text field"}
}
}
the name is used by the parent site - here we just need 'text'
In my Adobe CC animation timeline:
var that = this;
var loaded = false;
json = {};
var loadJson = function(url)
{
var queue = new createjs.LoadQueue(true);
queue.on("fileload", onJsonLoaded, that);
queue.on("error", onJsonLoadError, that);
queue.loadFile({id:"json", src:url});
}
var onJsonLoaded = function(e)
{
that.json = e.target.getResult("json");
setText();
}
var onJsonLoadError = function(e)
{
console.log(e);
}
var setText = function()
{
var blocks = that.json;
var numblocks = Object.keys(blocks[id].text).length;
// loop through the text block to assign to the matching count in the animation
for (var i=0; i < numblocks; i++) {
var txtField = eval('that.textField'+i);
txtField.text = blocks[id].text[i];
}
}
//in my case, the "id" and "lang" gets passed from the parent window into the iframe with the animation in a bs carousel - uses data attributes
var $anim_iframe = parent.document.querySelectorAll('.item.active .animation_iframe');
if($anim_iframe.length > 0){
var id = $anim_iframe[0].dataset.id;
var lang = $anim_iframe[0].dataset.lang;
var json_file = '/path/to/lang/'+lang+'.json';
// load json, but don't bother if the animation loops
if(loaded == false){
loadJson(json_file);
}
loaded = true;
}
On your stage you will have dynamic text boxes called textField0, textField1, textField2 etc that match up to the "text" in the json file.
$.ajax({
type: 'GET', // changed from 'tybe'
url: externalurl,
dateType: 'xml',
success: function (xml) {
var Text_Cta1 = $(xml).find("BtnText1")
root.feedTitle.text = titles[0].textContent;
$(xml).find("BtnText1").each(function () (
$item = $(this);
var itme = new Object();
item.title = $item.find("Text_Cta1").text();
feedItems.push('Text_Cta1');
)};
})
