SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Flash & Swish Flash Tutorials MovieClip - Scroll Rectangle

MovieClip - Scroll Rectangle

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.

Here is the result.

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")
}

}

Notice that this tutorial will not provide any .fla file because this swf has been compiled using this class with mtasc as compiler

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();

t 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

Note: I've used a little Tween motion effect for move the image, but you can disable it just replacing these lines:

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

with:

rect.x = x_pos
rect.y = y_pos

Download files used in this tutorial here.

   
subscribe to newsletter