Interactive Image Panning - Page 3

In the previous page, I started to explain the code behind the image pan. In this page, I will wrap up the code explanation. Let's pick up from where we left off:

target.destX = Math.round(-((target._width-Stage.width)*mSpeed));

The destX variable stores the X position of our image. This line of code is designed to ensure that no matter where the mouse is, as determined by the mousePercent variable stored in mSpeed, that your image will not go beyond either the left-most or right-most boundaries.

One way you can think about this is that, mSpeed is either (1 - mousePercent) or mousePercent. Either way, mousePercent is _xmouse/Stage.width. When you expand this out, for example when dir = 1, your destX variable can be simplified as:

-(_xmouse * (target._width - Stage.width) / Stage.width)

As your mouse position moves, your value for destX changes. What this does, as you will see shortly, is that it sets the final destination for where your image needs to scroll. When you are panning, you would have noticed the image movement is not immediately responsive to your mouse movement. There is a gradual acceleration and deceleration as the image moves to its destination. The destination is what the above destX value finds for you.

Note - target.destX

The variable target is the instance name of the Movie Clip you pass in to the constrainedMove function. The variable destX is stored in the target movie clip, because otherwise, if it were stored without a parent, it would only have one value throughout the life of the animation.

While that is OK for only one moving image, but what if you have multiple images that you wish to pan. Each one of those images would need their own destX value, or else you won't be able to individually control either the direction or the speed of each image. That greatly reduces the flexibility we can have with the code.

if (target._x == target.destX) {

delete target.onEnterFrame;

} else {

target._x += Math.ceil((target.destX-target._x)*(speed/100));

}

The above lines of code are fairly straightforward after learning about what the destX variable does. If your image position, target._x, is less than or greater than your destX variable, then you need to move in the appropriate direction to make sure that the difference between where you are and where you should be as specified by the destX variable is reduced to zero.

In other words, your goal is to have both your current position and the position stored by destX to be the same so that you end the enterFrame by reaching target._x == target.destX.

Well, I hope this tutorial helps you to create a really cool image panning effect. I have provided the source files I used to create the animation you see on the home page. Click on the download graphic below to get it.

If you have any questions, feel free to post them on the forums.

Cheers!

	Krilnon reclipse.net
	kirupa kirupa.MIT

1 | 2 | 3