I have this website I’m working on and I’m trying get this panning aspect to work right. The problem is that I’m not getting the numbers right somewhere and can’t get the whole image that is panning to show up. Also when a browser window is resized I can’t get the pan to resize as well, if that makes any sense. I’ve found website one that does what I want to do somewhat:
Just click on explore and you’ll see how the panning works.
Here’s my Actionscript:
stop();
import com.McSliderB;
Stage.scaleMode="noScale";
Stage.align="TL";
var myclip:MovieClip = _root.img;
var myeasing:Number = .9;
var myX:Number = 0;
var myY:Number = 0;
var myviewW:Number = 1440;
var myviewH:Number = 800;
var mystartX:Number = ((myclip._width - myviewW)/2); //want the image to start centered
var mystartY:Number = ((myclip._height - myviewH)/2); //want the image to start centered
//new McSlider(yourMovieClip, easing, clipX, clipY, aperature_width, aperature_height, initial_x_Offset, initial_y_Offset);
var nMC:McSliderB = new McSliderB(myclip, myeasing, myX, myY, myviewW, myviewH, mystartX, mystartY);
The “myview” dimensions are 1440x800 and my image is 3000x5000(huge I know), and the stage dimensions are 1800x1500. Not sure if the stage dimensions matter or not though but they seem to have some influence on whether the panning works right or not.
And here’s the class, McSliderB:
import mx.utils.Delegate;
import flash.geom.Rectangle;
class com.McSliderB {
private var __mc:MovieClip;
private var __mcp:MovieClip;
private var __ease:Number;
private var __control:MovieClip;
private var __yDiff:Number;
private var __yScale:Number;
private var __yPos:Number;
private var __xDiff:Number;
private var __xScale:Number;
private var __xPos:Number;
private var __imgW:Number;
private var __imgH:Number;
private var __rect:Rectangle;
//new McSlider(yourMovieClip, easing, clipX, clipY, aperature_width, aperature_height, initial_x_Offset, initial_y_Offset);
public function McSliderB(_mc:MovieClip, _ease:Number, _clipX:Number, _clipY:Number, _apertureW:Number, _apertureH:Number, _xoff:Number, _yoff:Number) {
// your clip to pan
__mc = _mc;
// amount of easing - .7 works well
__ease = _ease;
// store the clip's parent in a variable, it will be used for _xmouse, _ymouse
__mcp = __mc._parent;
// get the initial width and height of the images
__imgW = __mc._width;
__imgH = __mc._height;
// position the clip to x, y
__mc._x = _clipX;
__mc._y = _clipY;
// turn on cache
__mc.cacheAsBitmap = true;
// I decided to run the onEnterframe within another clip vs. __mc
// just incase __mc contained an animation or some other onEnterFrame events
__control = __mc.createEmptyMovieClip("controller", __mc.getNextHighestDepth());
// create a new rectangle - position your clip to the offsets and aperature width / height
__rect = new Rectangle(_xoff, _yoff, _apertureW, _apertureH);
// set the clip's scrollRect
__mc.scrollRect = __rect;
// button events to control movement start / stop
__mc.onRollOver = Delegate.create(this,initiateMovement);
__mc.useHandCursor = false;
}
private function killMovement():Void {
delete __control.onEnterFrame;
}
private function initiateMovement():Void {
delete __mc.onRollOver;
__control.onEnterFrame = Delegate.create(this,calcXY);
}
private function calcXY():Void {
// calculate the Y offset / positions
__yDiff = __mcp._ymouse-__mc._y;
__yScale = __yDiff/__rect.height;
__yPos = __yScale*(__imgH-__rect.height);
// calculate the X offset / positions
__xDiff = __mcp._xmouse-__mc._x;
__xScale = __xDiff/__rect.width;
__xPos = __xScale*(__imgW-__rect.width);
// set the rectangles offsets
__rect.x = __xPos-(__xPos-__rect.x)*__ease;
__rect.y = __yPos-(__yPos-__rect.y)*__ease;
__mc.scrollRect = __rect;
//detect hit area
if(!__mc.hitTest(_root._xmouse, _root._ymouse, true)) {
killMovement();
__mc.onRollOver = Delegate.create(this,initiateMovement);
}
}
}
I grabbed that from an old thread here on Kirupa.
If anyone can help I’d greatly appreciate it, I’m really confused on what’s going on.