6 Replies Latest reply: May 9, 2013 1:40 PM by elainefinnell RSS

    Animating through Actions Panel

    Departure Community Member
    Departure May 2, 2013 7:18 PM

      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...

       

      Scenario:

      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.

      • 606 Views
      • Tags:
        • 1. Re: Animating through Actions Panel
          elainefinnell Employee Hosts
          elainefinnell May 3, 2013 9:46 AM (in response to Departure)

          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.

           

          Cheers,

           

          -Elaine

          • 2. Re: Animating through Actions Panel
            Departure Community Member
            Departure May 6, 2013 2:31 PM (in response to elainefinnell)

            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...

             

            moveToRight();

             

            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 Community Member
              Zaxist May 7, 2013 4:25 AM (in response to Departure)

              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 Community Member
                Departure May 8, 2013 2:25 PM (in response to Zaxist)

                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 Community Member
                  Zaxist May 8, 2013 11:52 PM (in response to Departure)

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

                  • 6. Re: Animating through Actions Panel
                    elainefinnell Employee Hosts
                    elainefinnell May 9, 2013 1:40 PM (in response to Departure)

                    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.

                     

                    -Elaine