Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Drawing with ActionScript > Using line styles > Setting parameters of line styles

Setting parameters of line styles

You can set the parameters of line styles to change the appearance of your strokes. You can use parameters to change the thickness, color, alpha, scale, and other attributes of the line style.

Setting line thickness

The thickness parameter of the MovieClip.lineStyle() method lets you specify the thickness of the line drawn in points as a number. You can draw a line any thickness between 0 and 255 points wide, although setting the thickness to 0 creates what is called a hairline thickness, where the stroke is always 1 pixel, regardless of whether the SWF file is zoomed in or resized.

The following procedure demonstrates the difference between a standard 1-pixel thickness line and a hairline thickness line.

To create a hairline stroke:

1. Create a new Flash document and save it as hairline.fla.
2. Add the following ActionScript to Frame 1 of your Timeline:

   this.createEmptyMovieClip("drawing_mc", 10);
   // create a red, hairline thickness line
   drawing_mc.lineStyle(0, 0xFF0000, 100);
   drawing_mc.moveTo(0, 0);
   drawing_mc.lineTo(200, 0);
   drawing_mc.lineTo(200, 100);
   // create a blue line with a 1 pixel thickness
   drawing_mc.lineStyle(1, 0x0000FF, 100);
   drawing_mc.lineTo(0, 100);
   drawing_mc.lineTo(0, 0);
   drawing_mc._x = 100;
   drawing_mc._y = 100;
   

   The preceding code uses the Drawing API to draw two lines on the Stage. The first line is red and has a thickness of 0, indicating a hairline thickness, the second line is blue and has a thickness of 1 pixel.

3. Save the Flash document and select Control > Test Movie to test the SWF file.

   Initially, both the red and blue lines look exactly the same. If you right-click in the SWF file and select Zoom In from the context menu, the red line always appears as a 1-pixel line; however, the blue line grows larger each time you zoom in to the SWF file.

Setting line color (rgb)

