8bitrocket Diatribe: Drawing Vector Primitives into a BitmapData Object in AS2 and AS3.

Posted on September 15, 2008 by 8bit_admin

8bitrocket Diatribe: Drawing Vector Primitives into a BitmapData Object in AS2 and AS3.

That doesn’t sound too difficult, and it really isn’t. I received an email question this weekend from a game developer who was stumped at how to accomplish this in AS2. I knew it was pretty easy to do in AS3 (I think Moock has an example in his latest book), but I had never tried it in AS2. Anyway, it turned out to be pretty easy, with one minor exception that I have yet had time to figure out. The below examples basically draw a vector primitive square on the screen and then take a BitmapData snapshot and re-draw that snapshot to the screen from the BitmapData. The square is a simple 20×20 at 0x,0y and then takes the snapshot and paints the BitmapData version at 0x, 50y. When I made a BitmapData object the exact size, 20 x 20, the right side and bottom are clipped in the copy. So, I just made the BitmapData object 21×21 and it looks fine. I hate crap like that though, but don’t have time tonight to get it to work without the 1 pixel size extension on each axis.

Anyway, since I don’t have to to make this into a full tutorial, here is the code and the example of the AS2 version: I just dropped the code on the main timeline.

AS2 Version:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//AS2
import flash.display.BitmapData;
import flash.geom.*;

this.createEmptyMovieClip("drawCanvas",this.getNextHighestDepth());
drawCanvas.lineStyle(1,0xFF00FF);
drawCanvas.lineTo(20,0);
drawCanvas.lineTo(20,20);
drawCanvas.lineTo(0,20);
drawCanvas.lineTo(0,0);

var tempBitmap:BitmapData = new BitmapData(21,21);
tempBitmap.draw(drawCanvas,new Matrix());

this.createEmptyMovieClip("bitmapHolder",this.getNextHighestDepth());
bitmapHolder._x=50;
bitmapHolder.attachBitmap(tempBitmap,bitmapHolder.getNextHighestDepth());

Nothing tricky going on here. Just create a MovieClip to use as a drawing canvas for the vector shape. Draw on it in and draw() that into a BitmapData object.
Here is the working example:

Here is the AS3 version:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//AS3
import flash.display.*;
import flash.geom.*;

var drawCanvas:Shape=new Shape();
drawCanvas.graphics.lineStyle(1,0xFF00FF);
drawCanvas.graphics.lineTo(20,0);
drawCanvas.graphics.lineTo(20,20);
drawCanvas.graphics.lineTo(0,20);
drawCanvas.graphics.lineTo(0,0);
addChild(drawCanvas);

var tempBitmap:BitmapData = new BitmapData(21,21);
tempBitmap.draw(drawCanvas,new Matrix());
var bitmapHolder:Bitmap=new Bitmap(tempBitmap);
bitmapHolder.x=50;
addChild(bitmapHolder);

This is even easier than the AS2 version because AS3 contains an actual Shape() class to use instead of a MovieClip for a canvas. Just draw into a Shape instance and the draw() in into a BitmapData object.

Here is the working example:

0saves
Save
This entry was posted in Tutorial-Flash, Tutorials. Bookmark the permalink.
  • http://shop.group5motorsport.com/ KW Variant 3

    A car’s steering system enables the car to turn and its suspension system smooths out the ride. However things can go wrong, making the ride rough or steering difficult or dangerous. This means time to repair. Many types of steering and suspension systems have been used to control cars. Older cars use mechanical suspension that relies on springs and shock absorbers but new cars use hydraulic cylinders called struts. Besides this, many of today’s cars rely on rack and pinion steering. Without proper care, a car’s steering system should give 80,000 to 100,000 miles of smooth turns

  • Mark Kreitler

    Great tutorial series so far! :)

    Here’s the solution to your mysterious clipping problem. The arguments to the BitmapData constructor are the width and height of the data. The arguments to the ‘lineTo’ commands are coordinates, so a line from 0 to 20 units is actually 21 units long. If you’re bitmap data is 20×20, then your lines need to run from 0 to 19 units in x and way. Similarly, if your lines run from 0 to 20 units, your bitmap data needs to be 21 units square (as you’ve done in your tutorial).

    Thanks again for the tutorials — I’m looking forward to reading more!