Flash CS5: The Missing Manual

Drawing Curves

When you draw a curve using ActionScript, you need to add one more point to the mix. Think about the way you draw curves in Flash or Adobe Illustrator. You have a line with two anchor points, and you drag control handles from the anchors to create a curve. The line doesn't travel through the control handles, it's just geometrically influenced by the position of the handles. ActionScript uses a similar method to create curves, but you have to imagine that there's a single control point connected to both endpoints. Figure 18-4 shows the concept. By repositioning that control point, you change the shape of the curve. The curveTo() method is similar to the lineTo() method described in the previous section. You're creating a line from the current position of the virtual pen (one anchor point) to the end point of the curve (another anchor point). The shape of that line is influenced by a control point.

When you draw a curve in ActionScript, the control point isn't visible; it's defined but doesn't get displayed on the stage. In the code example here, the control point is marked with an X, and it's displayed in a text field. It shares the control point's x and y values. This code appears in 18-3_Draw_Curve.fla in the Missing CD (www.missingmanuals.com/cds).

1 var shpLine:Shape = new Shape(); 2 var ptAnchor1:Point = new Point(); 3 var ptAnchor2:Point = new Point(); 4 var ptControl:Point = new Point(); 5 var tfControl:TextField = new TextField(); 6 7 ptAnchor1.x = 100; 8 ptAnchor1.y ...