April 2, 2009

ActionScript 3: Easily generate code to draw a complex image

In Flash, I always do everything in a programmatic way if possible. This includes drawing shapes with code instead of having library items. This is especially true, now that the preferred method of compiling is using the Flex mxmlc compiler. Sometimes, though, certain things are too much of a pain to draw pixel by pixel. No longer though, as there's a REALLY simple way to generate the code to draw complex shapes for you.

Step 1: save a .png of the image you want drawn.
Step 2: open Flash, and drop your image into the library, giving it a linkage ID of "MyGraphic".
Step 3: drop the following code into the actions panel and publish.
Step 4: copy the output code and apply it to a BitmapData object in your project.

var mc : MyGraphic = new MyGraphic( null, null );
for( var i:int = 0; i < mc.width; i ++)
{
for( var j:int = 0; j < mc.height; j ++)
{
if( mc.getPixel32( i, j ) != 0 ) trace( "bmp.setPixel32( "+i+", "+j+", "+mc.getPixel32( i, j )+" );" );
}
}



the resulting code in my case looked like this:

public static function drawVideoPlayhead():Bitmap
{
var bitmap:Bitmap = new Bitmap();
var bmp:BitmapData = new BitmapData( 7, 8, true, 0x00000000 );

// begin generated code
bmp.setPixel32( 0, 3, 4289309097 );
bmp.setPixel32( 0, 4, 4288322202 );
bmp.setPixel32( 0, 5, 4287664272 );
bmp.setPixel32( 0, 6, 4286874756 );
bmp.setPixel32( 1, 2, 4290888129 );
bmp.setPixel32( 1, 3, 4291085508 );
bmp.setPixel32( 1, 4, 4290822336 );
bmp.setPixel32( 1, 5, 4290032820 );
bmp.setPixel32( 1, 6, 4288256409 );
bmp.setPixel32( 1, 7, 4286874756 );
bmp.setPixel32( 2, 1, 4291677645 );
bmp.setPixel32( 2, 2, 4291875024 );
bmp.setPixel32( 2, 3, 4291677645 );
bmp.setPixel32( 2, 4, 4290822336 );
bmp.setPixel32( 2, 5, 4290032820 );
bmp.setPixel32( 2, 6, 4289374890 );
bmp.setPixel32( 2, 7, 4287598479 );
bmp.setPixel32( 3, 0, 4293322470 );
bmp.setPixel32( 3, 1, 4293388263 );
bmp.setPixel32( 3, 2, 4292335575 );
bmp.setPixel32( 3, 3, 4291677645 );
bmp.setPixel32( 3, 4, 4290822336 );
bmp.setPixel32( 3, 5, 4290032820 );
bmp.setPixel32( 3, 6, 4289374890 );
bmp.setPixel32( 3, 7, 4287598479 );
bmp.setPixel32( 4, 1, 4294046193 );
bmp.setPixel32( 4, 2, 4293256677 );
bmp.setPixel32( 4, 3, 4291677645 );
bmp.setPixel32( 4, 4, 4290822336 );
bmp.setPixel32( 4, 5, 4290032820 );
bmp.setPixel32( 4, 6, 4289374890 );
bmp.setPixel32( 4, 7, 4287598479 );
bmp.setPixel32( 5, 2, 4293717228 );
bmp.setPixel32( 5, 3, 4292861919 );
bmp.setPixel32( 5, 4, 4290822336 );
bmp.setPixel32( 5, 5, 4290032820 );
bmp.setPixel32( 5, 6, 4289703855 );
bmp.setPixel32( 5, 7, 4288059030 );
bmp.setPixel32( 6, 3, 4293914607 );
bmp.setPixel32( 6, 4, 4293190884 );
bmp.setPixel32( 6, 5, 4292730333 );
bmp.setPixel32( 6, 6, 4291677645 );
// end generated code

bitmap.bitmapData = bmp;
return bitmap;
}


Notes: using the setPixel32() function, and defaulting the BitmapData to a background color of 0x00000000 ensures that your Bitmap will have a transparent background. Note that the code here ignores empty pixels for efficiency. Finally, this code could easily be converted to draw into a Shape or Sprite, but for my purposes, bitmaps are usually what I want. Hope you find this useful!

No comments:

Post a Comment