6 Replies Latest reply on May 9, 2013 1:40 PM by elainecc

    Animating through Actions Panel

    Departure Level 1

      General Question:

      How can I access Symbols on Stage so I can  Manualy code JavaScript functions to Animate them?

      My goal is to code everything in the main Action panel like how ActionScript codes run the functions to animate Symbols on Stage on addEventListener()


      My understanding is instead of ActionScript language, now you code with JavaScript instead in Action Panels. but my JavaScript functions or command lines doesnt work...



      I want to relocate the SampleSymbol when a button is Clicked


      Following Code is placed on CLICK trigger for a button.


      sym.$("SampleSymbol").style.left = '100px';  <---This Doesnt work...


      sym.$("SampleSymbol").hide() <--This works, so it means i m accessing the Symbol correctly.

        • 1. Re: Animating through Actions Panel
          elainecc Adobe Employee

          You're very close.


          sym.$("SampleSymbol").css("left", "100px");


          The Javascript API doc will help you out a lot - go to Help > Animate JavaScript API and you'll find the link.





          • 2. Re: Animating through Actions Panel
            Departure Level 1

            Thanks Elaine....How about Animating then?


            Lets say i would like to animate SampleSymbol to the right, The following code is placed in CLICK trigger for a button, My understanding is the best way to animate stuff is to write JS functions in Action panels,



            The following line fails to animate the symbol on the stage...




            function moveToRight() {

            sym.$("SampleSymbol").style.left = (sym.$("SampleSymbol").style.left+1)+'px';

            // This code supposed to Move the object 1px to the right


            setTimeout(moveToRight,20); // call function() in 20 msec



            I am reading the Help menu u recommended as well...Thanks

            • 3. Re: Animating through Actions Panel
              Zaxist Level 4

              this way you can animate them :


              sym.$("SampleSymbol").animate({"left" : "100px"}, 500, "easeInCubic");


              500 : is the number in milisec to move your symbol


              ease : this is Optional and  you can use ease after number to change the way your symbol move like easeInCubic


              Here is the list of ease that you can use : http://easings.net/

              • 4. Re: Animating through Actions Panel
                Departure Level 1

                Thanks Zaxist...


                I am confused, which one is correct?

                1 - We can use original JavaScript codes/functions in actions panel, as we did in absence of Edge.

                2 - We can only use partial libraries of JavaScript codes/Jquery in actions panel

                3 - We use Edge-Specific Syntax to do the stuff, while being able to borrow JS libraries partially


                In case of Flash Development, it was Flash+ActionScript. What is the relationship here, I get that the layouts and objects are converted to HTML5,CSS3,JS but i am confused on the main language to code in action panels...

                • 5. Re: Animating through Actions Panel
                  Zaxist Level 4

                  you can use orginal javaScript codes and functions in action panel...

                  • 6. Re: Animating through Actions Panel
                    elainecc Adobe Employee

                    Hi, Departure-


                    I'd suggest that it's 4: there are Animate-specific APIs that will allow you to manipulate objects defined within Animate compositions, but since we're currently using jQuery, you can easily leverage jQuery to do what you would like.  And, of course, since the API is written in JavaScript, you can use any of the JavaScript standard methods.


                    So, in essence, you have JavaScript + jQuery + Animate APIs at your disposal.