5 Replies Latest reply on Jun 10, 2013 6:21 PM by elainecc

    Animating a Symbol on Stage using a JS function

    Departure Level 1

      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, is it?

       

       

      The following line fails to animate the SampleSymbol placed on 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

      }

        • 1. Re: Animating a Symbol on Stage using a JS function
          elainecc Adobe Employee

          Hi, Departure-

           

          Actually, I'd say the best practice is to animate on the timeline and reserve code for calling the animations.  I personally only animate using code when there's absolutely no other way to get what I want.  As for your code, some of the syntax is incorrect, but instead of doing things this way, you could use jQuery's method of animating:

           

          sym.$("SampleSymbol").animate({left: '+=20px'}, 20);

           

          http://api.jquery.com/animate/

           

          -Elaine

          • 2. Re: Animating a Symbol on Stage using a JS function
            Departure Level 1

            Thanks Elaine....

             

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

            • 3. Re: Animating a Symbol on Stage using a JS function
              Departure Level 1

              HERE IS MORE INFO ON THE SAME FUNCTIONALITY

               

              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 a Symbol on Stage using a JS function
                Departure Level 1

                Elaine I am actually curious why you insist to Animate things in TIMELINE instead of coding them dynamically?

                 

                I always thought execution of Dynamic codes is faster and lighter compared to actual timeline animations, and in flash development i found it very frustrating to deal with increased amount of labels, timeline frames. it is also much easier to INTERACT with multiple animations when coding functions rather than trying to move/relocate/modify interactive animations in timeline. Maybe i m a nerd, but i prefer to code every single movement and leave the stage and timeline for layout design and maybe some very complex animations inside a symbol...

                 

                So you pretty much suggest, creating individual animations on timeline and using Labels to jump between scenarios and calling symbols to play or stop or simple functionalitiy via Action panel?

                • 5. Re: Animating a Symbol on Stage using a JS function
                  elainecc Adobe Employee

                  Hi, Departure-

                   

                  Certainly it's a preference thing - there are times when I want to use code and times when I want to use the timeline-based animation.  For complex animations and motion, I want to have as much fidelity over the motion and be able to see it in preview as opposed to coding it.  Imagine making a Z with a div - I'd have to write four lines of code, adjust the easing, and if I have multiple animations to make at the same time, I have to coordinate them all.  Instead, I can just drag the object on the Stage and do my animations almost in realtime.

                   

                  So, you can certainly use jQuery to animate (and there are times I will do that), but a lot of times I will simply use the timeline because it's much faster and easier to make adjustments.

                   

                  -Elaine