22 Replies Latest reply on Dec 19, 2012 4:02 AM by joel_pau

    How can I set the element names with the script?

    Sleepy Lion

      Hi Could anyone give me a hand?

       

       

      I created symbols on the Stage by this script below.

      ------------------------------------------------------

      for(k=0; k<5; k++){

                sym.createChildSymbol("mySymB" , "Stage" );

      }

      ------------------------------------------------------

      How can I set the element names with the script?

       

       

      Because, when I try to control one of the symbols using  getSymbol("-----") command,

      I need to know the element name given to each symbol.

       

       

      Regards

        • 2. Re: How can I set the element names with the script?
          joel_pau Level 5

          Hi,

           

          I assume that your symbol have a text box named "info".

           

          1) During creation (inside loop).

           

          • Without text variable.

          for (k=0; k<5; k++) {

               var symB = sym.createChildSymbol("mySymB" , "Stage" );

               symB.$("info").html("text box: child #"+k);

          }

           

          • With text variable (info).

          for (k=0; k<5; k++) {

               var symB = sym.createChildSymbol("mySymB" , "Stage" );

               var info = symB.$("info");

               info.html("text box: child #"+k);

          }

           

          2) After creation (outside loop).

           

          for (k=0; k<5; k++) { sym.createChildSymbol("mySymB" , "Stage" ); }

          var myChildren = sym.getChildSymbols();

          myChildren[0].$("info").html("first child");

          myChildren[1].$("info").html("second child");

          myChildren[2].$("info").html("third child");

          myChildren[3].$("info").html("fourth child");

          myChildren[4].$("info").html("fifth child");

          • 3. Re: How can I set the element names with the script?
            Sleepy Lion Level 1

            Thank you for the advices , sftrane ,joel_pau.

             

             

            But what I wanted to know was a little bit different.

             

             

            In joel_pau's example, this script below will make changes to the third symbol.

                -----------------------------------------------------------

                  myChildren[2].$("info").html("third child");

                -----------------------------------------------------------

             

             

            And I thought if it is possible to write the same script using getSymbol command like ....

                -----------------------------------------------------------

                  sym.getSymbol(myChildren[2]).$("info").html("third child");

                -----------------------------------------------------------

            Of course the script above is wrong, because getSymbol takes an argument of element name.

             

             

            So I wanted to know how to set the element names at the same time of creation inside  for-loop.

            • 4. Re: How can I set the element names with the script?
              sftrane Level 1

              You could try turning myChildren[2] into a variable just before passing it through getSymbol.

               

               

              var child2 = myChildren[2];

              sym.getSymbol(child2).$("info").html("third child");

               

               

               

              So the full code would look like:

               

               

              for (k=0; k<5; k++) { sym.createChildSymbol("mySymB" , "Stage" ); }

              var myChildren = sym.getChildSymbols();

              var child0 = myChildren[0];

              var child1 = myChildren[1];

              var child2 = myChildren[2];

              var child3 = myChildren[3];

              var child4 = myChildren[4];

              sym.getSymbol(child0).$("info").html("first child");

              sym.getSymbol(child1).$("info").html("second child");

              sym.getSymbol(child2).$("info").html("third child");

              sym.getSymbol(child3).$("info").html("fourth child");

              sym.getSymbol(child4).$("info").html("fifth child");

               

              Message was edited by: sftrane. Added full code

              • 5. Re: How can I set the element names with the script?
                joel_pau Level 5

                It would be better to use jQuery.

                 

                var childrenID = new Array();

                for ( k=1 ; k<5 ; k++ ) {    

                var symB = sym.createChildSymbol("mySymB" , "Stage" ) ;

                childrenID.push(symB.lookupSelector("info")) ;

                };

                $(childrenID[0]).html("first child");

                $(childrenID[1]).html("second child");

                $(childrenID[2]).html("third child");

                $(childrenID[3]).html("fourth child");

                $(childrenID[4]).html("fifth child");

                • 6. Re: How can I set the element names with the script?
                  Sleepy Lion Level 1

                  Thank you very much sftrane.

                  But unfortunately it did not work.

                  Perhaps, the arguments of getSymbol in your example was not element name.

                   

                   

                   

                   

                  Thank you very much joel_pau.

                  It worked. Can I beg to ask you about your example?

                   

                  If you use getSymbol command instead of "$(childrenID[3])" part , how do you modify your example?

                  I think it will be ....

                   

                  -----------------------------------------------------------

                    var childrenID = new Array();

                    for ( k=0 ; k<5 ; k++ ){

                       var symB = sym.createChildSymbol("mySymB" , "Stage" ) ;

                      **** perhaps, here comes a script to set element name to symB ****

                       childrenID.push(symB.lookupSelector("info")) ;

                    };

                    sym.getSymbol(*** the element name ***).$("info").html("first child");

                  -----------------------------------------------------------

                  But I don't know how to complete this example above.

                   

                  regards

                  • 7. Re: How can I set the element names with the script?
                    joel_pau Level 5

                    Well,

                    If i convert my text box named "info" to a symbol then i can use sym.getSymbol("info") else i can't.

                    We have to drag and drop info symbol from library to mySymB symbol. A symbol comes from library.

                     

                    for (k=0; k<5; k++) {

                         var symB = sym.createChildSymbol("mySymB" , "Stage" );

                         symB.getSymbol("info").$("info").html("text box: child #"+k);

                    }

                     

                    sym.getSymbol(oneElement) will never return one element symbol.

                    Edge API: working with symbols.

                    jQuery: If i want to reuse later my text box i can use .find() function.

                    • 8. Re: How can I set the element names with the script?
                      Sleepy Lion Level 1

                      Thank you very much for your kind advices.

                      Because of my poor English ability, my question is not understood completely. I'm really Sorry.

                       

                       

                      Let me explain it again.

                       

                      I don't mention about text box. I just mention symbol itself. (In this case "mySymB")

                       

                      After this script below runs, there will be five symbols on the Stage.

                        --------------------------------------------------------------------

                      for (k=0; k<5; k++) {

                        var symB = sym.createChildSymbol("mySymB" , "Stage" );

                      }

                      --------------------------------------------------------------------

                       

                      They are ... symB[0] , symB[1], symB[2], symB[3], symB[4].

                      So I can handle any of them like this.

                      --------------------------------------------------------------------

                         symB[3].getSymbolElement().css({"position":"absolute", "left":"10px"});

                      --------------------------------------------------------------------

                       

                      Then I thought if I can handle symB[3] using  getSymbol() command.

                      But getSymbol() takes  symbol's element name as its argument.

                      But but, symB[0] -- symB[4] don't have element name.

                      Oh no!

                      How can I put the element name to each symbol?

                       

                       

                       

                       

                      By the way, if I drag and drop a symbol from the library to Stage,

                      I can put element name to it manually in the property window.

                      Once I name it "Godzilla" , this script below works.

                      ------------------------------------------------------------------------------------------ --------------------------

                      sym.getComposition().getStage().getSymbol("Godzilla").getSymbolElement().css({"position":"absolute", "left":"10px"});

                      ------------------------------------------------------------------------------------------ --------------------------

                       

                       

                      I'm wondering why I can't do the same thing to the symbols that created by script.

                      • 9. Re: How can I set the element names with the script?
                        joel_pau Level 5

                        I don't know where you are coding. Do you have a sample file?

                        • 10. Re: How can I set the element names with the script?
                          Sleepy Lion Level 1

                          >>Do you have a sample file?

                           

                          Yeah, I should have done it at first, sorry.

                          I've made it and uploaded here.

                           

                          http://www.5th-trend.com/forum.zip

                          (This zip-file is scaned with Macafee.)

                           

                          regards

                          • 11. Re: How can I set the element names with the script?
                            joel_pau Level 5

                            So, i added 2 files: attached file.

                            One, using drag and drop.

                            Another, using code.

                            • 12. Re: How can I set the element names with the script?
                              Sleepy Lion Level 1

                              Hi, joel_pau,

                              I really appreciate your kind support. Thank you.

                              I saw your two examples. They described really what I want to say.

                               

                              In the "Drag-and-Drop-Example" you could use getSymbol command like this.

                                   -----------------------------------------------------------

                                   sym.getSymbol("mySymB"+i).$("Text").html("parent Name");

                                   -----------------------------------------------------------

                              It's because you put element names by hand in the property window.

                              elementName.jpg

                               

                               

                              But In the "Code-Example" you didn't use getSymbol command.

                              I guess it's because Adobe Edge Element Ver 1.0 does not have methods

                              to put element name by coding as of now.

                               

                              If there is the one, you can use getSymbol command in the "Code-Example".

                               

                              Am I right?

                              This is my question.

                              • 13. Re: How can I set the element names with the script?
                                joel_pau Level 5

                                yes, you're right.

                                Using "Code-Example" if you write sym.getSymbol("mySymB") Edge returns undefined.

                                With "Drag-and-Drop-Example", you can use sym.getChildSymbols().

                                • 14. Re: How can I set the element names with the script?
                                  Sleepy Lion Level 1

                                  Hi joel_pau

                                  Thank you !

                                   

                                  I feel refreshed !!

                                  And I expect Adobe Edge Element's  further evolution

                                   

                                  ARIGATO   <---- "Thank you" in Japanese.

                                  • 15. Re: How can I set the element names with the script?
                                    AkariKamigishi

                                    I guess I have similar question to Sleep Lion's.

                                     

                                    I create symbols through code (not by hand) like:

                                    var item[0] = sym.createChildSymbol("mySymA" , "Stage" );

                                    var item[1] = sym.createChildSymbol("mySymB" , "Stage" );

                                    var item[2] = sym.createChildSymbol("mySymC" , "Stage" );

                                     

                                    and through a drag and drop plugin I can get the jQuery object and work with it like:

                                    $item.width(), $item.offset().top, $item.offset().left, etc

                                    But I have no idea $item is symbol mySymA or mySymB or mySymC

                                     

                                    Since the files provided by joel_pau has expired, anyone has idea how to solve this?

                                    Thank you.

                                    • 16. Re: How can I set the element names with the script?
                                      Sleepy Lion Level 1

                                      Hi AkariKamigishi

                                       

                                      Take this zip file  as an example.

                                      createSym.zip

                                       

                                      And please check your code for Arrays.

                                       

                                      -----------------------------------------------------------

                                      (wrong)

                                      var item[0] = sym.createChildSymbol("mySymA" , "Stage" );

                                      var item[1] = sym.createChildSymbol("mySymB" , "Stage" );

                                      var item[2] = sym.createChildSymbol("mySymC" , "Stage" );

                                      -----------------------------------------------------------

                                      (correct)

                                      var item = new Array();

                                      item[0] = sym.createChildSymbol("mySymA" , "Stage" );

                                      item[1] = sym.createChildSymbol("mySymB" , "Stage" );

                                      item[2] = sym.createChildSymbol("mySymC" , "Stage" );

                                      -----------------------------------------------------------

                                       

                                      regards

                                      • 17. Re: How can I set the element names with the script?
                                        AkariKamigishi Level 1

                                        Hi Sleepy Lion,

                                         

                                        Thanks for the reply. I didnt use the exact same code so I didnt notice the wrong declaraion.

                                        Anyway, my problem is:

                                        What I got is: a jQuery object only

                                        What I need is: which symbol does this jQuery belongs to

                                         

                                        to demonstrate it with an example:

                                         

                                        function IWantSymbolName(jQueryHandle) {

                                             // what can i do with the jQuery handle to know which symbol does this thing created by

                                             // even though I can control it through jQueryHandle.css({blah, blah, blah});

                                             return SymbolName;

                                        }

                                         

                                        var symbol = sym.createChildSymbol("mySymbolA", sym.$("Stage"));

                                        var name = IWantSymbolName(symbol.getSymbolElement());

                                        alert(name); //I want it showing "mySymbolA"

                                         

                                        Actually after some searching I guess I can use the function sym.getSymbolTypeName()

                                        but I have no idea how to get the symbol from jQuery handle

                                        • 18. Re: How can I set the element names with the script?
                                          Sleepy Lion Level 1

                                          How about this .....

                                           

                                          -----------------------------------------------------------

                                          var item = new Array();

                                          item[0] = sym.createChildSymbol("mySymA" , "Stage" );

                                          item[1] = sym.createChildSymbol("mySymB" , "Stage" );

                                          item[2] = sym.createChildSymbol("mySymC" , "Stage" );

                                           

                                          item[0].getSymbolElement().css({"position":"absolute", "top":"0px"});

                                          item[1].getSymbolElement().css({"position":"absolute", "top":"100px"});

                                          item[2].getSymbolElement().css({"position":"absolute", "top":"200px"});

                                           

                                          for(var j=0;j<item.length;j++){

                                            alert("What I want is " + IWantSymbolName( item[j]) );

                                          }

                                           

                                          function IWantSymbolName(SYM) {

                                            return (SYM.getSymbolTypeName());

                                          }

                                          --------------------------------------------------

                                          • 19. Re: How can I set the element names with the script?
                                            AkariKamigishi Level 1

                                            I think the method getSymbolTypeName() is provided by Symbol Instance not jQuery handle

                                            • 20. Re: How can I set the element names with the script?
                                              Sleepy Lion Level 1

                                              I don't know exactly but this command "getSymbolTypeName()" appears in the Adobe's official document as a part of an example.

                                              But there seems to be no writings about its spec.

                                               

                                              Adobe Edge Animate JavaScript API - Version 1.0.0

                                              • 21. Re: How can I set the element names with the script?
                                                AkariKamigishi Level 1

                                                It seems that the jQuery object doesnt preserve the symbol properties.

                                                 

                                                The current solution I came up is create a Text inside the symbol, and get back the text content through jQueryHandle.text(), serve it as the symbol ID.

                                                 

                                                Not sure if there is any better solution.

                                                • 22. Re: How can I set the element names with the script?
                                                  joel_pau Level 5

                                                  demo file.

                                                   

                                                  var item0 = sym.createChildSymbol("symA", "Stage");//rectangle

                                                  var item1 = sym.createChildSymbol("symB", "Stage");//ellipse

                                                  var item2 = sym.createChildSymbol("symC", "Stage");//roundedRectangle

                                                          

                                                           //id: jQuery, Edge API

                                                           var rectangleID = item0.lookupSelector("Rectangle");

                                                           $(rectangleID).css("left","100px");

                                                          

                                                           var ellipseID = $(item1.lookupSelector("Ellipse"));

                                                           ellipseID.css({"left": "150px", "opacity": "0.65"});

                                                          

                                                           var roundRectID = $(item2.lookupSelector("RoundRect"));

                                                           roundRectID.width(200).offset({ top: 150, left: 200 });

                                                          

                                                           sym.$("Text").html( "RoundRect coords: left= " + roundRectID.offset().left

                                                              + ", top= " + roundRectID.offset().top );