Flash Tutorials

DOWNLOAD THE SOURCE FILES FOR THIS TUTORIAL

In this tutorial you will learn some of the basics of bitmap data and how to do some cool stuff with it. I have written a tutorial for both Actionscript 2.0 and Actionscript 3.0. This will lag a lot with AS 2, so don't make the bitmap image too big or you will crash flash (AS 3 doesn't lag as much, but if you make the image more than 400x400 it will start to lag a lot).

Actionscript 2.0 Version[/st]First of all open a new flash document. Set it's width and height to 100. Open the actions panel (F9) and enter this code:

import flash.display.BitmapData;

var a:BitmapData = new BitmapData(100, 100);
attachBitmap(a,0);

onEnterFrame = function () {
    for (i=0; i<100; i++) {
        for (j=0; j<100; j++) {
            a.setPixel(i,j,Math.random()*0xFFFFFF);
        }
    }
};

Test your movie and you should see something like above. Simple huh? If you have no idea what is going on don't worry, I will explain.

The first line just imports the BitmapData class. If we didn't do this line none of the other code would work. var a:BitmapData = new BitmapData(100, 100); attachBitmap(a,0);

First we create a new BitmapData object called 'a', setting it's width and height to 100. Next we attach 'a' to the stage using the attachBitmap() function. The first parameter is the object you want to attach and the second is the depth (basically the same as attachMovie()). Objects on the stage (including movieclips) with a higher depth appear above objects with lower depths.

onEnterFrame = function () {
for (i=0; i<100; i++) {
for (j=0; j<100; j++) {
a.setPixel(i,j,Math.random()*0xFFFFFF);
}
}
};

This is where it all happens. Each frame this onEnterFrame function will run, executing the script inside it. It runs a for loop which will loop 100 times, and inside that for loop is another for loop which will run 100 times every time the first loop runs. So this code is being executed 10,000 times a frame (no wonder it lags). We are using the function setPixel() to change each pixel inside this 100x100 bitmap data object to change each pixel (there is 10,000 of them, thats why the loop runs 10,000 times) to a random colour. Math.random()*0xFFFFFF will return a random colour from #000000 (black) to #FFFFFF (white). i is the _x coordinate of the pixel it is changing and j is the _y coordinate.

And thats it!

Actionscript 3.0 Version[/st]Open a new Flash Document (Actionscript 3.0) and set the stage height and width to 200x200. Open the actions panel (F9) and enter this code:

var a:BitmapData = new BitmapData(200,200);
var b:Bitmap = new Bitmap(a);
addChild(b);

function frame(event:Event){
    for (var i:uint = 0; i<200; i++) {
        for (var j:uint = 0; j<200; j++) {
            a.setPixel(i,j,Math.random()*0xFFFFFF);
        }
    }
}

stage.addEventListener(Event.ENTER_FRAME,frame);

Test your movie and you should see a result like at the top of the page.

First of all we create a bitmap data object with a width and height of 200 called 'a'. We then create a new bitmap object with 'a'. We need to do this so we can display 'a'. We then add the display object (b) to the stage using addChild().

function frame(event:Event){
for (var i:uint = 0; i<200; i++) {
for (var j:uint = 0; j<200; j++) {
a.setPixel(i,j,Math.random()*0xFFFFFF);
}
}
}

Here is an Event listener that we will later add to the stage. It contains the code that makes the bitmap data object change color. It has 2 for loops inside it. The first one loops 200 times, and the other loops 200 times everytime the first one loops (40,000 times all up, which is one for each pixel). When every time the second loop loops we run the setPixel function to set a pixel in 'a' to a different colour. We use i and j as the X and Y coordinates for the pixel because then every pixel will be covered. Math.random()*0xFFFFFF is used to get a random colour from #000000 (black) to #FFFFFF (white), which is every colour.

And thats all there is to it!