I have an image of size 720x540, and the flash document holding it is 550x400. Ultimately, I want to be able to pan around the image and zoom in and out. This isn't the problem, but when using the
startDrag function I want to set variable parameters, so basically, you can't pan where there isn't any image. I managed to code the actionscript such that when the image is at 100% you cannot pan outside of the image, however, when I changed this to become a variable to account for zooming in the result was the image stopped panning altogether (reverted the registration back to the point (0,0) when clicked.)
The method I tried (and failed using) is as follows:
code:
function pan(movieClip) {
movieClip.onMouseDown = function () {
set("x1", 190*_xscale/100);
set("y1", 130*_yscale/100);
set("x2", 360*_xscale/100);
set("y2", 270*_yscale/100);
startDrag(image, false, x1, y1, x2, y2);
};
movieClip.onMouseUp = function () {
stopDrag();
delete x1;
delete x2;
delete y1;
delete y2;
};
}
pan(image);
The parameters 190, 130, 360, 270 worked at a scale of 100%, so I figure i could theoretically convert these to an applicable size by dividing by 100 (the original 100% scale) and then subsequently multiplying this by the new scale. However, it obviously doesn't like this, and I can't for the life of my figure out how to work this.
Anyone got any ideas on how I could code this?
PS: Full Actionscript used is attached
EDIT: Fixed a syntax error when setting the variables x1, x2, y1 and y2, so now it works perfectly on 100%. However, it appears that these variables are staying as constants (190, 130, 360, 270) instead of being deleted and then redefined upon the next click. Any ideas?
FURTHER EDIT: I've solved the problem. It wasn't that the variables weren't deleting themselves (i checked this by outputting the variable value after i deleted them: they came up as undefined specifiying they'd been successfully deleted). So the only other problem could be that the script thought that there was no change in the scale of the image. To solve this i simply used the statement this._width and this._height, this defined the current height and width of the image, and as a variable tht changed when you zoomed in and out. Using this and some maths, I came up with this replacement code...
code:
function pan(movieClip) {
movieClip.onMouseDown = function() {
set("x2", this._width/2);
set("y2", this._height/2);
set("x1", x2-(this._width-550));
set("y1", y2-(this._height-400));
startDrag(image, false, x1, y1, x2, y2);
};
movieClip.onMouseUp = function() {
stopDrag();
delete x1;
delete y1;
delete x2;
delete y2;
};
}
pan(image);
Explanation of the 'maths'. The registration point is in the centre of the image, so the first logical restriction is to prevent the image moving any further right or down of this point, which is simply half of the height of the image and half of the width of the image. The second set of points were a little more complex to figure out (in my opinion). In order to see the bottom right corner of the image the image has to be moved left the difference between the mask width and the overall image width (in my case, this._width-550) and also moved up the difference in height (again, in my case this is this._height-400). However, the restrictions are in relation to the registration point (defined as this._width/2, this._height/2), so ultimately, the image should not be able to move further left than the point (this.width/2) [x2] - (this.width-550), and not further up than (this._height/2) [y2] - (this.height-400).
Hope this clears everything up if anyone stumbles upon this topic in need of any help!
/ 
Attachment: 
