Interactive Image Panning Tutorial

[ewanmck]

Hi

I created an interactive image pan (750 x 300) according to the tutorial on kirupa and it worked great!

I then tryed to add the 750 x 300 panning image as a movie clip as part of a larger stage (750 x 550), so that it was a band across part of the stage with static content above and below. When tested the scroll keeps going off the end of the image?

Does anyone know how you can add the interactive scroll as an element of a page rather than just on its own without the scroll going off the end of the image?

Thanks!=)

[Krilnon]

So… you want the mouse to set the scroll destination only when the mouse is over the MovieClip that's moving?

If so, change the first few lines to something like this:
bg_mc.onMouseMove = move;

bg_mc.onRollOver = function() {
this.onMouseMove = move;
};
bg_mc.onRollOut = function() {
this.onMouseMove = null;
};
function move() {
constrainedMove(bg_mc,4,1);
}

(As in, don't change constrainedMove)

[ewanmck]

thanks for that, it works great.

my only other stumbling block is that when I maximise the window the panning image fills the full width of the window.

Do you know how I constrain it to a width of 750px?

[Krilnon]

Set the stage's scale mode to 'noScale'?

[ewanmck]

Set the stage's scale mode to 'noScale'?

when I publish the movie to appear in full screen i am trying to have the 750 x 550 box centred in the screen. This is working fine.

The scrolling image however (2000 x 300), continues to scroll from one side of the window to the other.

In other words do you know how I can contain the scrilling image to a width of 750px even when the movie is full screen?

[Krilnon]

If you don't want it to scale, then set the scale mode to 'noScale' like I mentioned before. To make sure that the (visible) width of the image is never greater than 750px, you could mask the MovieClip that holds the image.

[ewanmck]

masking the image contains it in the 750px container but prevents the user being able to scroll to the far right or left of the image as it is beyond the mask, if mask the full image it the shows the width of the image expanded to the width of window.

I need to find a way where the image is only visible in the 750px wide container + where the user can still scroll to either end of the full image within that container?

Thanks for your time and help on this by the way!

[fault151]

whats the tutorial link? i wouldn't mind having a go through it. :)

[Krilnon]

Here is the modification:
onMouseMove = function ():Void {
if (mask_mc._xmouse > 0 && mask_mc._xmouse < mask_mc._width) {
constrainedMove_masked(bg_mc,mask_mc,4,1);
}
//updateAfterEvent(); // may help, you decide
};
function constrainedMove_masked(target:MovieClip, mask:MovieClip, speed:Number, dir:Number):Void {
var mousePercent:Number = mask._xmouse / mask._width;
var mSpeed:Number;
if (dir == 1) {
mSpeed = 1 - mousePercent;
} else {
mSpeed = mousePercent;
}
//
target.destX = Math.round((mask._x - target._width + mask._width) + mSpeed * (target._width - mask._width));
target.onEnterFrame = function() {
if (target._x == target.destX) {
delete target.onEnterFrame;
} else {
target._x += Math.ceil((target.destX - target._x) * (speed / 100));
}
};
}

[ewanmck]

Hi again,

this code is great but is still not achieving exactly what I'm looking for.

The image should only scroll when the mouse is over it and, althought the image width is now contained to 750px, when I open the movie in full screen I can't scroll to the end of the pic?

[nicolekennelly]

I've got this to work for the scrolling movie (which is 1000 x 400). The problem I am having is when the movie is loaded into the main swf (1000 x 700) the mouse continues to activate the scrolling movie. Is there some way to define the parameters of the mouse over event?


So… you want the mouse to set the scroll destination only when the mouse is over the MovieClip that's moving?

If so, change the first few lines to something like this:
bg_mc.onMouseMove = move;

bg_mc.onRollOver = function() {
this.onMouseMove = move;
};
bg_mc.onRollOut = function() {
this.onMouseMove = null;
};
function move() {
constrainedMove(bg_mc,4,1);
}

(As in, don't change constrainedMove)

[pocketsister]

trying this myself