0 Replies Latest reply on Mar 16, 2011 5:15 AM by ctaminian

    Interactive Image Panning Help Please!!!!!

    ctaminian

      Hey guys,

       


      I'm trying to achieve an effect similar to this one:

       


      http://www.prada.com/pradabook/

       


      When you click on a thumbnail and the larger image opens, when you move the mouse all the way to the right or left, the image just moves a fraction of the distance...

       


      I simply can't figure this out...I only manage to have the image follow the mouse til the absolute edges....

       


      I am playing arround with 2 scrolling codes:

       

      // Create a point when the image is first clicked
      
      var mouseLocFirstTime:Point = new Point(mc2._xmouse, mc2._ymouse);
      
      mc2.onEnterFrame = function()
      {
      mc2.onMouseMove = function()
      {
      
      // Keep creating points according the mouse position on the image
      var destination:Point = new Point(mc2._xmouse, mc2._ymouse);
          
      
      // Find the difference between the two points
      finalDX = destination.x - mouseLocFirstTime.x;
      finalDY = destination.y - mouseLocFirstTime.y;
                         
      
      // Tween to the difference and add the mc2 x and y since the image inside mc2 is aligned top left
      TweenMax.to(mc2,2,{_x:finalDX + mc2._x, _y:finalDY + mc2._y});
      };
      }
      

       

      By the way, mc2 is the large zoomed image, which is much much larger than the stage...its about 8000 px!!!

       


      The above code works fine, but i'm trying to reverse the direction, which is proving to be a pain!!! Can you guys please help?!?!?

       


      The other code I'm trying to implement is this one:

       

      var xRatioS = 0;
      var yRatioS = 0;
      
      var xTweenAmountS = 0;
      var yTweenAmountS = 0;
      
      mc2.onEnterFrame = function()
      {
      xRatioS = ((Stage.width - mc2._width) / Stage.width);
      xTweenAmountS = _xmouse * xRatioS;
      
      yRatioS = ((Stage.height - mc2._height) / Stage.height);
      yTweenAmountS = _ymouse * yRatioS;
      
      TweenLite.to(mc2,2,{_x:xTweenAmountS, _y:yTweenAmountS});
      
      }
      
      

       

      Now this one goes in the right direction as I need, but it goes all the way to the edges of my image...and I can't seem to figure out how to reduce the distance to about half or a quarter?!?!?!?

       


      Thank you guys...I know this a long post....but i'm hoping that someone out there can help me out with any one of the above!!!

       


      CHEERS