Flash: More Advanced Drawing

[chili5]

Flash - Drawing Advanced Graphics

Previously, we looked at how to draw basic graphics. This involved setting a line style, then command by command (with lineTo and other methods) drawing your shapes. There are more methods that alllow you to do more complicated drawings.

These methods require you to set all properties like coordinates and fill colors as we did before with graphics.beginFill. Then a single drawing method is used to process the data and draw the shape.

The Graphics.drawPath methods take 2 vectors and a string as parameters. The first vector holds integers between 0-5 that indicate a certain command is to be used.

Each number between 0-5 represents a certain command. For example, 2 is lineTo, 1 is moveTo. You provide the constants in the order that with the simpler methods, you would have called the appropriate method in.

You put all your constants in a vector, and pass the vector as the first parameter to a draw method.

We then need a second vector to hold the parameters for the appropriate method. We will call this vector "data". Every 2 items in the data vector represents one x/y coordinate and is associated with one item in the commands vector.

Vector

A brief note that a vector is just a typed array. In ActionScript, the array structure is what C++ and Java programmers know as a vector. It has the ability to grow as we need it to. The difference being an array structure can hold any data type you want. The vector is a typed array. Meaning it can only hold one data type.


The third parameter of drawPath is a string. We won't worry about this for now. However, it is used to determine how to fill intersecting portions of the shapes. This could prove to be very useful for gradient fills.

Now enough talking let us look at some code, that draws a rectangle. First we will see a line style using graphics.lineStyle.

var commands:Vector.<int>  = new Vector.<int>();
var coordinates:Vector.<Number> = new Vector.<Number>();

graphics.beginFill(0x666699);

// first we have to moveTo the start location
commands.push(1); // 1 is the move to command
commands.push(2); // 2 is the lineTo command
commands.push(2,2,2,2);

// the start of the line is (5,50)
coordinates.push(5);
coordinates.push(50);
// draw a line from (5,50) to (5,100)
coordinates.push(5);
coordinates.push(100);
// draw a line from (5,100) to (200,100)
coordinates.push(200,100);
coordinates.push(200,50);
coordinates.push(5,50);

graphics.drawPath(commands,coordinates);

We load the commands vector with constants that indicate what command we want. The first command we push is 1. The drawPath method then takes as many values as it needs from the front of the coordinates vector and uses those as parameters for the moveTo function. Then we have a series of line functions.

The first two values we push to the vector are the start coordinates of our shape. Then the next values (in pairs of two's) indicate x and y values that we should draw a line to. This allows us to make a rectangle.

The resulting movie clip looks like this:



I like to define my shape line at a time with several push statements but you can combine them into one push statement. This API allows you to make your program a lot shorter.

Later, we will look at the other constants that are available for you to use. Let us do something a bit more interesting with this though.

var commands:Vector.<int>  = new Vector.<int>();
var coordinates:Vector.<Number> = new Vector.<Number>();

graphics.beginFill(0x666699);
graphics.lineStyle(2,0x000000);

// first we have to moveTo the start location
commands.push(1,2,2,2,2,2,2);

coordinates.push(170,60,170,160,250,160,300,120,230,130,200,20,190,140);

graphics.drawPath(commands,coordinates);

The commands vector holds a bunch of calls for lineTo. The first method however is a moveTo method. The first two parameters indicate where we are moving to. So we start drawing at coordinates (170,60). Then the rest of the pairs are (x,y) indicate where we are going to draw to.

So the first line is from (170,60) to (170,160).

The above code results in this drawing:



You can start to see how this API makes life a whole lot easier. However, this is just the surface. We can do a whole lot more.

Other Classes

There are a lot of other classes you can use including IGraphicsData, GraphicsEndFill, GraphicsStroke and a few more. We will look at these classes another day. If we looked at them now, then this would be a lot of info at once, and be impossible for anyone to stay interested.

[Jordan]

Cool! Nicely done, Chili5. +rep

[WingedPanther]

Good job +rep