The second parameter in the lineStyle() method, rgb, lets you control the color of the current line segment as a number. By default, Flash draws black lines (#000000), although you can specify different colors by setting a new hexadecimal color value using 0xRRGGBB syntax. In this syntax, RR is a red value (between 00 and FF), GG is a green value (00 to FF), and BB is a blue value (00 to FF).

For example, you represent a red line as 0xFF0000, a green line as 0x00FF00, a blue line as 0x0000FF, a purple line as 0xFF00FF (red and blue), a white line as #FFFFFF, a gray line as #999999, and so on.

Setting line alpha

The third parameter in the lineStyle() method, alpha, lets you control the transparency (alpha) level for the line. Transparency is a numerical value between 0 and 100, where 0 represents a completely transparent line, and 100 is completely opaque (visible).

Setting line pixel hinting (pixelHinting)

The pixel hinting for strokes parameter, pixelHinting, means that line and curve anchors are set on full pixels. The strokes are on full pixels for any stroke thickness, which means that you never see a blurry vertical or horizontal line. You set the pixelHinting parameter to a Boolean value (true or false).

Setting line scale (noScale)

You set the noScale parameter by using a String value, which lets you specify a scaling mode for the line. You can use a nonscaleable stroke in horizontal mode or vertical mode, scale the line (normal), or use no scaling.

You can use one of four different modes to specify when scaling should occur and when it shouldn't. The following are the possible values for the noScale property:

normal  Always scale the thickness (default).

vertical Do not scale the thickness if the object is scaled vertically.

horizontal Do not scale the thickness if the object is scaled horizontally.

none Never scale the thickness.

Setting line caps (capsStyle) and joints (jointStyle)

You can set three types of caps styles for the capsStyle parameter:

• round (default)
• square
• none

The following procedure demonstrates the differences between each of the three caps styles. A visual representation of each cap style appears on the Stage when you test the SWF file.

To set different caps styles:

1. Create a new Flash document and save it as capsstyle2.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:

   var lineLength:Number = 100;
   // round
   this.createEmptyMovieClip("round_mc", 10);
   round_mc.lineStyle(20, 0xFF0000, 100, true, "none", "round");
   round_mc.moveTo(0, 0);
   round_mc.lineTo(lineLength, 0);
   round_mc.lineStyle(0, 0x000000);
   round_mc.moveTo(0, 0);
   round_mc.lineTo(lineLength, 0);
   round_mc._x = 50;
   round_mc._y = 50;
   var lbl:TextField = round_mc.createTextField("label_txt", 10, 0, 10, lineLength, 20);
   lbl.text = "round";
   var lineLength:Number = 100;
   // square
   this.createEmptyMovieClip("square_mc", 20);
   square_mc.lineStyle(20, 0xFF0000, 100, true, "none", "square");
   square_mc.moveTo(0, 0);
   square_mc.lineTo(lineLength, 0);
   square_mc.lineStyle(0, 0x000000);
   square_mc.moveTo(0, 0);
   square_mc.lineTo(lineLength, 0);
   square_mc._x = 200;
   square_mc._y = 50;
   var lbl:TextField = square_mc.createTextField("label_txt", 10, 0, 10, lineLength, 20);
   lbl.text = "square";
   // none
   this.createEmptyMovieClip("none_mc", 30);
   none_mc.lineStyle(20, 0xFF0000, 100, true, "none", "none");
   none_mc.moveTo(0, 0);
   none_mc.lineTo(lineLength, 0);
   none_mc.lineStyle(0, 0x000000);
   none_mc.moveTo(0, 0);
   none_mc.lineTo(lineLength, 0);
   none_mc._x = 350;
   none_mc._y = 50;
   var lbl:TextField = none_mc.createTextField("label_txt", 10, 0, 10, lineLength, 20);
   lbl.text = "none";
   

   The preceding code uses the Drawing API to draw three lines, each with a different value for capsStyle.

3. Select Control > Test Movie to test the Flash document.

You can set the following three types of joint styles for the jointStyle parameter:

• round (default)
• miter
• bevel

The following example demonstrates the differences between each of the three joint styles.

To set different joint styles:

1. Create a new Flash document and save it as jointstyles.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:

   var lineLength:Number = 100;
   // miter
   this.createEmptyMovieClip("miter_mc", 10);
   miter_mc.lineStyle(25, 0xFF0000, 100, true, "none", "none", "miter", 25);
   miter_mc.moveTo(0, lineLength);
   miter_mc.lineTo(lineLength / 2, 0);
   miter_mc.lineTo(lineLength, lineLength);
   miter_mc.lineTo(0, lineLength);
   miter_mc._x = 50;
   miter_mc._y = 50;
   var lbl:TextField = miter_mc.createTextField("label_txt", 10, 0, lineLength + 20, lineLength, 20);
   lbl.autoSize = "center";
   lbl.text = "miter";
   // round
   this.createEmptyMovieClip("round_mc", 20);
   round_mc.lineStyle(25, 0xFF0000, 100, true, "none", "none", "round");
   round_mc.moveTo(0, lineLength);
   round_mc.lineTo(lineLength / 2, 0);
   round_mc.lineTo(lineLength, lineLength);
   round_mc.lineTo(0, lineLength);
   round_mc._x = 200;
   round_mc._y = 50;
   var lbl:TextField = round_mc.createTextField("label_txt", 10, 0, lineLength + 20, lineLength, 20);
   lbl.autoSize = "center";
   lbl.text = "round";
   // bevel
   this.createEmptyMovieClip("bevel_mc", 30);
   bevel_mc.lineStyle(25, 0xFF0000, 100, true, "none", "none", "bevel");
   bevel_mc.moveTo(0, lineLength);
   bevel_mc.lineTo(lineLength / 2, 0);
   bevel_mc.lineTo(lineLength, lineLength);
   bevel_mc.lineTo(0, lineLength);
   bevel_mc._x = 350;
   bevel_mc._y = 50;
   var lbl:TextField = bevel_mc.createTextField("label_txt", 10, 0, lineLength + 20, lineLength, 20);
   lbl.autoSize = "center";
   lbl.text = "bevel";
   

   Flash uses the Drawing API to draw three triangles on the Stage. Each triangle has a different value for its joint style.

3. Save the Flash document and select Control > Test Movie to test the document.

Setting line miter (miterLimit)

The miterLimit property is a numerical value that indicates the limit at which a miter joint (see Setting line caps (capsStyle) and joints (jointStyle)) is cut off. The miterLimit value is a general multiplier of a stroke. For example, with a value of 2.5, miterLimit is cut off at 2.5 times the stroke size. Valid values range from 0 to 255 (if a value for miterLimit is undefined, the default value is 3). The miterLimit property is only used if jointStyle is set to miter.

Flash CS3