First off let me thank you all for your great tutorials!
I have followed the interactive image pan tutorial and changed it slightly so that it works on both horizontal and vertial. If you browse to the edges of the swf you can see that images are not quite lined up. This is not really a problem as I know its just a matter of calculating out the dimensions and moving things around abit.
The problem I have happens when you move your mouse beyond the bounderies of the stage. The stage is set to 900x500, however the movie goes beyond these measurements. ie: http://www.kigwana.com/new.html
I have tried to overcome this by changing the coding of the html file so that the swf does not overflow, however I have no idea what I am doing and I seem to just create new problems with the vertical centering.
Is it possible to resolve the problem by adjusting the AS code so that it does not pan the images when the cursor is off the stage?
This is the code:
this.onMouseMove = function() {
constrainedMove(bg_mc, 8, 0);
constrainedMove(bg_mc2, 4, 0);
constrainedMove(bg_mc3, 15, 0);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mouseXPercent:Number = _xmouse/Stage.width;
var mouseYPercent:Number = _ymouse/Stage.height;
var mXSpeed:Number;
var mYSpeed:Number;
if (dir == 1) {
mXSpeed = 1-mouseXPercent;
mYSpeed = 1-mouseYPercent;
} else {
mXSpeed = mouseXPercent;
mYSpeed = mouseYPercent;
}
target.destX = Math.round(-((target._width-Stage.width)mXSpeed));
target.destY = Math.round(-((target._height-Stage.height+300.0)mYSpeed+0.2));
target.onEnterFrame = function() {
if ((target._x == target.destX) && (target._y == target.destY)) {
delete target.onEnterFrame;
} else if ((target._x-target.destX)>0) {
target._x += Math.ceil((target.destX-target._x)(speed/300));
target._y += Math.ceil((target.destY-target._y)(speed/500));
} else {
target._x += Math.ceil((target.destX-target._x)(speed/300));
target._y += Math.ceil((target.destY-target._y)(speed/500));
}
};
}