Drawing lines with AS2

Logical following of the "Drawing shapes" tutorial and "Drawing curves" tutorial here comes the last of this series the "Drawing lines" tutorial. Is it that useful to be able to draw lines? The answer is simply YES. Drawing lines can have many application when designing your Flash file and can make your Flash developer life easier in some cases, so let's get started!
1. Open your Flash software, select "new", "Flash document", click "Ok", then go to "Modify", "Document", enter 300 for the width and height and enter 30 for the frame rate.
2. Open the "Actions" panel.
3. Copy and Paste this code:

4. Hit "Ctrl+Enter" or go to "Control", "Test Movie" to test our Flash movie. You should see this:



I told you, that's just a very basic line so far; still we need to add many parameters to the lineStyle() method, so let's take a close look. I have shown and explained similar code in the preceding drawing tutorials so I'll concentrate on the lineStyle() method here.

lineStyle(5, 0x000000, 50, true, "normal", "square", "miter", 1);

By using the lineStyle() we tell Flash that we are going to draw a line, but of course that's not the only thing we tell Flash to do. There are 8 parameters in this method, the first is the thickness (5 in our example), the second is the color (Hex format: 0x000000 which stands for black), the third is the alpha value (transparency, here 50%), true is the pixelHinting on/off which improves the rendering of the stroke on some situation (we won't be using it in this tutorial), normal is used for scaling, other value are none, horizontal, and vertical, it influences the way the stroke react to scaling, square is a value used to specify how the end of the stroke should be rendered, other values are round, and none, miter is a value used to render the stroke joints, other value are round, and bevel, finally 1 is a value that apply only if the preceding parameter is set to miter, the value is used to cut off the angle of the joint. All right that's quite a lot going on in one line, let's try to play a bit with that. (Note: if the thickness is set to 1, the five last parameters will have no effects on the line created)

Let's try some simple concepts. To draw an empty shape with just a line, we just create our shape but don't use the beginFill() method that's all. So for a rectangle we would have:

this.createEmptyMovieClip("line_mc", 1);
with(line_mc){
lineStyle(10, 0x000000, 100, true, "normal", "square", "bevel", 1);
moveTo(0, 0);
lineTo(150, 0);
lineTo(150, 50);
lineTo(0, 50);
lineTo(0, 0);
_x=50;
_y=50;
}

This gives us:



Note that I used the bevel parameter in this case with an alpha of 100%.
Before moving onto the second part, let's apply what we learned here into a little application. This application will load an external image and apply to it a white thick outline of type photography. For the sake of portability, you will be able to apply this code to any size of image.

This code loads an image named "none.jpg" into the Flash file and draws on it a nice white outline. Note that this code does not resize the loading picture. Here is the result:



So now let' see what kind of dynamic application we can do with that. Let's move on to part 2.