Drawing lines with code may not make much sense at first. In fact, it can seem like a lot of work to simply draw a single line. Realistically, you’re probably not going to paint the Mona Lisa. Although, if you do be sure to give me some credit along with this post. Practically speaking, you’re probably going to use AS3 to draw in situations revolving around dynamic content generation. Let’s look at an example.

Suppose your importing photos at runtime that are of different sizes. After the photo is added to the stage, you want to apply a 15px black matte to give it some pop. One way of accomplishing this would be draw it out using some code. It’s not terribly hard, and it doesn’t care what size/dimensions your picture is. Let’s check it out.

A photo with a black matte

Step 1 – Import your photo

I’m not going to go into detail about how you load external images into Flash. That requires it’s own post. If you don’t know how to do it, just do a quick Google and you should get a slew of examples. Once, you’ve done that go ahead and add it to the display list so we can see it on the stage. Cool.

Step 2 – Determining Height and Width

We’re going to want to store the height and width of the photo into some variable for future use. It might look something like this:

//Store the height and weight (Note: "_loader" is what you've
//added to the display list
var _w:Number = _loader.width;
var _h:Number = _loader.height;

We now have everything we need to start drawing out our lines that will create the black matte. You’ll want to make sure you import the display class if you are working in a doc class or creating a new class all together. The rest of the code should be commented out pretty nicely.

//Display related (obviously you wouldn't call this here)
import flash.display.*;

//Put the loader into a sprite
var _photo:Sprite = new Sprite();
_photo.addChild(_loader);

//Create a new sprite to hold our lines
var _lines:Sprite = new Sprite();

//Draw out the lines inside the sprite
_loader.graphics.lineStyle(15, 0x000000, .5, false, LineScaleMode.VERTICAL, CapsStyle.NONE, JointStyle.MITER);
_loader.graphics.lineTo(_w, 0);
_loader.graphics.lineTo(_w, _h);
_loader.graphics.lineTo(0, _h);
_loader.graphics.lineTo(0, 0);

//Create a sprite container to hold both the lines and photo
var _container:Sprite = new Sprite();

//Add the photo first, then the lines
_container.addChild(_photo);
_container.addChild(_lines);

//Finally, add the _container to the display list
addChild(_container);

Understanding lineTo

At this point you’re probably wondering how the lineTo method works. It’s pretty simply when you wrap your head around it. The two numbers you pass to the method are the next x,y coordinates. We always start at 0,0 unless stated other wise. So, in our example we start at 0,0 and draw a line to an x coordinate of _w (the width of the photo), and a y coordinate of 0. In other words we’ve drawn a line across the top of the photo. The next line is drawn from the upper right corner to the bottom right corner. And on and on until we’ve created a fitted rectangle around our photo.

We also have the ability to style our lines which is where lineTo comes in. Here is a link to Adobe’s reference page so that you can get the low down on what each property stands for. I’ve just done a black stroke essentially.

Last Steps

We’re technically done here and you could leave it as is. You should have a photo on the stage with a nice matte around it. The one remaining issue is that the matte covers up a bit of the photo. This happens because the coordinates given apply to the center of the line. Thus a 15px line has 7.5 pixels on either side. To correct this you just need to perform some simple logic that adjusts for the overlap and moves the center of the lines out 7.5px. That will be your homework. Enjoy!