Recipe 8.15. Scrolling a Bitmap

Problem

You want to scroll the content of a BitmapData.

Solution

Use the scroll( ) method of the BitmapData class.

Discussion

The operation and syntax is simple and straightforward. You pass the amounts you want to scroll the bitmap's content on the X- and Y-axes:

_bitmap.scroll(xAmount, yAmount);

The method effectively copies the pixels in the bitmap and pastes them back, offset by the amount specified. Any pixels that aren't overwritten in the operation remain the same as they were originally.

You can call scroll( ) repeatedly in an enterFrame handler or timer function to animate the scrolling of the bitmap. The following code demonstrates this by generating a Perlin noise pattern and then scrolling it:

public function Scroll(  ) {
    _bitmap = new BitmapData(stage.stageWidth, stage.stageHeight,
                         false, 0xffffffff);
    _bitmap.perlinNoise(100, 100, 3, 1000, true, true, 1, true);
    _image = new Bitmap(_bitmap);
    addChild(_image);
    addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

public function onEnterFrame(event:Event):void {
    _bitmap.scroll(-1, -1);
}

Note that the edges that are not copied in the scroll are not cleared, but left as they were.