1 Reply Latest reply on Oct 19, 2013 2:45 PM by AMULI

    Mousemove issues

    LizJablon

      I want to control one symbols timeline by using mousemove after the animation before it plays (it is a zoom in of an object then a 360 degree animation, I only want the mousemove to control the 360 animation). There are other things on the stage that I don't want controlled by the mousemove either. This is a problem because the only solution I have found is this...

       

      mousemove:

       

      this.onMove(e.pageX, epageY);

       

      CompositionReady:

       

      this.onMove=function(posX, posY){

      timelinecontrol = Number(posX)*5;

      console.log(timelinecontrol);

      sym.stop(timelinecontrol);

      }

       

      I am new to Edge so the simpler the better. Thanks!

        • 1. Re: Mousemove issues
          AMULI Level 4

          Hi LizJablon,

           

          We use a boolean variable intro set to true while the  initial zoom animation is playing.

           

          Stage > document.compositionReady event handler :

           

          sym.setVariable("intro", true);

           

          Stage @ 2500 ms trigger (end of the initial zoom)

           

          sym.setVariable("intro", false);

           

          Stage > Stage.mousemove event handler :

           

          We prevent processing until intro animation is complete :

           

          if (sym.getVariable("intro"))

          {

            return;

          };

           

          e.pageX is the horizontal position. The scene being width 600 pixels, subtracting 300 gives a value in interval ] -300, 300 [ :

           

          var angleValue = e.pageX -300;

           

          We add 360 to the angle value if it's negative, which gives a positive value for the same angle :

           

          angleValue = angleValue < 0 ? angleValue +360 : angleValue;

           

          The angle element displays the angle value :

           

          sym.$('angle').text( angleValue);

           

          The rotatingDisk symbol is a 360 ms timeline of a 360° rotation of a disk :

           

          sym.getSymbol('rotatingDisk').stop( angleValue);

           

          Could not make it simpler

           

          You can download the example file here : https://app.box.com/s/jsxorqg8hjdo9s0bp2q7

           

          Gil

          1 person found this helpful