4 Replies Latest reply on Jun 21, 2013 4:43 AM by Santos49

    Replacing symbols dynamically

    Tsumantis

      Hi all,

       

      I am trying to make a fairly simple user interface. I have 3 buttons on stage and each button will pull out a correspoinding symbol from the library and display it on the stage.

       

      Eg. Click btn1 and it will show content1 from the library.

       

      So far it is working in that it shows the corresponding content but it appends subsequent content to the bottom of it. I need the content to be replaced instead.

       

      If you would be so kind as to offer some advice, consider this:

      I would prefer if I could dynamically get content from the library instead of having items on stage that are set to 'hide' and 'show'.

       

      Note: I noticed that when you create a child symbol on stage that Edge gives it a randomly generated ID. There is some code towards the bottom that tries to rename its ID attribute. I am not 100% sure if it is even doing what I expect it to do. Any improvements are welcome.

       

       

      var btnArray = ['btn1','btn2','btn3']
      
      
      function init(){
                for (var i = 0; i < btnArray.length; ++i) {
                          var j = i+1;
                          initBtns(j);
                }
      }
      
      
      function initBtns(num){
                sym.$('btn'+num).click(function(){
                          showContent(num);
                });
      }
      
      
      function showContent(num){
                var content = sym.createChildSymbol("content"+num, "Stage");
                content.getSymbolElement().css({
         "top":"0px",
         "left":"0px"  
         });
         var oldID = content.getSymbolElement().attr("id");
         sym.setVariable("oldID", "content"+num);
         var newID = sym.getVariable("oldID");
         content.getSymbolElement().attr("id",newID);
      
      
         alert(content.getSymbolElement().attr("id"));
      
      
      }
      
      
      init();
      
      
        • 1. Re: Replacing symbols dynamically
          elainecc Adobe Employee

          Hey, Tsumantis-

           

          The easiest way I can think of to do a direct swap is to create a symbol container, and create/destroy things out of that symbol container.  That way, you'd maintain all of the properties you need (location, size, etc.) and still be able to not have to deal with Z-index issues, as it would have its own place on the Stage.

           

          Hope that helps,

           

          -Elaine

          • 2. Re: Replacing symbols dynamically
            Tsumantis Level 1

            Thanks Elaine,

             

            I have been able to create symbols using the creatChildSymbol action but I am having trouble removing them and then placing the next content in its place. Any code illustrating how I could achieve this would be welcome.

            • 3. Re: Replacing symbols dynamically
              Tsumantis Level 1

              With some help from a colleague I have found the solutioin. Hope it helps anyone else out there with a similar issue. One of the main issues was the a variable was declared localy and needed to be global. See below for full working code.

              var btnArray = ['btn1','btn2','btn3'];
              var myBoolean = false;
              
              
              function init(){
                        for (var i = 0; i < btnArray.length; ++i) {
                                  var j = i+1;
                                  initBtns(j);
                        }
              }
              
              
              function initBtns(num){
                        sym.$('btn'+num).click(function(){
                                  showContent(num);
                        });
              }
              
              
              function showContent(num){
              
              
                        if(sym.myBoolean){
                                  sym.getSymbol(sym.content.getSymbolElement()).deleteSymbol();
                        }
                
                        sym.content = sym.createChildSymbol("content"+num, "Stage");
                        sym.content.getSymbolElement().css({ "top":"0px", "left":"0px" });
              
              
                 var oldID = sym.content.getSymbolElement().attr("id");
                 sym.setVariable(oldID, "content"+num);
                 var newID = sym.getVariable(oldID);
                 sym.content.getSymbolElement().attr("id",newID);
              
              
                 sym.myBoolean = true;
              }
              
              
              init();
              
              
              • 4. Re: Replacing symbols dynamically
                Santos49 Level 1

                Thanks for sharing!

                I was puzzling with it.