Scrolling bitmaps

Flash Player 9 and later, Adobe AIR 1.0 and later

Imagine you have created a street mapping application where each time the user moves the map you are required to update the view (even if the map has been moved by just a few pixels).

One way to create this functionality would be to re-render a new image containing the updated map view each time the user moves the map. Alternatively, you could create a large single image and use the scroll() method.

The scroll() method copies an on-screen bitmap and then pastes it to a new offset location—specified by (x, y) parameters. If a portion of the bitmap happens to reside off-stage, this gives the effect that the image has shifted. When combined with a timer function (or an enterFrame event), you can make the image appear to be animating or scrolling.

The following example takes the previous perlin noise example and generates a larger bitmap image (three-fourths of which is rendered off-stage). The scroll() method is then applied, along with an enterFrame event listener that offsets the image by one pixel in a diagonally downward direction. This method is called each time the frame is entered and as a result, the off screen portions of the image are rendered to the Stage as the image scrolls down.

import flash.display.Bitmap; 
import flash.display.BitmapData; 
 
var myBitmapDataObject:BitmapData = new BitmapData(1000, 1000, false, 0x00FF0000); 
var seed:Number = Math.floor(Math.random() * 100); 
var channels:uint = BitmapDataChannel.GREEN | BitmapDataChannel.BLUE; 
myBitmapDataObject.perlinNoise(100, 80, 6, seed, false, true, channels, false, null); 
 
var myBitmap:Bitmap = new Bitmap(myBitmapDataObject); 
myBitmap.x = -750; 
myBitmap.y = -750; 
addChild(myBitmap); 
 
addEventListener(Event.ENTER_FRAME, scrollBitmap); 
 
function scrollBitmap(event:Event):void 
{ 
    myBitmapDataObject.scroll(1, 1); 
}