Interactive Image Panning - Page 2

In the previous page, you created the image panning effect. In this and the next few pages you will learn how the code works to cause the image pan effect to work the way it does.

ActionScript Explained:

this.onMouseMove = function() {

constrainedMove(bg_mc, 4, 1);

};

The above section of code registers an onMouseMove event handler. Whenever the mouse moves, any code contained within the this.onMouseMove function will be executed.

The code that is executed is the function call constrainedMove(bg_mc, 4, 1); You will learn more about what constrainedMove does really soon!

function constrainedMove(target:MovieClip, speed:Number, dir:Number) {

In the above line of code, you are declaring a new function called constrainedMove. It takes in three arguments - target, speed, and dir. Notice that I define their types as MovieClip, Number, and Number. While declaring the types is optional in Flash (for now), it is a good practice to get into.

var mousePercent:Number = _xmouse/Stage.width;

The mousePercent variable stores a fraction of your mouse's X position with regards to your total stage width. This number varies \ between 0 and 1, and as you will see later, it helps dampen or speed up how fast your image scrolls to its boundary.

var mSpeed:Number;

if (dir == 1) {

mSpeed = 1-mousePercent;

} else {

mSpeed = mousePercent;

}

The mSpeed variable either stores the value stored by your mousePercent variable or it reverses the value in your mousePercent variable. Depending on what value you pass in for the dir variable, your mousePercent value will be either mousePercent or 1 - mousePercent.

What this essentially does it reverses the movement of the image scroll based on your mouse movement. For example,  when the dir value is 1, your image pans in the same direction as your mouse movement. If the dir value is anything besides 1, then the mouse movement and the image panning work in opposite directions.

The exciting stuff in the code takes place in the next page. Let's go there now!

Onwards to the next page!

1 | 2 | 3