Examples and Comments

New to Flash Player 10 method graphics.drawPath speeds up runtime drawing when multiple calls to lineTo and moveTo are required. Its behavior when drawing semi-transparent lines is not ideal, though. Intersections of transparent lines appear flattened, without the effect of transparent objects overlapping. With moveTo and lineTo there is a way of preventing such behavior and obtaining correct intersections. Click the screen shot below or on this link to open the Flash file in a new window (although the image below tells it all):

Download

Download the well-commented source files corresponding to the example above, pathalpha.zip.

Note: This how-to focuses on transparency of the lines. A more comprehensive tutorial on the drawPath method, including a discussion of the 'winding' parameter, you will find at The drawPath method in Flash CS4

Comments and Code

Below is the code that draws the four figures shown above, some with transparent intersections, some not. We leave comments within the code for greater clarity.

import flash.display.Sprite;

//We will draw line segments in a Sprite 'sp'.

var sp:Sprite = new Sprite();

sp.x = 50;

sp.y = 50;

this.addChild(sp);

/*
graphics.drawPath method takes two parameters: a Vector of coordinates of consecutive points on the path and a Vector of commands. (The last optional parameter 'winding' is not relevant to our experiment.) We create the Vector variables.
*/

var drawCoords:Vector.<Number> = new Vector.<Number>();

var drawCommands:Vector.<int> = new Vector.<int>();

//We will draw black lines of thickness 12 and alpha 0.2.

sp.graphics.lineStyle(12,0x000000,0.2);

//Drawing the upper left cross. Instersection appears with correct alpha.

sp.graphics.moveTo(0,10);

sp.graphics.lineTo(100,110);

sp.graphics.moveTo(100,10);

sp.graphics.lineTo(0,110);

/*
We populate Vectors to be used with the drawPath method. In the Vector of commands, 1 correponds to moveTo, 2 corresponds to lineTo. Thus, the Vector of commands is: moveTo, lineTo, moveTo, and lineTo. Then, we call the drawPath method. The upper right cross is drawn. The intersection is not correct and it does not correspond to an overlap of two transparent objects.
*/

drawCoords.push(200,10);

drawCommands.push(1);

drawCoords.push(300,110);

drawCommands.push(2);

drawCoords.push(300,10);

drawCommands.push(1);

drawCoords.push(200,110);

drawCommands.push(2);

 

sp.graphics.drawPath(drawCommands,drawCoords);

/*
Below we draw the lower figures. In the first figure we use moveTo once and then call lineTo three times. The intersections do not show correctly. For the last figure, we separate lineTo commands by moveTo (even though the pen is not really moving). The intersections show with proper transparency.
*/

sp.graphics.moveTo(0,310);

sp.graphics.lineTo(100,410);

sp.graphics.lineTo(100,310);

sp.graphics.lineTo(0,410);

 

sp.graphics.moveTo(200,310);

sp.graphics.lineTo(300,410);

sp.graphics.moveTo(300,410);

sp.graphics.lineTo(300,310);

sp.graphics.moveTo(300,310);

sp.graphics.lineTo(200,410);

It appears that when moveTo is used, a new Shape is created which overlaps with a previously created Shape. Two transparent display objects overlapping show added alpha at intersections. When lineTo used repeatedly, it draws segments in one and the same Shape which can have only one alpha value. Seemigly, the drawPath method draws everything in one display object as well, regarless if moveTo is a part of the commands Vector or not. These are only our guesses, though. Objects created during the application of drawPath or moveTo, lineTo, whatever they are, cannot be accessed.

Back to AS3 How-Tos and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.