asked on

Horizontal and vertical pan

How can I make this code work for a vertical pan (up and down) ? I have tried changing all the settings from x to y and stage.stageWidth to stage.stageHeight but didn't work.

// source of code, http://www.kirupa.com/forum/showthread.php?281665-Interactive-Image-Panning-(flash-cs3-as3-version)
import flash.display.*;
import flash.events.*;

constrainedMove(bg_mc, 2, 1);

function constrainedMove(target:MovieClip, speed:Number, dir:int){
	var mousePercent:Number = mouseX / stage.stageWidth;
	
	stage.addEventListener(MouseEvent.MOUSE_MOVE, panImage);
	target.cacheAsBitmap = true;
	
	function panImage(E:MouseEvent):void {
		var mSpeed:Number;
		mousePercent = mouseX / stage.stageWidth;
		if (dir == 1) {
			mSpeed = 1 - mousePercent;
		} else {
			mSpeed = mousePercent;
		}
		target.destX = Math.round(-((target.width - stage.stageWidth) * mSpeed));
		if(target.hasEventListener(Event.ENTER_FRAME)){
			target.removeEventListener(Event.ENTER_FRAME, del);
		}
		target.addEventListener(Event.ENTER_FRAME, del);
		E.updateAfterEvent();
	}
	
	function del(E:Event):void {
		if (Math.abs(target.x - target.destX) <= 1) {
			target.x = Math.round(target.destX);
			target.removeEventListener(Event.ENTER_FRAME, arguments.callee);
		} else {
			target.x += (target.destX - target.x) * (speed / 100);
		}
	}
}

Open in new window

dgofman

is your image larger that stage height?

Can you upload your FLA in CS4 or image?

dgofman

Make sure you image larger than height and add stage height handler

this.onMouseMove = function() {
      constrainedMove(bg_mc, 4, 1);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
      var mousePercentX:Number = _xmouse/Stage.width;
      var mousePercentY:Number = _ymouse/Stage.height;
      var xSpeed:Number, ySpeed:Number;
      if (dir == 1) {
            xSpeed = 1-mousePercentX;
            ySpeed = 1-mousePercentY;
      } else {
            xSpeed = mousePercentX;
            ySpeed = mousePercentY;
      }
      target.destX = Math.round(-((target._width-Stage.width)*xSpeed));
      target.destY = Math.round(-((target._height-Stage.height)*ySpeed));
      target.onEnterFrame = function() {
            trace(target._x +"+"+ target.destX)
            trace(target._y +"+"+ target.destY)
            if (target._x == target.destX && target._y == target.destY) {
                  delete target.onEnterFrame;
            } else if (target._x>target.destX) {
                  target._x -= Math.ceil((target._x-target.destX)*(speed/100));
            } else if (target._x<target.destX) {
                  target._x += Math.ceil((target.destX-target._x)*(speed/100));
            }

            if (target._y>target.destY) {
                  target._y -= Math.ceil((target._y-target.destY)*(speed/100));
            } else if (target._x<target.destY) {
                  target._y += Math.ceil((target.destY-target._y)*(speed/100));
            }
      };
}

boblandess

ASKER

Thanks but I am doing this in AS3.

dgofman

Math functions will work in AS3 as well :)

dgofman

The same in AS3

stop();

var speed:Number = 4;
var dir:Number = 1;

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

function enterFrameHanlder(event:Event):void {
      var target:MovieClip = event.target;
      if (target.x == target.destX && target.y == target.destY) {
            target.removeEventListener(Event.ENTER_FRAME, enterFrameHanlder);
      } else if (target.x>target.destX) {
            target.x -= Math.ceil((target.x-target.destX)*(speed/100));
      } else if (target.x<target.destX) {
            target.x += Math.ceil((target.destX-target.x)*(speed/100));
      }

      if (target.y > target.destY) {
            target.y -= Math.ceil((target.y-target.destY)*(speed/100));
      } else if (target.x<target.destY) {
            target.y += Math.ceil((target.destY-target.y)*(speed/100));
      }
};

function mouseMoveHandler(event:MouseEvent) {
      var target:MovieClip = bg_mc;
      var mousePercentX:Number = stage.mouseX/stage.stageWidth;
      var mousePercentY:Number = stage.mouseY/stage.stageHeight;
      var xSpeed:Number, ySpeed:Number;
      if (dir == 1) {
            xSpeed = 1-mousePercentX;
            ySpeed = 1-mousePercentY;
      } else {
            xSpeed = mousePercentX;
            ySpeed = mousePercentY;
      }
      target.destX = Math.round(-((target.width-stage.stageWidth)*xSpeed));
      target.destY = Math.round(-((target.height-stage.stageHeight)*ySpeed));
      target.addEventListener(Event.ENTER_FRAME, enterFrameHanlder);
}

boblandess

ASKER

dgofman, I get this error when using the code fro your last post.

1118: Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:MovieClip.

dgofman

Its work for me

imagePan-final.fla

boblandess

ASKER

No matter what I do I still get the arror, 1118: Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:MovieClip. Even when I use your code and objects in a new scene.

I am using AS3 Flash Pro CS4.

dgofman

I attached Fla file fie CS4 run my example or upload your file

boblandess

ASKER

I downloaded the attached file and it works. However if I paste your code into my .fla or a new .fla I get the error code, 1118: Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:MovieClip.

imagePan-final-Mine.fla

dgofman

Interesting why my FLA file doesn't show same warning.

Anyway change explicit cast to MovieClip I expected you will able to figure out yourself

function enterFrameHanlder(event:Event):void {
var target:MovieClip = event.target as MovieClip;

ASKER CERTIFIED SOLUTION

dgofman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

boblandess

ASKER

Got it. Thanks for all your help.