6 Replies Latest reply on Jun 23, 2013 12:15 PM by heathrowe

    Animate symbols

    Rafael Zuma

      Hi, Guys!

      I'm trying to animate a symbol into another symbol, but it is not working.

       

       

      The code is this:

      sym.getSymbol ("father"). getSymbol ("child"). animate ({top: 0}, 500, 'linear');

       

       

      Can i apply the function. "Animate ()" on a symbol or am I doing something wrong?

        • 1. Re: Animate symbols
          resdesign Adobe Community Professional & MVP

          Using jQuery-UI I have this working. The symbol name is father and the symbol inside father is called child.

          Note: I added a folder named js with the 2 files below.

           

          // insert code to be run when the composition is fully loaded here

          yepnope(

          {

              nope:[

                  'js/jquery-ui-1.9.2.custom.min.js',

                  'js/jquery.ui.touch-punch.min.js',

               ],

              complete: init

          }

          );

           

           

           

          function init() {

           

                    var father = sym.getSymbol('father');

                    sym.$('father').click(function() {

                                         father.$('child').animate({

                                        opacity: 0.25,

                                        left: '+=50',

                                        height: 'toggle'

                              }, 5000, function() {

              // Animation complete.

                              });

                    });

          }

           

           

          Sample:

          https://www.box.com/s/d4xtjsk8205evmmqfopx

           

          If you want the click event to be on the red dot (child) change the line sym.$('father').click(function() {  to:

               father.$('child').click(function() {

               same code here

          });

          • 2. Re: Animate symbols
            YOSHIOKA Ume Level 3

            Hi.

             

            I guess, we can use getSymbolElement() to access an element associated with a symbol.

             

            sym.getSymbol("father").getSymbol("child").getSymbolElement().animate ({top: 0}, 500, 'linear');

            • 3. Re: Animate symbols
              Rafael Zuma Level 1

              Hi, redesign and YOSHICA!Thanks for the help of both!

              I concluded that to animate a "symbol" (MovieClip in Flash), we can not simply put ".animate" after ".getSymbol", we must have ".getSymbolElement" before ".animate".

               

              Does not work:

              sym.getSymbol("test").animate ({top: -50}, 2000, 'linear');

               

              works:

              sym.getSymbol("test").getSymbolElement().animate ({top: -50}, 2000, 'linear');

              • 4. Re: Animate symbols
                heathrowe Most Valuable Participant

                Rafael, try this. Note the direct jquery handler reference $("child"). I just tested this and it works.

                 

                sym.getSymbol("father").$("child").animate ({top: -50}, 2000, 'linear');

                 

                Darrell

                • 5. Re: Animate symbols
                  Rafael Zuma Level 1

                  Yes, it works when I want to animate an "element" within a "symbol". But what I wanted was to animate a "symbol".

                   

                   

                  So if you try the way down, you will not get:

                   

                   

                  sym.getSymbol ("father"). animate ({top: -50}, 2000, 'linear');

                  • 6. Re: Animate symbols
                    heathrowe Most Valuable Participant

                    It works, I am animating a symbol.

                     

                    I have

                    Symbol called 'father'

                        within this symbol (father) I have another symbol called 'child'.

                     

                    Using the above notation I reference you can use the jquery 'animate' method.

                     

                    See capture.

                     

                    SNAG_Program-0122.jpg