14 Replies Latest reply on Jan 24, 2013 8:14 AM by BornaAzimi

    How to control dynamically created symbols

    BornaAzimi

      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});

        • 1. Re: How to control dynamically created symbols
          pmfr01 Level 2

          I had the same issue (though I didn't use ".createChildSymbol") some time ago - check this thread.

           

          pmfr

          1 person found this helpful
          • 2. Re: How to control dynamically created symbols
            BornaAzimi Level 1

            Thanks for the reply,

            I created the http://mcm.my/ while ago without using the ".createChildSymbol" and it works as I want, but in the new one I'm looking for a way to not bring all the symbols to my Stage, instead use the ".createChildSymbol" if possible.

            • 3. Re: How to control dynamically created symbols
              pmfr01 Level 2

              Check this post instead.

               

              pmfr

              1 person found this helpful
              • 4. Re: How to control dynamically created symbols
                BornaAzimi Level 1

                Thanks again,

                 

                In your post, I'm not able to define the animated symbol as the curren one, so when the user randomly click on any other button, it shoud play the end part of the current symbol, which I don't know how.

                • 5. Re: How to control dynamically created symbols
                  pmfr01 Level 2

                  Here's the Edge project files of what I did.

                   

                  pmfr

                   

                  *edit* Notice the code in the following places:

                  - Stage/compositionReady

                  - Actions panel inside each button symbol

                  - Trigger after the label lead_out inside the animations symbols (options1/option1a_*)

                  • 6. Re: How to control dynamically created symbols
                    BornaAzimi Level 1

                    Thanks for the link, but there is an error and I'm not able to download the files. could you please send a new link.

                     

                    Thank for your help.

                    • 7. Re: How to control dynamically created symbols
                      pmfr01 Level 2

                      I accidentally deleted it. 

                      Try again - same link.

                      Meanwhile, if you have trouble understanding the code, post your files. Just narrow them down to 3 symbols and 3 buttons in a clean Edge doc.

                       

                      pmfr

                      • 8. Re: How to control dynamically created symbols
                        BornaAzimi Level 1

                        Nice work, what you did is exactly what I need to learn. I'll check out the script for a while, but I may need to ask more question if you don't mind.

                        Reply

                        Thanks a lot again, really appreciate that.

                        • 9. Re: How to control dynamically created symbols
                          pmfr01 Level 2

                          Forgot to mention... you should also check the code at the trigger after the label section_lead_in inside all buttons. So:

                           

                          - Stage/compositionReady

                          - Actions panel inside each button symbol

                          - Trigger after the label lead_out inside the animations symbols (options1/option1a_*****)

                          - Trigger after the label section_lead_in inside the buttons symbols (sectionOption1*_Btn_*****)

                           

                          pmfr

                          • 10. Re: How to control dynamically created symbols
                            BornaAzimi Level 1

                            Since I'm not familiar with scripting, it took me a while to understand all the connections.

                             

                            I only need a tiny help about the highlighted part of this image. Could you please let me know that how it get index from the click if it does so?

                             

                            Screen shot 2013-01-24 at 10.38.33 AM.png

                            • 11. Re: How to control dynamically created symbols
                              pmfr01 Level 2

                              Take a look inside the buttons symbols at triggers with the labels "click" and "section_lead_in" - the current active button will return to it's original position upon the click of another button:

                                                Label "click" - sym.getComposition().getStage().btnClick_nosContigo(X); // X index of array = X

                              Label "section_lead_in" - sym.getComposition().getStage().btnClick_nosContigo(X); // X index of array = X

                                                                        (sym.btnClick_nosContigo = function(request_nosContigo)

                               

                              pmfr

                              • 12. Re: How to control dynamically created symbols
                                BornaAzimi Level 1

                                sorry for keep asking question,

                                 

                                Is the spot that I highlighted befor just a name, so I can put any name?

                                Does it get the index information from the trigger?

                                 

                                I'm trying to understand it and leads to many question.

                                here:

                                sym.getSymbol("options1").getSymbol(array_options_nosContigo[requestOption_nosContigo]).play('lead_in');

                                 

                                the "[requestOption_nosContigo]" is defined before as "requestOption_nosContigo = request_nosContigo;" and "request_nosContigo" comes from "function(request_nosContigo)". So does the triger define the "(request_nosContigo)"?

                                 

                                Even if you know any basic tutorial that I can refer to about them would be great.

                                 

                                BTW, thanks a lot.

                                • 13. Re: How to control dynamically created symbols
                                  pmfr01 Level 2

                                  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...

                                  • 14. Re: How to control dynamically created symbols
                                    BornaAzimi Level 1

                                    Thank you very much for such explanation. Since number of symbols and animations are too many, it may takes me few days to prepare the file to send you.

                                    Based on what you kindly explained, its clear for me now. I just need to make sure that every thing is properly in order. In your example there are four button and four animation, but in what i'm making, there are 11 categories of photos with a menu. Also there are four levels that gives access to the photos based on levels.

                                    I'll send the result for sure to see how i made it and if i made any mistake.

                                     

                                    Thank you very much for all your help.