Home
Flash & Swish
Flash Tutorials
MovieClip - Scroll Rectangle
Level: Experienced Software:
Flash
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.
More Flash & Swish: Most Popular Materials | Fresh Materials
| More Flash Tutorials at FlashPerfection.com