I'm struggling with this Edge Animate composition for hours:
What i try to create, is a character selection (multiple images), which will trigger a different text message inside a speech bubble (symbol) for each person.
Along with the individual text I also have 2 input fields (select2.js) which reside between the text spans. For that I had to generate the text spans and input fields in the symbol's creationComplete action like this:
perscontent.html('<span style="font-weight: bold;">'+perstext[0]+'<br></span>'+
'<span>'+perstext[1]+'</span>'+
'<input id="tech" class="bubbleinput" style="margin-top: 5px" type="text" data-position="top" placeholder="mit der Technologie:"></input>'+
'<span>'+perstext[2]+'</span>'+
'<input id="probl" class="bubbleinput" style="margin-top: 5px" type="text" data-position="top" placeholder="das Problem/Produkt:"></input>'+
'<span>'+perstext[3]+'</span></p> ');
perstext
sym.setVariable("perstoggle", "pers1select");
perstoggle
var cur = sym.getComposition().getStage().getVariable("perstoggle");
console.log( "=> ", cur);
perstoggle
yepnope({
both: [
"select2.min.js",
"select2.css",
"pagestyle.css"
],
callback: function(){
$("#tech").select2(......);
$("#probl").select2(.....);
var cur = sym.getComposition().getStage().getVariable("perstoggle");
console.log( "=> ", cur);
switch (cur){
case ("pers1select"): var perstext = pers1text;
break;
default : var perstext = pers2text;
}
why not keep it simple?
(simple example)
open the code window in edge animate ( menu -> window > code ) click on stage and add this code:
var perstext;
perstext = "begin";
var foo = function() {
$("#Stage_Rectangle").html('<span style="font-weight:bold;">'+perstext+'</span>');
};// will set the text on div Retan
this will make the function foo that updates the perstext global.
first you need to make it run at the beginning. so to do that add stage > compositionready and add this code:
foo();
this will run the function foo at the beginning
and to change it to something else add a click event on a div or image and just add this code:
perstext = "i changed!";
foo();
and that will change the perstext and update it again through foo();