13 Replies Latest reply on Oct 31, 2014 1:29 AM by Torben V.F.

    how to play child Symbol in Edge Animate

    Torben V.F. Level 1

      I am trying to get the childSymbols to play in my project.

       

      The element is created, when pressing a button in the menu.

       

      var s = sym.getComposition().getStage().createChildSymbol("overblik", "overblik");

       

      var title = "Virksomhedskultur"

       

      s.$("overblik").html(title);
      s.$('bg').css({"background-color":"#F6861E"});
      s.getSymbolElement().css({  "position":"fixed", });

       

      I tried s.play(); and sym.getchildSymbol,

      and a lot of other different ways, but i can't seem to make it work. Does anybody know, how play the child symbol?

       

      Maybe by asigning some sort of name to the Symbol?

       

       

      When creating the symbol, i want the timeline to play on all the childSymbols,

      moving the object slightly, to create an effect of the themes being stacked. Just like underneath the box "virksomhedskultur"Tidslinje08-alle-tema.png

       

       

      Dropbox - systime

       

      http://torbenvf.dk/ledelsehelehistorien/web2/Grafiskprototype2.html

       

       

      I open to any ideas..

        • 1. Re: how to play child Symbol
          joel_pau Level 5

          So, how to use sym.createChildSymbol()?

           

          var instance = sym.createChildSymbol("librarySymbol", "container");

          instance.getSymbolElement().css( "position", "fixed" );

          instance.$( "bg" ).css( "background-color", "#F6861E" );

          instance.$( "overblik" ).html(title);

          instance.play();


          It seems you've got a problem here: .createChildSymbol("overblik", "overblik");

          • 2. Re: how to play child Symbol
            Torben V.F. Level 1

            How come?

             

            What i need, is a way to acces the child symbol, and play it's timeline

            • 3. Re: how to play child Symbol
              vivekuma Adobe Employee

              To access child symbol and play its timeline, use this sym.getSymbol("childSymbolName").play();.

               

              And to play timeline of all symbols, simply use sym.playAll()

               

              hth,

              Vivekuma

              1 person found this helpful
              • 4. Re: how to play child Symbol
                Torben V.F. Level 1

                But how to get the name of the childsymbol? tried with the name of the variable; s, but it dosn't respond to it.

                • 5. Re: how to play child Symbol
                  vivekuma Adobe Employee

                  To get the child symbol names, use

                       var childSymbols = sym.getChildSymbols();  //this will return the direct descendent children of the symbol sym

                       for(var i=0; i<childSymbols.length; i++)  {

                              console.log(childSymbols[i].name);

                       }

                   

                  hth,

                  Vivekuma

                  1 person found this helpful
                  • 6. Re: how to play child Symbol
                    Torben V.F. Level 1

                    Forgive me my Noobness, but i honestly have no idea.. The only return i get, putting that line of code on different places is; "object Object, object Object" etc. Where do i put this, in order to get the names?

                    • 7. Re: how to play child Symbol
                      resdesign Adobe Community Professional & MVP

                      hello,

                      The way I handle things when I create symbols dynamically is assigning IDs or classes to the symbols. If you assign an ID you will need to refer to the symbol with a # tag in front of the name:

                      example:

                      var container = sym.$('container');

                      var el = sym.createChildSymbol("question", container);

                      el.getSymbolElement().attr("id","newEl"+i);

                       

                      Then you refer to the newly created symbol above which are created using json, with the # tag:

                      In this case I am animating the symbol and changing an image inside the symbols:

                       

                      sym.getSymbol("#newEl" + i).$('image').animate({opacity:0.00},500);

                      sym.getSymbol("#newEl" + i).$('image').css({'background-image':'url("images/'+ data[i].image +'.jpg")','background-repeat':'no-repeat'}).animate({opacity:1.00},500);

                       

                      Basically, what you need to know is the scope of the symbol and what it does using getSymbol to play the symbol and $ to change css properties.

                      Hope this makes sense.

                      • 8. Re: how to play child Symbol in Edge Animate
                        vivekuma Adobe Employee

                        Do these changes:

                             var s = sym.getComposition().getStage().createChildSymbol("overblik", "Stage");

                         

                        and then call the play in the setTimeout function like:

                             setTimeout( function() {

                                                 sym.getComposition().getStage().getSymbol("overblik").playAll();

                                               }, 0);

                          

                        Let me know if this works.

                         

                        hth,

                        Vivekuma

                        • 9. Re: how to play child Symbol in Edge Animate
                          Torben V.F. Level 1

                          That plays the parent symbol called overblik, but not the child symbols..

                          • 10. Re: how to play child Symbol in Edge Animate
                            vivekuma Adobe Employee

                            Do:

                                 var childSymbols = sym.getComposition().getStage().getSymbol("overblik").getChildSymbols();

                                 for(var i=0; i<childSymbols.length; i++) // Return the number of direct children

                                      childSymbols[i].play();

                             

                            hth,

                            Vivekuma

                            • 11. Re: how to play child Symbol in Edge Animate
                              Torben V.F. Level 1

                              Really apreciate it!
                              Where should i put it? can't make it work when i try to run it from stage

                              • 12. Re: how to play child Symbol in Edge Animate
                                resdesign Adobe Community Professional & MVP

                                Should work if you put it in stage/compositionReady.

                                • 13. Re: how to play child Symbol in Edge Animate
                                  Torben V.F. Level 1

                                  Finally figured out way to do it!

                                   

                                  I am pretty sure, there would be a better way to do it, but this one works..

                                   

                                  My code looks something like this

                                   

                                   

                                  var idcount;

                                   

                                  if (sym.getComposition().getStage().first == true)

                                                               {

                                   

                                                               sym.getComposition().getStage().count = count = 0;

                                                               sym.getComposition().getStage().first = false;

                                                               }

                                   

                                                               else

                                                               { sym.getComposition().getStage().count = count++; }

                                   

                                  idcount = "newEl" + count;

                                   

                                                               var s = sym.getComposition().getStage().createChildSymbol("overblik", "overblik");

                                   

                                                                                            var title = "Virksomhedskultur"

                                   

                                                                                            s.$("overblik").html(title);

                                                                                            s.$('bg').css({"background-color":"#F6861E"});

                                                                                            s.getSymbolElement().css({  "position":"fixed", });

                                                                                            s.getSymbolElement().attr("id", idcount );

                                   

                                   

                                   

                                  1. sym.getComposition().getStage().getSymbol("overblik").getSymbol("#newEl0").play();
                                  2. sym.getSymbol("#newEl1").play();
                                  3. sym.getSymbol("#newEl2").play();
                                  4. sym.getSymbol("#newEl3").play();
                                  5. sym.getSymbol("#newEl4").play();
                                  6. sym.getSymbol("#newEl5").play();
                                  7. sym.getSymbol("#newEl6").play();
                                  8. sym.getSymbol("#newEl7").play();
                                  9. sym.getSymbol("#newEl8").play();
                                  10. sym.getSymbol("#newEl9").play();

                                   

                                  }


                                  And the result: Untitled

                                   

                                  Thank you everybody, for the help