MovieClip.scrollRect

Introducing

The scrollRect MovieClip's property was introduced in Flash 8. It is useful for scroll contents of large MovieClips without creating masks and it's much faster when used for scrolling textfields or complex content.

The movie clip is cropped and scrolled with a specific width, height, and scrolling offsets (defined using a Rectangle instance)

1. Use scrollRect for creating a simple Image Slider

In this tutorial we will use the scrollRect property for creating an image slider. Moving mouse over the image's cropped area we will scroll the image on the _x and _y axis without phisically move the image on the stage, but just changing the x and y coordinates of the scrollRect object.

The loaded JPEG is 800x600 pixels.

2. Slider2.as class

Ok, first let's see the actionscript class as it is:

import mx.utils.Delegate
import flash.geom.Rectangle
import flash.geom.Point
import flash.filters.DropShadowFilter

class Slider2
{
    private var image:MovieClip
    private var target:MovieClip
    private var mouse:Point
    private var rect:Rectangle
    private var r_img:Rectangle
    private var r_mask:Rectangle
    private var _drop:DropShadowFilter
    private var mc_loader:MovieClipLoader
    private var x_pos:Number
    private var y_pos:Number

    private function Slider2(scope:MovieClip, file:String)
    {
        image  = scope.createEmptyMovieClip("image", 1)
        image._x = 20
        image._y = 20
        image.cacheAsBitmap = true
        target = scope

        rect = new Rectangle(0, 0, 450, 350)
        mouse  = new Point(0,0)
        _drop  = new DropShadowFilter(3,45, 0x00, 30, 5, 5, .5)
        x_pos = 0
        y_pos = 0

        load(file)
    }

    /**
     * Load the image file
     */
    private function load(file:String)
    {
        mc_loader = new MovieClipLoader()
        mc_loader.addListener(this)
        mc_loader.loadClip(file, image)
    }

    /**
     * Once image has been loaded
     * apply filters to the image movieclip
     * and start the animation
     */
    private function onLoadInit(tg:MovieClip):Void
    {
        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();
    }

    public function start():Void
    {
        image.scrollRect = rect
        image.onEnterFrame = Delegate.create(this, enterframe)
    }

    /**
     * main enteframe function
     * check mouse position and
     * scroll the image
     */
    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
    }

    /**
     * MAIN function entry point
     * using '-main' option in mtasc this class will
     * be compiled and the static function main will be called
     * automatically
     */

    public static function main():Void
    {
        var app:Slider2 = new Slider2(_root, "files/image.jpg")
    }

}