Panning and scrolling movieclips

So, yesterday I started reading AS3 Developer's Guide. After reading through close to 200 pages I found something of interest that I think is worth sharing/saving for a later time.

It is related to clipping a movieclip and then scroll it without using the expensive masking-technique and something that I wish I had known earlier.

So how does it work?

Imagine that you have a large movieclip that contains info that would cover say 3-4 screen sizes. Personally I had this exact issue with an info screen inside a game that contained mixed texts and images. So what you should know is that each display object has an attribute called scrollRect that states which part of the image that is rendered. I think that this is similar to the "sourceRect"-parameter that can be found in DirectX and thus my guess is that only parts of the movieclip is sent to the GPU for rendering which would greatly increase performance in some cases.

Example code:

ORIGINAL_HEIGHT = _infoScreen.height; //store the original size in a variable

_infoScreen.cacheAsBitmap = true;

_infoScreen.scrollRect = new Rectangle(0,0,_infoScreen.width, 300); //visible part of the movieclip

_up.addEventListener(MouseEvent.CLICK, function(e:Event):void {

    var r:Rectangle = _infoScreen.scrollRect;

    r.y -= 20;

    _infoScreen.scrollRect = r;

});

_down.addEventListener(MouseEvent.CLICK, function(e:Event):void {

    var r:Rectangle = _infoScreen.scrollRect;

    r.y += 20;

    _infoScreen.scrollRect = r;

});

Ugly picture as example:

As you can see only the specified scrollRect is shown and in the picture I have scrolled down a couple of times.

Good thing to know is that you will only experience a performance gain if you cache your movieclip as bitmap.

If you are interested in reading in more detail about it, you can do so inside the developers guide. When this was written that could be found in chapter 10 on page 178.