12 Replies Latest reply on Oct 22, 2014 10:25 AM by resdesign

    Targeting a symbol within a symbol

    michaelhurwicz Level 1

      In Edge Animate 3 on the Mac, I have created a symbol called "card" which has two timelines inside it, one containing a symbol based on a text field ("TextSym"), the other containing a graphic. The text field currently just as a blank character in it. I want to change that to "Hello World". I can do this successfully when the text field is on the Stage with code like this:

       

      sym.$("TextSym").html("Hello World");

       

      I have tried several things unsuccessfully to target the text inside the "card" symbol:

       

      sym.$("card").$("TextSym").html("Hello World");

       

      sym.$("card").getSymbol("TextSym").html("Hello World");

       

      sym.$("card").getSymbolElement("TextSym").html("Hello World");

       

      I have also tried variations of:

       

      sym.getComposition().getStage().getSymbol("card").getSymbol("TextSym").html("Hello World");

       

      I have placed each of these within the creationComplete event for the Stage.

       

      For the last one, for instance, the Chrome Developers Tools says:

       

      Javascript error in event handler! Event Type = symbol

       

      Files available here:

      http://www.yellowtechroad.com/yellowtechroad/cards/cards005.zip

       

      Any help will be greatly appreciated!

       

      Mike

       

       


        • 1. Re: Targeting a symbol within a symbol
          hemanthR Adobe Employee

          sym.getComposition().getStage().getSymbol("card").$("TextSym").html("Hello World");

          This is working for me.

          • 2. Re: Targeting a symbol within a symbol
            michaelhurwicz Level 1

            Works for me, too!  Thank you!

            • 3. Re: Targeting a symbol within a symbol
              michaelhurwicz Level 1

              Thought I would try creating the card with JavaScript.  So I deleted the card from the Stage (leaving it in the Symbols library) and tried the following.

               

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

              sym.getComposition().getStage().getSymbol("card").$("TextSym").html("Hello World");

               

              The first line appears to work -- the card appears on the stage.  But the second line doesn't work.. "Hello World" does not appear. Any idea why?

              • 4. Re: Targeting a symbol within a symbol
                hemanthR Adobe Employee

                try this

                var r = sym.createChildSymbol("card", "Stage");

                r.$("TextSym").html("H ello World");

                • 5. Re: Targeting a symbol within a symbol
                  michaelhurwicz Level 1

                  Yes!  Thanks again, Hemanth! I would love to understand why yours works and mine didn't. I would think the two would be equivalent. I must not understand what getSymbol() actually returns. But the main thing is, thank you!

                  • 6. Re: Targeting a symbol within a symbol
                    resdesign Adobe Community Professional & MVP

                    Hi there,

                    When you create a symbol dynamically, the symbol is assigned an id by Animate.

                    In you case, card is the original symbol and the one that is created has a different id.

                     

                    When you create an symbol dynamically, you can also assign an id to it and then use it as you would a symbol that was added to the stage manually.

                     

                    Here is how to add an ID to a created symbol. When you use it, then do not forget to add the # when you use that new ID.

                     

                    var newCard = sym.createChildSymbol("card", "Stage");

                    newCard.element.attr("id","newIDName");

                    // example of use

                    sym.getSymbol("#newIDName").$("Text").html("some text here");

                    • 7. Re: Targeting a symbol within a symbol
                      QuadrantProductions Level 1

                      What if we want to target a symbol inside a symbol that later needs to reference dynamic data from a json file.  Like the below code block where thumb1 is a symbol inside of teamgroup1 which rests on the stage.  The elements holder, the name, the title and biography are all inside the symbol thumb1 which in turn is inside teamgroup1.

                       

                      We need to do it this way because when we move the timeline elsewhere we want a different set of thumbs to load with a different Json.

                      @

                         $.getJSON('staffnames.json', function(data){

                          {

                           var s1 = sym.getComposition().getStage().getSymbol("teamgroup1").$("thumb1");

                          s1.$("holder").css({"background-image":"url('"+data[0].image+"')"});

                          s1.$("thename").html(data[0].thename);

                          s1.$("thetitle").html(data[0].thetitle);

                          s1.$("biography").html(data[0].biography);

                      • 8. Re: Targeting a symbol within a symbol
                        resdesign Adobe Community Professional & MVP

                        You just need to use the proper scope the same way as a normal symbol. So if your symbol is inside a symbol then you use:

                        Note I use i since I am iterating the data with a next button but you can call any element with its index.

                        • text

                        sym.getSymbol('name').getSymbol('insideSymbolname').$('text').html(data[i].question);

                        • image - with attr  - change from div to img in the top left - all images are the same size

                        sym.getSymbol('name').getSymbol('insideSymbolname').attr('src','images/'+ data[i].image +'.jpg');

                        • image with css - use empty div for container - images fit inside the div in at least the height or the width

                        sym.getSymbol('name').getSymbol('insideSymbolname')..css({'background-image':'url("images/ '+data[i].image + '.jpg")','background-repeat':'no-repeat'});

                        • 9. Re: Targeting a symbol within a symbol
                          QuadrantProductions Level 1

                          Thanks!

                          I modified my code as per your recommendation and I got a partial success.

                           

                          Here's the code.  See he // comments.

                          $.getJSON("staffnames.json", function(data){

                            {

                            var s1 = sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); //this is working it understands that the data from the JSON should be pulled into the nested symbol.

                            var m1 = sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); // THIS VAR IS NOT WORKING.  Lower down I'm binding a series of events attached to this m1 var.  What's interesting is, in my original file shared yesterday, this worked.  The only difference is that the s1 var was one level up in that case.

                           

                            s1.$("holder").css({"background-image":"url('"+data[0].image+"')"});

                            s1.$("thename").html(data[0].thename);

                            s1.$("thetitle").html(data[0].thetitle);

                           

                            m1.on({

                                   mouseenter: function() {

                                       // Do something

                                       sym.$("biographyareaCopy").html(data[0].biography);

                                       sym.$("thename").html(data[0].thename);

                                       sym.$("thetitle").html(data[0].thetitle);

                                       sym.$("certifications").html(data[0].certifications);

                                       sym.$("thename").css ({"position":"relative",

                                       "top":"0px"});

                            alert( "hovered over a div" );

                                   },

                                   mouseleave: function() {

                                       // Do something

                                       //alert( "mouse left a div" );

                                   },

                                   click: function() {

                                       // Do something

                                       //alert( "clicked on a div" );

                                   }

                               });

                           

                            }

                          });

                          • 10. Re: Targeting a symbol within a symbol
                            resdesign Adobe Community Professional & MVP

                            Assuming that all the elements you have are in the symbol, could you try this:   (otherwise your elements' scope is wrong. You might want to put the whole scope of these elements like:

                            m1.$("biographyareaCopy").html(data[0].biography);  which uses m1 instead of sym.

                            sym.getSymbol("teamgroup1").$("teamThumb1").mouseenter(function(){

                               // Do something

                              sym.$("biographyareaCopy").html(data[0].biography);

                              sym.$("thename").html(data[0].thename);

                              sym.$("thetitle").html(data[0].thetitle);

                              sym.$("certifications").html(data[0].certifications);

                              sym.$("thename").css ({"position":"relative","top":"0px"});

                               alert( "hovered over a div" );

                            });

                            sym.getSymbol("teamgroup1").$("teamThumb1").mouseleave(function(){

                              // Do something

                              alert( "mouse left a div" );

                            }),

                            sym.getSymbol("teamgroup1").$("teamThumb1").click(function(){

                              // Do something

                              alert( "clicked on a div" );

                            });

                            • 11. Re: Targeting a symbol within a symbol
                              QuadrantProductions Level 1

                              Success.  This worked below. I wish I could markup this code better so it was obvious where the issues lay.

                               

                              The two lines which are bolded were the problem.  The first bolded line was originally written the same on the second bolded line.  I don't understand the difference between

                              sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); and

                              sym.getSymbol("teamgroup1").$("teamThumb1")

                               

                              As far as calling a symbol is concerned… what is the difference between .$ and .getSymbol

                               

                              This is the bit that worked.

                              //  ========================== TEAM 1  ========================== //

                              $.getJSON('staffnames.json', function(data){

                                {

                              var s1 = sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); // first bolded line

                                s1.$("holder").css({"background-image":"url('"+data[0].image+"')"});

                                s1.$("thename").html(data[0].thename);

                                s1.$("thetitle").html(data[0].thetitle);

                                s1.$("biography").html(data[0].biography);

                               

                                //start mouse events//

                                       sym.getSymbol("teamgroup1").$("teamThumb1").mouseenter(function(){ // second bolded line

                                       /*change position of the name */ sym.$("thename").css ({"position":"relative","top":"0px"});

                                       /*place JSON data in text blocks*/

                                       sym.$("biographyareaCopy").html(data[0].biography);

                                       sym.$("thename").html(data[0].thename);

                                       sym.$("thetitle").html(data[0].thetitle);

                                       sym.$("certifications").html(data[0].certifications);

                                       // next line returns the name text back to it's 0 position.  See line 24

                                       sym.$("thename").css ({"position":"relative",

                                           "top":"0px"});

                                       /*alert( "hovered over a div");*/

                              })//close mouse enter //

                               

                               

                              //keep close outs below

                                }

                              });

                              • 12. Re: Targeting a symbol within a symbol
                                resdesign Adobe Community Professional & MVP

                                getSymbol is a native animate handle that allows interaction with the symbol while $ is a jquery handle that interact on a DOM element which you need for the click event that is jquery.

                                Hope this makes sense.
                                I am glad you got all this to work.