0 Replies Latest reply on May 26, 2016 8:38 AM by benjyoung

    Animated the clipping mask but not the image

    benjyoung Level 1

      I'm in edge animate and I'm able to move the image with mouse move, but is there a way to alter this in the .js to only effect the image and not the clipping mask.

       

      Thanks!

       

      var stageWidth = $('#Stage').width();

      var stageHeight = $('#Stage').height();

       

       

      // model

      var modelMinPosX = -240;

      var modelMaxPosX = 0;

      var modelMinPosY = 0;

      var modelMaxPosY = 00;

       

      sym.onMouseMove = function( pageX, pageY ){

       

        // move model (clipping mask)

        var modelRequestPosX = sym.getTranslation(0, stageWidth, modelMinPosX, modelMaxPosX, pageX);

        var modelRequestPosY = sym.getTranslation(0, stageHeight, modelMinPosY, modelMaxPosY, pageY);

        sym.$("modelCopy").css({left:modelRequestPosX, top:modelRequestPosY});

        // move model

        var modelRequestPosX = sym.getTranslation(0, stageWidth, modelMinPosX, modelMaxPosX, pageX);

        var modelRequestPosY = sym.getTranslation(0, stageHeight, modelMinPosY, modelMaxPosY, pageY);

        sym.$("model").css({left:modelRequestPosX, top:modelRequestPosY});

      }

       

       

      // utility function

      /*

        @param

        * minInput minimum Number of  input scale

        * maxInput maximum Number of  input scale

        * minOutput minimum Number of  output scale

        * maxOutput maximum Number of  output scale

        * inputNumber Number in input scale to be translated

      */

      sym.getTranslation = function(minInput, maxInput, minOutput, maxOutput, inputNumber) {

        var translatedVal = ((inputNumber - minInput) * (maxOutput -minOutput)/(maxInput - minInput) ) + minOutput;

        return translatedVal;

      }