Controlling a symbol from a button inside of the symbol

Question

I hope this explanation makes sense:
I have an animate file with buttons on the main stage that control symbols.
(buttons are circles labeled 1876 and 1877)
The symbols simply move a png image on and off the stage.
For example, the two circles labeled 1876 and 1877 are PNG files made into buttons that control two different symbols.
The symbols move the scoreboard image on and off the stage.
Within the scoreboard image is an X, that I am hoping to put a button on top of within the symbol to close the symbol.
The code I am using to move the symbols on and off the stage is:
var current = sym.getVariable("current");
   if (current != "") {
      sym.getSymbol(current).play("out");
      sym.getSymbol("syboard1876").play("in");
   else {
      sym.getSymbol("syboard1876").play("shortIn");
   sym.setVariable("current", "syboard1876");
syboard1876 is the green board png.
Any idea how i can get the symbol to move off of the stage by tapping it?
And will I be able to have multiple buttons beneath the symbol (that are hidden beneath the b=green board when it is visible)?
This was the original tutorial I adapted the get the animation to work so far.
Tutorial: Leveraging Independent Symbol Timelines « Adobe Edge Animate Team Blog
Now I just need to figure a way to give the user the ability to tap the X to close the symbol.
Any suggestions?

Answer 1

you could use $each() with jquery in compositionReady
if not you need to get back to stage with sym.getComposition().getStage() or
you could use this in compositionReady
function useButtons(element) {
sym.$(element).bind("click",function() {
  sym.$('image').attr('src','images/'+element+'.png').css({"opacity":1.00});  // this is a code example - I used the same name for the buttons and image names.
// add button names here
['', '','' ,'',''].forEach(useButtons);