3. Class step by step explanation

The class structure is really simple. This is the class' steps:

static function main

the static function main is our entry point. (this is because I've used MTASC compiler with the '-main' option).
It will create a new instance of the Slider2 class passing "_root" as main scope (i.e. where to create movieclips) and "files/image.jpg" as the jpeg file to be loaded.

private function Slider2

According to the parameters passed by the main static function it creates a new MovieClip "image":
image = scope.createEmptyMovieClip("image", 1)

the Rectangle instance used within the scrollRect property (450x350 is the with and height of the 'mask' which will be applied to the image):
rect = new Rectangle(0, 0, 450, 350)

A new Point instance where we will store the current mouse position:
mouse = new Point(0,0)

And a simple DropShadowFilter for the image movieclip:
_drop = new DropShadowFilter(3,45, 0x00, 30, 5, 5, .5)

Finally "load" private method will be called

private function load

This method simply create a new MovieClipLoader and loads the image file into the created "image" movieclip:

mc_loader = new MovieClipLoader()
mc_loader.addListener(this)
mc_loader.loadClip(file, image)
          

private function onLoadInit

This function is invoked when the jpeg file has been completely loaded into the "image" movieclip.

image.filters = [_drop]
r_img  = new Rectangle(0, 0, image._width, image._height)
r_mask = new Rectangle(image._x, image._y, rect.width, rect.height)
start();
          

It first applies the dropshadow filter to the image movieclip.
r_img is a Rectangle object used later. It contains the image original _width and _height. I register these values into a new object because when you apply a scrollRect property to a movieclip, also movieclip's _width and _height will change.
r_mask is a new Rectangle used just to know when mouse is over the cropped image area.
Then "start" function is called

public function start

image.scrollRect = rect
image.onEnterFrame = Delegate.create(this, enterframe)
          

Ok, here first set the rect rectangle as image's scrollRect property (and crop the image). then create an "onEnterFrame" function within the image movieclip and Delegate to the Slider2 class enterframe.

private function enterframe

Ok, finally we are in the class' core function.

private function enterframe():Void
{
    mouse.x = target._xmouse
    mouse.y = target._ymouse
    if(r_mask.containsPoint(mouse))
    {

        y_pos = ((Math.abs(image._y - mouse.y)/rect.height)*(r_img.height-rect.height))
        x_pos = ((Math.abs(image._x - mouse.x)/rect.width)*(r_img.width-rect.width))
    }

    rect.x += (x_pos - rect.x)/8
    rect.y += (y_pos - rect.y)/8

    image.scrollRect = rect
}
          

This method is called at every frame and it does the following:
First update the mouse Point to the current _xmouse and _ymouse position.
Then, if the image display area (the rectangle which deinfines the image cropped area size, not the scrollrect rectangle) containsPoint mouse:

Assign y_pos and x_pos variables.
Those variables represent the value of the mouse x and y position related to the cropped image rectange (the scrollRect size), and they're multiplied by the value of the image real size (using the r_img rectangle).
They will give me a value in x between 0 and 800, and in y between 0 and 600 (which are the real image size). In this way I know how to move the scrollRect rectangle:
In fact the last 2 lines of the enterframe function will update the rect position:
rect.x += (x_pos - rect.x)/8
rect.y += (y_pos - rect.y)/8

Last thing is to apply again the scrollRect property of the image movieclip to the updated rect instance:
image.scrollRect = rect

Download files used in this tutorial