How to control dynamically created symbols

Question

Hi, I'm new in edge but thanks to adobe forum that helped me a lot.
I'm trying to use ".createChildSymbol" to bring my symbols from the library to my stage. And in each symbol I have an OUT label, so every time a new symbol is called by a particular button, the last one plays from OUT label and new one appears at the same place.
It's all easy for two symbols and I do not need to set any vaiable for them. But I have almost 180 symbols, and a menu of buttons to call them, so every button needs to play the OUT label of the current symbol and also plays the new one and make it as the current one.
I would be truly thankful if someone help me to fix this problem.
sym.test = sym.createChildSymbol("test", "Stage");
sym.getComposition().getStage().setVariable("current", "test");
var current = sym.getComposition().getStage().setVariable("current");
sym.current.getSymbolElement().css({position:'absolute', display:'inline-block', top:167, left:91});

Answer 1

Ok, lets take a look at the code. I've changed the symbol names so it becomes a little more friendly.
So, I have an array of 4 animations ("animation1",  "animation2",  "animation3",  "animation4") and an array of 4 buttons ("button1",  "button2",  "button3",  "button4"). The names of the symbol instances are the things you have to change.
This is the code that goes inside Stage/compositionReady
var current_animation = null; // Index in array_options: 0=a, 1=b, 2=c, 3=d
var current_animation = null; // Index in array_options: 0=a, 1=b, 2=c, 3=d
var request_animation = null; // Index in array_options: 0=a, 1=b, 2=c, 3=d
var array_animation = ["animation1", "animation2", "animation3", "animation4"];
var array_buttons = ["button1", "button2", "button3", "button4"];
// Called by timeline.complete/location event inside each Animation
sym.playRequest_animation = function(){
  sym.getSymbol("animationContainer").getSymbol(array_animation[request_animation]).play('lead_in');
  current_animation = request_animation;
// Called on button click
sym.btnClick_animation = function(request_myAnimation) {
  request_animation = request_myAnimation;
  if(current_animation != null){
    sym.getSymbol("animationContainer").getSymbol(array_animation[current_animation]).play('lead_out');
    sym.getSymbol(array_buttons[current_animation]).play('option_exit');
  else{
    sym.playRequest_animation();
This bit of code goes at the trigger "click" inside all buttons:
sym.getComposition().getStage().btnClick_animation(0); // 0 index of array = a —> button1
sym.getComposition().getStage().btnClick_animation(1); // 1 index of array = b —> button2
sym.getComposition().getStage().btnClick_animation(2); // 2 index of array = c —> button3
sym.getComposition().getStage().btnClick_animation(3); // 3 index of array = d —> button4
There's also this code that enables the page, upon load, to open the first animation, therefore animating the first button (and disabling it) - it's located at the trigger "section_lead_in" wich only exists inside button1:
sym.getComposition().getStage().btnClick_animation(0); // 0 index of array = a
Finally, this block of code goes inside all animations and are located at 2000ms - during the process where the active animation as almost left the scene:
sym.getComposition().getStage().playRequest_animation();
Notice that, for the sake of organization, I have all my animations inside a symbol called "animation_Container".
Again, if you want, I can give you a hand with your files. Just post it.
Download the file again for an updated version.
P.S. I hope I didn't forget anything...