18 Replies Latest reply on Jan 29, 2013 2:17 AM by pmfr01

    How do I use sym.createChildSymbol

    pmfr01 Level 2

      Hi.

      I need to use sym.createChildSymbol in the code below.

      Basically I have 5 buttons and 4 animations - each button triggers it's own animation - but, all the animation symbols are present on Stage all the time which reduces performance on my Edge project. So, the idea is to create and delete the animations as they're requested.

       

      I've already checked some posts, but got stuck.

       

      var currentSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a
      var requestSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a
      var array_sections = ["nosContigo", "nosSomos", "nosAoVivo", "nosTemos", "nosVivemos"];
      var array_sectionsBtns = ["section_Btn_nosContigo", "section_Btn_nosSomos", "section_Btn_nosAoVivo",
                                "section_Btn_nosTemos", "section_Btn_nosVivemos"];
      
      // Called by timeline.complete/location event inside each section_Btn
      sym.playRequest_section = function(){
        // This is were the symbols should created (array_sections)
        sym.getSymbol(array_sections[requestSection]).play('section_lead_in'); // Requested section leads in
        currentSection = requestSection;
      }
      
      // Called on button click
      sym.btnClick_section = function(request) {
        requestSection = request;
        if(currentSection != null){
          sym.getSymbol(array_sections[currentSection]).play('section_lead_out'); // Current section leads out
          // This is were the symbols should be deleted (array_sections)
          sym.getSymbol(array_sectionsBtns[currentSection]).play('section_deactivate'); // Current button deactivates
        }
        else{
          sym.playRequest_section();
        }
      }
      

      This code was given by Tim in another post of mine - all credits to him.

       

      I tried this:

       

      // Setting variables/arrays
      var currentSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a
      var requestSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a
      var array_sections = ["nosContigo", "nosSomos", "nosAoVivo", "nosTemos", "nosVivemos"];
      var array_sectionsBtns = ["section_Btn_nosContigo", "section_Btn_nosSomos", "section_Btn_nosAoVivo",
                                "section_Btn_nosTemos", "section_Btn_nosVivemos"];
      
      // Called by timeline.complete/location event inside each section_Btn
      sym.playRequest_section = function(){
        sym.createChildSymbol(array_sections[requestSection], "Stage"); // This is were the symbols should created (array_sections)
        sym.getSymbol(array_sections[requestSection]).play('section_lead_in'); // Requested section leads in
        currentSection = requestSection;
      }
      
      // Called on button click
      sym.btnClick_section = function(request) {
        requestSection = request;
        if(currentSection != null){
          sym.getSymbol(array_sections[currentSection]).play('section_lead_out'); // Current section leads out
          sym.getSymbol(array_sections[currentSection]).deleteSymbol(); // This is were the symbols should be deleted (array_sections)
          sym.getSymbol(array_sectionsBtns[currentSection]).play('section_deactivate'); // Current button deactivates
        }
        else{
          sym.playRequest_section();
        }
      }
      

      ... but it doesn't work.

       

      My Edge files.

       

      pmfr

        • 1. Re: How do I use sym.createChildSymbol
          TimJaramillo Level 4

          Hi pmfr, thanks for the code credit

           

          Pasting the second chunk of code into your file, the sections do in fact seem to be dynamically added to Stage correctly.

           

          But it seems that on button click, you are disabling all the other buttons? Is that the problem you are referring to?

          • 2. Re: How do I use sym.createChildSymbol
            pmfr01 Level 2

            Hi there Tim.

            No, the buttons are ok. Everything works fine in the first block of code. What I really need is to create and delete the animations as they're requested (byt the buttons) - the second block of code (experiment).

            I think the sym.createChildSymbol(array_sections[requestSection], has a wrong sintax... maybe? I tried to apply the code in this post.

            pmfr

            • 3. Re: How do I use sym.createChildSymbol
              TimJaramillo Level 4

              Ah, in the file you posted, you still had all the symbols on the Stage, so it was kinda working. I'll take a peep.

              • 4. Re: How do I use sym.createChildSymbol
                TimJaramillo Level 4

                Ok, paste the code below into your Stage.compositionReady event. I added a variable "dynamicSymbol" to store your dynamic symbol. Note that the dynamic symbol is being placed above all other content. There are 2 ways around this: 1) set the z-index of the dynamic symbol via css 2) create a holder symbol, and create the dynamic symbol inside the holder symbol.

                 

                 

                 

                // Setting variables/arrays

                var currentSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a

                var requestSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a

                var array_sections = ["nosContigo", "nosSomos", "nosAoVivo", "nosTemos", "nosVivemos"];

                var array_sectionsBtns = ["section_Btn_nosContigo", "section_Btn_nosSomos", "section_Btn_nosAoVivo",

                                          "section_Btn_nosTemos", "section_Btn_nosVivemos"];

                var dynamicSymbol;

                 

                 

                // Called by timeline.complete/location event inside each section_Btn

                sym.playRequest_section = function(){

                  dynamicSymbol = sym.createChildSymbol(array_sections[requestSection], "Stage"); // This is were the symbols should created (array_sections)

                  dynamicSymbol.play('section_lead_in'); // Requested section leads in

                  currentSection = requestSection;

                }

                 

                 

                // Called on button click

                sym.btnClick_section = function(request) {

                  requestSection = request;

                  if(currentSection != null){

                    dynamicSymbol.play('section_lead_out'); // Current section leads out

                    dynamicSymbol.deleteSymbol(); // This is were the symbols should be deleted (array_sections)

                    sym.getSymbol(array_sectionsBtns[currentSection]).play('section_deactivate'); // Current button deactivates

                  }

                  else{

                    sym.playRequest_section();

                  }

                }

                • 5. Re: How do I use sym.createChildSymbol
                  pmfr01 Level 2

                  That's it.

                  CSS is what I want. Can I attribute the css to an array?

                   

                  .css("z-index","1"); —> array_sections

                  .css("z-index","2"); —> array_sectionsBtns

                   

                  How?

                  • 6. Re: How do I use sym.createChildSymbol
                    TimJaramillo Level 4

                    Not sure what you mean by attribute the css to an array?

                     

                    I would probably first try setting the z-index of the dynamic symbol to a negative value each time you create it. This should put it under your other button objects.

                     

                    // Called by timeline.complete/location event inside each section_Btn

                    sym.playRequest_section = function(){

                      dynamicSymbol = sym.createChildSymbol(array_sections[requestSection], "Stage"); // This is were the symbols should created (array_sections)

                    // after you create the "dynamicSymbol"

                    sym.$("dynamicSymbol").css("z-index", "-10");

                     

                      dynamicSymbol.play('section_lead_in'); // Requested section leads in

                      currentSection = requestSection;

                    }

                    • 7. Re: How do I use sym.createChildSymbol
                      pmfr01 Level 2

                      I still need to set the z-index of the buttons though.

                       

                      sym.$(array_sectionsBtns).css("z-index", "2");

                       

                      Is this sintax correct?

                      • 8. Re: How do I use sym.createChildSymbol
                        TimJaramillo Level 4

                        I don't think you need to set the z-index of the buttons, as they're already set by Edge. Especially since you are setting the z-index of the dynamic symbol to a negative value, which will be below the buttons.

                        • 9. Re: How do I use sym.createChildSymbol
                          pmfr01 Level 2

                          You may not believe it, but the z-index is not working. I even tried bringing the buttons to the top with a class+css: sym.$('.section_Btn').css("z-index","10"); ... what am I doing wrong?

                          Here's the entire code updated:

                           

                          // Setting variables/arrays

                          var currentSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a

                          var requestSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a

                          var array_sections = ["nosContigo", "nosSomos", "nosAoVivo", "nosTemos", "nosVivemos"];

                          var array_sectionsBtns = ["section_Btn_nosContigo", "section_Btn_nosSomos", "section_Btn_nosAoVivo",

                                                    "section_Btn_nosTemos", "section_Btn_nosVivemos"];

                          var dynamicSymbol;

                          sym.$('.section_Btn').css("z-index","10");

                           

                          // Called by timeline.complete/location event inside each section_Btn

                          sym.playRequest_section = function(){

                            // This is were the symbols should created (array_sections)

                            dynamicSymbol = sym.createChildSymbol(array_sections[requestSection], "Stage"); // array_sections symbols are created

                            sym.$("dynamicSymbol").css("z-index", "-10"); // z-index of array_sections symbols are set

                            dynamicSymbol.play('section_lead_in'); // Requested section leads in

                            sym.getSymbol(array_sections[requestSection]).play('section_lead_in'); // Requested section leads in

                            currentSection = requestSection;

                          }

                           

                          // Called on button click

                          sym.btnClick_section = function(request) {

                            requestSection = request;

                            if(currentSection != null){

                              dynamicSymbol.play('section_lead_out'); // Current section leads out

                              dynamicSymbol.deleteSymbol(); // This is were the symbols should be deleted (array_sections)

                              sym.getSymbol(array_sectionsBtns[currentSection]).play('section_deactivate'); // Current button deactivates

                            }

                            else{

                              sym.playRequest_section();

                            }

                          }

                          • 10. Re: How do I use sym.createChildSymbol
                            TimJaramillo Level 4

                            Hey there, I added 1 line to the "playRequest_section" func. It's odd, according to teh docs, you can set the z-index via a 3rd param in the "createChildSymbol" method, but it's not working for me. The below code does work for me though:

                             

                            // Called by timeline.complete/location event inside each section_Btn

                            sym.playRequest_section = function(){

                              dynamicSymbol = sym.createChildSymbol(array_sections[requestSection], "Stage"); // This is were the symbols should created (array_sections)

                              dynamicSymbol.getSymbolElement().css("z-index", "-100"); // z-index of array_sections symbols are set

                              dynamicSymbol.play('section_lead_in'); // Requested section leads in

                              currentSection = requestSection;

                            }

                            • 11. Re: How do I use sym.createChildSymbol
                              pmfr01 Level 2
                              // Setting variables/arrays
                              var currentSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a
                              var requestSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a
                              var array_sections = ["nosContigo", "nosSomos", "nosAoVivo", "nosTemos", "nosVivemos"];
                              var array_sectionsBtns = ["section_Btn_nosContigo", "section_Btn_nosSomos", "section_Btn_nosAoVivo",
                                                        "section_Btn_nosTemos", "section_Btn_nosVivemos"];
                              var dynamicSymbol;
                              
                              // Called by timeline.complete/location event inside each section_Btn
                              sym.playRequest_section = function(){
                                dynamicSymbol = sym.createChildSymbol(array_sections[requestSection], "Stage", "-10"); // array_sections symbols are created
                                dynamicSymbol.getSymbolElement().css("z-index", "-100"); // z-index of array_sections symbols are set
                                dynamicSymbol.play('section_lead_in'); // Requested section leads in
                                sym.getSymbol(array_sections[requestSection]).play('section_lead_in'); // Requested section leads in
                                currentSection = requestSection;
                              }
                              
                              // Called on button click
                              sym.btnClick_section = function(request) {
                                requestSection = request;
                                if(currentSection != null){
                                  dynamicSymbol.play('section_lead_out'); // Current section leads out
                                  dynamicSymbol.deleteSymbol(); // This is were the symbols should be deleted (array_sections)
                                  sym.getSymbol(array_sectionsBtns[currentSection]).play('section_deactivate'); // Current button deactivates
                                }
                                else{
                                  sym.playRequest_section();
                                }
                              }
                              

                               

                              This may sound stupid, but it's still not working... could you make the changes in my files and post them? There's definitly something very wrong here...

                              • 12. Re: How do I use sym.createChildSymbol
                                TimJaramillo Level 4

                                Here ya go:

                                 

                                source:

                                www.timjaramillo.com/code/edge/_source/_temp/section_Btns.zip

                                 

                                example:

                                http://www.timjaramillo.com/code/edge/_temp/section_Btns/section_Btns.html

                                • 13. Re: How do I use sym.createChildSymbol
                                  pmfr01 Level 2

                                  I just tried your file - it doesn't show the background symbols - I'm using Firefox. Decided to try another browser... it was it. Firefox doesn't show the background symbols!

                                   

                                  *edit*: Just Chrome and Safari, actually. All the other browsers don't show the background symbols.

                                  This is bad.

                                  • 14. Re: How do I use sym.createChildSymbol
                                    TimJaramillo Level 4

                                    Indeed, I see the dynamic symbols in Chrome and Safari, but not FF.

                                     

                                    Maybe try a simple test to see if it has something to do with the symbol itself. Instead of adding the array_sections[requestSection] symbol, for example, just create a simple square in the library, and try to add that.

                                     

                                    dynamicSymbol = sym.createChildSymbol("mySimpleSquare", "Stage");

                                    • 15. Re: How do I use sym.createChildSymbol
                                      pmfr01 Level 2

                                      Same thing.

                                      The other symbols were rectangles as well.

                                      • 16. Re: How do I use sym.createChildSymbol
                                        TimJaramillo Level 4

                                        Odd, this example works on FF:

                                         

                                        http://www.timjaramillo.com/code/edge/dynamicSymbol_mousePos/test.html

                                         

                                        I'm basically using the same code, to add a simple circle to "Stage":

                                         

                                        var particle = sym.createChildSymbol("particle", "Stage");

                                        particle.getSymbolElement().css({"position": "absolute", "left": e.pageX, "top": e.pageY});

                                         

                                        The 1 difference is that the above code is directly on the Stage.click event in my above example, instead of calling a function on the "Stage.compositionReady" event. 

                                        • 17. Re: How do I use sym.createChildSymbol
                                          pmfr01 Level 2

                                          Is it because they're animated?... My symbols, that is?

                                          • 18. Re: How do I use sym.createChildSymbol
                                            pmfr01 Level 2

                                            Just tried creating a "holder" symbol - appears to be the only solution.

                                            There's just one little problem now - the dynamicSymbol.deleteSymbol(); deletes the symbol BEFORE the dynamicSymbol.play('section_lead_out'); can play the 'section_lead_out'. How can I overcome this?

                                             

                                            P.S.: What a drag...

                                             

                                            *EDIT* Solved the z-index issue: applied a class to my buttons and inserted the code sym.$('.section_Btn').css({"z-index":1}); instead (no z-index for the dynamicSymbol)... this time it worked.

                                            Now, the only problem is the one mentioned above...